<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>
                <li><a href="#">List Item 3</a></li>
                <li><a href="#">List Item 4</a></li>
                <li><a href="#">List Item 5</a></li>
                <li><a href="#">List Item 6</a></li>
                <li><a href="#">List Item 7</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>
              </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>
                <li><a href="#">List Item 6</a></li>
                <li><a href="#">List Item 7</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>
                <li><a href="#">List Item 3</a></li>
                <li><a href="#">List Item 4</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>
                <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>

<div class="c-page-header-wrapper">
  <div class="c-page-banner"><a class="c-home-link" href="#"><span>Zur&nbsp;</span><b>Hauptseite</b></a>
        <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>
                <li><a href="#">List Item 3</a></li>
                <li><a href="#">List Item 4</a></li>
                <li><a href="#">List Item 5</a></li>
                <li><a href="#">List Item 6</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>
              </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>
              </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>
                <li><a href="#">List Item 3</a></li>
                <li><a href="#">List Item 4</a></li>
                <li><a href="#">List Item 5</a></li>
                <li><a href="#">List Item 6</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>
              </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>

<div class="c-page-header-wrapper">
  <div class="c-page-banner"><a class="c-home-link" href="#"><span>Zur&nbsp;</span><b>Hauptseite</b></a>
        <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>
                <li><a href="#">List Item 3</a></li>
                <li><a href="#">List Item 4</a></li>
                <li><a href="#">List Item 5</a></li>
                <li><a href="#">List Item 6</a></li>
                <li><a href="#">List Item 7</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>
              </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 class="c-page-header">
    <div class="c-page-header__logo-wrapper c-page-header__logo-wrapper--custom"><a class="c-page-header__logo-wrapper" title="Hochschule RheinMain - Startseite" href="/">
            <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="36px">
              <use xlink:href="/Images/svg/sprite.symbol.svg#hsrm-logo"></use>
            </svg></a><a class="c-page-header__logo-text" href="#">Fachbereich XY</a></div>
    <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>
                <li><a href="#">List Item 3</a></li>
                <li><a href="#">List Item 4</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>
              </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>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
  <div class="container">
    <div class="c-textmedia c-textmedia--center c-textmedia--above c-textmedia--image">
      <div class="c-textmedia__gallery" data-ce-columns="1" data-ce-images="1">
        <div class="ce-row">
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
              <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
            </figure>
          </div>
        </div>
      </div>
      <div class="c-textmedia__bodytext">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Demo - Textmedia - Above, center</h2>
        </header>
        <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
      </div>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
  <div class="container">
    <div class="c-textmedia c-textmedia--center c-textmedia--below c-textmedia--image">
      <div class="c-textmedia__bodytext">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Demo - Textmedia - Below, center</h2>
        </header>
        <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
      </div>
      <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="4">
        <div class="ce-row">
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
              <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
            </figure>
          </div>
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
              <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
            </figure>
          </div>
        </div>
        <div class="ce-row">
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
            </figure>
          </div>
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
            </figure>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
  <div class="container">
    <div class="c-textmedia c-textmedia--left c-textmedia--intext c-textmedia--image">
      <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="4">
        <div class="ce-row">
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
              <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
            </figure>
          </div>
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
              <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
            </figure>
          </div>
        </div>
        <div class="ce-row">
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
            </figure>
          </div>
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
            </figure>
          </div>
        </div>
      </div>
      <div class="c-textmedia__bodytext">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Demo - Textmedia - Beside Text, Left</h2>
        </header>
        <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
      </div>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
  <div class="container">
    <div class="c-textmedia c-textmedia--right c-textmedia--intext c-textmedia--image">
      <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="4">
        <div class="ce-row">
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
              <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
            </figure>
          </div>
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
              <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
            </figure>
          </div>
        </div>
        <div class="ce-row">
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
            </figure>
          </div>
          <div class="ce-column">
            <figure class="image">
              <picture>
                <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
              </picture>
            </figure>
          </div>
        </div>
      </div>
      <div class="c-textmedia__bodytext">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Demo - Textmedia - Beside Text, Right</h2>
        </header>
        <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
      </div>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
  <div class="container">
    <div class="c-textmedia c-textmedia--left c-textmedia--intext c-textmedia--image">
      <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="4">
        <div class="ce-row">
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
        </div>
        <div class="ce-row">
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
        </div>
      </div>
      <div class="c-textmedia__bodytext">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Textmedia mit Hover Caption Bildern</h2>
        </header>
        <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
      </div>
    </div>
  </div>
</div>
<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
  <div class="container">
    <div class="c-textmedia c-textmedia--right c-textmedia--intext c-textmedia--image">
      <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="4">
        <div class="ce-row">
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
        </div>
        <div class="ce-row">
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
        </div>
      </div>
      <div class="c-textmedia__bodytext">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Textmedia mit Hover Caption Bildern</h2>
        </header>
        <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
      </div>
    </div>
  </div>
</div>
<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
  <div class="container">
    <div class="c-textmedia c-textmedia--center c-textmedia--above c-textmedia--image">
      <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="2">
        <div class="ce-row">
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
        </div>
      </div>
      <div class="c-textmedia__bodytext">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Textmedia mit Hover Caption Bildern</h2>
        </header>
        <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
      </div>
    </div>
  </div>
</div>
<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
  <div class="container">
    <div class="c-textmedia c-textmedia--center c-textmedia--above c-textmedia--image">
      <div class="c-textmedia__gallery" data-ce-columns="1" data-ce-images="1">
        <div class="ce-row">
          <div class="ce-column">
            <div class="figure-wrapper">
              <figure class="image">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
                  <source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
                  <source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
                  <source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
                </picture>
                <figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
                  <div class="image-caption-hover__description">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
                  </div>
                </figcaption>
              </figure>
            </div>
          </div>
        </div>
      </div>
      <div class="c-textmedia__bodytext">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Textmedia mit Hover Caption Bildern</h2>
        </header>
        <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
      </div>
    </div>
  </div>
</div>

<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 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 class="c-slider c-slider--teaser">
  <section class="splide c-slider__section" aria-label="Teaser">
    <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">
          <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> in slider
                </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>
        </li>
        <li class="c-slider__slide splide__slide">
          <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">more text</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, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p><a class="btn btn--primary btn--right-link c-teaser__button" href="#">mehr erfahren</a>
              </div>
            </div>
          </div>
        </li>
        <li class="c-slider__slide splide__slide">
          <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 Slide with <span class="u-highlight">short text</span>
                </div>
                <p class="c-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p><a class="btn btn--primary btn--right-link c-teaser__button" href="#">mehr erfahren</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
</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>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c41106" data-scrollspysection="1">
  <div class="container">
    <div class="c-slider c-slider--gallery">
      <section class="splide c-slider__section" aria-label="Image-gallery Slider">
        <div class="c-slider__track splide__track">
          <ul class="c-slider__list splide__list">
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x487" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x487" width="650" height="487" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/750x450" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/750x450" width="750" height="450" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
          </ul>
        </div>
        <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="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>
      </section>
    </div>
  </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>

<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"> Jetzt den passenden<span class="u-highlight">&#32; Studiengang &#32;</span>finden!</h1>
      <div class="c-in2studyfinder-quicksearch">
        <select id="in2studyfinder-select" placeholder="Studiengang wählen oder Suchbegriff eingeben" autocomplete="off">
          <option value="">Studiengang wählen oder Suchbegriff eingeben</option>
          <option value="1">Internationales Wirtschaftsingenieurwesen (B.Eng.)</option>
          <option value="3">Electrical Engineering – Connected Systems (M.Eng.)</option>
          <option value="4">Angewandte Informatik (dual, B.Sc.)</option>
          <option value="5">Sales and Marketing Management (M.Sc.)</option>
        </select>
      </div><a class="btn btn--primary btn--right-link c-header__button c-header__button--right" href="#">alle Studiengänge</a>
    </div>
  </div>
</div>

<div class="c-header  ">
  <div class="container c-header__container">
    <div class="c-header__media-wrapper">
      <video class="c-header__media c-header__media--video" autoplay="autoplay" muted="muted" loop="loop" playsinline="playsinline" title="Title">
        <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/av1/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4"/>
      </video>
    </div>
    <div class="c-header__content">
      <h1 class="c-header__heading"><span class="u-highlight">Video</span> Header
      </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>

<div class="c-header  c-header--no-media">
  <div class="container c-header__container">
    <div class="c-header__media-wrapper">
    </div>
    <div class="c-header__content">
      <h1 class="c-header__heading">Header <span class="u-highlight">without image</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>

<div class="c-header c-header--no-content ">
  <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>
</div>

<div class="c-in2studyfinder-quicksearch">
  <select id="in2studyfinder-select" placeholder="Studiengang wählen oder Suchbegriff eingeben" autocomplete="off">
    <option value="">Studiengang wählen oder Suchbegriff eingeben</option>
    <option value="1">Internationales Wirtschaftsingenieurwesen (B.Eng.)</option>
    <option value="3">Electrical Engineering – Connected Systems (M.Eng.)</option>
    <option value="4">Angewandte Informatik (dual, B.Sc.)</option>
    <option value="5">Sales and Marketing Management (M.Sc.)</option>
  </select>
</div>

