Header Artur Fischer Preis @header--afp
<header class="header headroom header--light header--meta header--slide-down">
<div class="header__meta">
<ul class="header__meta-items">
<li class="header__meta-item"><a href="#">Leichte Sprache<svg class="icon icon--leichte-sprache header__meta-item-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-leichte-sprache"></use>
</svg></a></li>
<li class="header__meta-item"><a href="#">Gebärden­sprache<svg class="icon icon--gebaerdesprache header__meta-item-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-gebaerdesprache"></use>
</svg></a></li>
</ul>
</div>
<div class="header__inner">
<div class="header__logo-wrap">
<div class="header__logo"><a class="logo" href="/"><img class="logo__image logo__image--light" src="/images/afp/afp-logo.svg" width="400" height="160" alt="Artur Fischer Preis" /><img class="logo__image" src="/images/afp/afp-logo-saw.svg" width="400" height="160" alt="Artur Fischer Preis" /></a></div>
</div><button class="header__mobile-menu-trigger" type="button" aria-controls="header-navigation" aria-label="Menü Öffnen"><span></span></button>
<div class="header__navigation" id="header-navigation">
<div class="header__navigation-inner header__navigation--level-1">
<div class="header__button"><a class="button button--afp-red" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg><span class="button__text">Bewerben</span></a></div>
<div class="header__search">
<div class="header__search-wrapper"><a class="header__search-button" aria-controls="header-navigation-search" aria-expanded="false" aria-haspopup="true" href="#"><svg class="icon icon--search" viewBox="0 0 200 200" role="img" aria-labelledby="icon-2053-title">
<title id="icon-2053-title">search</title>
<use xlink:href="#icon-search"></use>
</svg></a>
<div class="header__search-panel" id="header-navigation-search">
<div class="header__search-form">
<div class="header__search-close"><button class="icon-button icon-button--secondary header__search-close-btn" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-f996-title">
<title id="icon-f996-title">List</title>
<use xlink:href="#icon-close"></use>
</svg></button></div><input class="header__search-form-input" aria-label="Suchbegriff" /><button class="header__search-form-btn">Suchen<svg class="icon icon--search" viewBox="0 0 200 200" role="img" aria-labelledby="icon-24ae-title">
<title id="icon-24ae-title">search</title>
<use xlink:href="#icon-search"></use>
</svg></button>
<ul class="header__search-form-suggestion">
<li class="header__search-form-suggestion-li"><a href="#">Suchvorschlag</a></li>
<li class="header__search-form-suggestion-li"><a href="#">noch ein Suchvorschlag</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="header__navigation-levels">
<!-- LEVEL 1-->
<ul class="header__navigation-items header__navigation-level-1-ul">
<li class="header__navigation-item header__navigation-level-1-li" data-level="1"><button class="header__navigation-link header__navigation-move" id="navigation-6666" aria-controls="menu-bdd6" aria-expanded="false" aria-haspopup="true" type="button">Programm<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-65a8-title">
<title id="icon-65a8-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2" id="menu-bdd6">
<div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-2-back" href="javascript:;" data-level="2"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c582-title">
<title id="icon-c582-title">arrow-left</title>
<use xlink:href="#icon-arrow-left"></use>
</svg></a></div>
<div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><button class="header__navigation-submenu-overview-link" type="button"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Programm</span></button></div>
<ul class="header__navigation-items header__navigation-level-2-ul">
<!-- LEVEL 2-->
<li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link header__navigation-move" href="#">Wer wir sind<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6ddc-title">
<title id="icon-6ddc-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></a><!-- default style-->
<div class="header__navigation-submenu header__navigation-level-3">
<div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-3-back" href="javascript:;" data-level="3"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-794b-title">
<title id="icon-794b-title">arrow-left</title>
<use xlink:href="#icon-arrow-left"></use>
</svg></a></div>
<div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Wer wir sind</span></a></div>
<ul class="header__navigation-items header__navigation-level-3-ul">
<!-- level 3-->
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Ansprechpartner</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Stiftungsrat</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Entstehung</a></li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link header__navigation-move" href="#">Wie wir arbeiten<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c5c6-title">
<title id="icon-c5c6-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></a><!-- default style-->
<div class="header__navigation-submenu header__navigation-level-3">
<div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-3-back" href="javascript:;" data-level="3"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1d99-title">
<title id="icon-1d99-title">arrow-left</title>
<use xlink:href="#icon-arrow-left"></use>
</svg></a></div>
<div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Wie wir arbeiten</span></a></div>
<ul class="header__navigation-items header__navigation-level-3-ul">
<!-- level 3-->
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Partner</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Satzung</a></li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link header__navigation-move" href="#">Service<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-9447-title">
<title id="icon-9447-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></a><!-- default style-->
<div class="header__navigation-submenu header__navigation-level-3">
<div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-3-back" href="javascript:;" data-level="3"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1e0f-title">
<title id="icon-1e0f-title">arrow-left</title>
<use xlink:href="#icon-arrow-left"></use>
</svg></a></div>
<div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Service</span></a></div>
<ul class="header__navigation-items header__navigation-level-3-ul">
<!-- level 3-->
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Presse</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Publikationen</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-1-li" data-level="1"><button class="header__navigation-link header__navigation-move" id="navigation-772f" aria-controls="menu-4d47" aria-expanded="false" aria-haspopup="true" type="button">Preise<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7203-title">
<title id="icon-7203-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2" id="menu-4d47">
<div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-2-back" href="javascript:;" data-level="2"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c051-title">
<title id="icon-c051-title">arrow-left</title>
<use xlink:href="#icon-arrow-left"></use>
</svg></a></div>
<div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><button class="header__navigation-submenu-overview-link" type="button"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Preise</span></button></div>
<ul class="header__navigation-items header__navigation-level-2-ul">
<!-- LEVEL 2-->
<li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link header__navigation-move" href="#">Wettbewerb<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-fc2b-title">
<title id="icon-fc2b-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></a><!-- default style-->
<div class="header__navigation-submenu header__navigation-level-3">
<div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-3-back" href="javascript:;" data-level="3"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-4d0f-title">
<title id="icon-4d0f-title">arrow-left</title>
<use xlink:href="#icon-arrow-left"></use>
</svg></a></div>
<div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Wettbewerb</span></a></div>
<ul class="header__navigation-items header__navigation-level-3-ul">
<!-- level 3-->
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Für Schüler</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Für Private Erfinder</a></li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link header__navigation-move" href="#">Einblicke<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-be2f-title">
<title id="icon-be2f-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></a><!-- default style-->
<div class="header__navigation-submenu header__navigation-level-3">
<div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-3-back" href="javascript:;" data-level="3"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5aca-title">
<title id="icon-5aca-title">arrow-left</title>
<use xlink:href="#icon-arrow-left"></use>
</svg></a></div>
<div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Einblicke</span></a></div>
<ul class="header__navigation-items header__navigation-level-3-ul">
<!-- level 3-->
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Preisverleihungen</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Story</a></li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link header__navigation-move" href="#">Mitmachen<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-fa68-title">
<title id="icon-fa68-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></a><!-- default style-->
<div class="header__navigation-submenu header__navigation-level-3">
<div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-3-back" href="javascript:;" data-level="3"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d363-title">
<title id="icon-d363-title">arrow-left</title>
<use xlink:href="#icon-arrow-left"></use>
</svg></a></div>
<div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Mitmachen</span></a></div>
<ul class="header__navigation-items header__navigation-level-3-ul">
<!-- level 3-->
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Bewerbungsprozess</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Teilnahmebedingungen</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">FAQ</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-1-li" data-level="1"><a class="header__navigation-link header__navigation-move" href="#" id="navigation-b73f" aria-controls="menu-daeb" aria-expanded="false" aria-haspopup="true">Innovationen<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-9e36-title">
<title id="icon-9e36-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></a>
<div class="header__navigation-submenu header__navigation-level-2" id="menu-daeb">
<div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-2-back" href="javascript:;" data-level="2"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-20a7-title">
<title id="icon-20a7-title">arrow-left</title>
<use xlink:href="#icon-arrow-left"></use>
</svg></a></div>
<div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Innovationen</span></a></div>
<ul class="header__navigation-items header__navigation-level-2-ul">
<!-- LEVEL 2-->
<li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link" href="#">Wettbewerb</a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link" href="#">Einblicke</a><!-- default style-->
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="header__navigation-close"><button class="icon-button icon-button--secondary header__mobile-close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3c2d-title">
<title id="icon-3c2d-title">List</title>
<use xlink:href="#icon-close"></use>
</svg></button></div>
</div>
</div>
</div>
</header>{
"search": true,
"meta": {
"items": [
{
"link": "#",
"text": "Leichte Sprache",
"icon": "leichte-sprache"
},
{
"link": "#",
"text": "Gebärdensprache",
"icon": "gebaerdesprache"
}
]
},
"navigation": {
"level1": [
{
"link": "Programm",
"href": null,
"level2": [
{
"link": "Wer wir sind",
"href": "#",
"level3": [
{
"link": "Ansprechpartner",
"href": "#"
},
{
"link": "Stiftungsrat",
"href": "#"
},
{
"link": "Entstehung",
"href": "#"
}
]
},
{
"link": "Wie wir arbeiten",
"href": "#",
"level3": [
{
"link": "Partner",
"href": "#"
},
{
"link": "Satzung",
"href": "#"
}
]
},
{
"link": "Service",
"href": "#",
"level3": [
{
"link": "Presse",
"href": "#"
},
{
"link": "Publikationen",
"href": "#"
}
]
}
]
},
{
"link": "Preise",
"href": null,
"level2": [
{
"link": "Wettbewerb",
"href": "#",
"level3": [
{
"link": "Für Schüler",
"href": "#"
},
{
"link": "Für Private Erfinder",
"href": "#"
}
]
},
{
"link": "Einblicke",
"href": "#",
"level3": [
{
"link": "Preisverleihungen",
"href": "#"
},
{
"link": "Story",
"href": "#"
}
]
},
{
"link": "Mitmachen",
"href": "#",
"level3": [
{
"link": "Bewerbungsprozess",
"href": "#"
},
{
"link": "Teilnahmebedingungen",
"href": "#"
},
{
"link": "FAQ",
"href": "#"
}
]
}
]
},
{
"link": "Innovationen",
"href": "#",
"level2": [
{
"link": "Wettbewerb",
"href": "#"
},
{
"link": "Einblicke",
"href": "#"
}
]
}
]
},
"light": true,
"logo": {
"path": "/images/afp/afp-logo-saw.svg",
"pathLight": "/images/afp/afp-logo.svg",
"link": "/",
"alt": "Artur Fischer Preis",
"width": 400,
"height": 160
},
"button": {
"text": "Bewerben",
"icon": "arrow-right",
"style": "afp-red"
}
}