No notes defined.
<div id="siteHeader" class="siteHeader" data-menu data-persistent="true">
<div class="siteHeader-skip">
<a href="#siteHeader-end">Direkt zum Inhalt</a>
</div>
<div class="siteHeader-home">
<div class="logo">
<img src="/images/logo/logo.png" alt="" />
</div>
<a href="/" title="Startseite">Startseite</a>
</div>
<div class="siteHeader-drawer">
<div class="siteHeader-content">
<div class="siteHeader-level" data-level="1">
<nav class="siteHeader-nav" aria-label="Primärnavigation">
<ul class="siteHeader-list" data-level="1" data-title="Menü">
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="megamenu" data-current-ancestor="true">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-0" class="siteHeader-link" data-level="1"><span>Cardigan</span></button>
<div id="siteHeader-dropdown-0" class="siteHeader-level" data-level="2" data-sublevels="true">
<ul class="siteHeader-list" data-level="2" data-title="Cardigan">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" data-sublevels="true" href="#"><span>Cardigan</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-sublevel="true">
<button aria-expanded="false" aria-controls="siteHeader-rubrik-1-sublevel-0" class="siteHeader-link" data-level="2"><span>Flannel</span></button>
<div id="siteHeader-rubrik-1-sublevel-0" class="siteHeader-level" data-level="3">
<ul class="siteHeader-list" data-level="3" data-title="Flannel">
<li class="siteHeader-item is-overview" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Flannel</span></a>
</li>
<li class="siteHeader-item" data-level="3" data-current="true">
<a class="siteHeader-link" data-level="3" href="#" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="2" data-sublevel="true" data-current-ancestor="true">
<button aria-expanded="false" aria-controls="siteHeader-rubrik-1-sublevel-1" class="siteHeader-link" data-level="2"><span>Mixtape</span></button>
<div id="siteHeader-rubrik-1-sublevel-1" class="siteHeader-level" data-level="3">
<ul class="siteHeader-list" data-level="3" data-title="Mixtape">
<li class="siteHeader-item is-overview" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Mixtape</span></a>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Locavore intelligentsia kogi</span></a>
<div class="siteHeader-item-description">Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Hell of letterpress</span></a>
<div class="siteHeader-item-description">Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Green juice cold-pressed</span></a>
<div class="siteHeader-item-description">Crucifix you probably haven’t heard of them pork belly tilde.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Mukbang seitan</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Flexitarian typewriter</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Fanny pack</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="2" data-sublevel="true">
<button aria-expanded="false" aria-controls="siteHeader-rubrik-1-sublevel-2" class="siteHeader-link" data-level="2"><span>Dreamcatcher</span></button>
<div id="siteHeader-rubrik-1-sublevel-2" class="siteHeader-level" data-level="3">
<ul class="siteHeader-list" data-level="3" data-title="Dreamcatcher">
<li class="siteHeader-item is-overview" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Dreamcatcher</span></a>
</li>
<li class="siteHeader-item" data-level="3" data-current="true">
<a class="siteHeader-link" data-level="3" href="#" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="2" data-sublevel="true">
<button aria-expanded="false" aria-controls="siteHeader-rubrik-1-sublevel-3" class="siteHeader-link" data-level="2"><span>Raclette & Coloring</span></button>
<div id="siteHeader-rubrik-1-sublevel-3" class="siteHeader-level" data-level="3">
<ul class="siteHeader-list" data-level="3" data-title="Raclette & Coloring">
<li class="siteHeader-item is-overview" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Raclette & Coloring</span></a>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Locavore intelligentsia kogi</span></a>
<div class="siteHeader-item-description">Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Hell of letterpress</span></a>
<div class="siteHeader-item-description">Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Green juice cold-pressed</span></a>
<div class="siteHeader-item-description">Crucifix you probably haven’t heard of them pork belly tilde.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Mukbang seitan</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Flexitarian typewriter</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Fanny pack</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="2" data-sublevel="true">
<button aria-expanded="false" aria-controls="siteHeader-rubrik-1-sublevel-4" class="siteHeader-link" data-level="2"><span>Locavore</span></button>
<div id="siteHeader-rubrik-1-sublevel-4" class="siteHeader-level" data-level="3">
<ul class="siteHeader-list" data-level="3" data-title="Locavore">
<li class="siteHeader-item is-overview" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Locavore</span></a>
</li>
<li class="siteHeader-item" data-level="3" data-current="true">
<a class="siteHeader-link" data-level="3" href="#" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="megamenu">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-1" class="siteHeader-link" data-level="1"><span>Raw Denim</span></button>
<div id="siteHeader-dropdown-1" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Raw Denim">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Raw Denim</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<div class="siteHeader-item-figure">
<figure class="figure" style="">
<img class="figure-image" src="/images/placeholder/dummy-image.jpg" alt="/images/placeholder/dummy-image.jpg" />
</figure>
</div>
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Bodega boys etsy</span></a>
<div class="siteHeader-item-description">Crucifix you probably haven’t heard of them pork belly tilde.</div>
</li>
<li class="siteHeader-item" data-level="2">
<div class="siteHeader-item-figure">
<figure class="figure" style="">
<img class="figure-image" src="/images/placeholder/dummy-image.jpg" alt="/images/placeholder/dummy-image.jpg" />
</figure>
</div>
<a href="#" class="siteHeader-link" data-level="2"><span>Tattooed la croix</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<div class="siteHeader-item-figure">
<figure class="figure" style="">
<img class="figure-image" src="/images/placeholder/dummy-image.jpg" alt="/images/placeholder/dummy-image.jpg" />
</figure>
</div>
<a href="#" class="siteHeader-link" data-level="2"><span>Vice kinfolk master cleanse</span></a>
<div class="siteHeader-item-description">Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</div>
</li>
<li class="siteHeader-item" data-level="2">
<div class="siteHeader-item-figure">
<figure class="figure" style="">
<img class="figure-image" src="/images/placeholder/dummy-image.jpg" alt="/images/placeholder/dummy-image.jpg" />
</figure>
</div>
<a href="#" class="siteHeader-link" data-level="2"><span>Blackbird spyplane</span></a>
<div class="siteHeader-item-description">Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="megamenu">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-2" class="siteHeader-link" data-level="1"><span>Sustainable</span></button>
<div id="siteHeader-dropdown-2" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Sustainable">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Sustainable</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="dropdown">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-3" class="siteHeader-link" data-level="1"><span>Hashtag</span></button>
<div id="siteHeader-dropdown-3" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Hashtag">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Hashtag</span></span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="dropdown">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-4" class="siteHeader-link" data-level="1"><span>Gatekeep</span></button>
<div id="siteHeader-dropdown-4" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Gatekeep">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Gatekeep</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="dropdown">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-5" class="siteHeader-link" data-level="1"><span>Letterpress & Mustache</span></button>
<div id="siteHeader-dropdown-5" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Letterpress & Mustache">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Letterpress & Mustache</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="dropdown">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-6" class="siteHeader-link" data-level="1"><span>Flexitarian</span></button>
<div id="siteHeader-dropdown-6" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Flexitarian">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Sustainable</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
</ul>
</nav>
<nav class="siteHeader-nav is-secondary" aria-label="Sekundärnavigation">
<ul class="siteHeader-list" data-level="1">
<li class="siteHeader-item" data-level="1" data-current-ancestor="true"> <a href="#" class="siteHeader-link" data-level="1"><span>Flannel</span></a>
</li>
<li class="siteHeader-item" data-level="1"> <a href="#" class="siteHeader-link" data-level="1"><span>Mixtape</span></a>
</li>
<li class="siteHeader-item" data-level="1"> <a href="#" class="siteHeader-link" data-level="1"><span>Dreamcatcher</span></a>
</li>
<li class="siteHeader-item" data-level="1" data-icon="search"> <a href="#" class="siteHeader-link" data-level="1"><span>Suche</span></a>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="dropdown" data-icon="language"> <button aria-expanded="false" aria-controls="siteHeader-dropdown-4" class="siteHeader-link" data-level="1"><span>DE</span></button>
<div id="siteHeader-secondary-dropdown-4" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Sprache">
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Deutsch</span></a>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Englisch</span></a>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
<button class="siteHeader-trigger" data-menu-trigger="click">Menü</button>
</div>
<div class="siteHeader-spacer"></div>
<div id="siteHeader-end"></div>
<div style="min-height: 60vh;">
<div class="doc-notes">
[Platzhalter für Page-Header]
</div>
</div>
<div class="intrapageNav-boundingbox">
<div class="intrapageNav" data-theme="dark" js-cloak>
<header class="intrapageNav-title">Ich bin der Titel</header>
<nav class="intrapageNav-nav" aria-label="Seiteninterne Navigation">
<ul class="intrapageNav-list">
<li class="intrapageNav-item">
<a class="intrapageNav-link" title="Flexitarian" href="#rubrik-1"><span>Flexitarian</span></a>
</li>
<li class="intrapageNav-item">
<a class="intrapageNav-link" title="Raw Denim" href="#rubrik-2"><span>Raw Denim</span></a>
</li>
<li class="intrapageNav-item">
<a class="intrapageNav-link" title="Hashtag" href="#rubrik-3"><span>Hashtag</span></a>
</li>
<li class="intrapageNav-item">
<a class="intrapageNav-link" title="Letterpress & Mustache" href="#rubrik-4"><span>Letterpress & Mustache</span></a>
</li>
<li class="intrapageNav-item">
<a class="intrapageNav-link" title="Gatekeep" href="#rubrik-5"><span>Gatekeep</span></a>
</li>
</ul>
<div class="intrapageNav-dropdown">
<div class="dropdownMenu">
<label class="label">Rubriken</label>
<span class="dropdownMenu-select">
<span class="select">
<select class="field-select">
<option value="null" disabled selected>Rubrik wählen</option>
</select>
</span>
</span>
</div>
</div>
</nav>
<footer class="intrapageNav-cta">
<a class="button" href="#">Jetzt klicken</a>
</footer>
</div>
<div style="min-height: 60vh; border-top: 1px solid var(--doc-border-color);" id="rubrik-1">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
<h2 class="doc-heading">Flexitarian</h2>
URL: #rubrik-1
</div>
</div>
<div style="min-height: 60vh; border-top: 1px solid var(--doc-border-color);" id="rubrik-2">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
<h2 class="doc-heading">Raw Denim</h2>
URL: #rubrik-2
</div>
</div>
<div style="min-height: 60vh; border-top: 1px solid var(--doc-border-color);" id="rubrik-3">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
<h2 class="doc-heading">Hashtag</h2>
URL: #rubrik-3
</div>
</div>
<div style="min-height: 60vh; border-top: 1px solid var(--doc-border-color);" id="rubrik-4">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
<h2 class="doc-heading">Letterpress & Mustache</h2>
URL: #rubrik-4
</div>
</div>
<div style="min-height: 100vh; border-top: 1px solid var(--doc-border-color);" id="rubrik-5">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
<h2 class="doc-heading">Gatekeep</h2>
URL: #rubrik-5
</div>
</div>
<div style="min-height: 60vh;">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
[Platzhalter für Related Content]
</div>
</div>
</div>
<div style="min-height: 110vh;">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
[Platzhalter für Page-Footer]
</div>
</div>
{{render '@siteheader'}}
<div style="min-height: 60vh;">
<div class="doc-notes">
[Platzhalter für Page-Header]
</div>
</div>
<div class="intrapageNav-boundingbox">
{{render '@intrapagenav'}}
{{#sections}}
<div style="min-height: 60vh; border-top: 1px solid var(--doc-border-color);" id="{{id}}">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
<h2 class="doc-heading">{{{label}}}</h2>
URL: #{{id}}
</div>
</div>
{{/sections}}
{{#closing-section}}
<div style="min-height: 100vh; border-top: 1px solid var(--doc-border-color);" id="{{id}}">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
<h2 class="doc-heading">{{{label}}}</h2>
URL: #{{id}}
</div>
</div>
{{/closing-section}}
<div style="min-height: 60vh;">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
[Platzhalter für Related Content]
</div>
</div>
</div>
<div style="min-height: 110vh;">
<div style="height: var(--sp-section); background-color: var(--doc-spacing-color);"></div>
<div class="doc-notes" style="margin-top: 0;">
[Platzhalter für Page-Footer]
</div>
</div>
{
"aria-label": "Seiteninterne Navigation",
"title": "Ich bin der Titel",
"dropdown": {
"label": "Rubriken",
"placeholder": "Rubrik wählen"
},
"items": [
{
"label": "Flexitarian",
"url": "#rubrik-1"
},
{
"label": "Raw Denim",
"url": "#rubrik-2"
},
{
"label": "Hashtag",
"url": "#rubrik-3"
},
{
"label": "Letterpress & Mustache",
"url": "#rubrik-4"
},
{
"label": "Gatekeep",
"url": "#rubrik-5"
}
],
"cta": {
"url": "#",
"label": "Jetzt klicken"
},
"sections": [
{
"label": "Flexitarian",
"id": "rubrik-1"
},
{
"label": "Raw Denim",
"id": "rubrik-2"
},
{
"label": "Hashtag",
"id": "rubrik-3"
},
{
"label": "Letterpress & Mustache",
"id": "rubrik-4"
}
],
"closing-section": {
"label": "Gatekeep",
"id": "rubrik-5"
}
}
import intrapageNav from "./_intrapageNav.script.js";
intrapageNav.init();
export default (function (){
const defaults = {
selectors: {
items: '.intrapageNav-item',
links: '.intrapageNav-link[href^="#"]',
dropdown: 'select',
},
};
function init(options) {
const containers = document.querySelectorAll(".intrapageNav");
containers.forEach((container) => {
new Navigation(container, options);
});
}
const Navigation = function(container, options) {
if (typeof window.IntersectionObserver !== "function") {
return;
}
this.container = container;
this.settings = Object.assign({}, defaults, options);
this.isInitialised = null;
document.documentElement.style.setProperty('--intrapageNav-height', `${this.container.clientHeight}px`);
// Init marking current item
this.currentItem = {
id: null,
};
this.items = [];
// Links
this.container.querySelectorAll(this.settings.selectors.items).forEach((item) => {
const link = item.querySelector(this.settings.selectors.links);
if (! link) {
return
}
const matches = link.href.match(/#(.*)$/);
if (! matches) {
return;
}
const id = matches[1],
target = document.getElementById(id);
if (! target) {
return;
}
link.addEventListener("click", (event) => {
// Check if current id is before clicked id and set the scroll margin
event.preventDefault();
const index = this.items.findIndex(item => item.id === id),
currentIndex = this.items.findIndex(item => item.id === this.currentItem.id);
if (index < currentIndex) {
document.documentElement.style.setProperty('--intrapageNav-scroll-margin', 'var(--siteHeader-height)');
} else {
document.documentElement.style.setProperty('--intrapageNav-scroll-margin', '0px');
}
setTimeout(() => {
document.location.href = link.href;
}, 0);
});
this.items.push({
id: id,
index: this.items.length,
label: link.title,
container: item,
target: target,
});
});
// Select options
this.dropdown = {
container: this.container.querySelector(this.settings.selectors.dropdown),
options: [],
};
if (this.dropdown.container) {
this.items.forEach(item => {
const option = document.createElement("option");
//option.value = `#${item.id}`;
option.value = item.id;
option.innerHTML = item.label;
this.dropdown.container.appendChild(option);
this.dropdown.options.push(option);
});
this.dropdown.container.addEventListener("change", (event) => {
event.preventDefault();
location.hash = `#${this.dropdown.container.value}`
});
} else {
this.dropdown.container = {
value: null,
};
}
// Scroll listener
window.addEventListener("scroll", () => {
this.markCurrentItem();
if (! this.isInitialised) {
this.updateStatus();
}
});
}
Navigation.prototype.updateStatus = function() {
let headerHeight = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue("--siteHeader-height"));
if (! headerHeight) {
headerHeight = 0;
}
const isOnTop = (this.container.getBoundingClientRect().top <= headerHeight);
if (isOnTop !== this.isInitialised) {
this.isInitialised = isOnTop;
this.container.setAttribute("data-initialised", this.isInitialised);
}
}
Navigation.prototype.markCurrentItem = function() {
let currentItem = {
id: null,
};
const offsetTop = this.container.clientHeight + this.container.getBoundingClientRect().top;
this.items.every(item => {
const top = Math.floor(item.target.getBoundingClientRect().top),
height = Math.floor(item.target.getBoundingClientRect().height);
if (top <= offsetTop && top + height > offsetTop) {
currentItem = item;
return false;
}
return true;
});
if (currentItem.id !== this.currentItem.id) {
this.currentItem = currentItem;
this.items.forEach((item) => {
const isCurrent = (item.id === this.currentItem.id)
item.container.dataset.current = isCurrent;
});
this.dropdown.container.value = this.currentItem.id;
}
}
return {
init: init
}
})();
@import "_intrapageNav.settings";
@import "_intrapageNav.styles";
$intrapageNav_text-decoration-thickness: 2px !default;
$intrapageNav_link_styles: (
display: block,
color: $link-color,
text-decoration: none,
border-bottom: none transparent,
transition-property: none,
transition-duration: $_transition-duration,
) !default;
$intrapageNav_link_states: (
default: $intrapageNav_link_styles,
hover: (
border-color: $_action-border-color,
transition-duration: $_transition-duration--in,
),
focus: $_focus_styles,
active: (
),
current: (
border-color: $_action-border-color,
),
) !default;
$intrapageNav_marker_styles: (
position: absolute,
bottom: 0,
left: 0,
right: 0,
border-bottom: solid $intrapageNav_text-decoration-thickness,
border-color: inherit,
transition: inherit,
transition-property: border-color,
) !default;
:root {
--intrapageNav-height: 102px;
@include not-on-desktop(){
--siteHeader-height: 123px;
}
}
.intrapageNav {
padding-top: var(--sp);
padding-bottom: var(--sp);
display: grid;
grid-template-columns: auto max-content;
grid-template-areas:
"title cta"
"nav cta";
column-gap: var(--gg);
align-items: center;
position: sticky;
top: var(--siteHeader-height, 0);
@include z-index(intrapageNav);
&[js-cloak] {
display: block;
visibility: hidden;
}
@include full-width-backdrop($set-position: false);
&::before {
box-shadow: 0 1px 4px rgba(white, .2), map.get(map.get($_box-shadows, default), small);
}
&-boundingbox {
position: relative;
top: 0;
& [id],
& + [id] {
scroll-margin: calc(var(--intrapageNav-height) + var(--intrapageNav-scroll-margin, 0px));
}
}
&-title {
grid-area: title;
font-weight: $_font-weight--bold;
margin-top: -.1em;
}
&-nav {
grid-area: nav;
}
&-list {
@include stack-spacing(0);
list-style: none;
padding: 0;
display: flex;
column-gap: var(--sp-large);
flex-wrap: wrap;
}
&-link {
@include styles($intrapageNav_link_styles);
position: relative;
@include action-states($intrapageNav_link_states);
&::after {
content: "";
@include styles($intrapageNav_marker_styles);
}
}
&-item[data-current="true"] &-link {
@include state-styles($intrapageNav_link_states, current);
}
&-dropdown {
display: none;
@include text-size(smallest);
label {
@extend %visually-hidden;
}
}
&-cta {
grid-area: cta;
opacity: 1;
transform: translateY(0);
transition: $_transition-duration ease-out;
transition-property: opacity, transform;
}
&:not([data-initialised="true"]) &-cta {
opacity: 0;
transform: translateY(-100%);
}
.button {
@extend %button--small;
@include stack-spacing(0);
}
@include only-on-desktop(){
top: var(--siteHeader-visible-height, 0);
transition: var(--siteHeader-transition);
transition-property: top;
&-title + &-nav {
@include stack-spacing(small);
}
}
@include not-on-desktop(){
grid-template-areas:
"title title"
"nav cta";
column-gap: var(--pp);
row-gap: var(--sp-small);
&-nav {
align-self: stretch;
}
&-list {
display: none;
}
&-dropdown {
display: block;
height: 100%;
}
.dropdownMenu {
@include stack-spacing(0);
width: 100%;
&,
&-select,
.select,
.field-select {
height: inherit;
}
}
&-boundingbox {
& [id],
& + [id] {
scroll-margin: calc(var(--siteHeader-height) + var(--intrapageNav-height));
}
}
}
}