<div class="c-in2studyfinder-quicksearch c-in2studyfinder-quicksearch--list-view">
  <select id="in2studyfinder-select" placeholder="Studiengang wählen oder Suchbegriff eingeben" autocomplete="off">
    <option value="">Studiengang wählen oder Suchbegriff eingeben</option>
    <option value="1">Internationales Wirtschaftsingenieurwesen (B.Eng.)</option>
    <option value="3">Electrical Engineering – Connected Systems (M.Eng.)</option>
    <option value="4">Angewandte Informatik (dual, B.Sc.)</option>
    <option value="5">Sales and Marketing Management (M.Sc.)</option>
  </select>
</div>

<form class="c-filter c-filter--studyfinder u-in2studyfinder-hide-if-no-js js-in2studyfinder-filter" name="in2studyfinder-filter" action="" method="">
  <button class="c-filter__title" type="button">Filter</button>
  <div class="c-filter__content">
    <button class="c-filter__reset js-in2studyfinder-filter-button-reset" type="button">Filter zurücksetzen</button>
    <div class="js-in2studyfinder-filter-section-container">
      <fieldset class="c-filter__section js-in2studyfinder-filter-section" data-filtergroup="graduation" tabindex="0">
        <legend class="js-in2studyfinder-filter-legend">Abschlussarten</legend>
        <div class="c-filter__options js-in2studyfinder-filter-options">
          <input id="radio-alle" type="radio" value="_alle" checked="checked" disabled="disabled" name="[radio]"/>
          <label class="c-filter__label" for="radio-alle">Alle</label>
          <input id="radio-1" type="radio" value="1" checked="checked" name="[radio]"/>
          <label class="c-filter__label" for="radio-1">Bachelor</label>
          <input id="radio-2" type="radio" value="2" name="[radio]"/>
          <label class="c-filter__label" for="radio-2">Master</label>
          <input id="radio-3" type="radio" value="3" name="[radio]"/>
          <label class="c-filter__label" for="radio-3">Master</label>
        </div>
      </fieldset>
      <fieldset class="c-filter__section js-in2studyfinder-filter-section" data-filtergroup="focusTopic" tabindex="0">
        <legend class="js-in2studyfinder-filter-legend">Themenschwerpunkte</legend>
        <div class="c-filter__options js-in2studyfinder-filter-options">
          <input id="checkbox-alle" type="checkbox" value="_alle"/>
          <label class="c-filter__label" for="checkbox-alle">Alle</label>
          <input id="checkbox-1" type="checkbox" value="1" name="[checkbox]"/>
          <label class="c-filter__label" for="checkbox-1">Themenschwerpunkt 1</label>
          <input id="checkbox-2" type="checkbox" value="2" checked="checked" name="[checkbox]"/>
          <label class="c-filter__label" for="checkbox-2">Themenschwerpunkt 2</label>
          <input id="checkbox-3" type="checkbox" value="3" checked="checked" disabled="disabled" name="[checkbox]"/>
          <label class="c-filter__label" for="checkbox-3">Themenschwerpunkt 3</label>
        </div>
      </fieldset>
    </div>
  </div>
</form>

<ul class="c-in2studyfinder-list o-list-bare">
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Studiengangsname</span></a>
    <div class="c-in2studyfinder-item">Abschluss
      <h3 class="c-in2studyfinder-item__title">Studiengangsname</h3>
      <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…</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
</ul>

<ul class="c-in2studyfinder-list o-list-bare">
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Medieninformatik</span></a>
    <div class="c-in2studyfinder-item">Bachelor of Arts
      <h3 class="c-in2studyfinder-item__title">Medieninformatik</h3>
      <p>Der Bachelorstudiengang Medieninformatik vermittelt fundierte Kenntnisse in den Bereichen Informatik, Medienwissenschaft und Design. Die Studierenden lernen, innovative Medienkonzepte zu entwickeln und umzusetzen...</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Wirtschaftsinformatik</span></a>
    <div class="c-in2studyfinder-item">Master of Science
      <h3 class="c-in2studyfinder-item__title">Wirtschaftsinformatik</h3>
      <p>Im Masterstudiengang Wirtschaftsinformatik an der Hochschule Rhein Main erwerben die Studierenden vertiefte Kenntnisse in den Bereichen Informatik und Betriebswirtschaftslehre. Der Fokus liegt auf der Analyse und Optimierung von Geschäftsprozessen...</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Maschinenbau</span></a>
    <div class="c-in2studyfinder-item">Bachelor of Engineering
      <h3 class="c-in2studyfinder-item__title">Maschinenbau</h3>
      <p>Der Bachelorstudiengang Maschinenbau an der Hochschule Rhein Main vermittelt ein breites Grundlagenwissen in den Bereichen Mechanik, Elektrotechnik und Materialwissenschaften. Die Studierenden lernen, technische Systeme zu entwickeln und zu optimieren...</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Soziale Arbeit</span></a>
    <div class="c-in2studyfinder-item">Master of Arts
      <h3 class="c-in2studyfinder-item__title">Soziale Arbeit</h3>
      <p>Im Masterstudiengang Soziale Arbeit setzen sich die Studierenden mit den gesellschaftlichen Herausforderungen der Gegenwart auseinander und entwickeln innovative Lösungsansätze. Der Fokus liegt auf der Förderung von Teilhabe und Inklusion...</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Umweltingenieurwesen</span></a>
    <div class="c-in2studyfinder-item">Bachelor of Science
      <h3 class="c-in2studyfinder-item__title">Umweltingenieurwesen</h3>
      <p>Im Bachelorstudiengang Umweltingenieurwesen werden die Studierenden auf komplexe Umweltprobleme vorbereitet. Sie lernen, nachhaltige Lösungen für den Schutz von Luft, Wasser und Boden zu entwickeln und umzusetzen...</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
</ul>

<ul class="c-in2studyfinder-list c-in2studyfinder-list--2-cols o-list-bare">
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Medieninformatik</span></a>
    <div class="c-in2studyfinder-item">Bachelor of Arts
      <h3 class="c-in2studyfinder-item__title">Medieninformatik</h3>
      <p>Der Bachelorstudiengang Medieninformatik vermittelt fundierte Kenntnisse in den Bereichen Informatik, Medienwissenschaft und Design. Die Studierenden lernen, innovative Medienkonzepte zu entwickeln und umzusetzen...</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Wirtschaftsinformatik</span></a>
    <div class="c-in2studyfinder-item">Master of Science
      <h3 class="c-in2studyfinder-item__title">Wirtschaftsinformatik</h3>
      <p>Im Masterstudiengang Wirtschaftsinformatik an der Hochschule Rhein Main erwerben die Studierenden vertiefte Kenntnisse in den Bereichen Informatik und Betriebswirtschaftslehre. Der Fokus liegt auf der Analyse und Optimierung von Geschäftsprozessen...</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Maschinenbau</span></a>
    <div class="c-in2studyfinder-item">Bachelor of Engineering
      <h3 class="c-in2studyfinder-item__title">Maschinenbau</h3>
      <p>Der Bachelorstudiengang Maschinenbau an der Hochschule Rhein Main vermittelt ein breites Grundlagenwissen in den Bereichen Mechanik, Elektrotechnik und Materialwissenschaften. Die Studierenden lernen, technische Systeme zu entwickeln und zu optimieren...</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Soziale Arbeit</span></a>
    <div class="c-in2studyfinder-item">Master of Arts
      <h3 class="c-in2studyfinder-item__title">Soziale Arbeit</h3>
      <p>Im Masterstudiengang Soziale Arbeit setzen sich die Studierenden mit den gesellschaftlichen Herausforderungen der Gegenwart auseinander und entwickeln innovative Lösungsansätze. Der Fokus liegt auf der Förderung von Teilhabe und Inklusion...</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
  <li><a class="c-in2studyfinder-item-link" href="#"><span class="u-visually-hidden">Umweltingenieurwesen</span></a>
    <div class="c-in2studyfinder-item">Bachelor of Science
      <h3 class="c-in2studyfinder-item__title">Umweltingenieurwesen</h3>
      <p>Im Bachelorstudiengang Umweltingenieurwesen werden die Studierenden auf komplexe Umweltprobleme vorbereitet. Sie lernen, nachhaltige Lösungen für den Schutz von Luft, Wasser und Boden zu entwickeln und umzusetzen...</p>
      <div class="btn btn--right-link">Zum Studiengang</div>
    </div>
  </li>
</ul>

<form class="c-search" action="">
  <label class="u-visually-hidden" for="search">Nach Inhalt suchen</label>
  <input class="c-search__input" type="search" id="search" placeholder="Suchbegriff eingeben"/>
  <button class="c-search__button c-search__button--submit" type="submit"></button>
</form>

