<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&shy;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><a class="cta-link cta-link--right header__meta-login" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Login</span><span class="cta-link__icon"><svg class="icon icon--login" viewBox="0 0 200 200">
  <use xlink:href="#icon-login"></use>
</svg></span></a>
    <nav class="header__user-nav header__meta-user-nav" id="user-nav" aria-labelledby="user-nav-toggle"><button class="header__user-nav__toggle" type="button" aria-expanded="false" aria-controls="user-nav"><svg class="icon icon--person header__user-nav-toggle-icon" viewBox="0 0 200 200">
          <use xlink:href="#icon-person"></use>
        </svg><span class="header__user-nav-toggle-text">Max Mustermann</span></button>
      <ul class="header__user-nav__ul">
        <li class="header__user-nav__li"><a class="header__user-nav__a" href="#">
            <div class="header__user-nav__a__text">Übersicht</div><svg class="icon icon--house" viewBox="0 0 200 200">
              <use xlink:href="#icon-house"></use>
            </svg>
          </a></li>
        <li class="header__user-nav__li"><a class="header__user-nav__a" href="#">
            <div class="header__user-nav__a__text">Profil bearbeiten</div><svg class="icon icon--settings" viewBox="0 0 200 200">
              <use xlink:href="#icon-settings"></use>
            </svg>
          </a></li>
        <li class="header__user-nav__li"><a class="header__user-nav__a" href="#">
            <div class="header__user-nav__a__text">Downloads</div>
          </a></li>
        <li class="header__user-nav__li"><a class="header__user-nav__a" href="#">
            <div class="header__user-nav__a__text">Meine Klassen</div>
          </a></li>
        <li class="header__user-nav__li"><a class="header__user-nav__a" href="#">
            <div class="header__user-nav__a__text">Logout</div><svg class="icon icon--login" viewBox="0 0 200 200">
              <use xlink:href="#icon-login"></use>
            </svg>
          </a></li>
      </ul>
    </nav>
  </div>
  <div class="header__inner">
    <div class="header__logo-wrap">
      <div class="header__logo"><a class="logo" href="#"><img class="logo__image" src="/images/c4f/logo-sw.svg" width="200" height="64" alt="Coaching4Future" /></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"><button class="button button--primary toggle-karrierenavigator" type="button"><span class="button__text">Karrierenavigator</span></button></div><button class="karrierenavigator button button--primary">Karrierenavigator öffnen</button><br /><br /><button class="karrierenavigator link">Karrierenavigator öffnen</button>
        <div id="karrierenavigator" data-dialogopen="1" data-debug="1" data-user="f4aff22e-5b5d-4752-b412-30a75c232e00" data-mockdata="1"></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-942a-title">
                <title id="icon-942a-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-8e97-title">
                      <title id="icon-8e97-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-e689-title">
                    <title id="icon-e689-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-ef07" aria-controls="menu-ff8b" 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-0e62-title">
                  <title id="icon-0e62-title">chevron-down</title>
                  <use xlink:href="#icon-chevron-down"></use>
                </svg></button>
              <div class="header__navigation-submenu header__navigation-level-2" id="menu-ff8b">
                <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-c4db-title">
                      <title id="icon-c4db-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="#">Submenü 1<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3228-title">
                        <title id="icon-3228-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-6758-title">
                            <title id="icon-6758-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> Submenü 1</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="#">Lorem ipsum</a></li>
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Lorem ipsum</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="#">Submenü 2<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3f67-title">
                        <title id="icon-3f67-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-e15c-title">
                            <title id="icon-e15c-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> Submenü 2</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="#">Lorem ipsum</a></li>
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Lorem ipsum</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="#">Submenü 3<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-df19-title">
                        <title id="icon-df19-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-98e1-title">
                            <title id="icon-98e1-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> Submenü 3</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="#">Lorem ipsum</a></li>
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Lorem ipsum</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--c4f-blue-light">
                      <div class="navigation-teaser__inner">
                        <div class="navigation-teaser__content">
                          <p class="headline headline--1 navigation-teaser__headline">Lorem ipsum dolor</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">Link-Text</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-4349" aria-controls="menu-c80d" aria-expanded="false" aria-haspopup="true" type="button">Module<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-dac3-title">
                  <title id="icon-dac3-title">chevron-down</title>
                  <use xlink:href="#icon-chevron-down"></use>
                </svg></button>
              <div class="header__navigation-submenu header__navigation-level-2" id="menu-c80d">
                <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-0777-title">
                      <title id="icon-0777-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> Module</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" href="#">Berufsorientierung MINT</a>
                    <div class="header__navigation-level-2-li-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.<a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Zum Modul</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><!-- 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="#">Discover Industry</a>
                    <div class="header__navigation-level-2-li-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.<a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Zum Modul</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><!-- 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="#">Expedition d</a>
                    <div class="header__navigation-level-2-li-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.<a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Zum Modul</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><!-- 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="#">Coaching Teams</a>
                    <div class="header__navigation-level-2-li-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.<a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Zum Modul</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><!-- default style-->
                  </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--c4f-blue-light">
                      <div class="navigation-teaser__inner">
                        <div class="navigation-teaser__content">
                          <p class="headline headline--1 navigation-teaser__headline">Lorem ipsum dolor</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">Link-Text</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-8443" aria-controls="menu-e31f" aria-expanded="false" aria-haspopup="true" type="button">MINT-Karriere<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-48b8-title">
                  <title id="icon-48b8-title">chevron-down</title>
                  <use xlink:href="#icon-chevron-down"></use>
                </svg></button>
              <div class="header__navigation-submenu header__navigation-level-2" id="menu-e31f">
                <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-0a25-title">
                      <title id="icon-0a25-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> MINT-Karriere</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="#">Submenü 1<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-104c-title">
                        <title id="icon-104c-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-eca4-title">
                            <title id="icon-eca4-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> Submenü 1</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="#">Lorem ipsum</a></li>
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Lorem ipsum</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="#">Submenü 2<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-2012-title">
                        <title id="icon-2012-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-97b2-title">
                            <title id="icon-97b2-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> Submenü 2</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="#">Lorem ipsum</a></li>
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Lorem ipsum</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="#">Submenü 3<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-487d-title">
                        <title id="icon-487d-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-6f68-title">
                            <title id="icon-6f68-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> Submenü 3</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="#">Lorem ipsum</a></li>
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Lorem ipsum</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--c4f-blue-light">
                      <div class="navigation-teaser__inner">
                        <div class="navigation-teaser__content">
                          <p class="headline headline--1 navigation-teaser__headline">Lorem ipsum dolor</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">Link-Text</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>
          </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-4111-title">
              <title id="icon-4111-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ärden­sprache",
        "icon": "gebaerdesprache"
      }
    ],
    "login": {
      "text": "Login",
      "icon": "login"
    },
    "user": {
      "name": "Max Mustermann",
      "nav": [
        {
          "text": "Übersicht",
          "icon": "house",
          "link": "#"
        },
        {
          "text": "Profil bearbeiten",
          "icon": "settings",
          "link": "#"
        },
        {
          "text": "Downloads",
          "link": "#"
        },
        {
          "text": "Meine Klassen",
          "link": "#"
        },
        {
          "text": "Logout",
          "icon": "login",
          "link": "#"
        }
      ]
    }
  },
  "navigation": {
    "level1": [
      {
        "link": "Programm",
        "href": null,
        "navigationsTeaser": "navigation-teaser--fancy-font",
        "navigationsTeaserContent": {
          "color": "c4f-blue-light",
          "title": "Lorem ipsum dolor",
          "ctaLink": {
            "link": "#",
            "text": "Link-Text",
            "icon": "chevron-right"
          }
        },
        "level2": [
          {
            "link": "Submenü 1",
            "href": "#",
            "level3": [
              {
                "link": "Lorem ipsum",
                "href": "#"
              },
              {
                "link": "Lorem ipsum",
                "href": "#"
              }
            ]
          },
          {
            "link": "Submenü 2",
            "href": "#",
            "level3": [
              {
                "link": "Lorem ipsum",
                "href": "#"
              },
              {
                "link": "Lorem ipsum",
                "href": "#"
              }
            ]
          },
          {
            "link": "Submenü 3",
            "href": "#",
            "level3": [
              {
                "link": "Lorem ipsum",
                "href": "#"
              },
              {
                "link": "Lorem ipsum",
                "href": "#"
              }
            ]
          }
        ]
      },
      {
        "link": "Module",
        "href": null,
        "navigationsTeaser": "navigation-teaser--fancy-font",
        "navigationsTeaserContent": {
          "color": "c4f-blue-light",
          "title": "Lorem ipsum dolor",
          "ctaLink": {
            "link": "#",
            "text": "Link-Text",
            "icon": "chevron-right"
          }
        },
        "level2": [
          {
            "link": "Berufsorientierung MINT",
            "href": "#",
            "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.",
            "ctaLink": {
              "href": "#",
              "text": "Zum Modul"
            }
          },
          {
            "link": "Discover Industry",
            "href": "#",
            "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.",
            "ctaLink": {
              "href": "#",
              "text": "Zum Modul"
            }
          },
          {
            "link": "Expedition d",
            "href": "#",
            "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.",
            "ctaLink": {
              "href": "#",
              "text": "Zum Modul"
            }
          },
          {
            "link": "Coaching Teams",
            "href": "#",
            "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.",
            "ctaLink": {
              "href": "#",
              "text": "Zum Modul"
            }
          }
        ]
      },
      {
        "link": "MINT-Karriere",
        "href": null,
        "navigationsTeaser": "navigation-teaser--fancy-font",
        "navigationsTeaserContent": {
          "color": "c4f-blue-light",
          "title": "Lorem ipsum dolor",
          "ctaLink": {
            "link": "#",
            "text": "Link-Text",
            "icon": "chevron-right"
          }
        },
        "level2": [
          {
            "link": "Submenü 1",
            "href": "#",
            "level3": [
              {
                "link": "Lorem ipsum",
                "href": "#"
              },
              {
                "link": "Lorem ipsum",
                "href": "#"
              }
            ]
          },
          {
            "link": "Submenü 2",
            "href": "#",
            "level3": [
              {
                "link": "Lorem ipsum",
                "href": "#"
              },
              {
                "link": "Lorem ipsum",
                "href": "#"
              }
            ]
          },
          {
            "link": "Submenü 3",
            "href": "#",
            "level3": [
              {
                "link": "Lorem ipsum",
                "href": "#"
              },
              {
                "link": "Lorem ipsum",
                "href": "#"
              }
            ]
          }
        ]
      }
    ]
  },
  "light": true,
  "logo": {
    "path": "/images/c4f/logo-sw.svg",
    "pathLight": null,
    "link": "#",
    "alt": "Coaching4Future",
    "width": 200,
    "height": 64
  },
  "karrierenavigator": true,
  "button": {
    "text": "Karrierenavigator",
    "link": null,
    "attr": {
      "class": "toggle-karrierenavigator"
    }
  }
}