Header @header

Design

Header KI Garage @header--kig

<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>
  </div>
  <div class="header__inner">
    <div class="header__logo-wrap">
      <div class="header__logo"><a class="logo" href="#"><img class="logo__image" src="/images/kig/logo.svg" width="190" height="114" alt="KI Garage" /></a></div>
    </div><button class="header__mobile-menu-trigger" type="button" aria-controls="header-navigation" aria-label="Menü Öffnen"><span></span></button>
    <div class="header__navigation" id="header-navigation">
      <div class="header__navigation-inner header__navigation--level-1">
        <div class="header__button"><a class="button button--primary" href="#"><span class="button__text">Accelerator</span></a></div>
        <nav class="language-nav">
          <ul class="language-nav__ul">
            <li class="language-nav__li"><a class="language-nav__li__a" href="#"><svg class="icon icon--dropdown" viewBox="0 0 200 200">
                  <use xlink:href="#icon-dropdown"></use>
                </svg><img class="language-nav__li__a__flag" src="/images/stip/flag-de.png" alt="DE" /><span class="language-nav__li__a__text">DE</span></a></li>
            <li class="language-nav__li"><a class="language-nav__li__a" href="#"><img class="language-nav__li__a__flag" src="/images/stip/flag-en.png" alt="EN" /><span class="language-nav__li__a__text">EN</span></a></li>
          </ul>
        </nav>
        <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-b303" aria-controls="menu-21a9" aria-expanded="false" aria-haspopup="true" type="button">Lorem ipsum 1<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-9d9c-title">
                  <title id="icon-9d9c-title">chevron-down</title>
                  <use xlink:href="#icon-chevron-down"></use>
                </svg></button>
              <div class="header__navigation-submenu header__navigation-level-2" id="menu-21a9">
                <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-f378-title">
                      <title id="icon-f378-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> Lorem ipsum 1</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-074c-title">
                        <title id="icon-074c-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-9e1c-title">
                            <title id="icon-9e1c-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-bc0f-title">
                        <title id="icon-bc0f-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-9fe8-title">
                            <title id="icon-9fe8-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-bce8-title">
                        <title id="icon-bce8-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-e4f8-title">
                            <title id="icon-e4f8-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--kig-yellow-50">
                      <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-18d2" aria-controls="menu-4908" aria-expanded="false" aria-haspopup="true" type="button">Lorem ipsum 2<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1de8-title">
                  <title id="icon-1de8-title">chevron-down</title>
                  <use xlink:href="#icon-chevron-down"></use>
                </svg></button>
              <div class="header__navigation-submenu header__navigation-level-2" id="menu-4908">
                <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-4a42-title">
                      <title id="icon-4a42-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> Lorem ipsum 2</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-8a35-title">
                        <title id="icon-8a35-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-8ab3-title">
                            <title id="icon-8ab3-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-4fd4-title">
                        <title id="icon-4fd4-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-a266-title">
                            <title id="icon-a266-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-989d-title">
                        <title id="icon-989d-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-d267-title">
                            <title id="icon-d267-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--kig-yellow-50">
                      <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-ae83" aria-controls="menu-a30e" aria-expanded="false" aria-haspopup="true" type="button">Lorem ipsum 3<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3eac-title">
                  <title id="icon-3eac-title">chevron-down</title>
                  <use xlink:href="#icon-chevron-down"></use>
                </svg></button>
              <div class="header__navigation-submenu header__navigation-level-2" id="menu-a30e">
                <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-6a85-title">
                      <title id="icon-6a85-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> Lorem ipsum 3</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-1691-title">
                        <title id="icon-1691-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-34bf-title">
                            <title id="icon-34bf-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-a655-title">
                        <title id="icon-a655-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-36eb-title">
                            <title id="icon-36eb-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-9cb3-title">
                        <title id="icon-9cb3-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-700a-title">
                            <title id="icon-700a-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--kig-yellow-50">
                      <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-da1f-title">
              <title id="icon-da1f-title">List</title>
              <use xlink:href="#icon-close"></use>
            </svg></button></div>
      </div>
    </div>
  </div>
</header>