<div class="c-search-list">
  <div class="c-person-list-item"><small class="c-search-list-item__result">/personen/detail</small>
    <p class="h3">Dr. Anna Müller</p><small>Professorin</small>
    <div class="c-person-list-item__links">
      <div class="o-icon-text">
        <svg class="o-icon-text__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#e-mail"></use>
        </svg>
        <div class="o-icon-text__content"><span class="o-icon-text__title">anna.mueller@example.com</span>
        </div>
      </div>
      <div class="o-icon-text">
        <svg class="o-icon-text__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#phone"></use>
        </svg>
        <div class="o-icon-text__content"><span class="o-icon-text__title">+491234567890</span>
        </div>
      </div>
    </div>
    <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
  </div>
  <div class="c-search-list-item"><small class="c-search-list-item__path">/news/auszeichnung-fuer-start-up</small>
    <p class="h3">Auszeichnung für HSRM-Start-up</p>
    <p>
      <div class="o-icon-text">
        <svg class="o-icon-text__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#calendar"></use>
        </svg>
        <div class="o-icon-text__content"><span class="o-icon-text__title">Mi 10.01.2024</span>
        </div>
      </div>
    </p>
    <div class="c-search-list-item__image-wrapper"><img src="https://placeholder.in2code.de/120x120" width="120" height="120" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
      <p>Ein Start-up von Absolventen der Hochschule RheinMain wurde mit einem Innovationspreis für seine nachhaltigen Technologien ausgezeichnet.</p>
    </div>
    <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zum Artikel</a></div>
  </div>
  <div class="c-search-list-item"><small class="c-search-list-item__path">/events/tag-der-offenen-tuer</small>
    <p class="h3">Tag der offenen Tür</p>
    <p>
      <div class="o-icon-text">
        <svg class="o-icon-text__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#calendar"></use>
        </svg>
        <div class="o-icon-text__content"><span class="o-icon-text__title">Fr 24.04. - Sa 25.04.2024</span>
        </div>
      </div>
    </p>
    <div class="c-search-list-item__image-wrapper">
      <p>Komm und entdecke die Vielfalt unserer Studiengänge! Erhalte Einblicke in unsere Labore und Projekte.</p>
    </div>
    <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Veranstaltung</a></div>
  </div>
  <div class="c-search-list-item"><small class="c-search-list-item__path">/studium/studienberatung</small>
    <p class="h3">Studienberatung</p>
    <p>Die zentrale Studienberatung der Hochschule RheinMain unterstützt Studierende und Studieninteressierte bei allen Fragen rund ums Studium.</p>
    <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Seite</a></div>
  </div>
  <div class="c-person-list-item"><small class="c-search-list-item__result">/personen/detail</small>
    <p class="h3">Prof. Dr. Michael Schuster</p><small>Professor für Nachhaltige Baukonzepte</small>
    <div class="c-person-list-item__links">
      <div class="o-icon-text">
        <svg class="o-icon-text__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#e-mail"></use>
        </svg>
        <div class="o-icon-text__content"><span class="o-icon-text__title">michael.schuster@example.com</span>
        </div>
      </div>
      <div class="o-icon-text">
        <svg class="o-icon-text__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#phone"></use>
        </svg>
        <div class="o-icon-text__content"><span class="o-icon-text__title">+491234567891</span>
        </div>
      </div>
    </div>
    <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
  </div>
  <div class="c-search-list-item"><small class="c-search-list-item__path">/events/wissenschaftsforum</small>
    <p class="h3">Wissenschaftsforum 2024</p>
    <p>
      <div class="o-icon-text">
        <svg class="o-icon-text__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#calendar"></use>
        </svg>
        <div class="o-icon-text__content"><span class="o-icon-text__title">Do 15.05.2024</span>
        </div>
      </div>
    </p>
    <div class="c-search-list-item__image-wrapper">
      <p>Das Wissenschaftsforum bietet Vorträge und Workshops zu aktuellen Themen der Forschung und Innovation an der Hochschule RheinMain.</p>
    </div>
    <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Veranstaltung</a></div>
  </div>
  <div class="c-search-list-item"><small class="c-search-list-item__path">/campus/hochschulbibliothek</small>
    <p class="h3">Hochschulbibliothek</p>
    <p>Die Hochschulbibliothek bietet umfassende Ressourcen für Studium und Forschung, einschließlich digitaler Medien und individueller Beratung.</p>
    <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Seite</a></div>
  </div>
  <div class="c-search-list-item"><small class="c-search-list-item__path">/news/neues-campusprojekt</small>
    <p class="h3">Neues Campusprojekt startet im Sommer</p>
    <p>
      <div class="o-icon-text">
        <svg class="o-icon-text__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#calendar"></use>
        </svg>
        <div class="o-icon-text__content"><span class="o-icon-text__title">Do 22.01.2024</span>
        </div>
      </div>
    </p>
    <div class="c-search-list-item__image-wrapper"><img src="https://placeholder.in2code.de/120x120" width="120" height="120" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
      <p>Im Sommer 2024 startet ein neues Projekt auf dem Campus der Hochschule RheinMain. Es wird eine nachhaltige Energieversorgung für den gesamten Campus aufgebaut, die langfristig die CO2-Emissionen reduzieren soll.</p>
    </div>
    <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zum Artikel</a></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="c1001" data-scrollspysection="1">
  <div class="c-teaser c-teaser--reverse">
    <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">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 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">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>

<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>
                    <li><a href="#">List Item 3</a></li>
                    <li><a href="#">List Item 4</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>
                  </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>
                    <li><a href="#">List Item 6</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>
                  </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>
                    <li><a href="#">List Item 6</a></li>
                    <li><a href="#">List Item 7</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>
                    <li><a href="#">List Item 6</a></li>
                    <li><a href="#">List Item 7</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>
  <main class="page__content" id="content">
    <div class="container">
      <div class="flex flex--row-reverse flex--space-between">
        <div class="flex__lg-3">
          <div class="c-anchor-menu"><span class="h3">Inhalte</span>
            <ul class="c-anchor-menu__list o-list-bare" id="overview" data-scrollspy="1">
                        <li class="c-anchor-menu__item"><a class="c-anchor-menu__link" href="#c01" data-scrollspytarget="1">Unser Profil</a></li>
                        <li class="c-anchor-menu__item"><a class="c-anchor-menu__link" href="#c02" data-scrollspytarget="1">Aktuelles</a></li>
                        <li class="c-anchor-menu__item"><a class="c-anchor-menu__link" href="#c03" data-scrollspytarget="1">Termine</a></li>
                        <li class="c-anchor-menu__item"><a class="c-anchor-menu__link" href="#c04" data-scrollspytarget="1">Studiengänge</a></li>
                        <li class="c-anchor-menu__item"><a class="c-anchor-menu__link" href="#c05" data-scrollspytarget="1">Forschung</a></li>
            </ul>
          </div>
        </div>
        <div class="flex__lg-8">
                    <!-- Grid/ Element container-->
                    <div class="frame frame-type-" id="c1001" data-scrollspysection="1">
                                <div class="c-teaser c-teaser--reverse c-teaser--no-image c-teaser--on-subpage">
                                  <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 c-teaser--no-image c-teaser--on-subpage">
                                  <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">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--on-subpage">
                                  <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">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 c-teaser--on-subpage">
                                  <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>
        </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>

