Header @header
<header class="header headroom 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/logo-light.svg" width="655" height="284" alt="Baden-Württemberg Stiftung" /><img class="logo__image" src="/images/logo.svg" width="655" height="284" alt="Baden-Württemberg Stiftung" /></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__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-4d2d-title">
<title id="icon-4d2d-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-28cb-title">
<title id="icon-28cb-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-6879-title">
<title id="icon-6879-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-c8ad" aria-controls="menu-c31c" aria-expanded="false" aria-haspopup="true" type="button">Die Stiftung<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-79e3-title">
<title id="icon-79e3-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2" id="menu-c31c">
<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-737a-title">
<title id="icon-737a-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> Die Stiftung</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-3acf-title">
<title id="icon-3acf-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-e19e-title">
<title id="icon-e19e-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="#">Aufsichtsrat</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Zahlen & Fakten</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">30 Jahre</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-966e-title">
<title id="icon-966e-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-6d09-title">
<title id="icon-6d09-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="#">Richtlinien</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-3125-title">
<title id="icon-3125-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-af56-title">
<title id="icon-af56-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="#">Aufsichtsrat</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Zahlen & Fakten</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">30 Jahre</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-eecb-title">
<title id="icon-eecb-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-ee21-title">
<title id="icon-ee21-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="#">Richtlinien</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-2688-title">
<title id="icon-2688-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-e8ad-title">
<title id="icon-e8ad-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="#">Aufsichtsrat</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Zahlen & Fakten</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">30 Jahre</a></li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-2-li header__navigation-teaser-li">
<article class="navigation-teaser navigation-teaser--default navigation-teaser--yellow-dark">
<div class="navigation-teaser__inner">
<div class="navigation-teaser__content">
<div class="navigation-teaser__fancy-image">
<div class="image loading" style="padding-top: 27.77777777777778%;"><noscript><img class="image__fallback" alt="Fancy Title" height="80" src="/images/fancy-font.png" width="288" /></noscript><img class="image__img js-lazyload" data-src="/images/fancy-font.png" width="288" height="80" alt="Fancy Title" /></div>
</div>
<div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Jetzt lesen</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
</div>
<div class="navigation-teaser__magazine">
<div class="navigation-teaser__magazine-content">
<div class="navigation-teaser__links"></div>
</div>
</div>
</div>
</article>
</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-a0ac" aria-controls="menu-7464" aria-expanded="false" aria-haspopup="true" type="button">Bereiche & Programme<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-ba52-title">
<title id="icon-ba52-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2" id="menu-7464">
<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-7724-title">
<title id="icon-7724-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> Bereiche & Programme</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="#">Bildung<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-ed56-title">
<title id="icon-ed56-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-f268-title">
<title id="icon-f268-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> Bildung</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="#">Baden-Württemberg-Stipendium</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Talent im Land</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Sag mal was</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">klicken & lesen</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link header__navigation-link--bold" href="#">Alle 27 Programme</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="#">Forschung<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-ae8d-title">
<title id="icon-ae8d-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-50c4-title">
<title id="icon-50c4-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> Forschung</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="#">Verantwortliche Künstliche Intelligenz</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Coaching 4 Future</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Empowerment-Tag für Wissenschaftlerinnen</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">forschungstag</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link header__navigation-link--bold" href="#">Alle 36 Programme</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="#">Gesellschaft & Kultur<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1ed4-title">
<title id="icon-1ed4-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-e3ca-title">
<title id="icon-e3ca-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> Gesellschaft & Kultur</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="#">Smart ohne Phone</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Kulturakademie Baden-Würtemberg</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Minderjährige Zukunftsakademie Baden-Württemberg</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Lehrpreis der Stiftung Kinderland</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link header__navigation-link--bold" href="#">Alle 53 Programme</a></li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-2-li header__navigation-teaser-li">
<article class="navigation-teaser navigation-teaser--fancy-font navigation-teaser--peach">
<div class="navigation-teaser__inner">
<div class="navigation-teaser__content">
<p class="headline headline--1 navigation-teaser__headline">Programme A – Z</p>
<div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Zum Programmfinder</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
</div>
<div class="navigation-teaser__magazine">
<div class="navigation-teaser__magazine-content">
<div class="navigation-teaser__links"></div>
</div>
</div>
</div>
</article>
</li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-1-li" data-level="1"><a class="header__navigation-link" href="#" id="navigation-3979" aria-controls="menu-e668" aria-expanded="false" aria-haspopup="true">Ausschreibungen</a></li>
<li class="header__navigation-item header__navigation-level-1-li" data-level="1"><button class="header__navigation-link header__navigation-move" id="navigation-7256" aria-controls="menu-d066" aria-expanded="false" aria-haspopup="true" type="button">Magazin Perspektiven<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-336a-title">
<title id="icon-336a-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2 header__navigation-level-2--teaser-style" id="menu-d066">
<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-4cf2-title">
<title id="icon-4cf2-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> Magazin Perspektiven</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">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker"></span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker"></span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker">Dossier</span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker">Dossier</span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li header__navigation-teaser-li">
<article class="navigation-teaser navigation-teaser--magazine navigation-teaser--violet">
<div class="navigation-teaser__inner">
<div class="navigation-teaser__content">
<p class="headline headline--1 navigation-teaser__headline">Noch mehr spannende Stories</p>
<div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Jetzt lesen</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
</div>
<div class="navigation-teaser__magazine">
<div class="navigation-teaser__image">
<div class="image loading" style="padding-top: 135.96491228070175%;"><noscript><img class="image__fallback" alt="Magazine Cover" height="155" src="/images/magazine.jpg" width="114" /></noscript><img class="image__img js-lazyload" data-src="/images/magazine.jpg" width="114" height="155" alt="Magazine Cover" /></div>
</div>
<div class="navigation-teaser__magazine-content">
<div class="navigation-teaser__text">
<div class="text">
<p>Unser aktuelles Magazin</p><strong>»Perspektive«</strong>
</div>
</div>
<div class="navigation-teaser__links">
<div class="navigation-teaser__link"><a class="link link--download" href="#" target="_blank" download="download.pdf">PDF-Download</a></div>
<div class="navigation-teaser__icon-link"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--medical" viewBox="0 0 200 200">
<use xlink:href="#icon-medical"></use>
</svg></span><span class="icon-link__text">Abo</span></a></div>
</div>
</div>
</div>
</div>
</article>
</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-1e75-title">
<title id="icon-1e75-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": "Die Stiftung",
"href": null,
"navigationsTeaser": "navigation-teaser",
"level2": [
{
"link": "Wer wir sind",
"href": "#",
"level3": [
{
"link": "Aufsichtsrat",
"href": "#"
},
{
"link": "Zahlen & Fakten",
"href": "#"
},
{
"link": "30 Jahre",
"href": "#"
}
]
},
{
"link": "Wie wir arbeiten",
"href": "#",
"level3": [
{
"link": "Richtlinien",
"href": "#"
}
]
},
{
"link": "Service",
"href": "#",
"level3": [
{
"link": "Aufsichtsrat",
"href": "#"
},
{
"link": "Zahlen & Fakten",
"href": "#"
},
{
"link": "30 Jahre",
"href": "#"
}
]
},
{
"link": "Wie wir arbeiten",
"href": "#",
"level3": [
{
"link": "Richtlinien",
"href": "#"
}
]
},
{
"link": "Service",
"href": "#",
"level3": [
{
"link": "Aufsichtsrat",
"href": "#"
},
{
"link": "Zahlen & Fakten",
"href": "#"
},
{
"link": "30 Jahre",
"href": "#"
}
]
}
]
},
{
"link": "Bereiche & Programme",
"href": null,
"navigationsTeaser": "navigation-teaser--fancy-font",
"level2": [
{
"link": "Bildung",
"href": "#",
"level3": [
{
"link": "Baden-Württemberg-Stipendium",
"href": "#"
},
{
"link": "Talent im Land",
"href": "#"
},
{
"link": "Sag mal was",
"href": "#"
},
{
"link": "klicken & lesen",
"href": "#"
},
{
"link": "Alle 27 Programme",
"href": "#",
"bold": true
}
]
},
{
"link": "Forschung",
"href": "#",
"level3": [
{
"link": "Verantwortliche Künstliche Intelligenz",
"href": "#"
},
{
"link": "Coaching 4 Future",
"href": "#"
},
{
"link": "Empowerment-Tag für Wissenschaftlerinnen",
"href": "#"
},
{
"link": "forschungstag",
"href": "#"
},
{
"link": "Alle 36 Programme",
"href": "#",
"bold": true
}
]
},
{
"link": "Gesellschaft & Kultur",
"href": "#",
"level3": [
{
"link": "Smart ohne Phone",
"href": "#"
},
{
"link": "Kulturakademie Baden-Würtemberg",
"href": "#"
},
{
"link": "Minderjährige Zukunftsakademie Baden-Württemberg",
"href": "#"
},
{
"link": "Lehrpreis der Stiftung Kinderland",
"href": "#"
},
{
"link": "Alle 53 Programme",
"href": "#",
"bold": true
}
]
}
]
},
{
"link": "Ausschreibungen",
"href": "#"
},
{
"link": "Magazin Perspektiven",
"href": null,
"navigationsTeaser": "navigation-teaser--magazine",
"subMenuStyle": "teaser",
"level2": [
{
"image": "/images/1044x550.jpg",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
},
{
"image": "/images/1044x550.jpg",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
},
{
"image": "/images/1044x550.jpg",
"kicker": "Dossier",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
},
{
"image": "/images/1044x550.jpg",
"kicker": "Dossier",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
}
]
}
]
}
}
Header light @header--light
<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/logo-light.svg" width="655" height="284" alt="Baden-Württemberg Stiftung" /><img class="logo__image" src="/images/logo.svg" width="655" height="284" alt="Baden-Württemberg Stiftung" /></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__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-9edf-title">
<title id="icon-9edf-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-357a-title">
<title id="icon-357a-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-554f-title">
<title id="icon-554f-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-88f4" aria-controls="menu-373e" aria-expanded="false" aria-haspopup="true" type="button">Die Stiftung<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6cba-title">
<title id="icon-6cba-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2" id="menu-373e">
<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-ff23-title">
<title id="icon-ff23-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> Die Stiftung</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-dc0f-title">
<title id="icon-dc0f-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-1d05-title">
<title id="icon-1d05-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="#">Aufsichtsrat</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Zahlen & Fakten</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">30 Jahre</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-7701-title">
<title id="icon-7701-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-abfb-title">
<title id="icon-abfb-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="#">Richtlinien</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-91f6-title">
<title id="icon-91f6-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-8a24-title">
<title id="icon-8a24-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="#">Aufsichtsrat</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Zahlen & Fakten</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">30 Jahre</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-b7c9-title">
<title id="icon-b7c9-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-addb-title">
<title id="icon-addb-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="#">Richtlinien</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-b5b4-title">
<title id="icon-b5b4-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-429c-title">
<title id="icon-429c-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="#">Aufsichtsrat</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Zahlen & Fakten</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">30 Jahre</a></li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-2-li header__navigation-teaser-li">
<article class="navigation-teaser navigation-teaser--default navigation-teaser--yellow-dark">
<div class="navigation-teaser__inner">
<div class="navigation-teaser__content">
<div class="navigation-teaser__fancy-image">
<div class="image loading" style="padding-top: 27.77777777777778%;"><noscript><img class="image__fallback" alt="Fancy Title" height="80" src="/images/fancy-font.png" width="288" /></noscript><img class="image__img js-lazyload" data-src="/images/fancy-font.png" width="288" height="80" alt="Fancy Title" /></div>
</div>
<div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Jetzt lesen</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
</div>
<div class="navigation-teaser__magazine">
<div class="navigation-teaser__magazine-content">
<div class="navigation-teaser__links"></div>
</div>
</div>
</div>
</article>
</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-4aee" aria-controls="menu-22cb" aria-expanded="false" aria-haspopup="true" type="button">Bereiche & Programme<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-438a-title">
<title id="icon-438a-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2" id="menu-22cb">
<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-971b-title">
<title id="icon-971b-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> Bereiche & Programme</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="#">Bildung<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7a08-title">
<title id="icon-7a08-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-04c2-title">
<title id="icon-04c2-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> Bildung</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="#">Baden-Württemberg-Stipendium</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Talent im Land</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Sag mal was</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">klicken & lesen</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link header__navigation-link--bold" href="#">Alle 27 Programme</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="#">Forschung<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-221a-title">
<title id="icon-221a-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-6916-title">
<title id="icon-6916-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> Forschung</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="#">Verantwortliche Künstliche Intelligenz</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Coaching 4 Future</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Empowerment-Tag für Wissenschaftlerinnen</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">forschungstag</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link header__navigation-link--bold" href="#">Alle 36 Programme</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="#">Gesellschaft & Kultur<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-0be9-title">
<title id="icon-0be9-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-07fc-title">
<title id="icon-07fc-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> Gesellschaft & Kultur</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="#">Smart ohne Phone</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Kulturakademie Baden-Würtemberg</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Minderjährige Zukunftsakademie Baden-Württemberg</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Lehrpreis der Stiftung Kinderland</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link header__navigation-link--bold" href="#">Alle 53 Programme</a></li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-2-li header__navigation-teaser-li">
<article class="navigation-teaser navigation-teaser--fancy-font navigation-teaser--peach">
<div class="navigation-teaser__inner">
<div class="navigation-teaser__content">
<p class="headline headline--1 navigation-teaser__headline">Programme A – Z</p>
<div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Zum Programmfinder</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
</div>
<div class="navigation-teaser__magazine">
<div class="navigation-teaser__magazine-content">
<div class="navigation-teaser__links"></div>
</div>
</div>
</div>
</article>
</li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-1-li" data-level="1"><a class="header__navigation-link" href="#" id="navigation-cb67" aria-controls="menu-5366" aria-expanded="false" aria-haspopup="true">Ausschreibungen</a></li>
<li class="header__navigation-item header__navigation-level-1-li" data-level="1"><button class="header__navigation-link header__navigation-move" id="navigation-d55b" aria-controls="menu-3e8a" aria-expanded="false" aria-haspopup="true" type="button">Magazin Perspektiven<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6617-title">
<title id="icon-6617-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2 header__navigation-level-2--teaser-style" id="menu-3e8a">
<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-c787-title">
<title id="icon-c787-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> Magazin Perspektiven</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">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker"></span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker"></span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker">Dossier</span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker">Dossier</span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li header__navigation-teaser-li">
<article class="navigation-teaser navigation-teaser--magazine navigation-teaser--violet">
<div class="navigation-teaser__inner">
<div class="navigation-teaser__content">
<p class="headline headline--1 navigation-teaser__headline">Noch mehr spannende Stories</p>
<div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Jetzt lesen</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
</div>
<div class="navigation-teaser__magazine">
<div class="navigation-teaser__image">
<div class="image loading" style="padding-top: 135.96491228070175%;"><noscript><img class="image__fallback" alt="Magazine Cover" height="155" src="/images/magazine.jpg" width="114" /></noscript><img class="image__img js-lazyload" data-src="/images/magazine.jpg" width="114" height="155" alt="Magazine Cover" /></div>
</div>
<div class="navigation-teaser__magazine-content">
<div class="navigation-teaser__text">
<div class="text">
<p>Unser aktuelles Magazin</p><strong>»Perspektive«</strong>
</div>
</div>
<div class="navigation-teaser__links">
<div class="navigation-teaser__link"><a class="link link--download" href="#" target="_blank" download="download.pdf">PDF-Download</a></div>
<div class="navigation-teaser__icon-link"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--medical" viewBox="0 0 200 200">
<use xlink:href="#icon-medical"></use>
</svg></span><span class="icon-link__text">Abo</span></a></div>
</div>
</div>
</div>
</div>
</article>
</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-1aca-title">
<title id="icon-1aca-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": "Die Stiftung",
"href": null,
"navigationsTeaser": "navigation-teaser",
"level2": [
{
"link": "Wer wir sind",
"href": "#",
"level3": [
{
"link": "Aufsichtsrat",
"href": "#"
},
{
"link": "Zahlen & Fakten",
"href": "#"
},
{
"link": "30 Jahre",
"href": "#"
}
]
},
{
"link": "Wie wir arbeiten",
"href": "#",
"level3": [
{
"link": "Richtlinien",
"href": "#"
}
]
},
{
"link": "Service",
"href": "#",
"level3": [
{
"link": "Aufsichtsrat",
"href": "#"
},
{
"link": "Zahlen & Fakten",
"href": "#"
},
{
"link": "30 Jahre",
"href": "#"
}
]
},
{
"link": "Wie wir arbeiten",
"href": "#",
"level3": [
{
"link": "Richtlinien",
"href": "#"
}
]
},
{
"link": "Service",
"href": "#",
"level3": [
{
"link": "Aufsichtsrat",
"href": "#"
},
{
"link": "Zahlen & Fakten",
"href": "#"
},
{
"link": "30 Jahre",
"href": "#"
}
]
}
]
},
{
"link": "Bereiche & Programme",
"href": null,
"navigationsTeaser": "navigation-teaser--fancy-font",
"level2": [
{
"link": "Bildung",
"href": "#",
"level3": [
{
"link": "Baden-Württemberg-Stipendium",
"href": "#"
},
{
"link": "Talent im Land",
"href": "#"
},
{
"link": "Sag mal was",
"href": "#"
},
{
"link": "klicken & lesen",
"href": "#"
},
{
"link": "Alle 27 Programme",
"href": "#",
"bold": true
}
]
},
{
"link": "Forschung",
"href": "#",
"level3": [
{
"link": "Verantwortliche Künstliche Intelligenz",
"href": "#"
},
{
"link": "Coaching 4 Future",
"href": "#"
},
{
"link": "Empowerment-Tag für Wissenschaftlerinnen",
"href": "#"
},
{
"link": "forschungstag",
"href": "#"
},
{
"link": "Alle 36 Programme",
"href": "#",
"bold": true
}
]
},
{
"link": "Gesellschaft & Kultur",
"href": "#",
"level3": [
{
"link": "Smart ohne Phone",
"href": "#"
},
{
"link": "Kulturakademie Baden-Würtemberg",
"href": "#"
},
{
"link": "Minderjährige Zukunftsakademie Baden-Württemberg",
"href": "#"
},
{
"link": "Lehrpreis der Stiftung Kinderland",
"href": "#"
},
{
"link": "Alle 53 Programme",
"href": "#",
"bold": true
}
]
}
]
},
{
"link": "Ausschreibungen",
"href": "#"
},
{
"link": "Magazin Perspektiven",
"href": null,
"navigationsTeaser": "navigation-teaser--magazine",
"subMenuStyle": "teaser",
"level2": [
{
"image": "/images/1044x550.jpg",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
},
{
"image": "/images/1044x550.jpg",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
},
{
"image": "/images/1044x550.jpg",
"kicker": "Dossier",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
},
{
"image": "/images/1044x550.jpg",
"kicker": "Dossier",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
}
]
}
]
},
"light": true
}
Header Programm-Logo @header--badge
<header class="header headroom header--badge 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/logo-light.svg" width="655" height="284" alt="Baden-Württemberg Stiftung" /><img class="logo__image" src="/images/logo.svg" width="655" height="284" alt="Baden-Württemberg Stiftung" /></a></div>
<div class="header__badge">
<div class="logo"><img class="logo__image logo__image--light" src="/images/logo-light.svg" width="100" height="44" alt="Baden-Württemberg Stiftung, wir stiften Zukunft" /><img class="logo__image" src="/images/header-badge-logo.svg" width="100" height="44" alt="Baden-Württemberg Stiftung, wir stiften Zukunft" /></div>
</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__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-00ba-title">
<title id="icon-00ba-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-deba-title">
<title id="icon-deba-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-c026-title">
<title id="icon-c026-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-fcad" aria-controls="menu-36b3" aria-expanded="false" aria-haspopup="true" type="button">Die Stiftung<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1a6d-title">
<title id="icon-1a6d-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2" id="menu-36b3">
<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-bf35-title">
<title id="icon-bf35-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> Die Stiftung</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-d325-title">
<title id="icon-d325-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-9fc9-title">
<title id="icon-9fc9-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="#">Aufsichtsrat</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Zahlen & Fakten</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">30 Jahre</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-8964-title">
<title id="icon-8964-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-c7e3-title">
<title id="icon-c7e3-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="#">Richtlinien</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-71a9-title">
<title id="icon-71a9-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-72e6-title">
<title id="icon-72e6-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="#">Aufsichtsrat</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Zahlen & Fakten</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">30 Jahre</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-3d82-title">
<title id="icon-3d82-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-dfdc-title">
<title id="icon-dfdc-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="#">Richtlinien</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-9854-title">
<title id="icon-9854-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-7ea3-title">
<title id="icon-7ea3-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="#">Aufsichtsrat</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Zahlen & Fakten</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">30 Jahre</a></li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-2-li header__navigation-teaser-li">
<article class="navigation-teaser navigation-teaser--default navigation-teaser--yellow-dark">
<div class="navigation-teaser__inner">
<div class="navigation-teaser__content">
<div class="navigation-teaser__fancy-image">
<div class="image loading" style="padding-top: 27.77777777777778%;"><noscript><img class="image__fallback" alt="Fancy Title" height="80" src="/images/fancy-font.png" width="288" /></noscript><img class="image__img js-lazyload" data-src="/images/fancy-font.png" width="288" height="80" alt="Fancy Title" /></div>
</div>
<div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Jetzt lesen</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
</div>
<div class="navigation-teaser__magazine">
<div class="navigation-teaser__magazine-content">
<div class="navigation-teaser__links"></div>
</div>
</div>
</div>
</article>
</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-addb" aria-controls="menu-85f1" aria-expanded="false" aria-haspopup="true" type="button">Bereiche & Programme<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-17b3-title">
<title id="icon-17b3-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2" id="menu-85f1">
<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-8496-title">
<title id="icon-8496-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> Bereiche & Programme</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="#">Bildung<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3a1e-title">
<title id="icon-3a1e-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-e9bb-title">
<title id="icon-e9bb-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> Bildung</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="#">Baden-Württemberg-Stipendium</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Talent im Land</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Sag mal was</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">klicken & lesen</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link header__navigation-link--bold" href="#">Alle 27 Programme</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="#">Forschung<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6c0d-title">
<title id="icon-6c0d-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-d98a-title">
<title id="icon-d98a-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> Forschung</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="#">Verantwortliche Künstliche Intelligenz</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Coaching 4 Future</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Empowerment-Tag für Wissenschaftlerinnen</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">forschungstag</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link header__navigation-link--bold" href="#">Alle 36 Programme</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="#">Gesellschaft & Kultur<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-b40f-title">
<title id="icon-b40f-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-7a67-title">
<title id="icon-7a67-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> Gesellschaft & Kultur</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="#">Smart ohne Phone</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Kulturakademie Baden-Würtemberg</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Minderjährige Zukunftsakademie Baden-Württemberg</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Lehrpreis der Stiftung Kinderland</a></li>
<li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link header__navigation-link--bold" href="#">Alle 53 Programme</a></li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-2-li header__navigation-teaser-li">
<article class="navigation-teaser navigation-teaser--fancy-font navigation-teaser--peach">
<div class="navigation-teaser__inner">
<div class="navigation-teaser__content">
<p class="headline headline--1 navigation-teaser__headline">Programme A – Z</p>
<div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Zum Programmfinder</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
</div>
<div class="navigation-teaser__magazine">
<div class="navigation-teaser__magazine-content">
<div class="navigation-teaser__links"></div>
</div>
</div>
</div>
</article>
</li>
</ul>
</div>
</li>
<li class="header__navigation-item header__navigation-level-1-li" data-level="1"><a class="header__navigation-link" href="#" id="navigation-f95a" aria-controls="menu-093d" aria-expanded="false" aria-haspopup="true">Ausschreibungen</a></li>
<li class="header__navigation-item header__navigation-level-1-li" data-level="1"><button class="header__navigation-link header__navigation-move" id="navigation-1ae7" aria-controls="menu-c98f" aria-expanded="false" aria-haspopup="true" type="button">Magazin Perspektiven<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-66cd-title">
<title id="icon-66cd-title">chevron-down</title>
<use xlink:href="#icon-chevron-down"></use>
</svg></button>
<div class="header__navigation-submenu header__navigation-level-2 header__navigation-level-2--teaser-style" id="menu-c98f">
<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-4ac1-title">
<title id="icon-4ac1-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> Magazin Perspektiven</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">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker"></span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker"></span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker">Dossier</span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li" data-level="2">
<!-- teaser style--><a href="#"><img class="header__navigation-level-2-li-image" src="/images/1044x550.jpg" alt="Ich bin der Titel einer Story aus dem Magazin" /><span class="header__navigation-level-2-li-kicker">Dossier</span><span class="header__navigation-level-2-li-title">Ich bin der Titel einer Story aus dem Magazin</span></a><!-- default style-->
</li>
<li class="header__navigation-item header__navigation-level-2-li header__navigation-teaser-li">
<article class="navigation-teaser navigation-teaser--magazine navigation-teaser--violet">
<div class="navigation-teaser__inner">
<div class="navigation-teaser__content">
<p class="headline headline--1 navigation-teaser__headline">Noch mehr spannende Stories</p>
<div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Jetzt lesen</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
</div>
<div class="navigation-teaser__magazine">
<div class="navigation-teaser__image">
<div class="image loading" style="padding-top: 135.96491228070175%;"><noscript><img class="image__fallback" alt="Magazine Cover" height="155" src="/images/magazine.jpg" width="114" /></noscript><img class="image__img js-lazyload" data-src="/images/magazine.jpg" width="114" height="155" alt="Magazine Cover" /></div>
</div>
<div class="navigation-teaser__magazine-content">
<div class="navigation-teaser__text">
<div class="text">
<p>Unser aktuelles Magazin</p><strong>»Perspektive«</strong>
</div>
</div>
<div class="navigation-teaser__links">
<div class="navigation-teaser__link"><a class="link link--download" href="#" target="_blank" download="download.pdf">PDF-Download</a></div>
<div class="navigation-teaser__icon-link"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--medical" viewBox="0 0 200 200">
<use xlink:href="#icon-medical"></use>
</svg></span><span class="icon-link__text">Abo</span></a></div>
</div>
</div>
</div>
</div>
</article>
</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-faf8-title">
<title id="icon-faf8-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": "Die Stiftung",
"href": null,
"navigationsTeaser": "navigation-teaser",
"level2": [
{
"link": "Wer wir sind",
"href": "#",
"level3": [
{
"link": "Aufsichtsrat",
"href": "#"
},
{
"link": "Zahlen & Fakten",
"href": "#"
},
{
"link": "30 Jahre",
"href": "#"
}
]
},
{
"link": "Wie wir arbeiten",
"href": "#",
"level3": [
{
"link": "Richtlinien",
"href": "#"
}
]
},
{
"link": "Service",
"href": "#",
"level3": [
{
"link": "Aufsichtsrat",
"href": "#"
},
{
"link": "Zahlen & Fakten",
"href": "#"
},
{
"link": "30 Jahre",
"href": "#"
}
]
},
{
"link": "Wie wir arbeiten",
"href": "#",
"level3": [
{
"link": "Richtlinien",
"href": "#"
}
]
},
{
"link": "Service",
"href": "#",
"level3": [
{
"link": "Aufsichtsrat",
"href": "#"
},
{
"link": "Zahlen & Fakten",
"href": "#"
},
{
"link": "30 Jahre",
"href": "#"
}
]
}
]
},
{
"link": "Bereiche & Programme",
"href": null,
"navigationsTeaser": "navigation-teaser--fancy-font",
"level2": [
{
"link": "Bildung",
"href": "#",
"level3": [
{
"link": "Baden-Württemberg-Stipendium",
"href": "#"
},
{
"link": "Talent im Land",
"href": "#"
},
{
"link": "Sag mal was",
"href": "#"
},
{
"link": "klicken & lesen",
"href": "#"
},
{
"link": "Alle 27 Programme",
"href": "#",
"bold": true
}
]
},
{
"link": "Forschung",
"href": "#",
"level3": [
{
"link": "Verantwortliche Künstliche Intelligenz",
"href": "#"
},
{
"link": "Coaching 4 Future",
"href": "#"
},
{
"link": "Empowerment-Tag für Wissenschaftlerinnen",
"href": "#"
},
{
"link": "forschungstag",
"href": "#"
},
{
"link": "Alle 36 Programme",
"href": "#",
"bold": true
}
]
},
{
"link": "Gesellschaft & Kultur",
"href": "#",
"level3": [
{
"link": "Smart ohne Phone",
"href": "#"
},
{
"link": "Kulturakademie Baden-Würtemberg",
"href": "#"
},
{
"link": "Minderjährige Zukunftsakademie Baden-Württemberg",
"href": "#"
},
{
"link": "Lehrpreis der Stiftung Kinderland",
"href": "#"
},
{
"link": "Alle 53 Programme",
"href": "#",
"bold": true
}
]
}
]
},
{
"link": "Ausschreibungen",
"href": "#"
},
{
"link": "Magazin Perspektiven",
"href": null,
"navigationsTeaser": "navigation-teaser--magazine",
"subMenuStyle": "teaser",
"level2": [
{
"image": "/images/1044x550.jpg",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
},
{
"image": "/images/1044x550.jpg",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
},
{
"image": "/images/1044x550.jpg",
"kicker": "Dossier",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
},
{
"image": "/images/1044x550.jpg",
"kicker": "Dossier",
"link": "Ich bin der Titel einer Story aus dem Magazin",
"href": "#",
"alt": "Ich bin der Titel einer Story aus dem Magazin"
}
]
}
]
},
"badge": {
"path": "/images/header-badge-logo.svg",
"link": null,
"alt": "Baden-Württemberg Stiftung, wir stiften Zukunft",
"width": 100,
"height": 44
}
}