HTML-Prototype von DZNE

<div class="page-container">
  <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" alt="Logo Deutsches Zentrum für Neurodegenerative Erkrankungen e. V."/></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" role="button"><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"><a href="#">Forschungsbereiche</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Forschende</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Studien</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Probandeninformation</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Brain Bank</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Projekte</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Wissenschaftliche Services</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Publikationen</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Office of Scientific Integrity</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="#">Faktenzentrale</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Podcast</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Hintergrundwissen</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Veranstaltungen</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="#">Organisation</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Compliance</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Standorte</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Forschung und Gesellschaft</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Preise und Auszeichnungen</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Technologietransfer</a></li>
                  <li class="navigation--dropdown__nav__item"><a href="#">Kooperationen</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>
                </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--top">
            <div class="top-bar__right__accessibility"><a href="#">
                <svg class="svg-inline--fa fa-sign-language fa-w-14" height="22" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="sign-language" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
                  <path fill="currentColor" d="M447.971 255.391l-4.467-138.16c-1.57-48.503-65.102-66.816-91.36-24.961l-55.919-72.891C286.778 7.064 272.495.001 257.039 0c-15.93-.001-30.091 7.625-39.007 19.206-35.993-16.888-76.766 13.785-69.427 54.289-30.125 13.048-39.039 51.157-19.364 76.804l4.816 6.277c-25.733 14.752-33.109 49.561-14.534 73.773l8.418 10.973h-52.92c-32.727 0-55.982 31.248-47.933 62.349C11.542 311.644.374 327.898.01 347.221c-.371 19.654 10.668 36.491 26.55 44.946-8.624 32.448 16.301 62.869 48.328 62.869h7.246C77.853 485.01 100.941 512 131.143 512h95.892c11.305 0 22.617-1.333 33.62-3.96l71.85-17.159c24.568-5.867 42.026-28.037 42.026-53.589V342.06l52.546-41.529c13.648-10.787 21.459-27.662 20.894-45.14zm-334.334 207.07c-.091-4.771 1.736-9.31 5.145-12.782 3.457-3.524 8.026-5.465 12.865-5.465h55.619a8 8 0 0 0 8-8v-5.178a8 8 0 0 0-8-8H74.887c-23.423 0-24.037-35.786-.504-35.786h112.883a8 8 0 0 0 8-8v-5.179a8 8 0 0 0-8-8H50.014c-23.426 0-24.034-35.785-.504-35.785h137.756a8 8 0 0 0 8-8v-5.179a8 8 0 0 0-8-8H75.525c-23.429 0-24.033-35.786-.504-35.786h150.505c7.685 0 10.959-9.854 4.751-14.437l-27.755-20.486c-19.135-14.124 2.039-42.644 20.507-29.008l110.145 81.305c5.859 4.325 9.357 11.312 9.357 18.691V437.29c0 10.771-7.18 20.01-17.459 22.465l-71.85 17.159a112.86 112.86 0 0 1-26.187 3.085h-95.893c-9.47.001-17.323-7.866-17.505-17.538zm59.145-273.264l7.578 9.878c-11.571 15.417-10.662 36.638 1.045 50.996h-6.421l-30.072-39.2c-14.556-18.97 13.442-40.482 27.87-21.674zm174.094 82.761l-110.144-81.304c-11.634-8.586-26.841-10.128-39.76-4.64l-42.344-55.195c-14.408-18.782 12.669-41.491 27.252-22.479l69.353 90.401a7.995 7.995 0 0 0 5.36 3.069 7.983 7.983 0 0 0 5.948-1.662l4.025-3.182a8.001 8.001 0 0 0 1.387-11.146L183.63 75.904c-14.411-18.788 12.672-41.488 27.251-22.481l84.634 110.321a7.995 7.995 0 0 0 5.36 3.069 7.983 7.983 0 0 0 5.948-1.662l4.025-3.182a8.001 8.001 0 0 0 1.387-11.146l-68.651-89.487c-14.396-18.768 12.642-41.525 27.251-22.481l92.467 120.532a8.001 8.001 0 0 0 14.344-5.128l-1.126-34.813c-.784-24.211 34.249-24.39 35-1.182l4.468 138.16c.239 7.377-3.033 14.479-8.753 19l-41.574 32.858c-.341-14.339-7.308-27.851-18.785-36.324z"></path>
                </svg></a><a href="#">
                <svg class="svg-inline--fa fa-book-reader fa-w-16" height="22" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="book-reader" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
                  <path fill="currentColor" d="M459.91 192.02c-.7 0-1.39.02-2.06.05-49.8 2.84-140.51 13-201.84 47.57-61.33-34.57-152.05-44.73-201.84-47.57-.67-.04-1.36-.05-2.06-.05C31.71 192.01 0 206.36 0 242.22v178.05c0 26.69 21.25 48.7 48.34 50.12 34.41 1.81 120.56 9.08 177 37.47 4.68 2.37 9.66 3.5 14.66 3.84v.27h2.27c.09 0 .18.03.26.03h26.94c.09 0 .18-.03.26-.03H272v-.27c5-.34 9.98-1.48 14.66-3.84 56.44-28.39 142.59-35.65 177-37.47 27.09-1.42 48.34-23.44 48.34-50.12V242.22c0-35.86-31.71-50.2-52.09-50.2zM240 479.35c-.09-.04-.18-.02-.28-.07-59.59-29.97-144.43-38.45-189.7-40.84-10.1-.53-18.02-8.51-18.02-18.17V242.22c0-6.05 1.77-10 5.93-13.2 4.47-3.44 10.47-5.01 14.4-5.01 37.01 2.11 129.27 10.58 187.67 43.36v211.98zm240-59.08c0 9.66-7.92 17.64-18.03 18.17-45.27 2.38-130.11 10.86-189.76 40.87-.07.04-.14.02-.22.05V267.37c58.39-32.79 150.66-41.25 187.51-43.35l.39-.01c.2 0 20.09.49 20.09 18.21v178.05zM256 191.99c53.02 0 96-42.98 96-95.99S309.02 0 256 0s-96 42.98-96 95.99 42.98 96 96 96zM256 32c35.29 0 64 28.71 64 64s-28.71 64-64 64-64-28.71-64-64 28.71-64 64-64z"></path>
                </svg></a></div>
            <div class="top-bar__right__languages"><a class="active" href="#">DE</a>&nbsp;<a href="#">EN</a></div>
          </div>
          <div class="top-bar__right__search">
            <form class="search-bar" action="/suche/" name="xajax_form_kesearch_pi1" method="get"><span class="search-trigger"><i class="fal fa-search"></i></span>
              <input class="search-bar__input" type="search" name="tx_kesearch_pi1[sword]" required=""/>
              <input class="search-bar__button search-btn searchsubmit" type="submit"/>
              <input type="hidden" value="1" name="tx_kesearch_pi1[page]"/>
              <input type="hidden" value="0" name="tx_kesearch_pi1[resetFilters]"/>
              <input type="hidden" value="" name="tx_kesearch_pi1[sortByField]"/>
              <input type="hidden" value="asc" name="tx_kesearch_pi1[sortByDir]"/>
              <input type="hidden" name="id" value="52"/>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="header__animated-header"><img class="header__image-non-animated" src="Images/header/header-full.jpeg" width="5600" height="3147" alt="#" loading="lazy"/><img class="header__image-animated-background" src="Images/header/header-neuron-background.png" width="5600" height="3147" alt="#" loading="lazy"/><img class="header__image-animated-foreground" src="Images/header/header-neuron.png" width="5600" height="3147" alt="#" loading="lazy"/>
      <hgroup class="header__content">
        <h2 class="header__content-title">Neurodegenerative Erkrankungen</h2>
        <p class="header__content-description">verstehen, Ursachen entschlüsseln, Therapien entwickeln</p>
      </hgroup>
      <ul class="header__quicklinks">
        <li class="header__quicklinks__item">Alzheimer</li>
        <li class="header__quicklinks__item">Parkinson</li>
        <li class="header__quicklinks__item">ALS</li>
        <li class="header__quicklinks__item">Huntington</li>
        <li class="header__quicklinks__item">FTD</li>
        <li class="header__quicklinks__item">Ataxie</li>
        <li class="header__quicklinks__item">Kinderdemenz</li>
      </ul>
    </div>
    <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="#">Übersicht</a></li>
                <li class="navigation-mobile--dropdown__nav__item has-dropdown"><a href="#">Forschungsbereiche</a></li>
                <li class="navigation-mobile--dropdown__nav__item active"><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="#">Ü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="#">Ü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ür Medizinproduktesicherheit</a></li>
                <li class="navigation-mobile--dropdown__nav__item"><a href="#">Ausschreibungen / Verö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>
  <main class="maincontent">
    <div class="content-wrap-subpage">
      <div class="container-fluid content-wrap">
        <div class="row">
          <div class="col-12">
            <div class="frame-type-dzne_carousel">
              <header>
                <h2>Service für Medienschaffende</h2>
              </header>
              <div class="c-carousel" data-slider="carouselslider">
                <div class="c-carousel__navigation" data-slider="carouselnavigation">
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/237/300/300"/>
                      <div class="c-carousel__tiletitle">Ansprechpartner</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/54/300/300"/>
                      <div class="c-carousel__tiletitle">Neurodegenerative Erkrankungen &amp; Forschungsbereiche</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/1053/300/300"/>
                      <div class="c-carousel__tiletitle">Social Media</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/655/300/300"/>
                      <div class="c-carousel__tiletitle">Lorem</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/1055/300/300"/>
                      <div class="c-carousel__tiletitle">porttitor</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/106/300/300"/>
                      <div class="c-carousel__tiletitle">fringilla</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/1062/300/300"/>
                      <div class="c-carousel__tiletitle">consectetuer</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/1067/300/300"/>
                      <div class="c-carousel__tiletitle">Phasellus</div>
                    </div>
                  </div>
                </div>
                <div class="c-carousel__slider" data-slider="carouselitems">
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">Ansprechpartner</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">Neurodegenerative Erkrankungen &amp; Forschungsbereiche</h3>
                        <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">Social Media</h3>
                        <p>Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">Lorem</h3>
                        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">porttitor</h3>
                        <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">fringilla</h3>
                        <p>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">consectetuer</h3>
                        <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">Phasellus</h3>
                        <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="frame-type-dzne_carousel">
              <header>
                <h2>Service für Medienschaffende</h2>
              </header>
              <div class="c-carousel" data-slider="carouselslider">
                <div class="c-carousel__navigation" data-slider="carouselnavigation">
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/200/300/300"/>
                      <div class="c-carousel__tiletitle">Ansprechpartner</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/54/300/300"/>
                      <div class="c-carousel__tiletitle">Neurodegenerative Erkrankungen &amp; Forschungsbereiche</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/1053/300/300"/>
                      <div class="c-carousel__tiletitle">Social Media</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/655/300/300"/>
                      <div class="c-carousel__tiletitle">Lorem</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/1055/300/300"/>
                      <div class="c-carousel__tiletitle">porttitor</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/106/300/300"/>
                      <div class="c-carousel__tiletitle">fringilla</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/1062/300/300"/>
                      <div class="c-carousel__tiletitle">consectetuer</div>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__tile"><img src="https://picsum.photos/id/1067/300/300"/>
                      <div class="c-carousel__tiletitle">Phasellus</div>
                    </div>
                  </div>
                </div>
                <div class="c-carousel__slider" data-slider="carouselitems">
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">Ansprechpartner</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">Neurodegenerative Erkrankungen &amp; Forschungsbereiche</h3>
                        <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">Social Media</h3>
                        <p>Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">Lorem</h3>
                        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">porttitor</h3>
                        <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">fringilla</h3>
                        <p>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">consectetuer</h3>
                        <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                  <div>
                    <div class="c-carousel__contentwrap">
                      <div class="c-carousel__content">
                        <h3 class="c-carousel__title">Phasellus</h3>
                        <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                      </div><a class="c-carousel__link" href="#"><i class="fa fa-arrow-right"></i>Sprechen Sie uns gerne an!</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer class="footer">
    <nav class="footer__navigation">
      <ul class="footer__navigation__items">
        <li class="footer__navigation__items__item"><a href="#">Kontakt</a></li>
        <li class="footer__navigation__items__item"><a href="#">Impressum</a></li>
        <li class="footer__navigation__items__item"><a href="#">Datenschutz</a></li>
      </ul>
    </nav>
    <div class="footer__bottomline">
      <div class="container-fluid footer__bottomline__container">
        <div class="footer__bottomline__icons">
          <div class="footer__bottomline__icons__icon"><a href="#"><img src="Images/logo_helmholtz.svg" width="736" height="100" alt="#"/></a></div>
          <div class="footer__bottomline__icons__icon"><a href="#"><img src="Images/logo_dzg.png" alt=""/></a></div>
        </div>
      </div>
    </div>
  </footer>
</div>