<div class="c-anchor-menu"><span class="h3">Inhalte</span>
  <ul class="c-anchor-menu__list o-list-bare" id="overview" data-scrollspy="1">
    <li class="c-anchor-menu__item"><a class="c-anchor-menu__link" href="#c01" data-scrollspytarget="1">Unser Profil</a></li>
    <li class="c-anchor-menu__item"><a class="c-anchor-menu__link" href="#c02" data-scrollspytarget="1">Aktuelles</a></li>
    <li class="c-anchor-menu__item"><a class="c-anchor-menu__link" href="#c03" data-scrollspytarget="1">Termine</a></li>
    <li class="c-anchor-menu__item"><a class="c-anchor-menu__link" href="#c04" data-scrollspytarget="1">Studiengänge</a></li>
    <li class="c-anchor-menu__item"><a class="c-anchor-menu__link" href="#c05" data-scrollspytarget="1">Forschung</a></li>
  </ul>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c1016" data-scrollspysection="1">
  <div class="container container--small ">
    <!-- Grid/ Element header-->
    <header class="frame__header">
      <h2>Accordion Container</h2>
    </header>
    <div class="c-accordion-group">
      <div class="h3 c-accordion" id="caccordion1id">
        <button class="c-accordion__trigger" id="accordion1id" type="button" aria-expanded="false" aria-controls="section-1">Accordion Title 1</button>
      </div>
      <div class="c-accordion__section" id="section-1" role="region" aria-labelledby="accordion1id" hidden="hidden">
        <!-- Grid/ Element container-->
        <div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
          <div class="container">
            <div class="c-textmedia c-textmedia--left c-textmedia--intext c-textmedia--image">
              <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="4">
                <div class="ce-row">
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                      <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                    </figure>
                  </div>
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                      <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                    </figure>
                  </div>
                </div>
                <div class="ce-row">
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                    </figure>
                  </div>
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                    </figure>
                  </div>
                </div>
              </div>
              <div class="c-textmedia__bodytext">
                <!-- Grid/ Element header-->
                <header class="frame__header">
                  <h2>Demo - Textmedia - Beside Text, Left</h2>
                </header>
                <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
                <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h3 c-accordion" id="caccordion2id">
        <button class="c-accordion__trigger" id="accordion2id" type="button" aria-expanded="false" aria-controls="section-2">Accordion Title 2</button>
      </div>
      <div class="c-accordion__section" id="section-2" role="region" aria-labelledby="accordion2id" hidden="hidden">
        <!-- Grid/ Element container-->
        <div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
          <div class="container">
            <div class="c-textmedia c-textmedia--center c-textmedia--below c-textmedia--image">
              <div class="c-textmedia__bodytext">
                <!-- Grid/ Element header-->
                <header class="frame__header">
                  <h2>Demo - Textmedia - Below, center</h2>
                </header>
                <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
                <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
              </div>
              <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="4">
                <div class="ce-row">
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                      <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                    </figure>
                  </div>
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                      <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                    </figure>
                  </div>
                </div>
                <div class="ce-row">
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                    </figure>
                  </div>
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                    </figure>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h3 c-accordion" id="caccordion3id">
        <button class="c-accordion__trigger" id="accordion3id" type="button" aria-expanded="false" aria-controls="section-3">Accordion Title 3</button>
      </div>
      <div class="c-accordion__section" id="section-3" role="region" aria-labelledby="accordion3id" hidden="hidden">
        <!-- Grid/ Element container-->
        <div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
          <div class="container">
            <div class="c-textmedia c-textmedia--left c-textmedia--intext c-textmedia--image">
              <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="4">
                <div class="ce-row">
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                      <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                    </figure>
                  </div>
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                      <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                    </figure>
                  </div>
                </div>
                <div class="ce-row">
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                    </figure>
                  </div>
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                    </figure>
                  </div>
                </div>
              </div>
              <div class="c-textmedia__bodytext">
                <!-- Grid/ Element header-->
                <header class="frame__header">
                  <h2>Demo - Textmedia - Beside Text, Left</h2>
                </header>
                <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
                <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h3 c-accordion" id="caccordion4id">
        <button class="c-accordion__trigger" id="accordion4id" type="button" aria-expanded="false" aria-controls="section-4">Accordion Title 4</button>
      </div>
      <div class="c-accordion__section" id="section-4" role="region" aria-labelledby="accordion4id" hidden="hidden">
        <!-- Grid/ Element container-->
        <div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
          <div class="container">
            <div class="c-textmedia c-textmedia--center c-textmedia--above c-textmedia--image">
              <div class="c-textmedia__gallery" data-ce-columns="1" data-ce-images="1">
                <div class="ce-row">
                  <div class="ce-column">
                    <figure class="image">
                      <picture>
                        <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                        <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                        <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                      </picture>
                      <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                    </figure>
                  </div>
                </div>
              </div>
              <div class="c-textmedia__bodytext">
                <!-- Grid/ Element header-->
                <header class="frame__header">
                  <h2>Demo - Textmedia - Above, center</h2>
                </header>
                <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
                <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>

<div class="c-global-list-item">
  <h3>Titel</h3>
  <p class="h5">Standort</p>
  <p>Beschreibung und noch mehrt Text, einfach weil es sein kann</p><a class="btn btn--right-link" href="#">Link zu Seite mit Infos</a>
</div>
<div class="c-global-list-item">
  <h3>Titel</h3>
  <p class="h5">Standort</p>
  <p>Beschreibung und noch mehrt Text, einfach weil es sein kann</p><a class="btn btn--right-link" href="#">Link zu Seite mit Infos</a>
</div>
<div class="c-global-list-item">
  <h3>Titel</h3>
  <p class="h5">Standort</p>
  <p>Beschreibung und noch mehrt Text, einfach weil es sein kann</p><a class="btn btn--right-link" href="#">Link zu Seite mit Infos</a>
</div>
<div class="c-global-list-item">
  <h3>Titel</h3>
  <p class="h5">Standort</p>
  <p>Beschreibung und noch mehrt Text, einfach weil es sein kann</p><a class="btn btn--right-link" href="#">Link zu Seite mit Infos</a>
</div>
<div class="c-global-list-item">
  <h3>Titel</h3>
  <p class="h5">Standort</p>
  <p>Beschreibung und noch mehrt Text, einfach weil es sein kann</p><a class="btn btn--right-link" href="#">Link zu Seite mit Infos</a>
</div>

<nav class="c-pagination" aria-label="Pagination Navigation">
  <ul class="c-pagination__list o-list-bare">
    <li><a class="c-pagination__controls c-pagination__controls--previous" href="/page-1">
        <svg class="c-pagination__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="22px" height="22px">
          <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-left"></use>
        </svg><span class="u-visually-hidden">Zurück</span></a></li>
    <li><a class="c-pagination__link" href="/page-1">1</a></li>
    <li><a class="c-pagination__link" href="/page-2" aria-current="page">2</a></li>
    <li><a class="c-pagination__link" href="/page-3">3</a></li>
    <li><span>...</span></li>
    <li><a class="c-pagination__link" href="/page-15">15</a></li>
    <li><a class="c-pagination__controls c-pagination__controls--next" href="/page-3">
        <svg class="c-pagination__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="22px" height="22px">
          <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-right"></use>
        </svg><span class="u-visually-hidden">Weiter</span></a></li>
  </ul>
</nav>

