<main class="home">
	<div class="wrapper">
		<section class="home-hero cp cp--nav-zone">
			<div class="limit--l">
				<div class="home-hero__title h--beta">
					Wikimedia<br>
					Deutschland<br>
					Annual Report<br>
					2018
				</div>
				<img class="home-hero__18" src="assets/img/18.png" alt="Das Jahr 2018">
			</div>
		</section>
		<div class="home-hero__img t--zeta">
			<img class="home-hero__img--first" src="assets/img/wk_conference_colored.jpg" alt="Wikimedia Konferenz">
			<figure
				class="home-hero__img--second"
				data-anchor-target=".home-hero__img--second"
				data-0="opacity:1;"
				data-500="opacity:0;"
				>
				<img class="home-hero__img--second" src="assets/img/wk_conference_tinted.jpg" alt="Wikimedia Konferenz">
			</figure>
			<p>Jason Krüger for Wikimedia Deutschland e. V.; adapted by user: David Saroyan (<a href="https://commons.wikimedia.org/wiki/File:Wikimedia_Conference_2017_–_Group_photo_2_(big)_with_WMCON_logo.jpg" target="new">Wikimedia Commons</a>), beschnitten, eingefärbt von Atelier Disko für WMDE, <a href="https://creativecommons.org/licenses/by-sa/4.0/legalcode" target="new"> <span style ="white-space: nowrap">CC BY-SA 4.0</span></a></p>
		</div>
		<section class="section cp home__intro">
			<img src="assets/img/wk_conference_tinted.jpg" alt="Wikimedia Konferenz">
			<div class="home__intro--layer"></div>
		</section>
		<div class="home__box">
			<div class="limit--m h--alpha">Together we know more</div>
		</div>
	</div>
	</section>
	<section class="achievements cp--component-section loading">
		<ul>
			<?php foreach($achievements as $item): ?>
			<li
				class="achievement--store"
				data-category="<?= $item['category'][$lang] ?>"
				data-number="<?= $item['number'] ?>"
				data-url="/<?= $lang ?><?= $item['url'] ?>"
				data-postfix=""
			>
				<?= $item['teaser'][$lang] ?>
			</li>
			<?php endforeach ?>
		</ul>

		<div class="achievements__cube achievements__cube--mobile">
			<div class="achievements__cube-side achievements__cube-side--left">
				<div class="achievements__cube-side achievements__cube-side--left"></div>
			</div>
			<div class="achievements__cube-side achievements__cube-side--top">
				<div class="achievements__cube-side achievements__cube-side--top"></div>
			</div>
			<div class="achievements__cube-side achievements__cube-side--right">
				<div class="achievements__cube-side achievements__cube-side--right"></div>
			</div>
		</div>

		<div class="achievements__flex-wrapper">
			<div class="achievements__left">
				<div class="achievement">
					<div class="achievement__category t--epsilon">
						<?= $achievements[0]['category'][$lang] ?>
					</div>
					<div class="achievement__number t--alpha" data-number="<?= $achievements[0]['number'] ?>">
						<div class="achievement__number-placeholder">
							<?= $formatNumber($achievements[0]['number'], $lang) ?>
						</div>
						<div class="achievement__number-postfix"></div>
					</div>
					<div class="achievement__teaser t--delta-serif"><?= $achievements[0]['teaser'][$lang] ?></div>
					<a
						href="<?= $url($achievements[0]['teaser'], $lang) ?>"
						class="achievement__link t--zeta-emph"
					>
						&mdash;&nbsp;&nbsp; More on this topic
					</a>
				</div>
			</div>
			<div class="achievements__cube">
				<div class="achievements__cube-side achievements__cube-side--left">
					<div class="achievements__cube-side achievements__cube-side--left"></div>
				</div>
				<div class="achievements__cube-side achievements__cube-side--top">
					<div class="achievements__cube-side achievements__cube-side--top"></div>
				</div>
				<div class="achievements__cube-side achievements__cube-side--right">
					<div class="achievements__cube-side achievements__cube-side--right"></div>
				</div>
			</div>
			<div class="achievements__right">
				<div class="achievement">
					<div class="achievement__category t--epsilon">
						<?= $achievements[1]['category'][$lang] ?>
					</div>
					<div class="achievement__number t--alpha" data-number="<?= $achievements[1]['number'] ?>">
						<div class="achievement__number-placeholder">
							<?= $achievements[1]['number'] ?>
						</div>
						<div class="achievement__number-postfix"></div>
					</div>
					<div class="achievement__teaser t--delta-serif"><?= $achievements[1]['teaser'][$lang] ?></div>
					<a
						href="<?= $url($achievements[1]['teaser'], $lang) ?>"
						class="achievement__link t--zeta-emph"
					>
						&mdash;&nbsp;&nbsp; More on this topic
					</a>
				</div>
			</div>
		</div>
		<button class="achievements__button t--zeta-emph animation-ctl-button invis">
			<div class="animation-ctl-button__symbol"></div>
			Show more achievements
		</button>
	</section>
	<section class="chart cp--component-section">
		<div class="chart__headline">
			<div class="chart__headline--description t--epsilon">
				March 2013 - March 2019
			</div>
			<h1 class="h--beta">Membership development</h1>
		</div>
		<div class="chart__bars chart-bars loading">
				<div class="chart-bars__texts">
					<p class="chart-bars__text">
						<span class="chart-bars__text--date t--epsilon">March 2019</span>
						<span class="chart-bars__text--number t--epsilon-emph">72.611</span>
					</p>
					<p class="chart-bars__text">
						<span class="chart-bars__text--date t--epsilon">March 2018</span>
						<span class="chart-bars__text--number t--epsilon-emph">65.374</span>
					</p>
					<p class="chart-bars__text">
						<span class="chart-bars__text--date t--epsilon">March 2017</span>
						<span class="chart-bars__text--number t--epsilon-emph">43.138</span>
					</p>
					<p class="chart-bars__text">
						<span class="chart-bars__text--date t--epsilon">March 2016</span>
						<span class="chart-bars__text--number t--epsilon-emph">29.169</span>
					</p>
					<p class="chart-bars__text">
						<span class="chart-bars__text--date t--epsilon">March 2015</span>
						<span class="chart-bars__text--number t--epsilon-emph">15.778</span>
					</p>
					<p class="chart-bars__text">
						<span class="chart-bars__text--date t--epsilon">March 2014</span>
						<span class="chart-bars__text--number t--epsilon-emph">9.803</span>
					</p>
					<p class="chart-bars__text">
						<span class="chart-bars__text--date t--epsilon">March 2013</span>
						<span class="chart-bars__text--number t--epsilon-emph">2.618</span>
					</p>
				</div>

				<div class="chart-bars__animation">
					<div class="chart-bar percent-2019">
						<img class="chart-bar__image" src="/../../assets/img/charts_illustration.svg">
						<div class="chart-bar__inner"></div>
					</div>
					<div class="chart-bar percent-2018">
						<img class="chart-bar__image" src="/../../assets/img/charts_illustration.svg">
						<div class="chart-bar__inner"></div>
					</div>
					<div class="chart-bar percent-2017">
						<img class="chart-bar__image" src="/../../assets/img/charts_illustration.svg">
						<div class="chart-bar__inner"></div>
					</div>
					<div class="chart-bar percent-2016">
						<img class="chart-bar__image" src="/../../assets/img/charts_illustration.svg">
						<div class="chart-bar__inner"></div>
					</div>
					<div class="chart-bar percent-2015">
						<img class="chart-bar__image" src="/../../assets/img/charts_illustration.svg">
						<div class="chart-bar__inner"></div>
					</div>
					<div class="chart-bar percent-2014">
						<img class="chart-bar__image" src="/../../assets/img/charts_illustration.svg">
						<div class="chart-bar__inner"></div>
					</div>
					<div class="chart-bar percent-2013">
						<img class="chart-bar__image" src="/../../assets/img/charts_illustration.svg">
						<div class="chart-bar__inner"></div>
					</div>
				</div>

		</div>
		<a href="https://spenden.wikimedia.de/apply-for-membership?piwik_campaign=jb2018&piwik_kwd=mitglieds_btn" target="new" class="chart__button button button--outline-white">Become a member</a>
	</section>
	<section class="reports loading clearfix cp--component-section loading">
		<ul class="reports__data">
			<?php foreach ($reports as $report) : ?>
				<li class="reports--store" data-url="<?= $url("/report/{$report['name']}", $lang) ?>" data-cover="<?= $report['cover'] ?>"><?= $report['title'][$lang] ?></li>
			<?php endforeach ?>
		</ul>
		<div class="reports__background"></div>
		<div class="reports__left">
			<div class="reports__canvas">
				<div class="reports__cube reports__cube--1"></div>
				<div class="reports__cube reports__cube--2"></div>
				<div class="reports__cube reports__cube--3"></div>
			</div>
		</div>
		<div class="reports__right">
			<div class="reports__link-wrapper">
				<a class="reports__link h--beta" href="">
					<div class="reports__link-title">Movement Strategy</div>
					<div class="reports__link-project t--zeta-emph">&mdash;&nbsp;&nbsp; More on this topic</div>
				</a>
				<a class="reports__link h--beta" href="">
					<div class="reports__link-title">Fellow Programm</div>
					<div class="reports__link-project t--zeta-emph">&mdash;&nbsp;&nbsp; More on this topic</div>
				</a>
				<a class="reports__link h--beta" href="">
					<div class="reports__link-title">Freiwillige unterstützen</div>
					<div class="reports__link-project t--zeta-emph">&mdash;&nbsp;&nbsp; More on this topic</div>
				</a>
			</div>
			<button class="animation-ctl-button reports__button reports__button--reload t--zeta-emph invis">
				<div class="animation-ctl-button__symbol"></div>
				 Show more topics
			</button>
			<a href="<?= $lang . '/report' ?>" class="animation-ctl-button reports__button reports__button--all t--zeta-emph invis">
				<div class="animation-ctl-button__symbol"></div>
				Show all topics
			</a>
		</div>
	</section>
	<section class="finance-banner">
		<div class="limit--l cp--component-section">
			<div class="home__bagels">
				<figure
					class="home__bagel--1"
					data-anchor-target=".finance-banner"
					data-bottom-top="transform:rotate(0deg);"
					data-top-bottom="transform:rotate(360deg);"
				>
					<img src="/assets/img/home_circle_1.png" alt="Finanzvisualisierung">
				</figure>
				<figure
					class="home__bagel--2"
					data-anchor-target=".finance-banner"
					data-bottom-top="transform:rotate(360deg);"
					data-top-bottom="transform:rotate(0deg);"
				>
					<img src="/assets/img/home_circle_2.png" alt="Finanzvisualisierung">
				</figure>
			</div>
			<a href="<?= $url('finance', $lang) ?>">
				<p class="h--beta">Finances 2018</p>
				<p class="finance-banner__button h--delta">
					<span>&mdash;</span>
					<span>Go to financial section</span>
				</p>
			</a>
		</div>
	</section>
</main>
