HTML-Prototype von Hochschule RheinMain

<insert-markup>10.1-</insert-markup>
Skip to Content
Alt Text

Header with image and content

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?

At vero eos et accusam et justo duo!

Jetzt orientieren
Alt Text
Teaser with image aligned right

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?

mehr erfahren
Teaser without image aligned left

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?

mehr erfahren
Alt Text
Teaser with image aligned right

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?

mehr erfahren
Markup: templates/output/fullpage/startpage.html
<a class="u-skip-link btn btn--right-link" href="#content">Skip to Content</a>
<div class="page">
  <div class="c-page-header-wrapper">
    <div class="c-page-banner">
            <nav class="c-target-navigation" aria-label="Zielgruppen-Navigation">
              <details class="c-target-navigation__item">
                <summary>Informationen für</summary>
                <div class="c-target-navigation__item-content">
                  <ul class="o-list-bare">
                    <li><a href="#">List Item 1</a></li>
                    <li><a href="#">List Item 2</a></li>
                  </ul>
                </div>
              </details>
              <details class="c-target-navigation__item">
                <summary>Fachbereiche</summary>
                <div class="c-target-navigation__item-content">
                  <ul class="o-list-bare">
                    <li><a href="#">List Item 1</a></li>
                    <li><a href="#">List Item 2</a></li>
                    <li><a href="#">List Item 3</a></li>
                    <li><a href="#">List Item 4</a></li>
                    <li><a href="#">List Item 5</a></li>
                  </ul>
                </div>
              </details>
              <details class="c-target-navigation__item">
                <summary>Internen Bereich</summary>
                <div class="c-target-navigation__item-content">
                  <ul class="o-list-bare">
                    <li><a href="#">List Item 1</a></li>
                    <li><a href="#">List Item 2</a></li>
                    <li><a href="#">List Item 3</a></li>
                    <li><a href="#">List Item 4</a></li>
                    <li><a href="#">List Item 5</a></li>
                  </ul>
                </div>
              </details>
            </nav><a class="c-search-button" href="#">Suche</a>
      <ul class="c-language-toggle o-list-bare">
        <li><span aria-current="page">de</span></li>
        <li><a href="/en/">en</a></li>
      </ul>
    </div>
    <div class="c-page-header"><a class="c-page-header__logo-wrapper" href="/" title="Hochschule RheinMain - Startseite">
              <svg class="c-page-header__logo" viewBox="0.37 0.15 86.98 21.48" aria-hidden="true" focusable="false" style="pointer-events: none;" width="140px" height="29px">
                <use xlink:href="/Images/svg/sprite.symbol.svg#hsrm-logo"></use>
              </svg></a>
        <nav class="c-main-navigation" aria-label="Main menu">
          <ul class="c-main-navigation__list o-list-bare">
            <li class="c-main-navigation__list-item">
              <button class="c-main-navigation__link" type="button">Studium</button>
              <div class="c-main-navigation__overlay">
                <button class="c-main-navigation__overlay-close" type="button">
                        <svg class="c-main-navigation__icon--close" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                          <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                        </svg>
                </button>
                <div class="container flex flex--space-between">
                  <div class="flex-md-6 flex__lg-4">
                    <p class="h2">Studium</p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><br/><a class="btn btn--right-link" href="#"><strong>Übersicht Studium</strong></a>
                  </div>
                  <div class="flex-md-6 flex__lg-6 c-main-navigation__nav-wrapper">
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Studiengänge</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Weiterbildung</a></li>
                        <li><a href="#">Studiengangsfinder</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Studienorientierung</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Karrierechancen</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Bewerbung</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Bewerbungsportal</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Studienorganisation</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Finanzierung</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Beratung</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-main-navigation__list-item">
              <button class="c-main-navigation__link" type="button">Forschung</button>
              <div class="c-main-navigation__overlay">
                <button class="c-main-navigation__overlay-close" type="button">
                        <svg class="c-main-navigation__icon--close" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                          <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                        </svg>
                </button>
                <div class="container flex flex--space-between">
                  <div class="flex-md-6 flex__lg-4">
                    <p class="h2">Forschung</p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><br/><a class="btn btn--right-link" href="#"><strong>Übersicht Forschung</strong></a>
                  </div>
                  <div class="flex-md-6 flex__lg-6 c-main-navigation__nav-wrapper">
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Die HSRM in Der Forschung</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Schwerpunkte</a></li>
                        <li><a href="#">Kompetenzen</a></li>
                        <li><a href="#">Praxiskontakte</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Projekte</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Impact</a></li>
                        <li><a href="#">HEFIS</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Transfer</a>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Förderungen &amp; Service</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Impact</a></li>
                        <li><a href="#">HEFIS</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Kooperationspartner &amp; Nachwuchs</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Unternehmen</a></li>
                        <li><a href="#">wissenschaftlicher Nachwuchs</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-main-navigation__list-item">
              <button class="c-main-navigation__link" type="button">Kooperationen</button>
              <div class="c-main-navigation__overlay">
                <button class="c-main-navigation__overlay-close" type="button">
                        <svg class="c-main-navigation__icon--close" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                          <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                        </svg>
                </button>
                <div class="container flex flex--space-between">
                  <div class="flex-md-6 flex__lg-4">
                    <p class="h2">Kooperationen</p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><br/><a class="btn btn--right-link" href="#"><strong>Übersicht Kooperationen</strong></a>
                  </div>
                  <div class="flex-md-6 flex__lg-6 c-main-navigation__nav-wrapper">
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-main-navigation__list-item">
              <button class="c-main-navigation__link" type="button">International</button>
              <div class="c-main-navigation__overlay">
                <button class="c-main-navigation__overlay-close" type="button">
                        <svg class="c-main-navigation__icon--close" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                          <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                        </svg>
                </button>
                <div class="container flex flex--space-between">
                  <div class="flex-md-6 flex__lg-4">
                    <p class="h2">International</p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><br/><a class="btn btn--right-link" href="#"><strong>Übersicht International</strong></a>
                  </div>
                  <div class="flex-md-6 flex__lg-6 c-main-navigation__nav-wrapper">
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-main-navigation__list-item">
              <button class="c-main-navigation__link" type="button">Über Uns</button>
              <div class="c-main-navigation__overlay">
                <button class="c-main-navigation__overlay-close" type="button">
                        <svg class="c-main-navigation__icon--close" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                          <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                        </svg>
                </button>
                <div class="container flex flex--space-between">
                  <div class="flex-md-6 flex__lg-4">
                    <p class="h2">Über Uns</p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><br/><a class="btn btn--right-link" href="#"><strong>Übersicht Über Uns</strong></a>
                  </div>
                  <div class="flex-md-6 flex__lg-6 c-main-navigation__nav-wrapper">
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                    </div>
                    <div class="c-main-navigation__nav-list"><a class="h4" href="#">Navigation Item Level 2</a>
                      <ul class="o-list-bare">
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                        <li><a href="#">Navigation Item Level 3</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </nav>
      <button class="c-main-navigation__button" id="navigation-trigger" type="button" aria-controls="mobile-navigation" aria-expanded="false">
              <svg class="c-main-navigation__icon--open" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="24px" width="24px">
                <use xlink:href="/Images/svg/sprite.symbol.svg#hamburger"></use>
              </svg>
              <svg class="c-main-navigation__icon--close" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="24px" width="24px">
                <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
              </svg><span class="u-visually-hidden">Open Main Navigation</span>
      </button>
    </div>
  </div>
  <div class="c-mobile-navigation__wrapper hidden" id="mobile-navigation">
      <nav class="c-mobile-navigation" aria-label="Main menu">
        <ul class="o-list-bare c-mobile-navigation__list">
          <li class="c-mobile-navigation__list-item">
            <button class="c-mobile-navigation__link" tabindex="-1">Studium</button>
            <ul class="o-list-bare c-mobile-navigation__list hidden">
              <li>
                <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
              </li>
              <li>
                <h2 class="c-mobile-navigation__list-title">Studium</h2>
              </li>
              <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Studium</a></li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Studiengänge</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden active-tree">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Studiengänge</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Studiengänge</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link active-page" href="#" tabindex="-1">Weiterbildung</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Studiengangsfinder</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Studienorientierung</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden active-tree">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Studienorientierung</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Studienorientierung</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Karrierechancen</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Bewerbung</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden active-tree">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Bewerbung</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Bewerbung</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Bewerbungsportal</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Studienorganisation</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden active-tree">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Studienorganisation</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Studienorganisation</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Finanzierung</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Beratung</a>
              </li>
            </ul>
          </li>
          <li class="c-mobile-navigation__list-item">
            <button class="c-mobile-navigation__link" tabindex="-1">Forschung</button>
            <ul class="o-list-bare c-mobile-navigation__list hidden">
              <li>
                <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
              </li>
              <li>
                <h2 class="c-mobile-navigation__list-title">Forschung</h2>
              </li>
              <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Forschung</a></li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Die HSRM in Der Forschung</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Die HSRM in Der Forschung</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Die HSRM in Der Forschung</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Schwerpunkte</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Kompetenzen</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Praxiskontakte</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Projekte</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Projekte</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Projekte</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Impact</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">HEFIS</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Transfer</a>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Förderungen &amp; Service</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Förderungen &amp; Service</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Förderungen &amp; Service</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Impact</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">HEFIS</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Kooperationspartner &amp; Nachwuchs</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Kooperationspartner &amp; Nachwuchs</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Kooperationspartner &amp; Nachwuchs</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Unternehmen</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">wissenschaftlicher Nachwuchs</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="c-mobile-navigation__list-item">
            <button class="c-mobile-navigation__link" tabindex="-1">Kooperationen</button>
            <ul class="o-list-bare c-mobile-navigation__list hidden">
              <li>
                <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
              </li>
              <li>
                <h2 class="c-mobile-navigation__list-title">Kooperationen</h2>
              </li>
              <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Kooperationen</a></li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 2</a>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="c-mobile-navigation__list-item">
            <button class="c-mobile-navigation__link" tabindex="-1">International</button>
            <ul class="o-list-bare c-mobile-navigation__list hidden">
              <li>
                <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
              </li>
              <li>
                <h2 class="c-mobile-navigation__list-title">International</h2>
              </li>
              <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht International</a></li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 2</a>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="c-mobile-navigation__list-item">
            <button class="c-mobile-navigation__link" tabindex="-1">Über Uns</button>
            <ul class="o-list-bare c-mobile-navigation__list hidden">
              <li>
                <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
              </li>
              <li>
                <h2 class="c-mobile-navigation__list-title">Über Uns</h2>
              </li>
              <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Über Uns</a></li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
              <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 2</a>
              </li>
              <li class="c-mobile-navigation__list-item">
                <button class="c-mobile-navigation__link" type="button" tabindex="-1">Navigation Item Level 2</button>
                <ul class="o-list-bare c-mobile-navigation__list hidden">
                  <li>
                    <button class="btn btn--left-link c-mobile-navigation__back-link" tabindex="-1">Zurück</button>
                  </li>
                  <li>
                    <h2 class="c-mobile-navigation__list-title">Navigation Item Level 2</h2>
                  </li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Übersicht Navigation Item Level 2</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                  <li class="c-mobile-navigation__list-item"><a class="c-mobile-navigation__link" href="#" tabindex="-1">Navigation Item Level 3</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    <div class="c-mobile-navigation__bottom">
            <nav class="c-target-navigation" aria-label="Zielgruppen-Navigation">
              <details class="c-target-navigation__item">
                <summary>Informationen für</summary>
                <div class="c-target-navigation__item-content">
                  <ul class="o-list-bare">
                    <li><a href="#">List Item 1</a></li>
                    <li><a href="#">List Item 2</a></li>
                  </ul>
                </div>
              </details>
              <details class="c-target-navigation__item">
                <summary>Fachbereiche</summary>
                <div class="c-target-navigation__item-content">
                  <ul class="o-list-bare">
                    <li><a href="#">List Item 1</a></li>
                    <li><a href="#">List Item 2</a></li>
                  </ul>
                </div>
              </details>
              <details class="c-target-navigation__item">
                <summary>Internen Bereich</summary>
                <div class="c-target-navigation__item-content">
                  <ul class="o-list-bare">
                    <li><a href="#">List Item 1</a></li>
                    <li><a href="#">List Item 2</a></li>
                    <li><a href="#">List Item 3</a></li>
                  </ul>
                </div>
              </details>
            </nav><a class="c-search-button" href="#">Suche</a>
      <ul class="c-language-toggle o-list-bare">
        <li><span aria-current="page">de</span></li>
        <li><a href="/en/">en</a></li>
      </ul>
    </div>
  </div>
    <div class="c-header  ">
      <div class="container c-header__container">
        <div class="c-header__media-wrapper">
          <picture>
            <source srcset="https://placeholder.in2code.de/1200x675" media="(min-width:800px)"/>
            <source srcset="https://placeholder.in2code.de/8004500" media="(min-width:0)"/><img class="c-header__media" src="https://placeholder.in2code.de/1200x675" alt="Alt Text"/>
          </picture>
        </div>
        <div class="c-header__content">
          <h1 class="c-header__heading">Header with <span class="u-highlight">image</span> and <span class="u-highlight">content</span>
          </h1>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?</p>
          <p>At vero eos et accusam et justo duo!</p><a class="btn btn--primary btn--right-link c-header__button" href="#">Jetzt orientieren</a>
        </div>
      </div>
    </div>
  <main class="page__content" id="content">
        <!-- Grid/ Element container-->
        <div class="frame frame-type-" id="c1001" data-scrollspysection="1">
              <div class="c-teaser">
                <div class="container c-teaser__container">
                  <div class="c-teaser__media-wrapper">
                    <picture>
                      <source srcset="https://placeholder.in2code.de/1200x675" media="(min-width:800px)"/>
                      <source srcset="https://placeholder.in2code.de/8004500" media="(min-width:0)"/><img class="c-teaser__media" src="https://placeholder.in2code.de/1200x675" alt="Alt Text"/>
                    </picture>
                  </div>
                  <div class="c-teaser__content">
                    <div class="c-teaser__heading">Teaser with <span class="u-highlight">image</span> aligned <span class="u-highlight">right</span>
                    </div>
                    <p class="c-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?</p><a class="btn btn--primary btn--right-link c-teaser__button" href="#">mehr erfahren</a>
                  </div>
                </div>
              </div>
        </div>
        <!-- Grid/ Element container-->
        <div class="frame frame-type-" id="c1001" data-scrollspysection="1">
              <div class="c-teaser c-teaser--reverse c-teaser--no-image">
                <div class="container c-teaser__container">
                  <div class="c-teaser__content">
                    <div class="c-teaser__heading">Teaser <span class="u-highlight">without</span> image aligned <span class="u-highlight">left</span>
                    </div>
                    <p class="c-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?</p><a class="btn btn--primary btn--right-link c-teaser__button" href="#">mehr erfahren</a>
                  </div>
                </div>
              </div>
        </div>
        <!-- Grid/ Element container-->
        <div class="frame frame-type-" id="c1001" data-scrollspysection="1">
              <div class="c-teaser">
                <div class="container c-teaser__container">
                  <div class="c-teaser__media-wrapper">
                    <picture>
                      <source srcset="https://placeholder.in2code.de/1200x675" media="(min-width:800px)"/>
                      <source srcset="https://placeholder.in2code.de/8004500" media="(min-width:0)"/><img class="c-teaser__media" src="https://placeholder.in2code.de/1200x675" alt="Alt Text"/>
                    </picture>
                  </div>
                  <div class="c-teaser__content">
                    <div class="c-teaser__heading">Teaser with <span class="u-highlight">image</span> aligned <span class="u-highlight">right</span>
                    </div>
                    <p class="c-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?</p><a class="btn btn--primary btn--right-link c-teaser__button" href="#">mehr erfahren</a>
                  </div>
                </div>
              </div>
        </div>
        <!-- Grid/ Element container-->
        <div class="frame frame-type-" id="c41106" data-scrollspysection="1">
          <div class="container ">
            <div class="c-slider c-slider--media-tiles">
              <section class="splide c-slider__section" aria-label="Media Slider">
                <div class="c-slider__buttons splide__arrows container">
                  <button class="c-slider__button c-slider__arrow c-slider__button--prev splide__arrow splide__arrow--prev" type="button">
                          <svg class="c-slider__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                            <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-left"></use>
                          </svg>
                  </button>
                  <button class="splide__toggle c-slider__button--toggle c-slider__button" type="button">
                          <svg class="c-slider__icon splide__toggle__play" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                            <use xlink:href="/Images/svg/sprite.symbol.svg#play"></use>
                          </svg>
                          <svg class="c-slider__icon splide__toggle__pause" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                            <use xlink:href="/Images/svg/sprite.symbol.svg#pause"></use>
                          </svg>
                  </button>
                  <div class="c-slider__pagination splide__pagination"></div>
                  <button class="c-slider__button c-slider__arrow c-slider__button--next splide__arrow splide__arrow--next" type="button">
                          <svg class="c-slider__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                            <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-right"></use>
                          </svg>
                  </button>
                </div>
                <div class="c-slider__track splide__track">
                  <ul class="c-slider__list splide__list">
                    <li class="c-slider__slide splide__slide">
                                <!-- Grid/ Element container-->
                                <div class="frame frame-type-tile_link" id="c41101" data-scrollspysection="1">
                                  <div class="container container--small "><a class="c-media-tile" href="#">
                                                <div class="c-media-tile__content">
                                                  <div class="h2">Download Tile</div>
                                                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
                                                            <svg class="c-media-tile__icon c-media-tile__icon-download" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="126px" width="126px">
                                                              <use xlink:href="/Images/svg/sprite.symbol.svg#download"></use>
                                                            </svg>
                                                </div></a>
                                  </div>
                                </div>
                    </li>
                    <li class="c-slider__slide splide__slide">
                                <!-- Grid/ Element container-->
                                <div class="frame frame-type-tile_media" id="c41102" data-scrollspysection="1">
                                  <div class="container container--small "><a class="c-media-tile c-media-tile--highlight" href="#">
                                                <div class="c-media-tile__image-wrapper"><img class="c-media-tile__image" src="https://placeholder.in2code.de/374x561" title="" alt=""/></div>
                                                <div class="c-media-tile__content">
                                                  <div class="h2">Image Tile</div>
                                                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
                                                </div></a>
                                  </div>
                                </div>
                    </li>
                    <li class="c-slider__slide splide__slide">
                                <!-- Grid/ Element container-->
                                <div class="frame frame-type-tile_link" id="c41103" data-scrollspysection="1">
                                  <div class="container container--small "><a class="c-media-tile" href="#">
                                                <div class="c-media-tile__content">
                                                  <div class="h2">Link Tile</div>
                                                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
                                                            <svg class="c-media-tile__icon c-media-tile__icon-external" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="126px" width="126px">
                                                              <use xlink:href="/Images/svg/sprite.symbol.svg#external"></use>
                                                            </svg>
                                                </div></a>
                                  </div>
                                </div>
                    </li>
                    <li class="c-slider__slide splide__slide">
                                <!-- Grid/ Element container-->
                                <div class="frame frame-type-tile_quote" id="c41104" data-scrollspysection="1">
                                  <div class="container container--small "><a class="c-media-tile" href="#">
                                                <div class="c-media-tile__image-wrapper"><img class="c-media-tile__image" src="https://placeholder.in2code.de/450x450" title="" alt=""/></div>
                                                <div class="c-media-tile__content">
                                                  <div class="h2">Quote Tile</div>
                                                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
                                                            <svg class="c-media-tile__icon c-media-tile__icon-quote" viewBox="0 0 323 287" aria-hidden="true" focusable="false" style="pointer-events: none;" height="126px" width="auto">
                                                              <use xlink:href="/Images/svg/sprite.symbol.svg#quote"></use>
                                                            </svg>
                                                </div></a>
                                  </div>
                                </div>
                    </li>
                    <li class="c-slider__slide splide__slide">
                                <!-- Grid/ Element container-->
                                <div class="frame frame-type-tile_media" id="c41105" data-scrollspysection="1">
                                  <div class="container container--small "><a class="c-media-tile lightbox lightbox-video" href="https://player.vimeo.com/video/15209448" data-type="iframe" data-group="iframe-youtube" data-width="1120px" data-height="630px">
                                                <div class="c-media-tile__image-wrapper">
                                                  <div class="c-media-tile__image-wrapper"><img class="c-media-tile__image" src="https://placeholder.in2code.de/374x561" title="" alt=""/></div>
                                                </div>
                                                <div class="c-media-tile__content">
                                                  <div class="h2">Video Tile (Youtube/Vimeo)</div>
                                                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
                                                </div></a>
                                  </div>
                                </div>
                    </li>
                    <li class="c-slider__slide splide__slide">
                                <!-- Grid/ Element container-->
                                <div class="frame frame-type-tile_media" id="c41105" data-scrollspysection="1">
                                  <div class="container container--small ">
                                              <video class="video-embed-item lightbox-video-element" width="1200" controls="" id="selector_video">
                                                <source src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"/>
                                              </video><a class="c-media-tile lightbox lightbox-video" href="#" data-type="html" data-target="#selector_video" data-group="inline_video">
                                                <div class="c-media-tile__image-wrapper">
                                                  <div class="c-media-tile__image-wrapper"><img class="c-media-tile__image" src="https://placeholder.in2code.de/650x235" title="" alt=""/></div>
                                                </div>
                                                <div class="c-media-tile__content">
                                                  <div class="h2">Video Tile (Inline Video)</div>
                                                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
                                                </div></a>
                                  </div>
                                </div>
                    </li>
                  </ul>
                </div>
              </section>
            </div>
          </div>
        </div>
  </main>
  <footer class="c-footer">
    <div class="c-footer-container">
      <div class="c-footer-top">
        <div class="container flex flex--middle">
          <div class="flex__lg-8">
              <nav class="c-footer-links" aria-label="Footer menu">
                <ul class="c-footer-links__list o-list-bare">
                  <li class="c-footer-links__list-item"><a class="c-footer-links__link" href="/">Interne Seite</a></li>
                  <li class="c-footer-links__list-item"><a class="c-footer-links__link" href="/">Kontakt/Anfahrt</a></li>
                  <li class="c-footer-links__list-item"><a class="c-footer-links__link" href="/">Impressum</a></li>
                  <li class="c-footer-links__list-item"><a class="c-footer-links__link" href="/">Datenschutz</a></li>
                  <li class="c-footer-links__list-item"><a class="c-footer-links__link" href="/">Barrierefreiheit</a></li>
                </ul>
              </nav>
          </div>
          <div class="flex__lg-4">
            <div class="c-footer-socials"><a class="c-footer__icon" href="https://www.youtube.com/channel/UCDw5QulDbevSc436g1YgG5g">
                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="32px" width="32px">
                      <use xlink:href="/Images/svg/sprite.symbol.svg#youtube"></use>
                    </svg><span class="u-visually-hidden">Youtube</span></a><a class="c-footer__icon" href="https://www.facebook.com/HSRheinMain">
                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="32px" width="32px">
                      <use xlink:href="/Images/svg/sprite.symbol.svg#facebook"></use>
                    </svg><span class="u-visually-hidden">Facebook</span></a><a class="c-footer__icon" href="https://www.instagram.com/hs_rheinmain/">
                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="32px" width="32px">
                      <use xlink:href="/Images/svg/sprite.symbol.svg#instagram"></use>
                    </svg><span class="u-visually-hidden">Instagram</span></a><a class="c-footer__icon" href="https://de.linkedin.com/school/hochschulerheinmain/">
                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="32px" width="32px">
                      <use xlink:href="/Images/svg/sprite.symbol.svg#linkedin"></use>
                    </svg><span class="u-visually-hidden">LinkedIn</span></a><a class="c-footer__icon" href="https://twitter.com/rheinmain_hs]">
                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="32px" width="32px">
                      <use xlink:href="/Images/svg/sprite.symbol.svg#twitter"></use>
                    </svg><span class="u-visually-hidden">Twitter</span></a>
            </div>
          </div>
        </div>
      </div>
      <div class="c-footer-middle">
        <div class="container">
          <div class="c-slider c-slider--footer">
            <section class="splide c-slider__section" aria-label="Logos">
              <div class="c-slider__buttons splide__arrows container">
                <div class="c-slider__button-wrapper">
                  <button class="splide__toggle c-slider__button--toggle c-slider__button" type="button">
                                      <svg class="c-slider__icon splide__toggle__play" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                                        <use xlink:href="/Images/svg/sprite.symbol.svg#play"></use>
                                      </svg>
                                      <svg class="c-slider__icon splide__toggle__pause" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                                        <use xlink:href="/Images/svg/sprite.symbol.svg#pause"></use>
                                      </svg>
                  </button>
                  <button class="c-slider__button c-slider__arrow c-slider__button--prev splide__arrow splide__arrow--prev" type="button">
                                      <svg class="c-slider__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                                        <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-left"></use>
                                      </svg>
                  </button>
                </div>
                <button class="c-slider__button c-slider__arrow c-slider__button--next splide__arrow splide__arrow--next" type="button">
                                  <svg class="c-slider__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                                    <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-right"></use>
                                  </svg>
                </button>
              </div>
              <div class="c-slider__track splide__track">
                <ul class="c-slider__list splide__list">
                          <li class="c-slider__slide splide__slide"><a class="c-slider__content" href="#" title="Hochschulallianz für den Mittelstand"><img src="#" alt="Hochschulallianz für den Mittelstand" data-splide-lazy="Images/Footer/hochschulallianz-logo.svg" width="160" height="20"/></a>
                          </li>
                          <li class="c-slider__slide splide__slide"><a class="c-slider__content" href="#" title="Systemakkreditierte Hochschule"><img src="#" alt="Systemakkreditierte Hochschule" data-splide-lazy="Images/Footer/akkreditierungsrat-logo.svg" width="50" height="50"/></a>
                          </li>
                          <li class="c-slider__slide splide__slide"><a class="c-slider__content" href="https://www.hrk.de/audit" title="HKR Audit"><img src="#" alt="HKR Audit" data-splide-lazy="Images/Footer/hkr-audit-logo.jpg" width="50" height="50"/></a>
                          </li>
                          <li class="c-slider__slide splide__slide"><a class="c-slider__content" href="#" title="Weltoffene Hochschule"><img src="#" alt="Weltoffene Hochschule" data-splide-lazy="/Images/Footer/weltoffene-hochschule-logo.svg" width="98" height="50"/></a>
                          </li>
                          <li class="c-slider__slide splide__slide"><a class="c-slider__content" href="#" title="Hochschulsport"><img src="#" alt="Hochschulsport" data-splide-lazy="Images/Footer/hochschulsport-logo.svg" width="75" height="50"/></a>
                          </li>
                          <li class="c-slider__slide splide__slide"><a class="c-slider__content" href="#" title="Familiengerechte Hochschule"><img src="#" alt="Familiengerechte Hochschule" data-splide-lazy="Images/Footer/audit-fgh-logo.svg" width="50" height="50"/></a>
                          </li>
                </ul>
              </div>
            </section>
          </div>
        </div>
      </div>
      <div class="c-footer-bottom"><span>Copyright © 2023</span></div>
    </div>
  </footer>
</div>
Source: assets/sass/_fullpage.scss, line 7