<div class="c-filter"><a class="u-skip-link btn btn--right-link" href="#live-region">Skip to List</a>
  <button class="c-filter__title" type="button" aria-expanded="false" aria-disabled="false" aria-controls="filter-section">Filter</button>
  <div class="c-filter__content" id="filter-section">
    <button class="c-filter__reset" type="button">Alle Filter entfernen</button>
    <fieldset class="c-filter__fieldset" tabindex="0">
      <legend>Personengruppen</legend>
      <div class="c-filter__options js-in2studyfinder-filter-options">
        <input id="Alle Personen" type="radio" value="Alle Personen"/>
        <label class="c-filter__label" for="Alle Personen">Alle Personen</label>
        <input id="Professor*innen" type="radio" value="Professor*innen"/>
        <label class="c-filter__label" for="Professor*innen">Professor*innen</label>
        <input id="Lehrbeauftrage" type="radio" value="Lehrbeauftrage"/>
        <label class="c-filter__label" for="Lehrbeauftrage">Lehrbeauftrage</label>
        <input id="Mitarbeitende" type="radio" value="Mitarbeitende"/>
        <label class="c-filter__label" for="Mitarbeitende">Mitarbeitende</label>
        <input id="wissenschaftliche Mitarbeitende" type="radio" value="wissenschaftliche Mitarbeitende"/>
        <label class="c-filter__label" for="wissenschaftliche Mitarbeitende">wissenschaftliche Mitarbeitende</label>
      </div>
    </fieldset>
    <hr/>
    <fieldset class="c-filter__alphabet" tabindex="0">
      <legend class="u-visually-hidden">Anfangsbuchstabe</legend>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="A" value="A"/>
        <label for="A">A</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="B" value="B"/>
        <label for="B">B</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="C" value="C"/>
        <label for="C">C</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="D" value="D"/>
        <label for="D">D</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="E" value="E"/>
        <label for="E">E</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="F" value="F"/>
        <label for="F">F</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="G" value="G"/>
        <label for="G">G</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="H" value="H"/>
        <label for="H">H</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="I" value="I"/>
        <label for="I">I</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="J" value="J"/>
        <label for="J">J</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="K" value="K"/>
        <label for="K">K</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="L" value="L"/>
        <label for="L">L</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="M" value="M"/>
        <label for="M">M</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="N" value="N"/>
        <label for="N">N</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="O" value="O"/>
        <label for="O">O</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="P" value="P"/>
        <label for="P">P</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="Q" value="Q"/>
        <label for="Q">Q</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="R" value="R"/>
        <label for="R">R</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="S" value="S"/>
        <label for="S">S</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="T" value="T"/>
        <label for="T">T</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="U" value="U"/>
        <label for="U">U</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="V" value="V"/>
        <label for="V">V</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="W" value="W"/>
        <label for="W">W</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="X" value="X" aria-disabled="true" disabled="disabled"/>
        <label for="X">X</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="Y" value="Y" aria-disabled="true" disabled="disabled"/>
        <label for="Y">Y</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="Z" value="Z" aria-disabled="true" disabled="disabled"/>
        <label for="Z">Z</label>
      </div>
    </fieldset>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c10414" data-scrollspysection="1">
  <div class="container container--small ">
    <!-- Grid/ Element header-->
    <header class="frame__header">
      <h2>Docs &amp; Links</h2>
    </header>
    <div class="c-file-link-list"><a class="c-file-link" href="#">
        <svg class="c-file-link__icon c-file-link__icon-download" 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#download"></use>
        </svg>
        <div class="c-file-link__content"><span class="c-file-link__title">Bachelor-Info_Elektrotechnik</span><span class="c-file-link__file-name">bachelor_info_elektrotechnik.pdf</span>
        </div></a><a class="c-file-link" href="#">
        <svg class="c-file-link__icon c-file-link__icon-download" 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#download"></use>
        </svg>
        <div class="c-file-link__content"><span class="c-file-link__title">Studiengangsbroschüre Elektrotechnik</span><span class="c-file-link__file-name">studiengangsbroschuere_elektrotechnik.pdf</span>
        </div></a><a class="c-file-link" href="#">
        <svg class="c-file-link__icon c-file-link__icon-download" 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#download"></use>
        </svg>
        <div class="c-file-link__content"><span class="c-file-link__title">Einführungsleitfaden Elektrotechnik</span><span class="c-file-link__file-name">einfuehrungsleitfaden_elektrotechnik.pdf</span>
        </div></a><a class="c-file-link" href="#">
        <svg class="c-file-link__icon c-file-link__icon-external" 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#external"></use>
        </svg>
        <div class="c-file-link__content"><span class="c-file-link__title">Weitere Informationen</span>
        </div></a><a class="c-file-link" href="#">
        <svg class="c-file-link__icon c-file-link__icon-external" 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#external"></use>
        </svg>
        <div class="c-file-link__content"><span class="c-file-link__title">Pressemitteilungen der Hochschule</span>
        </div></a>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-gallery" id="c10344" data-scrollspysection="1">
  <div class="container">
    <!-- Grid/ Element header-->
    <header class="frame__header">
      <h2>Masonry</h2>
    </header>
    <div class="u-hide-desktop">
        <!-- Grid/ Element container-->
        <div class="frame frame-type-" id="c41106" data-scrollspysection="1">
          <div class="container">
            <div class="c-slider c-slider--gallery">
              <section class="splide c-slider__section" aria-label="Image-gallery Slider">
                <div class="c-slider__track splide__track">
                  <ul class="c-slider__list splide__list">
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x487" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x487" width="650" height="487" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/750x450" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/750x450" width="750" height="450" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                    <li class="c-slider__slide splide__slide">
                      <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                          <figure class="image-caption">
                            <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                            <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                              <details>
                                <summary>
                                  <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                                </summary>
                                <section class="image-caption__section">
                                  <header><span class="h5">Fotodaten</span>
                                    <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                        <svg 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>
                                  </header>
                                  <div class="table-rwd">
                                    <div class="table-rwd__overflow">
                                      <table class="image-caption__metadata-table">
                                        <tbody>
                                          <tr>
                                            <th scope="row">Künstler</th>
                                            <td>Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">xmp.photoshop:Headline</th>
                                            <td>Bildmaterial Hochschule RheinMain</td>
                                          </tr>
                                          <tr></tr>
                                          <tr>
                                            <th scope="row">xmp.xmpRights:Marked</th>
                                            <td>true</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Copyright</th>
                                            <td>© Andreas Schlote</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Nutzungsbedingungen</th>
                                            <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </section>
                              </details>
                            </div>
                          </figure>
                      </figure>
                    </li>
                  </ul>
                </div>
                <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="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>
              </section>
            </div>
          </div>
        </div>
    </div>
    <div class="u-hide-mobile">
      <div class="c-gallery">
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x487" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x487" width="650" height="487" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
              <figure class="image-caption">
                <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                  <details>
                    <summary>
                      <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                    </summary>
                    <section class="image-caption__section">
                      <header><span class="h5">Fotodaten</span>
                        <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                <svg 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>
                      </header>
                      <div class="table-rwd">
                        <div class="table-rwd__overflow">
                          <table class="image-caption__metadata-table">
                            <tbody>
                              <tr>
                                <th scope="row">Künstler</th>
                                <td>Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">xmp.photoshop:Headline</th>
                                <td>Bildmaterial Hochschule RheinMain</td>
                              </tr>
                              <tr></tr>
                              <tr>
                                <th scope="row">xmp.xmpRights:Marked</th>
                                <td>true</td>
                              </tr>
                              <tr>
                                <th scope="row">Copyright</th>
                                <td>© Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">Nutzungsbedingungen</th>
                                <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </section>
                  </details>
                </div>
              </figure>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/750x450" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/750x450" width="750" height="450" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
              <figure class="image-caption">
                <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                  <details>
                    <summary>
                      <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                    </summary>
                    <section class="image-caption__section">
                      <header><span class="h5">Fotodaten</span>
                        <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                <svg 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>
                      </header>
                      <div class="table-rwd">
                        <div class="table-rwd__overflow">
                          <table class="image-caption__metadata-table">
                            <tbody>
                              <tr>
                                <th scope="row">Künstler</th>
                                <td>Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">xmp.photoshop:Headline</th>
                                <td>Bildmaterial Hochschule RheinMain</td>
                              </tr>
                              <tr></tr>
                              <tr>
                                <th scope="row">xmp.xmpRights:Marked</th>
                                <td>true</td>
                              </tr>
                              <tr>
                                <th scope="row">Copyright</th>
                                <td>© Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">Nutzungsbedingungen</th>
                                <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </section>
                  </details>
                </div>
              </figure>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
              <figure class="image-caption">
                <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                  <details>
                    <summary>
                      <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                    </summary>
                    <section class="image-caption__section">
                      <header><span class="h5">Fotodaten</span>
                        <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                <svg 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>
                      </header>
                      <div class="table-rwd">
                        <div class="table-rwd__overflow">
                          <table class="image-caption__metadata-table">
                            <tbody>
                              <tr>
                                <th scope="row">Künstler</th>
                                <td>Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">xmp.photoshop:Headline</th>
                                <td>Bildmaterial Hochschule RheinMain</td>
                              </tr>
                              <tr></tr>
                              <tr>
                                <th scope="row">xmp.xmpRights:Marked</th>
                                <td>true</td>
                              </tr>
                              <tr>
                                <th scope="row">Copyright</th>
                                <td>© Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">Nutzungsbedingungen</th>
                                <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </section>
                  </details>
                </div>
              </figure>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
              <figure class="image-caption">
                <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                  <details>
                    <summary>
                      <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                    </summary>
                    <section class="image-caption__section">
                      <header><span class="h5">Fotodaten</span>
                        <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                <svg 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>
                      </header>
                      <div class="table-rwd">
                        <div class="table-rwd__overflow">
                          <table class="image-caption__metadata-table">
                            <tbody>
                              <tr>
                                <th scope="row">Künstler</th>
                                <td>Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">xmp.photoshop:Headline</th>
                                <td>Bildmaterial Hochschule RheinMain</td>
                              </tr>
                              <tr></tr>
                              <tr>
                                <th scope="row">xmp.xmpRights:Marked</th>
                                <td>true</td>
                              </tr>
                              <tr>
                                <th scope="row">Copyright</th>
                                <td>© Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">Nutzungsbedingungen</th>
                                <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </section>
                  </details>
                </div>
              </figure>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
              <figure class="image-caption">
                <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                  <details>
                    <summary>
                      <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                    </summary>
                    <section class="image-caption__section">
                      <header><span class="h5">Fotodaten</span>
                        <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                <svg 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>
                      </header>
                      <div class="table-rwd">
                        <div class="table-rwd__overflow">
                          <table class="image-caption__metadata-table">
                            <tbody>
                              <tr>
                                <th scope="row">Künstler</th>
                                <td>Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">xmp.photoshop:Headline</th>
                                <td>Bildmaterial Hochschule RheinMain</td>
                              </tr>
                              <tr></tr>
                              <tr>
                                <th scope="row">xmp.xmpRights:Marked</th>
                                <td>true</td>
                              </tr>
                              <tr>
                                <th scope="row">Copyright</th>
                                <td>© Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">Nutzungsbedingungen</th>
                                <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </section>
                  </details>
                </div>
              </figure>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
              <figure class="image-caption">
                <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                  <details>
                    <summary>
                      <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                    </summary>
                    <section class="image-caption__section">
                      <header><span class="h5">Fotodaten</span>
                        <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                                <svg 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>
                      </header>
                      <div class="table-rwd">
                        <div class="table-rwd__overflow">
                          <table class="image-caption__metadata-table">
                            <tbody>
                              <tr>
                                <th scope="row">Künstler</th>
                                <td>Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">xmp.photoshop:Headline</th>
                                <td>Bildmaterial Hochschule RheinMain</td>
                              </tr>
                              <tr></tr>
                              <tr>
                                <th scope="row">xmp.xmpRights:Marked</th>
                                <td>true</td>
                              </tr>
                              <tr>
                                <th scope="row">Copyright</th>
                                <td>© Andreas Schlote</td>
                              </tr>
                              <tr>
                                <th scope="row">Nutzungsbedingungen</th>
                                <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </section>
                  </details>
                </div>
              </figure>
          </figure>
        </div>
        <div class="c-gallery__image-wrapper">
          <figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
          </figure>
        </div>
      </div><a class="c-gallery__download-link" href="#" download="download">Download all images</a>
    </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--gallery">
      <section class="splide c-slider__section" aria-label="Image-gallery Slider">
        <div class="c-slider__track splide__track">
          <ul class="c-slider__list splide__list">
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x487" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x487" width="650" height="487" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/750x450" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/750x450" width="750" height="450" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg 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>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
          </ul>
        </div>
        <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="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>
      </section>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c041701" data-scrollspysection="1">
  <div class="container">
    <!-- Grid/ Element header-->
    <header class="frame__header">
      <h2>News Tiles mit und ohne Bild</h2>
    </header>
    <div class="flex">
      <div class="flex__md-6">
        <div class="c-news-tile c-news-tile--with-image"><a href="#"></a><img class="c-news-tile__image" src="https://placeholder.in2code.de/659x370" width="659" height="370" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
          <div class="c-news-tile__content"><span class="h4 u-bold">Starke IT-Kompetenz zentraler Erfolgsfaktor</span>
            <p>Digitalstaatssekretär Patrick Burghardt besucht Verwaltungsinformatik</p>
          </div><span class="c-news-tile__date">27.01.2024</span>
        </div>
      </div>
      <div class="flex__md-6">
        <div class="c-news-tile"><a href="#"></a>
          <div class="c-news-tile__content"><span class="h4 u-bold">Starke IT-Kompetenz zentraler Erfolgsfaktor</span>
            <p>Digitalstaatssekretär Patrick Burghardt besucht Verwaltungsinformatik</p>
          </div><span class="c-news-tile__date">27.01.2024</span>
        </div>
      </div>
    </div>
  </div>
