<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">
<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">
<div class="page__content">
<header class="page__header-wrapper">
<div class="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">Delegiertenversammlung</h1>
<div class="page__header-text">
<div class="m-event-details">
<div class="m-event-details__time-wrapper">
<svg role="img" class="m-event-details__icon">
<title>Datum und Dauer</title>
<use xlink:href="#clock"></use>
</svg>
<time class="m-event-details__time" datetime="2019-10-31 17:33">31. Oktober 2019 | 17:33 – 19:22</time>
</div>
<div class="m-event-details__location-wrapper">
<svg role="img" class="m-event-details__icon">
<title>Ort</title>
<use xlink:href="#location"></use>
</svg>
<span class="m-event-details__location">Landgasthof, Baselstrasse 38, Riehen</span>
</div>
<div class="m-event-details__link-button">
<div class="a-link-button ">
Save to calendar (ICS)
</div>
</div>
</div>
</div>
</div>
</header>
<p>Die Delegiertenversammlung (DV) ist das oberste Organ der Grünen Schweiz. Sie tritt mindestens zweimal
pro Jahr auf Einladung des Vorstandes zusammen. Sie umfasst rund 250 Delegierte.</p>
<p>Die DV ist insbesondere zuständig für die Verabschiedung von Grundsatz-Stellungnahmen, die
Parolenfassungen zu Abstimmungen, für Statutenänderungen sowie für die Wahl des Parteipräsidiums.</p>
</div>
<div class="page__post-meta-wrapper page__row--1">
<aside class="page__post-meta">
<div class="a-post-meta">
<time class="a-post-meta__date" datetime="2018-10-03T00:00:00.000Z">03.10.2018</time>
<a href="#" class="a-post-meta__author">Hansrudolf Hugentobler</a>
<div class="a-post-meta__tags">
<a href="" class="a-post-meta__category">Medienmitteilungen</a>
<a href="" class="a-post-meta__category">Energie</a>
<a href="" class="a-post-meta__category">Verkehr</a>
<a href="" class="a-post-meta__tag">Fabi</a>
<a href="" class="a-post-meta__tag">Bahninfrastruktur</a>
<a href="" class="a-post-meta__tag">Bahn</a>
<a href="" class="a-post-meta__tag">SBB</a>
</div>
</div>
</aside>
<div class="page__shareable">
<aside class="page__share">
<div class="m-share">
<button class="m-share__mobile" aria-label="">
<svg role="img">
<title>partager</title>
<use xlink:href="#mobile"></use>
</svg>
</button>
<button class="m-share__close" aria-label="">
<svg role="img">
<title>partager</title>
<use xlink:href="#close"></use>
</svg>
</button>
<div class="m-share__buttons">
<div class="m-share__icon">
<button data-link="https://example.com" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>link</title>
<use xlink:href="#link"></use>
</svg>
</figure>
<div class="a-social-icon__copied">Copied!</div>
</button>
</div>
<div class="m-share__icon">
<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fcss-tricks.com%2F" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>facebook--no-outline</title>
<use xlink:href="#facebook--no-outline"></use>
</svg>
</figure>
</a>
</div>
<div class="m-share__icon">
<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,html" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>twitter--no-outline</title>
<use xlink:href="#twitter--no-outline"></use>
</svg>
</figure>
</a>
</div>
<div class="m-share__icon">
<a href="mailto:?subject=Sitetitle&body=Some%20content" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>mail--no-outline</title>
<use xlink:href="#mail--no-outline"></use>
</svg>
</figure>
</a>
</div>
<div class="m-share__icon">
<a href="whatsapp://send?abid=BROADCAST_ID&text=" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>whatsapp--no-outline</title>
<use xlink:href="#whatsapp--no-outline"></use>
</svg>
</figure>
</a>
</div>
</div>
<div class="m-share__desc">partager</div>
</div>
</aside>
</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">
{{render '@o-header'}}
<main class="page__main">
<article class="page__grid{{#unless shareable}} page__grid--no-sidebar{{/unless}}">
<div class="page__content">
<header class="page__header-wrapper">
<div class="page__header">
<div class="page__breadcrumbs">
{{render '@a-breadcrumbs'}}
</div>
<h1 id="main-content">Delegiertenversammlung</h1>
<div class="page__header-text">
{{render '@m-event-details'}}
</div>
</div>
</header>
<p>Die Delegiertenversammlung (DV) ist das oberste Organ der Grünen Schweiz. Sie tritt mindestens zweimal
pro Jahr auf Einladung des Vorstandes zusammen. Sie umfasst rund 250 Delegierte.</p>
<p>Die DV ist insbesondere zuständig für die Verabschiedung von Grundsatz-Stellungnahmen, die
Parolenfassungen zu Abstimmungen, für Statutenänderungen sowie für die Wahl des Parteipräsidiums.</p>
</div>
<div class="page__post-meta-wrapper {{#if header-image}}page__row--2{{else}}page__row--1{{/if}}">
<aside class="page__post-meta">
{{render '@a-post-meta'}}
</aside>
<div class="page__shareable">
<aside class="page__share">
{{render '@m-share' }}
</aside>
</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": true,
"header-image": false
}
No notes defined.