<header class="header">
  <div class="top-bar">
    <div class="container-fluid top-bar__container"><a href="#">
        <div class="top-bar__logo"><img src="./Images/dzne_logo.svg"/></div></a>
      <div class="top-bar__container only-mobile">
        <div class="top-bar__container__mobile-languages"><a class="active" href="#">DE</a>&nbsp;<a href="#">EN</a></div>
        <div class="top-bar__container__menu-toggle only-mobile" data-toggle="collapse" data-target="#navbarMobile" aria-controls="navbarMobile" aria-expanded="false" aria-label="Navigation"><i class="fal fa-bars open"></i><i class="fal fa-times close"></i></div>
      </div>
      <nav class="top-bar__navigation navigation__main only-desktop">
        <ul class="navigation__main__nav">
          <li class="navigation__main__nav__item"><a href="#">Forschung</a>
            <div class="navigation__main__nav__item__sub navigation--dropdown theme--grey">
              <ul class="navigation--dropdown__nav">
                <li class="navigation--dropdown__nav__item has-dropdown"><a href="#">Forschungsbereiche</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Forschungsgruppen</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Studien</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Brain Bank</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Core Facilities</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Defeat PD</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Neuroimaging</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">PRECISE</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Kooperationen</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Publikationen</a></li>
              </ul>
            </div>
          </li>
          <li class="navigation__main__nav__item"><a href="#">Aktuelles</a>
            <div class="navigation__main__nav__item__sub navigation--dropdown theme--grey">
              <ul class="navigation--dropdown__nav">
                <li class="navigation--dropdown__nav__item"><a href="#">Veranstaltungen</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Presse</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Im Fokus</a></li>
              </ul>
            </div>
          </li>
          <li class="navigation__main__nav__item"><a href="#">Spenden</a></li>
          <li class="navigation__main__nav__item"><a href="#">&Uuml;ber uns</a>
            <div class="navigation__main__nav__item__sub navigation--dropdown theme--grey">
              <ul class="navigation--dropdown__nav">
                <li class="navigation--dropdown__nav__item"><a href="#">Vorstand</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Standorte</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Administration</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Organisation</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Technologietransfer</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Betriebsrat</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Beauftragter f&uuml;r Medizinproduktesicherheit</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Ausschreibungen / Ver&ouml;ffentlichungen</a></li>
                <li class="navigation--dropdown__nav__item"><a href="#">Info-Hotline</a></li>
              </ul>
            </div>
          </li>
          <li class="navigation__main__nav__item navigation__main__nav__item--external"><a href="#">Karriere</a></li>
        </ul>
      </nav>
      <div class="top-bar__right only-desktop">
        <div class="top-bar__right__languages"><a class="active" href="#">DE</a><a href="#">EN</a></div>
        <div class="top-bar__right__search">
          <form class="search-bar" action=""><span class="search-trigger" id="search-trigger"><i class="fal fa-search"></i></span>
            <input class="search-bar__input" id="search-input" type="search" name="search" required=""/>
            <input class="search-bar__button search-btn" type="submit"/>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="header__image"><img src="Images/startseite_header.jpg"/></div>
  <!-- Header Teaser final START-->
  <div class="container-fluid">
    <div class="header__teaser">
      <div class="header__teaser__keywords"><span class="header__teaser__keyword"><a href="#">Demenz</a></span><span class="header__teaser__keyword">Parkinson</span><span class="header__teaser__keyword"><a href="#">ALS</a></span></div>
      <div class="header__teaser__headline">
        <h1>Neurodegenerative Erkrankungen</h1><span>verstehen, Ursachen entschl&uuml;sseln, Therapien entwickeln</span>
      </div>
    </div>
  </div>
  <!-- Header Teaser final END-->
  <nav class="top-bar__navigation-mobile only-mobile">
    <div class="top-bar__navigation-mobile--wrapper navigation-mobile__main">
      <ul class="navigation-mobile__main__nav">
        <li class="navigation-mobile__main__nav__item"><a href="#">Forschung</a>
          <div class="navigation-mobile__main__nav__item__sub navigation-mobile--dropdown theme--grey">
            <ul class="navigation-mobile--dropdown__nav">
              <li class="navigation-mobile--dropdown__nav__item has-dropdown"><a href="#">&Uuml;bersicht</a></li>
              <li class="navigation-mobile--dropdown__nav__item has-dropdown"><a href="#">Forschungsbereiche</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Forschungsgruppen</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Studien</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Brain Bank</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Core Facilities</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Defeat PD</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Neuroimaging</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">PRECISE</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Kooperationen</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Publikationen</a></li>
            </ul>
          </div>
        </li>
        <li class="navigation-mobile__main__nav__item"><a href="#">Aktuelles</a>
          <div class="navigation-mobile__main__nav__item__sub navigation-mobile--dropdown theme--grey">
            <ul class="navigation-mobile--dropdown__nav">
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Veranstaltungen</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Presse</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Im Fokus</a></li>
            </ul>
          </div>
        </li>
        <li class="navigation-mobile__main__nav__item"><a href="#">Spenden</a></li>
        <li class="navigation-mobile__main__nav__item"><a href="#">&Uuml;ber uns</a>
          <div class="navigation-mobile__main__nav__item__sub navigation-mobile--dropdown theme--grey">
            <ul class="navigation-mobile--dropdown__nav">
              <li class="navigation-mobile--dropdown__nav__item has-dropdown"><a href="#">&Uuml;bersicht</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Vorstand</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Standorte</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Administration</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Organisation</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Technologietransfer</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Betriebsrat</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Beauftragter f&uuml;r Medizinproduktesicherheit</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Ausschreibungen / Ver&ouml;ffentlichungen</a></li>
              <li class="navigation-mobile--dropdown__nav__item"><a href="#">Info-Hotline</a></li>
            </ul>
          </div>
        </li>
        <li class="navigation-mobile__main__nav__item navigation-mobile__main__nav__item--external"><a href="#">Karriere</a></li>
        <li class="navigation-mobile__main__nav__item navigation-mobile__main__nav__item--search">
          <div class="navigation-mobile__main__nav__item__search">
            <form class="search-bar-mobile" action=""><span class="search-trigger" id="search-trigger"><i class="fal fa-search"></i></span>
              <input class="search-bar-mobile__input" id="search-input" type="search" name="search" placeholder="Suchbegriff eingeben…"/>
              <input class="search-bar-mobile__button search-btn" type="submit"/>
            </form>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header>