</div>

<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>
                    <li><a href="#">List Item 3</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>
                  </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>
                    <li><a href="#">List Item 6</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>
                    <li><a href="#">List Item 3</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>
                  </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>
                    <li><a href="#">List Item 6</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">
    <div class="container">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-" id="c041702" data-scrollspysection="1">
              <div class="container">
                <div class="c-news-list">
                        <div class="c-news-list-item"><a href="#"></a><span class="c-news-list-item__date">27.01.2024</span>
                          <div class="c-news-list-item__content"><img class="c-news-list-item__image" src="https://placeholder.in2code.de/120x120" width="120" height="120" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
                            <div><span class="h4 u-bold">Lorem ipsum dolor sit amet consetetur</span>
                              <p class="c-news-list-item__teaser">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>
                          </div>
                        </div>
                        <div class="c-news-list-item"><a href="#"></a><span class="c-news-list-item__date">27.01.2024</span>
                          <div class="c-news-list-item__content"><img class="c-news-list-item__image" src="https://placeholder.in2code.de/120x120" width="120" height="120" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
                            <div><span class="h4 u-bold">Lorem ipsum dolor sit amet consetetur</span>
                              <p class="c-news-list-item__teaser">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>
                          </div>
                        </div>
                        <div class="c-news-list-item"><a href="#"></a><span class="c-news-list-item__date">27.01.2024</span>
                          <div class="c-news-list-item__content"><img class="c-news-list-item__image" src="https://placeholder.in2code.de/120x120" width="120" height="120" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
                            <div><span class="h4 u-bold">Lorem ipsum dolor sit amet consetetur</span>
                              <p class="c-news-list-item__teaser">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>
                          </div>
                        </div>
                        <div class="c-news-list-item"><a href="#"></a><span class="c-news-list-item__date">27.01.2024</span>
                          <div class="c-news-list-item__content"><img class="c-news-list-item__image" src="https://placeholder.in2code.de/120x120" width="120" height="120" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
                            <div><span class="h4 u-bold">Lorem ipsum dolor sit amet consetetur</span>
                              <p class="c-news-list-item__teaser">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>
                          </div>
                        </div>
                        <div class="c-news-list-item"><a href="#"></a><span class="c-news-list-item__date">27.01.2024</span>
                          <div class="c-news-list-item__content"><img class="c-news-list-item__image" src="https://placeholder.in2code.de/120x120" width="120" height="120" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
                            <div><span class="h4 u-bold">Lorem ipsum dolor sit amet consetetur</span>
                              <p class="c-news-list-item__teaser">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>
                          </div>
                        </div>
                        <div class="c-news-list-item"><a href="#"></a><span class="c-news-list-item__date">27.01.2024</span>
                          <div class="c-news-list-item__content"><img class="c-news-list-item__image" src="https://placeholder.in2code.de/120x120" width="120" height="120" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
                            <div><span class="h4 u-bold">Lorem ipsum dolor sit amet consetetur</span>
                              <p class="c-news-list-item__teaser">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>
                          </div>
                        </div>
                        <div class="c-news-list-item"><a href="#"></a><span class="c-news-list-item__date">27.01.2024</span>
                          <div class="c-news-list-item__content"><img class="c-news-list-item__image" src="https://placeholder.in2code.de/120x120" width="120" height="120" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
                            <div><span class="h4 u-bold">Lorem ipsum dolor sit amet consetetur</span>
                              <p class="c-news-list-item__teaser">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>
                          </div>
                        </div>
                        <div class="c-news-list-item"><a href="#"></a><span class="c-news-list-item__date">27.01.2024</span>
                          <div class="c-news-list-item__content"><img class="c-news-list-item__image" src="https://placeholder.in2code.de/120x120" width="120" height="120" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
                            <div><span class="h4 u-bold">Lorem ipsum dolor sit amet consetetur</span>
                              <p class="c-news-list-item__teaser">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>
                          </div>
                        </div>
                </div>
                <nav class="c-pagination" aria-label="Pagination Navigation">
                  <ul class="c-pagination__list o-list-bare">
                    <li><a class="c-pagination__controls c-pagination__controls--previous" href="/page-1">
                        <svg class="c-pagination__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="22px" height="22px">
                          <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-left"></use>
                        </svg><span class="u-visually-hidden">Zurück</span></a></li>
                    <li><a class="c-pagination__link" href="/page-1">1</a></li>
                    <li><a class="c-pagination__link" href="/page-2" aria-current="page">2</a></li>
                    <li><a class="c-pagination__link" href="/page-3">3</a></li>
                    <li><span>...</span></li>
                    <li><a class="c-pagination__link" href="/page-15">15</a></li>
                    <li><a class="c-pagination__controls c-pagination__controls--next" href="/page-3">
                        <svg class="c-pagination__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="22px" height="22px">
                          <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-right"></use>
                        </svg><span class="u-visually-hidden">Weiter</span></a></li>
                  </ul>
                </nav>
              </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>

<span class="c-news-tag">
  <svg class="c-news-tag__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="14" height="14">
    <use xlink:href="/Images/svg/sprite.symbol.svg#hashtag"></use>
  </svg>Kategorie</span>

