<div class="m-skip-link">
<a href="#main-content" class="a-link-button a-link-button--white">
Zum Inhalt springen
</a>
</div>
<a id="main-content" aria-hidden="true" tabindex="-1" class="m-skip-link__target"></a>
<div class="page page--overview">
<header class="o-header">
<div class="o-header__display">
<div class="o-header__branding">
<section class="m-branding" role="banner" style="display: none">
<div class="m-branding__wrapper">
<div class="m-branding__row">
<h1 class="m-branding__title">
<span class="m-branding__unbreakeable">Ökologisch konsequent.</span>
<span class="m-branding__unbreakeable">Sozial engagiert.</span>
<span class="m-branding__unbreakeable">Global solidarisch.</span>
</h1>
<a href="/" class="m-branding__logo"><img class="a-logo" alt="" src="/img/logo-defr--white.svg"></a>
</div>
</div>
</section>
<script>
var branding = parseInt(window.sessionStorage.getItem('branding') || 0);
if (branding < 2) {
document.querySelectorAll('.m-branding').forEach(el => el.style.display = 'block');
window.sessionStorage.setItem('branding', (branding + 1).toString());
}
</script>
</div>
<div class="o-header__menu">
<div class="m-menu ">
<a class="m-menu__logo" href="/" title="">
<img class="a-logo" alt="Logo Grüne Schweiz" src="/img/logo-defr--green.svg"> </a>
<nav class="m-menu__nav">
<div class="m-menu__hamburger">
<button class="a-hamburger" aria-label="Navigation anzeigen / verbergen" accesskey="1" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="menu">
<span class="a-hamburger__box">
<span class="a-hamburger__inner"></span>
</span>
</button>
</div>
<ul class="m-menu__nav-list" role="menubar" id="menu" aria-label="Hauptnavigation">
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook m-menu__nav-link--active" href="#" role="menuitem" tabindex="0" accesskey="1" aria-haspopup="menu" aria-expanded="false">Aktuelles</a>
<ul class="m-menu__submenu " role="menu" aria-label="">
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Kampagnen und Events</a>
<ul class="a-submenu__list">
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Petition «Nein zur Lex Beznau»</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Referendum gegen Versicherungsspione</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Events</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Abstimmungen</a>
<ul class="a-submenu__list">
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Gegenvorschlag Veloinitiative</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Ernährungssouveränität</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Fair-Food</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Medienmitteilungen</a>
<ul class="a-submenu__list">
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Fair-Food-Initiative</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Fair-Food-Initiative</h3>
</a>
<p class="a-submenu--featured__text">Umweltfreundlich und fair hergestellte Lebensmittel – dies wollen die Grünen mit der Fair-Food-Initiative erreichen.</p>
<button type="button" class="a-button ">Kampagne anzeigen</button>
</div>
</li>
<li class="m-menu__submenu__close-wrapper" role="none">
<button class="m-menu__submenu__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</li>
</ul>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Positionen</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Grüne Schweiz</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Publikationen</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Kontakt</a>
</li>
<li class="m-menu__nav-item" role="none">
<div class="a-search a-search--covering">
<form role="search" method="get" id="searchform" class="a-search__form" action="" autocomplete="off">
<div>
<label class="screen-reader-text" for="s">Suche</label>
<input class="a-search__field" type="text" value="" name="s" id="s" placeholder="Suche">
<label class="a-search__submit-label">
<input class="a-search__submit" type="submit" id="searchsubmit" value="Suchen">
<svg class="a-search__icon" aria-hidden="true">
<title>Suchen</title>
<use xlink:href="#glass"></use>
</svg>
</label>
</div>
</form>
</div>
</li>
</ul>
</nav>
<div class="m-menu__right">
<div class="m-menu__cta">
<div class="m-menu__nav-item">
<button type="button" class="a-button a-button--secondary a-button--outline m-menu__nav-link--js-hook">Mitmachen</button>
<ul class="m-menu__submenu m-menu__submenu--cta" role="menu" aria-label="">
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Mitmachen</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Mitglied werden</h3>
</a>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Unterstützen</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Spenden</h3>
</a>
</div>
</li>
<li class="m-menu__submenu__close-wrapper" role="none">
<button class="m-menu__submenu__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</li>
</ul>
</div>
</div>
<div class="m-menu__language-nav">
<ul class="m-menu__language-nav-list" role="menubar" aria-label="Sprachmenü">
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link m-menu__language-nav-link--active" href="#">de</a>
</li>
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link " href="#">fr</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="o-header__shadow" aria-hidden="true">
<section class="m-branding" role="banner" style="display: none">
<div class="m-branding__wrapper">
<div class="m-branding__row">
<h1 class="m-branding__title">
<span class="m-branding__unbreakeable">Ökologisch konsequent.</span>
<span class="m-branding__unbreakeable">Sozial engagiert.</span>
<span class="m-branding__unbreakeable">Global solidarisch.</span>
</h1>
<a href="/" class="m-branding__logo"><img class="a-logo" alt="" src="/img/logo-defr--white.svg"></a>
</div>
</div>
</section>
<script>
var branding = parseInt(window.sessionStorage.getItem('branding') || 0);
if (branding < 2) {
document.querySelectorAll('.m-branding').forEach(el => el.style.display = 'block');
window.sessionStorage.setItem('branding', (branding + 1).toString());
}
</script>
<div class="m-menu ">
<a class="m-menu__logo" href="/" title="">
<img class="a-logo" alt="Logo Grüne Schweiz" src="/img/logo-defr--green.svg"> </a>
<nav class="m-menu__nav">
<div class="m-menu__hamburger">
<button class="a-hamburger" aria-label="Navigation anzeigen / verbergen" accesskey="1" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="menu">
<span class="a-hamburger__box">
<span class="a-hamburger__inner"></span>
</span>
</button>
</div>
<ul class="m-menu__nav-list" role="menubar" id="menu" aria-label="Hauptnavigation">
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook m-menu__nav-link--active" href="#" role="menuitem" tabindex="0" accesskey="1" aria-haspopup="menu" aria-expanded="false">Aktuelles</a>
<ul class="m-menu__submenu " role="menu" aria-label="">
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Kampagnen und Events</a>
<ul class="a-submenu__list">
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Petition «Nein zur Lex Beznau»</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Referendum gegen Versicherungsspione</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Events</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Abstimmungen</a>
<ul class="a-submenu__list">
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Gegenvorschlag Veloinitiative</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Ernährungssouveränität</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Fair-Food</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Medienmitteilungen</a>
<ul class="a-submenu__list">
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Fair-Food-Initiative</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Fair-Food-Initiative</h3>
</a>
<p class="a-submenu--featured__text">Umweltfreundlich und fair hergestellte Lebensmittel – dies wollen die Grünen mit der Fair-Food-Initiative erreichen.</p>
<button type="button" class="a-button ">Kampagne anzeigen</button>
</div>
</li>
<li class="m-menu__submenu__close-wrapper" role="none">
<button class="m-menu__submenu__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</li>
</ul>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Positionen</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Grüne Schweiz</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Publikationen</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Kontakt</a>
</li>
<li class="m-menu__nav-item" role="none">
<div class="a-search a-search--covering">
<form role="search" method="get" id="searchform" class="a-search__form" action="" autocomplete="off">
<div>
<label class="screen-reader-text" for="s">Suche</label>
<input class="a-search__field" type="text" value="" name="s" id="s" placeholder="Suche">
<label class="a-search__submit-label">
<input class="a-search__submit" type="submit" id="searchsubmit" value="Suchen">
<svg class="a-search__icon" aria-hidden="true">
<title>Suchen</title>
<use xlink:href="#glass"></use>
</svg>
</label>
</div>
</form>
</div>
</li>
</ul>
</nav>
<div class="m-menu__right">
<div class="m-menu__cta">
<div class="m-menu__nav-item">
<button type="button" class="a-button a-button--secondary a-button--outline m-menu__nav-link--js-hook">Mitmachen</button>
<ul class="m-menu__submenu m-menu__submenu--cta" role="menu" aria-label="">
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Mitmachen</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Mitglied werden</h3>
</a>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Unterstützen</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Spenden</h3>
</a>
</div>
</li>
<li class="m-menu__submenu__close-wrapper" role="none">
<button class="m-menu__submenu__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</li>
</ul>
</div>
</div>
<div class="m-menu__language-nav">
<ul class="m-menu__language-nav-list" role="menubar" aria-label="Sprachmenü">
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link m-menu__language-nav-link--active" href="#">de</a>
</li>
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link " href="#">fr</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main class="page__main">
<article class="page__grid page__grid--no-sidebar">
<header class="page__full page__grid page__grid--no-sidebar page__header-wrapper page__header-wrapper--highlighted">
<div class="page__wide page__wide--content-width page__header">
<div class="page__breadcrumbs">
<div class="a-breadcrumbs">
<div>
<span>
<a href="http://localhost/">Front Page</a>
<span><a class="breadcrumb_second_last" href="http://localhost/lirum-larum-test-ich-mal/">Lirum larum test ich mal</a>
<span class="breadcrumb_last">Another page with a very long title that must be cut for breadcrumbs</span>
</span>
</span>
</div>
</div>
</div>
<h1 id="main-content">Für ein gesundes Klima und eine intakte Umwelt</h1>
<div class="page__header-text">
<p>Wir GRÜNE stehen ein für den Schutz von Klima und Umwelt. Wir setzen auf erneuerbare Energie und fordern
den Ausstieg aus Braunkohle und Atomkraft. Wir wollen einen starken öffentlichen Verkehr und nicht noch
mehr Autobahnen. Und wir setzen uns dafür ein, dass die Artenvielfalt und lebenswichtige Naturräume
geschützt werden. Damit die Lebensgrundlagen von heute auch für die zukünftigen Generationen erhalten
bleiben.</p>
</div>
</div>
</header>
<div class="page__wide">
<div class="page__preview-articles">
<article class="page__preview-article">
<div class="m-front-article m-front-article--image-first m-front-article--stretch">
<h3 class="m-front-article__title">
<a href="#" class="m-front-article__title-link" tabindex="-1">Energie und Klima</a>
</h3>
<div class="m-front-article__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat.jpg" alt="Symbolbild Fair-Food" title="Fair schmeckt besser" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<p class="m-front-article__text">Es ist nicht mehr schönzureden: Das Klima erwärmt sich zum allergrössten Teil durch menschliche Aktivitäten - und zwar sehr viel schneller und stärker als ursprünglich angenommen.</p>
<div class="m-front-article__link-button">
<a href="#" class="a-link-button ">
Weiterlesen
</a>
</div>
</div>
</article>
<article class="page__preview-article">
<div class="m-front-article m-front-article--image-first m-front-article--stretch">
<h3 class="m-front-article__title">
<a href="#" class="m-front-article__title-link" tabindex="-1">Verkehr</a>
</h3>
<div class="m-front-article__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat.jpg" alt="Symbolbild Fair-Food" title="Fair schmeckt besser" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<p class="m-front-article__text">Die Mobilität ist Grundlage von Begegnung und Kommunikation. Die GRÜNEN setzen sich dafür ein, dass sie ökologisch verträglich und zukunftsfähig gestaltet wird.</p>
<div class="m-front-article__link-button">
<a href="#" class="a-link-button ">
Weiterlesen
</a>
</div>
</div>
</article>
<article class="page__preview-article">
<div class="m-front-article m-front-article--image-first m-front-article--stretch">
<h3 class="m-front-article__title">
<a href="#" class="m-front-article__title-link" tabindex="-1">Naturschutz</a>
</h3>
<div class="m-front-article__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat.jpg" alt="Symbolbild Fair-Food" title="Fair schmeckt besser" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<p class="m-front-article__text">Die Biodiversität nimmt weltweit immer mehr ab. Der Schutz der natürlichen Lebensgrundlagen ist daher die zentrale Herausforderung des 21. Jahrhunderts.</p>
<div class="m-front-article__link-button">
<a href="#" class="a-link-button ">
Weiterlesen
</a>
</div>
</div>
</article>
<article class="page__preview-article">
<div class="m-front-article m-front-article--image-first m-front-article--stretch">
<h3 class="m-front-article__title">
<a href="#" class="m-front-article__title-link" tabindex="-1">Raumplanung</a>
</h3>
<div class="m-front-article__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat.jpg" alt="Symbolbild Fair-Food" title="Fair schmeckt besser" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<p class="m-front-article__text">Wohnen und Infrastruktur beanspruchen in der Schweiz seit Jahren immer mehr Land. 70 Prozent der Bevölkerung wohnen heute in Städten und Agglomerationen.</p>
<div class="m-front-article__link-button">
<a href="#" class="a-link-button ">
Weiterlesen
</a>
</div>
</div>
</article>
</div>
</div>
</article>
</main>
<div class="page__footer">
<footer class="o-footer">
<section class="o-footer__main">
<div class="o-footer__link-list">
<section class="a-footer-link-list">
<h2 class="a-footer-link-list__title">Kantonalparteien</h2>
<ul class="a-footer-link-list__list">
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Aargau</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Appenzell innerhoden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Appenzell ausserhoden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Bern</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Basel-Landschaft</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Basel-Stadt</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Freibourg</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Genf</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Glarus</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Graubünden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Jura</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Luzern</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Neuenburg</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Nidwalden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Obwalden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">St.Gallen</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Schaffhausen</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Solothurn</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Schwyz</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Thurgau</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Tessin</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Uri</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Waadt</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Wallis</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Zug</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Zürich</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Junge Grüne</a>
</li>
</ul>
</section>
</div>
<div class="o-footer__cta">
<section class="m-footer-cta">
<h2 class="m-footer-cta__title">Engagiere dich</h2>
<div class="m-footer-cta__button">
<button type="button" class="a-button a-button--secondary a-button--full-width">Newsletter abonnieren</button>
</div>
<div class="m-footer-cta__button">
<button type="button" class="a-button a-button--outline a-button--secondary a-button--full-width">Mitglied werden</button>
</div>
<div class="m-footer-cta__button">
<button type="button" class="a-button a-button--outline a-button--secondary a-button--full-width">Spenden</button>
</div>
</section>
</div>
<div class="o-footer__contact">
<section class="m-footer-contact">
<h2 class="m-footer-contact__title">Kontakt</h2>
<div class="m-footer-contact__flex">
<div class="m-footer-contact__text">
<p><strong>Grüne Schweiz</strong><br><strong>Les Verts suisses</strong><br>Waisenhausplatz 21<br>3011 Bern</p>
<p>031 326 66 00<br>Postkonto 80-26747-3</p>
<p><a href='mailto:gruene@gruene.ch' class='a-button'>E-Mail senden</a></p>
</div>
<div class="m-footer-contact__social">
<a href="https://www.facebook.com/gruenelesverts/" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>facebook</title>
<use xlink:href="#facebook"></use>
</svg>
</figure>
</a>
<a href="https://twitter.com/GrueneCH" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>twitter</title>
<use xlink:href="#twitter"></use>
</svg>
</figure>
</a>
<a href="https://www.instagram.com/gruenelesverts/" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>instagram</title>
<use xlink:href="#instagram"></use>
</svg>
</figure>
</a>
</div>
</div>
</section>
</div>
</section>
<section class="o-footer__meta">
<div class="a-footer-meta">
<div class="a-footer-meta__wrapper">
<div class="a-footer-meta__copy">© 2018 Grüne Schweiz</div>
<nav class="a-footer-meta__menu">
<ul class="a-footer-meta__list" role="menu" aria-label="Footer Meta Navigation">
<li class="a-footer-meta__item">
<a href="#" class="a-footer-meta__link">Datenschutz</a>
</li>
<li class="a-footer-meta__item">
<a href="#" class="a-footer-meta__link">Impressum</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
</footer>
</div>
</div>
{{render '@m-skip-link'}}
<div class="page page--overview">
{{render '@o-header'}}
<main class="page__main">
<article class="page__grid{{#unless shareable}} page__grid--no-sidebar{{/unless}}">
<header class="page__full page__grid{{#unless shareable}} page__grid--no-sidebar{{/unless}} page__header-wrapper page__header-wrapper--highlighted">
<div class="page__wide page__wide--content-width page__header">
<div class="page__breadcrumbs">
{{render '@a-breadcrumbs'}}
</div>
<h1 id="main-content">Für ein gesundes Klima und eine intakte Umwelt</h1>
<div class="page__header-text">
<p>Wir GRÜNE stehen ein für den Schutz von Klima und Umwelt. Wir setzen auf erneuerbare Energie und fordern
den Ausstieg aus Braunkohle und Atomkraft. Wir wollen einen starken öffentlichen Verkehr und nicht noch
mehr Autobahnen. Und wir setzen uns dafür ein, dass die Artenvielfalt und lebenswichtige Naturräume
geschützt werden. Damit die Lebensgrundlagen von heute auch für die zukünftigen Generationen erhalten
bleiben.</p>
</div>
</div>
</header>
<div class="page__wide">
<div class="page__preview-articles">
{{#each articles}}
<article class="page__preview-article">
{{> @m-front-article this}}
</article>
{{/each}}
</div>
</div>
</article>
</main>
<div class="page__footer">
{{render '@o-footer'}}
</div>
</div>
import BaseView from 'base-view';
import distractionFree from '../../../js/service/distractionFree';
const DISTRACTING_BREADCRUMBS_CLASS = 'page__breadcrumbs--distracting';
const DISTRACTING_POST_META_CLASS = 'page__post-meta--distracting';
export default class Page extends BaseView {
initialize() {
this.distractionFree = distractionFree();
}
bind() {
super.bind();
if (!this.distractionFree) {
this.showBreadcrumbs();
this.showPostMeta();
}
}
showBreadcrumbs() {
this.removeDistractingClass( DISTRACTING_BREADCRUMBS_CLASS );
}
showPostMeta() {
this.removeDistractingClass( DISTRACTING_POST_META_CLASS );
}
removeDistractingClass( domClass ) {
const el = this.getScopedElement( '.' + domClass );
if (el) {
this.removeClass( el, domClass );
}
}
}
.page {
/**
* ======
* Layout
* ======
*/
$page-grid-desktop: #{$page-grid-content-max-width + $page-grid-side-width + 2 * $page-grid-padder-min-width};
$page-grid-wide: #{$page-grid-content-max-width + 2 * ($page-grid-side-width + $page-grid-padder-regular-width + $page-grid-wide-side-max-width)};
&__grid {
display: grid;
grid-template-columns: [full-start] 1fr [wide-start] 0 [side-left-start] 0 [side-left-end content-start] $page-grid-content-min-width [content-end side-right-start] 0 [side-right-end] 0 [wide-end] 1fr [full-end];
@include media(#{$page-grid-content-min-width + 2 * $page-grid-padder-regular-width}) {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 0 [side-left-start] 0 [side-left-end content-start] 1fr [content-end side-right-start] 0 [side-right-end] 0 [wide-end] $page-grid-padder-regular-width [full-end];
}
@include media(#{$page-grid-content-max-width + 2 * $page-grid-padder-regular-width}) {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 1fr [side-left-start] 0 [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] 0 [side-right-end] 1fr [wide-end] $page-grid-padder-regular-width [full-end];
}
@include media(#{$page-grid-content-max-width + $page-grid-side-width + 2 * $page-grid-padder-min-width}) {
grid-template-columns: [full-start] 1fr [wide-start] 0 [side-left-start] $page-grid-side-width [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] 0 [side-right-end] 0 [wide-end] 1fr [full-end];
&--no-sidebar {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 0 [side-left-start] 1fr [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] 1fr [side-right-end] 0 [wide-end] $page-grid-padder-regular-width [full-end];
}
}
@include media(#{$page-grid-content-max-width + $page-grid-side-width + 2 * $page-grid-padder-regular-width}) {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 0 [side-left-start] $page-grid-side-width [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] 1fr [side-right-end] 0 [wide-end] $page-grid-padder-regular-width [full-end];
&--no-sidebar {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 0 [side-left-start] 1fr [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] 1fr [side-right-end] 0 [wide-end] $page-grid-padder-regular-width [full-end];
}
}
@include media(#{$page-grid-content-max-width + 2 * ($page-grid-side-width + $page-grid-padder-regular-width)}) {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 1fr [side-left-start] $page-grid-side-width [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] $page-grid-side-width [side-right-end] 1fr [wide-end] $page-grid-padder-regular-width [full-end];
}
@include media($page-grid-wide) {
grid-template-columns: [full-start] 1fr [wide-start] $page-grid-wide-side-max-width [side-left-start] $page-grid-side-width [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] $page-grid-side-width [side-right-end] $page-grid-wide-side-max-width [wide-end] 1fr [full-end];
}
@media print {
display: block;
}
}
&__full {
grid-column-start: full-start;
grid-column-end: full-end;
}
&__wide {
grid-column-start: wide-start;
grid-column-end: wide-end;
&--content-width {
max-width: $page-grid-content-max-width;
}
@include only_ie10_above() {
max-width: $page-grid-content-max-width;
margin: auto;
}
}
&__side {
grid-column-start: side-left-start;
grid-column-end: side-right-end;
&--full {
grid-column-start: full-start;
grid-column-end: full-end;
}
@include media($page-grid-desktop) {
&--left {
grid-column-start: side-left-start;
grid-column-end: side-left-end;
}
&--right {
grid-column-start: side-right-start;
grid-column-end: side-right-end;
}
}
}
&__row {
@include media($page-grid-desktop) {
&--1 {
grid-row: 1 / 2;
}
&--2 {
grid-row: 2 / 3;
}
}
}
&__content {
grid-column-start: content-start;
grid-column-end: content-end;
@include only_ie10_above() {
max-width: $page-grid-content-max-width;
margin: auto;
}
}
&__footer {
@include fluid-props(padding-top, $size-medium, $grid-max-width-max, 60px, 90px);
background-color: $color-white;
}
/**
* ==========
* Components
* ==========
*/
&__header-image {
width: 100%;
height: 50vh;
max-height: 600px;
@media only screen and (min-height: 900px) {
height: calc(100vh - 400px);
max-height: calc(100vh - 400px);
}
}
&__header-wrapper {
padding-top: 40px;
@include media($_DESKTOP) {
// keep this discrete, else the post meta position cant be set correctly
padding-top: 60px;
}
&--highlighted {
background: $color-grey-1;
@include fluid-props(padding-bottom, $fluid-min, $fluid-max, 40px, 60px);
}
}
&__header-text,
&__header-text p {
font-size: 1.25rem;
@include media($size-small) {
font-size: 1.46875rem;
}
}
&__header-text--bold {
font-weight: $font-weight-semi;
}
&__breadcrumbs--distracting {
display: none;
}
&__post-meta-wrapper {
@extend .page__side;
@extend .page__side--left;
@extend .page__side--full;
@extend .page__grid;
@include media($page-grid-desktop) {
display: flex;
flex-direction: column;
padding-right: 40px;
height: 100%;
}
@include only_ie10_above() {
display: none; // sorry folks!
}
}
&__post-meta {
@extend .page__content;
background-color: $color-grey-1;
border-top: 2px solid $color-primary;
padding: 0 15px;
@include high-contrast {
border-color: $color-primary-dark;
}
@include media($page-grid-desktop) {
background-color: transparent;
margin-top: 72px;
border-top: none;
padding: 0;
}
&--distracting {
display: none;
}
}
&__shareable {
@include media($page-grid-desktop) {
flex-grow: 1;
}
&--margin-top {
@include media($page-grid-desktop) {
margin-top: 124px;
}
}
}
//noinspection CssOverwrittenProperties
&__share {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
@include media($_DESKTOP) {
position: static; // IE: just keep it fixed
position: sticky;
top: 235px;
z-index: 0;
height: 300px;
}
}
&:not(&--list) &__content {
@include media($size-small){
p, li {
font-size: 1.25rem;
}
li {
letter-spacing: 0.015625em;
line-height: 1.75em;
}
}
}
&__box {
background-color: $color-grey-1;
@include fluid-props(margin-top margin-bottom, $size-tiny, $size-medium, 25px, 35px);
@include fluid-props(padding, $size-tiny, $size-medium, 12px, 40px);
@include media($_DESKTOP) {
margin-top: 50px;
margin-bottom: 50px;
padding: 60px;
}
}
&__preview-articles {
display: grid;
grid-template-columns: 1fr;
@include fluid-props(grid-column-gap, 1490px, $fluid-max, 40px, 100px); // 1490px = $page-grid-wide, but for some reason sass can't work with the variable
@include fluid-props(grid-row-gap, $fluid-min, $fluid-max, 40px, 80px);
@include fluid-props(margin-top margin-bottom, $fluid-min, $fluid-max, 50px, 100px);
@include media($size-small) {
grid-template-columns: 1fr 1fr;
}
}
&__preview-article {
border-bottom: solid 1px $color-grey-2;
}
&__list-header {
@include fluid-props(margin-top, $fluid-min, $fluid-max, 40px, 60px);
}
&__list-articles {
@include fluid-props(margin-top, $fluid-min, $fluid-max, 40px, 60px);
@include clean-ul;
}
&__list-article {
@include clean-li;
border-bottom: solid 1px $color-grey-2;
&--hover-link {
position: relative;
margin-left: -15px;
padding-left: 15px;
margin-right: -15px;
padding-right: 15px;
border-bottom: none;
&::after {
content: ' ';
position: absolute;
bottom: 0;
left: 15px;
background: $color-grey-2;
width: calc(100% - 30px);
height: 1px;
}
@include hover {
background: $color-grey-1;
}
}
}
&__list-footer {
width: 100%;
@include fluid-props(margin-top margin-bottom padding-bottom, $fluid-min, $fluid-max, 30px, 50px);
}
&__list-pagination {
display: flex;
justify-content: center;
}
&__list-events-nav {
margin-top: 15px;
display: flex;
justify-content: center;
}
}
{
"shareable": false,
"header-image": false,
"articles": [
{
"title": "Energie und Klima",
"text": "Es ist nicht mehr schönzureden: Das Klima erwärmt sich zum allergrössten Teil durch menschliche Aktivitäten - und zwar sehr viel schneller und stärker als ursprünglich angenommen.",
"url": "#",
"has-img": true,
"img": {
"link-url": "#",
"image-src": "/img/wheat.jpg",
"alt": "Symbolbild Fair-Food",
"title": "Fair schmeckt besser"
},
"modifiers": [
"image-first",
"stretch"
]
},
{
"title": "Verkehr",
"text": "Die Mobilität ist Grundlage von Begegnung und Kommunikation. Die GRÜNEN setzen sich dafür ein, dass sie ökologisch verträglich und zukunftsfähig gestaltet wird.",
"url": "#",
"has-img": true,
"img": {
"link-url": "#",
"image-src": "/img/wheat.jpg",
"alt": "Symbolbild Fair-Food",
"title": "Fair schmeckt besser"
},
"modifiers": [
"image-first",
"stretch"
]
},
{
"title": "Naturschutz",
"text": "Die Biodiversität nimmt weltweit immer mehr ab. Der Schutz der natürlichen Lebensgrundlagen ist daher die zentrale Herausforderung des 21. Jahrhunderts.",
"url": "#",
"has-img": true,
"img": {
"link-url": "#",
"image-src": "/img/wheat.jpg",
"alt": "Symbolbild Fair-Food",
"title": "Fair schmeckt besser"
},
"modifiers": [
"image-first",
"stretch"
]
},
{
"title": "Raumplanung",
"text": "Wohnen und Infrastruktur beanspruchen in der Schweiz seit Jahren immer mehr Land. 70 Prozent der Bevölkerung wohnen heute in Städten und Agglomerationen.",
"url": "#",
"has-img": true,
"img": {
"link-url": "#",
"image-src": "/img/wheat.jpg",
"alt": "Symbolbild Fair-Food",
"title": "Fair schmeckt besser"
},
"modifiers": [
"image-first",
"stretch"
]
}
]
}
No notes defined.