<div class="c-news-card"><span class="h5 u-bold">Rückfragen oder Anmerkungen zum Artikel?</span>
  <p class="u-bold c-news-card__subheadline">Kontakt</p><a class="o-icon-text c-news-card__link" href="#">
    <svg class="o-icon-text__icon c-news-card__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#e-mail"></use>
    </svg>
    <div class="o-icon-text__content"><span class="o-icon-text__title">presse@hs-rm.de</span>
    </div></a>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c18456" data-scrollspysection="1">
  <div class="container ">
    <div class="flex flex--center">
      <div class="flex__md-4">
        <!-- Integrate from here--><a class="c-event-tile" href="#">
          <div class="c-event-tile__content">
            <div class="h3">Lorem ipsum dolor sit amet consetetur sadipscing</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.</p>
          </div>
          <div class="c-event-tile__footer">
            <div class="c-event-tile__banner">
              <svg class=".c-event-tile__banner-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#calendar"></use>
              </svg>
            </div>
            <div class="h4">Mi 29.03.2023</div>
          </div></a>
      </div>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c18456" data-scrollspysection="1">
  <div class="container ">
    <div class="flex flex--center">
      <div class="flex__md-4">
        <!-- Integrate from here-->
        <div class="c-event-tile c-event-tile--detail">
          <div class="c-event-tile__content">
            <div class="c-event-tile__banner"></div>
            <div class="c-event-tile__icontext">
              <svg class="c-event-tile__banner-icon c-event-tile__banner-icon--large" 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#calendar"></use>
              </svg>
              <div class="h1">Mi 29.03.2023</div>
            </div>
            <div class="c-event-tile__icontext">
              <svg class="c-event-tile__banner-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#clock"></use>
              </svg>16:30 Uhr
            </div>
            <div class="c-event-tile__icontext">
              <svg class="c-event-tile__banner-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#location-pin"></use>
              </svg>digital
            </div>
          </div>
          <div class="c-event-tile__footer"><a class="o-icon-text" href="#">
              <svg class="o-icon-text__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#download"></use>
              </svg>
              <div class="o-icon-text__content"><strong class="o-icon-text__title">in Kalender importieren</strong><span class="o-icon-text__subtitle">ICS Download</span>
              </div></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c041702" data-scrollspysection="1">
  <div class="container">
    <div class="c-event-list"><a class="c-event-tile" href="#">
        <div class="c-event-tile__content">
          <div class="h3">Tag der offenen Tür</div>
          <p>Komm und entdecke die Vielfalt unserer Studiengänge! Erhalte Einblicke in unsere Labore und Projekte.</p>
        </div>
        <div class="c-event-tile__footer">
          <div class="c-event-tile__banner">
            <svg class=".c-event-tile__banner-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#calendar"></use>
            </svg>
          </div>
          <div class="h4">Fr 24.04. - Sa 25.04.2024</div>
        </div></a><a class="c-event-tile" href="#">
        <div class="c-event-tile__content">
          <div class="h3">Workshop: Einführung in KI</div>
          <p>Lerne die Grundlagen künstlicher Intelligenz kennen. Dieser interaktive Workshop bietet praktische Übungen und Diskussionen.</p>
        </div>
        <div class="c-event-tile__footer">
          <div class="c-event-tile__banner">
            <svg class=".c-event-tile__banner-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#calendar"></use>
            </svg>
          </div>
          <div class="h4">Mo 27.04.2024</div>
        </div></a><a class="c-event-tile" href="#">
        <div class="c-event-tile__content">
          <div class="h3">Gastvortrag: Nachhaltige Architektur</div>
          <p>Ein Vortrag über die Zukunft nachhaltiger Bauweisen und städtischer Planung.</p>
        </div>
        <div class="c-event-tile__footer">
          <div class="c-event-tile__banner">
            <svg class=".c-event-tile__banner-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#calendar"></use>
            </svg>
          </div>
          <div class="h4">Di 28.04.2024</div>
        </div></a><a class="c-event-tile" href="#">
        <div class="c-event-tile__content">
          <div class="h3">Career Fair</div>
          <p>Treffe potenzielle Arbeitgeber und entdecke Jobmöglichkeiten in verschiedenen Branchen. Nutze die Chance, dich zu vernetzen und deinen Karriereweg zu planen.</p>
        </div>
        <div class="c-event-tile__footer">
          <div class="c-event-tile__banner">
            <svg class=".c-event-tile__banner-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#calendar"></use>
            </svg>
          </div>
          <div class="h4">Do 30.04. - Fr 01.05.2024</div>
        </div></a><a class="c-event-tile" href="#">
        <div class="c-event-tile__content">
          <div class="h3">Hackathon: Smart City Solutions</div>
          <p>Entwickle innovative Lösungen für städtische Herausforderungen. Bringe deine Ideen ein und arbeite mit einem vielfältigen Team von Fachleuten zusammen.</p>
        </div>
        <div class="c-event-tile__footer">
          <div class="c-event-tile__banner">
            <svg class=".c-event-tile__banner-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#calendar"></use>
            </svg>
          </div>
          <div class="h4">Mo 03.05. - Di 04.05.2024</div>
        </div></a><a class="c-event-tile" href="#">
        <div class="c-event-tile__content">
          <div class="h3">Abschlussfeier</div>
          <p>Feiere den Abschlussjahrgang und ihre Erfolge! Genieße eine festliche Veranstaltung mit Reden, Musik und Erinnerungen.</p>
        </div>
        <div class="c-event-tile__footer">
          <div class="c-event-tile__banner">
            <svg class=".c-event-tile__banner-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#calendar"></use>
            </svg>
          </div>
          <div class="h4">Fr 08.05.2024</div>
        </div></a><a class="c-event-tile" href="#">
        <div class="c-event-tile__content">
          <div class="h3">Semesterstart</div>
          <p>Ein neues Semester beginnt - sei dabei! Entdecke neue Kurse, schließe dich Clubs an und tauche ein in das Studentenleben.</p>
        </div>
        <div class="c-event-tile__footer">
          <div class="c-event-tile__banner">
            <svg class=".c-event-tile__banner-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#calendar"></use>
            </svg>
          </div>
          <div class="h4">Mo 13.05.2024</div>
        </div></a><a class="c-event-tile" href="#">
        <div class="c-event-tile__content">
          <div class="h3">Studienberatungstag</div>
          <p>Erhalte Unterstützung bei der Wahl deines Studiengangs und lerne mehr über Studienmöglichkeiten. Sprich mit unseren Beratern und erfahre, wie du deine akademischen Ziele erreichen kannst.</p>
        </div>
        <div class="c-event-tile__footer">
          <div class="c-event-tile__banner">
            <svg class=".c-event-tile__banner-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#calendar"></use>
            </svg>
          </div>
          <div class="h4">Mi 15.05.2024</div>
        </div></a><a class="c-event-tile" href="#">
        <div class="c-event-tile__content">
          <div class="h3">Alumni-Treffen</div>
          <p>Triff ehemalige Absolventen und erfahre, wo ihre Karrieren sie hingeführt haben. Tausche Erinnerungen aus und knüpfe neue Kontakte in unserem Alumni-Netzwerk.</p>
        </div>
        <div class="c-event-tile__footer">
          <div class="c-event-tile__banner">
            <svg class=".c-event-tile__banner-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#calendar"></use>
            </svg>
          </div>
          <div class="h4">Sa 18.05.2024</div>
        </div></a>
    </div>
  </div>
</div>

<div class="c-person-list-item">
  <p class="h3">Dr. Anna Müller</p><small>Professor</small>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__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#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">anna.mueller@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__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#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+491234567890</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>
<div class="c-person-list-item">
  <p class="h3">Max Mustermann</p><small>Associate Professor</small><small>&nbsp;| Engineering Department</small>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__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#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">max.mustermann@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__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#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+498765432109</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>
<div class="c-person-list-item">
  <p class="h3">Maria Schmidt</p><small>Lecturer</small><small>&nbsp;| Marketing Department</small>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__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#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">maria.schmidt@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__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#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+447812345678</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>
<div class="c-person-list-item">
  <p class="h3">Thomas Fischer</p><small>Assistant Professor</small>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__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#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">thomas.fischer@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__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#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+447801234567</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>
<div class="c-person-list-item">
  <p class="h3">Julia Wagner</p><small>Research Fellow</small><small>&nbsp;| Sociology Department</small>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__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#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">julia.wagner@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__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#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+491231231231</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>
<div class="c-person-list-item">
  <p class="h3">Michael Schneider</p>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__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#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">michael.schneider@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__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#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+491234567891</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c94984" data-scrollspysection="1">
  <div class="container ">
    <div class="c-person-card container--shadow">
      <div class="h3">Faculty of Engineering</div>
      <h1>Max Mustermann</h1>
      <div class="c-person-card__content-wrapper">
        <div class="c-person-card__image"><img src="https://placeholder.in2code.de/255x382" alt="Image of Max Mustermann" title="Image of Max Mustermann" width="255" height="382"/></div>
        <div class="c-person-card__content">
          <div class="c-person-card__position">
            <div class="h3">Associate Professor</div>
            <div class="c-person-card__info">
              <div class="o-icon-text">
                <svg class="o-icon-text__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#open-door"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">Raum 1, Haus1</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#e-mail"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">max.mustermann@hs-rm.de</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#phone"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">+49 000 0000-000</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#fax"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">+49 000 0000-001</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#clock"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">mittwochs, 09:00-10:00</strong><span class="o-icon-text__subtitle">sonst nach Vereinbarung per E-Mail </span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#envelope"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">Postanschrift</strong><span class="o-icon-text__subtitle">Musterstr. 2</span><span class="o-icon-text__subtitle">0000 Musterstadt</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#location-pin"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">Besuchsadresse</strong><span class="o-icon-text__subtitle">Musterstr. 3</span><span class="o-icon-text__subtitle">0000 Musterstadt</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c94984" data-scrollspysection="1">
  <div class="container ">
    <div class="c-person-card container--shadow">
      <div class="h3">Faculty of Engineering</div>
      <h1>Max Mustermann</h1>
      <div class="c-person-card__content-wrapper">
        <div class="c-person-card__image"><img src="https://placeholder.in2code.de/255x382" alt="Image of Max Mustermann" title="Image of Max Mustermann" width="255" height="382"/></div>
        <div class="c-person-card__content">
          <div class="c-person-card__position">
            <div class="h3">Associate Professor</div>
            <div class="c-person-card__info">
              <div class="o-icon-text">
                <svg class="o-icon-text__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#open-door"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">Raum 1, Haus1</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#e-mail"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">max.mustermann@hs-rm.de</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#phone"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">+49 000 0000-000</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#fax"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">+49 000 0000-001</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#clock"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">mittwochs, 09:00-10:00</strong><span class="o-icon-text__subtitle">sonst nach Vereinbarung per E-Mail </span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#envelope"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">Postanschrift</strong><span class="o-icon-text__subtitle">Musterstr. 2</span><span class="o-icon-text__subtitle">0000 Musterstadt</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#location-pin"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">Besuchsadresse</strong><span class="o-icon-text__subtitle">Musterstr. 3</span><span class="o-icon-text__subtitle">0000 Musterstadt</span>
                </div>
              </div>
            </div>
          </div>
          <div class="c-person-card__position">
            <div class="h3">Department Chair</div>
            <div class="c-person-card__info">
              <div class="o-icon-text">
                <svg class="o-icon-text__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#open-door"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">Raum 1, Haus1</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#e-mail"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">max.mustermann@hs-rm.de</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#phone"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">+49 000 0000-000</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#fax"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">+49 000 0000-001</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#clock"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">mittwochs, 09:00-10:00</strong><span class="o-icon-text__subtitle">sonst nach Vereinbarung per E-Mail </span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#envelope"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">Postanschrift</strong><span class="o-icon-text__subtitle">Musterstr. 2</span><span class="o-icon-text__subtitle">0000 Musterstadt</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#location-pin"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">Besuchsadresse</strong><span class="o-icon-text__subtitle">Musterstr. 3</span><span class="o-icon-text__subtitle">0000 Musterstadt</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c94984" data-scrollspysection="1">
  <div class="container ">
    <div class="c-person-card container--shadow">
      <div class="h3">Faculty of Engineering</div>
      <h1>Max Mustermann</h1>
      <div class="c-person-card__content-wrapper">
        <div class="c-person-card__content">
          <div class="c-person-card__position">
            <div class="h3">Associate Professor</div>
            <div class="c-person-card__info">
              <div class="o-icon-text">
                <svg class="o-icon-text__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#open-door"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">Raum 1, Haus1</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#e-mail"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">max.mustermann@hs-rm.de</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#phone"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">+49 000 0000-000</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#fax"></use>
                </svg>
                <div class="o-icon-text__content"><span class="o-icon-text__title">+49 000 0000-001</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#clock"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">mittwochs, 09:00-10:00</strong><span class="o-icon-text__subtitle">sonst nach Vereinbarung per E-Mail </span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#envelope"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">Postanschrift</strong><span class="o-icon-text__subtitle">Musterstr. 2</span><span class="o-icon-text__subtitle">0000 Musterstadt</span>
                </div>
              </div>
              <div class="o-icon-text">
                <svg class="o-icon-text__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#location-pin"></use>
                </svg>
                <div class="o-icon-text__content"><strong class="o-icon-text__title">Besuchsadresse</strong><span class="o-icon-text__subtitle">Musterstr. 3</span><span class="o-icon-text__subtitle">0000 Musterstadt</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c94984" data-scrollspysection="1">
  <div class="container ">
    <div class="c-person-contact container--shadow">
      <div class="o-icon-text">
        <svg class="o-icon-text__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#adress-card"></use>
        </svg>
        <div class="o-icon-text__content"><strong class="o-icon-text__title">Prof. Dr. Max Mustermann</strong><span class="o-icon-text__subtitle">Fachbereich</span>
        </div>
      </div>
      <div class="o-icon-text">
        <svg class="o-icon-text__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#e-mail"></use>
        </svg>
        <div class="o-icon-text__content"><span class="o-icon-text__title">max.mustermann@hs-rm.de</span>
        </div>
      </div>
      <div class="o-icon-text">
        <svg class="o-icon-text__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#phone"></use>
        </svg>
        <div class="o-icon-text__content"><span class="o-icon-text__title">+49 000 0000-000</span>
        </div>
      </div>
      <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
    </div>
  </div>
</div>

<a class="c-top-link" href="#top" title="Scroll to top">
  <svg 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-up"></use>
  </svg></a>

<div class="c-accordionnavigation">
  <h3>Name der Navigation</h3>
  <div class="c-accordion-group">
    <div class="c-accordion h3">
      <button class="c-accordion__trigger c-accordion__trigger--active"><a href="#">Vorarbeit</a></button>
    </div>
    <div class="c-accordion__section" hidden="hidden">
      <p><a href="#">Zielgruppe definieren</a></p>
      <p class="c-accordion__sectionitem--active"><a href="#">Inhalte sortieren (intern/extern)</a></p>
      <ul>
        <li><a href="#">Interne Inhalte</a></li>
        <li><a href="#">Externe Inhalte</a></li>
      </ul>
    </div>
    <div class="c-accordion h3">
      <button class="c-accordion__trigger"><a href="#">Übersicht Inhaltselemente</a></button>
    </div>
    <div class="c-accordion__section" hidden="hidden">
      <p><a href="#">Text &amp; Medien</a></p>
      <p><a href="#">Lokale Kontaktbox</a></p>
      <p><a href="#">Personen-Kontaktbox</a></p>
      <p><a href="#">Galerien</a></p>
      <p><a href="#">Events (Terminankündigung)</a></p>
      <p><a href="#">News (Meldungen)</a></p>
      <p><a href="#">Kacheln</a></p>
      <p><a href="#">Akkordeon</a></p>
      <p><a href="#">Teaser</a></p>
      <p><a href="#">Spalten</a></p>
    </div>
    <div class="c-accordion h3">
      <button class="c-accordion__trigger"><a href="#">Struktur von Web-Texten</a></button>
    </div>
    <div class="c-accordion__section" hidden="hidden">
      <p><a href="#">Allgemein</a></p>
      <p><a href="#">Einheitliche Schreibweisen</a></p>
      <p><a href="#">Links und Buttons</a></p>
      <p><a href="#">Darstellungsformen</a></p>
      <p><a href="#">SEO bei Texten</a></p>
      <p><a href="#">Einsatz von KI</a></p>
      <p><a href="#">Rechtliche Hinweise</a></p>
    </div>
  </div>
</div>

<nav class="c-breadcrumb" aria-label="Breadcrumb Navigation">
  <ol class="c-breadcrumb__list o-list-bare">
    <li class="c-breadcrumb__item u-visually-hidden">Sie befinden sich auf der Seite Studiengänge</li>
    <li class="c-breadcrumb__item"><a class="c-breadcrumb__link" href="#" title="Home">
        <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="14px" width="14px">
          <use xlink:href="/Images/svg/sprite.symbol.svg#house"></use>
        </svg></a></li>
    <li class="c-breadcrumb__item"><a class="c-breadcrumb__link" href="/studium">Studium</a></li>
    <li class="c-breadcrumb__item"><span>Studiengänge</span></li>
  </ol>
</nav>

<!-- Grid/ Element container-->
<div class="frame frame-type-timeline" id="c1016" data-scrollspysection="1">
  <div class="container ">
    <!-- Grid/ Element header-->
    <header class="frame__header">
      <h2>Timeline Container</h2>
    </header>
    <div class="c-timeline">
      <div class="splide splide--timeline splide--timeline-nav">
        <div class="splide__track">
          <div class="splide__list">
            <div class="splide__slide"><span class="c-timeline__year">1993</span><span class="c-timeline__deko"></span></div>
            <div class="splide__slide"><span class="c-timeline__year">2023</span><span class="c-timeline__deko"></span></div>
            <div class="splide__slide"><span class="c-timeline__year">2024</span><span class="c-timeline__deko"></span></div>
          </div>
        </div>
      </div>
      <div class="splide splide--timeline splide--timeline-content">
        <div class="splide__track">
          <div class="splide__list">
            <div class="c-slider__slide splide__slide">
                                  <!-- Grid/ Element container-->
                                  <div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
                                    <div class="container">
                                                <div class="c-textmedia c-textmedia--center c-textmedia--above c-textmedia--image">
                                                            <div class="c-textmedia__gallery" data-ce-columns="1" data-ce-images="1">
                                                              <div class="ce-row">
                                                                <div class="ce-column">
                                                                  <figure class="image">
                                                                    <picture>
                                                                      <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                                                                      <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                                                                      <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                                                                    </picture>
                                                                    <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                                                                  </figure>
                                                                </div>
                                                              </div>
                                                            </div>
                                                  <div class="c-textmedia__bodytext">
                                                              <!-- Grid/ Element header-->
                                                              <header class="frame__header">
                                                                <h2>Demo - Textmedia - Above, center</h2>
                                                              </header>
                                                    <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
                                                    <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
                                                  </div>
                                                </div>
                                    </div>
                                  </div>
            </div>
            <div class="c-slider__slide splide__slide">
                                  <!-- Grid/ Element container-->
                                  <div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
                                    <div class="container">
                                                <div class="c-textmedia c-textmedia--left c-textmedia--intext c-textmedia--image">
                                                            <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="4">
                                                              <div class="ce-row">
                                                                <div class="ce-column">
                                                                  <figure class="image">
                                                                    <picture>
                                                                      <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                                                                      <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                                                                      <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                                                                    </picture>
                                                                    <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                                                                  </figure>
                                                                </div>
                                                                <div class="ce-column">
                                                                  <figure class="image">
                                                                    <picture>
                                                                      <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                                                                      <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                                                                      <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                                                                    </picture>
                                                                    <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                                                                  </figure>
                                                                </div>
                                                              </div>
                                                              <div class="ce-row">
                                                                <div class="ce-column">
                                                                  <figure class="image">
                                                                    <picture>
                                                                      <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                                                                      <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                                                                      <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                                                                    </picture>
                                                                  </figure>
                                                                </div>
                                                                <div class="ce-column">
                                                                  <figure class="image">
                                                                    <picture>
                                                                      <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                                                                      <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                                                                      <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                                                                    </picture>
                                                                  </figure>
                                                                </div>
                                                              </div>
                                                            </div>
                                                  <div class="c-textmedia__bodytext">
                                                              <!-- Grid/ Element header-->
                                                              <header class="frame__header">
                                                                <h2>Demo - Textmedia - Beside Text, Left</h2>
                                                              </header>
                                                    <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
                                                    <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
                                                  </div>
                                                </div>
                                    </div>
                                  </div>
            </div>
            <div class="c-slider__slide splide__slide">
                                  <!-- Grid/ Element container-->
                                  <div class="frame frame-type-textmedia" id="c10006" data-scrollspysection="1">
                                    <div class="container">
                                                <div class="c-textmedia c-textmedia--center c-textmedia--above c-textmedia--image">
                                                            <div class="c-textmedia__gallery" data-ce-columns="1" data-ce-images="1">
                                                              <div class="ce-row">
                                                                <div class="ce-column">
                                                                  <figure class="image">
                                                                    <picture>
                                                                      <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
                                                                      <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
                                                                      <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
                                                                    </picture>
                                                                    <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
                                                                  </figure>
                                                                </div>
                                                              </div>
                                                            </div>
                                                  <div class="c-textmedia__bodytext">
                                                              <!-- Grid/ Element header-->
                                                              <header class="frame__header">
                                                                <h2>Demo - Textmedia - Above, center</h2>
                                                              </header>
                                                    <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. 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. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
                                                    <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 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.</p>
                                                  </div>
                                                </div>
                                    </div>
                                  </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>