<div class="sticky-container">
  <header class="page__header">
    <div class="container">
      <div class="top-header">
        <div class="header-logo">
          <div class="header-logo__left"><a class="c-main-logo" href="https://www.tum.de" target="_blank" rel="noopener">
              <svg xmlns="http://www.w3.org/2000/svg" width="78" height="38" viewbox="0 0 73 38">
                <path fill="currentColor" d="M28 0v31h8V0h37v38h-7V7h-8v31h-7V7h-8v31H21V7h-7v31H7V7H0V0h28z"></path>
              </svg><span class="u-visually-hidden">Technische Universität München</span></a></div>
          <div class="header-logo__right"><a href="#">TUM Campus Heilbronn</a><a href="https://www.tum.de">Technische Universität München</a></div>
        </div>
        <div class="header-misc">
          <nav class="c-language-menu" aria-label="Language"><a class="c-language-menu__link c-language-menu__link--active" href="#" aria-current="page">EN</a><a class="c-language-menu__link" href="#">DE</a>
          </nav>
          <button class="btn btn--menu" aria-controls="c-main-menu" aria-expanded="false" type="button">
            <svg class="menu-open active" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-burger"></use>
            </svg>
            <svg class="menu-close" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-close"></use>
            </svg><span class="u-visually-hidden">Menu</span>
          </button>
        </div>
      </div>
      <div class="bottom-header">
        <div class="bottom-header__left">
          <nav class="c-main-menu" id="c-main-menu" aria-label="Hauptnavigation">
            <div class="c-main-menu__list-wrapper">
              <ul class="c-main-menu__list" data-level="1" data-ul="1">
                <li class="c-main-menu__item c-main-menu__item--has-submenu">
                  <button class="btn c-main-menu__link" type="button" data-level="1" data-target="2-0"><span>1 Subpage</span>
                    <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                    </svg>
                  </button>
                </li>
                <li class="c-main-menu__item c-main-menu__item--has-submenu">
                  <button class="btn c-main-menu__link c-main-menu__link--active" type="button" data-level="1" data-target="2-1"><span>2 Subpage</span>
                    <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                    </svg>
                  </button>
                </li>
                <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="1" href="#">3 Subpage</a>
                </li>
                <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="1" href="#">4 Subpage</a>
                </li>
              </ul>
              <div class="c-main-menu__container" data-ul="2-0">
                <div class="container">
                  <button class="btn c-main-menu__close" type="button" aria-controls="c-main-menu" aria-expanded="true">
                    <svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <use xlink:href="Images/svg/sprite.symbol.svg#icon-close"></use>
                    </svg><span class="u-visually-hidden">Schließen</span>
                  </button>
                  <ul class="c-main-menu__list" data-level="2">
                    <li class="c-main-menu__item c-main-menu__item--back">
                      <button class="btn c-main-menu__link c-main-menu__link--back" type="button" data-level="1" data-target="1">
                        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
                        </svg><span>1 Subpage</span>
                      </button>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-1 Subpage</a>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-2 Subpage</a>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-3 Subpage</a>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-4 Subpage</a>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-5 Subpage</a>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-6 Subpage</a>
                    </li>
                  </ul>
                  <div class="c-main-menu__content"><a class="c-main-menu-content" href="#">
                      <div class="c-main-menu-content__image"></div>
                      <div class="c-main-menu-content__text">
                        <p class="text-white"><b>Beispiel Seite</b></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
                      </div></a><a class="c-main-menu-content" href="#">
                      <div class="c-main-menu-content__image"></div>
                      <div class="c-main-menu-content__text">
                        <p class="text-white"><b>Weitere Seite</b></p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                      </div></a></div>
                </div>
              </div>
              <div class="c-main-menu__container" data-ul="2-1">
                <div class="container">
                  <button class="btn c-main-menu__close" type="button" aria-controls="c-main-menu" aria-expanded="true">
                    <svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <use xlink:href="Images/svg/sprite.symbol.svg#icon-close"></use>
                    </svg><span class="u-visually-hidden">Schließen</span>
                  </button>
                  <ul class="c-main-menu__list" data-level="2">
                    <li class="c-main-menu__item c-main-menu__item--back">
                      <button class="btn c-main-menu__link c-main-menu__link--back" type="button" data-level="1" data-target="1">
                        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
                        </svg><span>2 Subpage</span>
                      </button>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">2-1 Subpage</a>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link c-main-menu__link--active" data-level="2" href="#">2-2 Subpage</a>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">2-3 Subpage</a>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">2-4 Subpage</a>
                    </li>
                    <li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">2-5 Subpage</a>
                    </li>
                  </ul>
                  <div class="c-main-menu__content"><a class="c-main-menu-content" href="#">
                      <div class="c-main-menu-content__image"></div>
                      <div class="c-main-menu-content__text">
                        <p class="text-white"><b>Beispiel Seite</b></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
                      </div></a><a class="c-main-menu-content" href="#">
                      <div class="c-main-menu-content__image"></div>
                      <div class="c-main-menu-content__text">
                        <p class="text-white"><b>Weitere Seite</b></p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                      </div></a></div>
                </div>
              </div>
              <nav class="c-language-menu" aria-label="Language"><a class="c-language-menu__link c-language-menu__link--active" href="#" aria-current="page">EN</a><a class="c-language-menu__link" href="#">DE</a>
              </nav>
            </div>
          </nav>
        </div>
        <div class="bottom-header__right"><a href="#phone">
            <svg class="menu-open active" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-phone-2"></use>
            </svg><span class="u-visually-hidden">Telefon</span></a><a href="#mail">
            <svg class="menu-open active" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-mail-2"></use>
            </svg><span class="u-visually-hidden">E-Mail</span></a></div>
      </div>
    </div>
  </header>
</div>

<footer class="page__footer footer frame-space-before-medium">
  <div class="frame--background">
    <div class="container">
      <h2>Follow us</h2>
      <div class="footer__social-media"><a href="https://www.instagram.com/tum.campus.hn/" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-instagram"></use>
          </svg><span class="u-visually-hidden">Instagram</span></a><a href="https://www.facebook.com/TUM.Campus.Heilbronn" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-facebook"></use>
          </svg><span class="u-visually-hidden">Facebook</span></a><a href="https://www.tiktok.com/@tum.campus.hn" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-tiktok"></use>
          </svg><span class="u-visually-hidden">TikTok</span></a><a href="https://www.youtube.com/@TUM.Campus.Heilbronn" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-youtube"></use>
          </svg><span class="u-visually-hidden">YouTube</span></a><a href="https://www.linkedin.com/company/tum-campus-heilbronn/" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-linkedin"></use>
          </svg><span class="u-visually-hidden">Linkedin</span></a></div>
      <div class="flex">
        <div class="flex__md-8">
          <div class="flex">
            <div class="flex__md-6 flex__lg-4"><b>Campus</b>
              <ul>
                <li><a href="#">Campus Heilbronn</a></li>
                <li><a href="#">Student Services</a></li>
                <li><a href="#">Explore Heilbronn</a></li>
                <li><a href="#">Alumni</a></li>
              </ul>
            </div>
            <div class="flex__md-6 flex__lg-4"><b>Stories</b>
              <ul>
                <li><a href="#">News</a></li>
                <li><a href="#">Mindshift Magazine</a></li>
                <li><a href="#">Blog</a></li>
              </ul>
            </div>
            <div class="flex__md-6 flex__lg-4"><b>Legal</b>
              <ul>
                <li><a href="#">Imprint</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Declaration of Accessibility</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="flex__md-4"><b>Kontakt</b>
          <ul>
            <li>Die TUM Campus Heilbronn gGmbH</li>
            <li>Bildungscampus 2</li>
            <li>74076 Heilbronn</li>
            <li id="phone">Telefon&nbsp;<a href="tel:+497131264180">+49 (0) 7131 264180</a></li>
            <li id="mail">E-Mail&nbsp;<a href="mailto:info.hn@chn.tum.de">info.hn@chn.tum.de</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

<div class="c-stage-home">
  <picture class="c-stage-home__image">
    <source srcset="https://placeholder.in2code.de/2560x800" media="(min-width: 1920px)" type="image/webp"/>
    <source srcset="https://placeholder.in2code.de/1920x800" media="(min-width: 768px)" type="image/webp"/>
    <source srcset="https://placeholder.in2code.de/768x800" type="image/webp"/><img loading="eager" src="https://placeholder.in2code.de/2560x800" width="2560" height="1080" alt=""/>
  </picture>
  <div class="c-stage-home__content">
    <div class="container">
      <header class="frame__header">
        <h1>Welcome at TUM Campus Heilbronn</h1>
      </header>
      <p>Since fall 2018 the renowned<a href="https://www.tum.de/en/" target="_blank" rel="noreferrer">
          <u>Technical University of Munich</u></a> is present at the Bildungscampus Heilbronn and offers a wide variety of services to its more than 500 students in five programs. The state-of-the-art campus of the Dieter Schwarz Foundation and the excellence in research and teaching are now an integral part of one of the most innovative regions in Germany.</p>
    </div>
  </div>
</div>
<div class="c-stage-cards container">
  <div class="c-stage-card c-stage-card--grey">
    <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
    <div class="c-stage-card__content">
      <p>dfgdfg</p><a class="btn btn--icon" href="/"><span>dfgfdg</span>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
        </svg></a>
    </div>
  </div>
  <div class="c-stage-card c-stage-card--orange">
    <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
    <div class="c-stage-card__content">
      <p>fdgdfg</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
        </svg></a>
    </div>
  </div>
  <div class="c-stage-card c-stage-card--purple">
    <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
    <div class="c-stage-card__content">
      <p>rferf</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
        </svg></a>
    </div>
  </div>
</div>
<div class="c-slider c-stage-cards-slider container">
  <section class="splide c-slider__section" aria-label="Slider Cards">
    <div class="c-slider__track splide__track">
      <ul class="c-slider__list splide__list">
        <li class="c-slider__slide splide__slide">
          <div class="c-stage-card c-stage-card--grey c-stage-card--slider">
            <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
            <div class="c-stage-card__content">
              <p>dfgdfg</p><a class="btn btn--icon" href="/"><span>dfgfdg</span>
                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
                </svg></a>
            </div>
          </div>
        </li>
        <li class="c-slider__slide splide__slide">
          <div class="c-stage-card c-stage-card--orange c-stage-card--slider">
            <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
            <div class="c-stage-card__content">
              <p>fdgdfg</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
                </svg></a>
            </div>
          </div>
        </li>
        <li class="c-slider__slide splide__slide">
          <div class="c-stage-card c-stage-card--purple c-stage-card--slider">
            <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
            <div class="c-stage-card__content">
              <p>rferf</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
                </svg></a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="c-slider__pagination splide__pagination"></div>
  </section>
</div>

<div class="c-stage-subpage">
  <picture class="c-stage-subpage__image">
    <source srcset="https://placeholder.in2code.de/2560x800" media="(min-width: 1920px)" type="image/webp"/>
    <source srcset="https://placeholder.in2code.de/1920x800" media="(min-width: 768px)" type="image/webp"/>
    <source srcset="https://placeholder.in2code.de/768x800" type="image/webp"/><img loading="eager" fetchpriority="high" src="https://placeholder.in2code.de/2560x800" width="2560" height="1080" alt=""/>
  </picture>
  <div class="container">
    <div class="c-stage-subpage__content [modifier class]">
      <p class="roofline"></p>
      <h1>Campus Heilbronn</h1>
      <p>Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.</p>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--center c-textmedia--above c-textmedia--flex">
    <div class="c-textmedia__gallery" data-ce-columns="1" data-ce-images="1">
      <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="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>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--center c-textmedia--below c-textmedia--flex">
    <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="3">
      <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>
      <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>
      <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>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--left c-textmedia--intext c-textmedia--flex">
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <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>
      <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>
      <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="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>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--right c-textmedia--intext c-textmedia--flex">
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <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>
      <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>
      <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="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>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--left c-textmedia--intext c-textmedia--float">
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <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>
      <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>
      <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="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - In 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>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--right c-textmedia--intext c-textmedia--float">
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <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>
      <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>
      <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="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - In 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>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--right c-textmedia--intext c-textmedia--flex">
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <figure class="image"><a class="glightbox" href="https://placeholder.in2code.de/700x525.png" data-gallery="gallery1234" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa">
          <picture>
            <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050.png" type="image/webp"/>
            <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750.png" type="image/webp"/>
            <source srcset="https://placeholder.in2code.de/700x525.png" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050.png" alt="" loading="lazy" decoding="async"/>
          </picture>
          <div class="image__overlay">
            <lupe></lupe>
          </div></a>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image"><a class="glightbox" href="https://placeholder.in2code.de/700x525.png" data-gallery="gallery1234" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa">
          <picture>
            <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050.png" type="image/webp"/>
            <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750.png" type="image/webp"/>
            <source srcset="https://placeholder.in2code.de/700x525.png" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050.png" alt="" loading="lazy" decoding="async"/>
          </picture>
          <div class="image__overlay">
            <lupe></lupe>
          </div></a>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image"><a class="glightbox" href="https://placeholder.in2code.de/700x525.png" data-gallery="gallery1234" data-description="">
          <picture>
            <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050.png" type="image/webp"/>
            <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750.png" type="image/webp"/>
            <source srcset="https://placeholder.in2code.de/700x525.png" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050.png" alt="" loading="lazy" decoding="async"/>
          </picture>
          <div class="image__overlay">
            <lupe></lupe>
          </div></a>
      </figure>
    </div>
    <div class="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - Beside Text, Right - With Lightbox</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>
      <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>
      <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>

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--center c-textmedia--above c-textmedia--flex">
    <div class="c-textmedia__gallery" data-ce-columns="1" data-ce-images="0">
    </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>

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium frame--full frame--background frame--blue" id="c23861">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Accordion</h2>
  </header>
  <div class="c-accordion">
    <div class="c-accordion__item">
      <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-c1" id="c-accordion__id-c1"><span class="c-accordion__item-title h6">Accordion Title</span><span class="c-accordion__item-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down"></use>
          </svg></span></button>
      <div class="c-accordion__item-panel" id="c-accordion__sect-c1" role="region" aria-labelledby="c-accordion__id-c1">
        <div>
          <div class="rte-content">
            <ul>
              <li><a href="#">Campus Heilbronn</a>
                <ul>
                  <li><a href="#">Test</a></li>
                </ul>
              </li>
              <li><a href="#">Student Services</a></li>
              <li><a href="#">Explore Heilbronn</a>
                <ol>
                  <li><a href="#">Test 1</a></li>
                  <li><a href="#">Test 2</a></li>
                </ol>
              </li>
              <li><a href="#">Alumni</a></li>
            </ul>
            <p><strong>Strong is used to indicate strong importance.</strong>&nbsp;<a href="#">This is a text link.</a>&nbsp;<em>This text has added emphasis.</em>&nbsp;<strong><a href="#">This is a bold text link.</a></strong>&nbsp;<em><a href="#">This text link has added emphasis.</a></em></p>
            <ul class="ul-style-check">
              <li><a href="#">Campus Heilbronn</a>
                <ul>
                  <li><a href="#">Test</a></li>
                </ul>
              </li>
              <li><a href="#">Student Services</a></li>
              <li><a href="#">Explore Heilbronn</a></li>
              <li><a href="#">Alumni</a>
                <ol>
                  <li><a href="#">Test 1</a></li>
                  <li><a href="#">Test 2</a></li>
                </ol>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="c-accordion__item">
      <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-c2" id="c-accordion__id-c2"><span class="c-accordion__item-title h6">Accordion Title</span><span class="c-accordion__item-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down"></use>
          </svg></span></button>
      <div class="c-accordion__item-panel" id="c-accordion__sect-c2" role="region" aria-labelledby="c-accordion__id-c2">
        <div>
          <div class="rte-content">
            <ul>
              <li><a href="#">Campus Heilbronn</a></li>
              <li><a href="#">Student Services</a></li>
              <li><a href="#">Explore Heilbronn</a></li>
              <li><a href="#">Alumni</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium frame--small" id="c23987">
  <div class="c-quote">
    <svg width="73" height="71" viewbox="0 0 73 71" aria-hidden="true" focusable="false">
      <svg width="73" height="71" viewBox="0 0 73 71" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-quote"></use>
      </svg>
    </svg>
    <blockquote>
      <p class="h5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br/><br/>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. Lorem ipsu.</p>
      <footer itemprop="author publisher">
        <p class="h6" itemprop="name">Max Muster,<br/>CEO Umbrella Corporation</p>
      </footer>
    </blockquote>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium" id="c53245">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Downloads</h2>
  </header>
  <div class="c-downloads">
    <ul class="flex">
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-arrivals-winter-semester-2023.pdf" target="_blank">Titel des Downloads in kleiner &Uuml;berl&auml;nge</a>
          <p class="c-downloads__item-type">pdf, 126 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-press-mindshift-magazine-second-edition-english.pdf" target="_blank">tum-campus-heilbronn-press-mindshift-magazine-second-edition-english.pdf</a>
          <p class="c-downloads__item-type">pdf, 2 MB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-press-mindshift-magazine-second-edition-german.pdf" target="_blank">tum-campus-heilbronn-press-mindshift-magazine-second-edition-german.pdf</a>
          <p class="c-downloads__item-type">pdf, 2 MB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-student-handbook.pdf" target="_blank">tum-campus-heilbronn-student-handbook.pdf</a>
          <p class="c-downloads__item-type">pdf, 908 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-tum-talk-2023-chn-de.pdf" target="_blank">tum-campus-heilbronn-tum-talk-2023-chn-de.pdf</a>
          <p class="c-downloads__item-type">pdf, 114 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-tum-talk-2023-chn-en.pdf" target="_blank">tum-campus-heilbronn-tum-talk-2023-chn-en.pdf</a>
          <p class="c-downloads__item-type">pdf, 109 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
    </ul>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium" id="c5284">
  <div class="c-highlight">
    <picture class="c-highlight__image c-highlight__image--large">
      <source srcset="https://placeholder.in2code.de/1160x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/1160x600" title="" alt="" loading="lazy" maxwidth="1160"/>
    </picture>
    <picture class="c-highlight__image">
      <source srcset="https://placeholder.in2code.de/580x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/860x600" title="" alt="" loading="lazy" maxwidth="860"/>
    </picture>
    <picture class="c-highlight__image">
      <source srcset="https://placeholder.in2code.de/580x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/860x600" title="" alt="" loading="lazy" maxwidth="860"/>
    </picture>
    <picture class="c-highlight__image">
      <source srcset="https://placeholder.in2code.de/580x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/860x600" title="" alt="" loading="lazy" maxwidth="860"/>
    </picture>
    <picture class="c-highlight__image">
      <source srcset="https://placeholder.in2code.de/580x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/860x600" title="" alt="" loading="lazy" maxwidth="860"/>
    </picture>
    <picture class="c-highlight__image">
      <source srcset="https://placeholder.in2code.de/580x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/860x600" title="" alt="" loading="lazy" maxwidth="860"/>
    </picture>
    <picture class="c-highlight__image c-highlight__image--large">
      <source srcset="https://placeholder.in2code.de/1160x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/1160x600" title="" alt="" loading="lazy" maxwidth="1160"/>
    </picture>
  </div>
</div>

<div class="c-page-menu [modifier class]">
  <div class="c-page-menu__item"><a href="#">
      <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
      </svg><span>Linktext</span></a></div>
  <div class="c-page-menu__item"><a href="#">
      <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
      </svg><span>Linktext</span></a></div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-buttons frame-space-before-medium" id="c52234">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Buttons</h2>
  </header>
  <div class="c-buttons c-buttons--left"><a class="btn btn--primary btn--filled btn--icon" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
      </svg><span>test</span></a><a class="btn btn--secondary btn--outline" href="/">Test2</a><a class="btn btn--primary btn--outline btn--large btn--icon btn--icon-right" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
      </svg><span>test3</span></a></div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-buttons frame-space-before-medium" id="c52234">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Key facts</h2>
  </header>
  <div class="c-keyfacts flex">
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="56" height="56" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-calendar"></use>
      </svg><b>Key fact title</b><span>Key fact text</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="56" height="56" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-check"></use>
      </svg><b>Key fact title</b><span>Key fact text</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="56" height="56" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-poi"></use>
      </svg><b>Key fact title</b><span>Key fact text</span>
    </div>
  </div>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-textdownloads frame-space-before-medium" id="c52234">
  <div class="c-textdownload frame--blue-light-283">
    <!-- Grid/ Element header-->
    <header class="frame__header">
      <h2>Text-Downloads</h2>
    </header>
    <div class="c-textdownload__text rte-content">Bodytext</div>
    <div class="c-textdownload__buttons c-buttons"><a class="btn btn--primary btn--filled btn--icon" href="/">
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg><span>Textlink</span></a><a class="btn btn--secondary btn--filled" href="/">Textlink</a></div>
  </div>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none frame--full frame--background frame--blue-dark-301" id="c000001">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--small" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Teaser "Hero" - in small-width container</h2>
        </header>
        <div class="c-teaser-hero-container">
          <div class="c-teaser-hero">
            <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/1/635/635"/></div>
          </div>
          <div class="c-teaser-hero">
            <div class="c-teaser-hero__content c-teaser-hero--blue-grey">
              <!-- Grid/ Element header-->
              <header class="frame__header">
                <h4>Unternehmen x TUM Campus Heilbronn - Ihr Partner für Innovation, Talente und Wachstum</h4>
              </header>
              <div class="c-textmedia__bodytext">
                <p>Am TUM Campus Heilbronn treffen Wissenschaft, Technologie und Unternehmertum aufeinander. Wir bieten Unternehmen aller Größen ein dynamisches Umfeld, um Innovationen voranzutreiben, Fachkräfte zu gewinnen und gemeinsam an Zukunftslösungen zu arbeiten. Profitieren Sie von unserem Netzwerk, modernster Technologie und praxisnahen Kooperationen – so sind Sie optimal für die Zukunft gerüstet.</p>
                <p><a class="btn btn--primary btn--filled" href="#">Mehr erfahren</a></p>
              </div>
            </div>
          </div>
          <div class="c-teaser-hero">
            <div class="c-teaser-hero__content c-teaser-hero--blue-grey">
              <!-- Grid/ Element header-->
              <header class="frame__header">
                <h4>Weiterbildung am TUM Campus Heilbronn – Wissen, das bewegt</h4>
              </header>
              <div class="c-textmedia__bodytext">
                <p>Am TUM Campus Heilbronn treffen Wissenschaft, Technologie und Unternehmertum aufeinander. Wir bieten Unternehmen aller Größen ein dynamisches Umfeld, um Innovationen voranzutreiben, Fachkräfte zu gewinnen und gemeinsam an Zukunftslösungen zu arbeiten. Profitieren Sie von unserem Netzwerk, modernster Technologie und praxisnahen Kooperationen – so sind Sie optimal für die Zukunft gerüstet.</p>
                <p><a class="btn btn--primary btn--filled" href="#">Mehr erfahren</a></p>
              </div>
            </div>
          </div>
          <div class="c-teaser-hero">
            <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none frame--full frame--background frame--blue" id="c000002">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--default" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Teaser "Hero" - in 50-50 grid</h2>
        </header>
        <div class="flex">
          <div class="flex__md-6">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-frame frame--default" id="c">
              <div class="c-teaser-hero-container">
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/1/635/635"/></div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex__md-6">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-frame frame--default" id="c">
              <div class="c-teaser-hero-container">
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__content c-teaser-hero--blue-grey">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Weiterbildung am TUM Campus Heilbronn – Wissen, das bewegt</h4>
                    </header>
                    <div class="c-textmedia__bodytext">
                      <p>Am TUM Campus Heilbronn treffen Wissenschaft, Technologie und Unternehmertum aufeinander. Wir bieten Unternehmen aller Größen ein dynamisches Umfeld, um Innovationen voranzutreiben, Fachkräfte zu gewinnen und gemeinsam an Zukunftslösungen zu arbeiten. Profitieren Sie von unserem Netzwerk, modernster Technologie und praxisnahen Kooperationen – so sind Sie optimal für die Zukunft gerüstet.</p>
                      <p><a class="btn btn--primary btn--filled" href="#">Mehr erfahren</a></p>
                    </div>
                  </div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__content c-teaser-hero--blue-grey">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Unternehmen x TUM Campus Heilbronn - Ihr Partner für Innovation, Talente und Wachstum</h4>
                    </header>
                    <div class="c-textmedia__bodytext">
                      <p>Am TUM Campus Heilbronn treffen Wissenschaft, Technologie und Unternehmertum aufeinander. Wir bieten Unternehmen aller Größen ein dynamisches Umfeld, um Innovationen voranzutreiben, Fachkräfte zu gewinnen und gemeinsam an Zukunftslösungen zu arbeiten. Profitieren Sie von unserem Netzwerk, modernster Technologie und praxisnahen Kooperationen – so sind Sie optimal für die Zukunft gerüstet.</p>
                      <p><a class="btn btn--primary btn--filled" href="#">Mehr erfahren</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none frame--full frame--background frame--blue-dark-301" id="c000002">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--small" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Teaser "Cards"</h2>
        </header>
        <div class="c-teaser-cards">
          <div class="c-teaser-card c-teaser-card--green"><a class="c-teaser-card__link" href="#" title="Innovationen für Mittelstands und der Weltmarktführer"></a>
            <div class="c-teaser-card__head">
              <!-- Grid/ Element header-->
              <header class="frame__header">
                <h4>Innovationen für Mittelstands und der Weltmarktführer</h4>
              </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/1/1080/1080" alt="Innovationen für Mittelstands und der Weltmarktführer"/>
            </div>
            <div class="c-teaser-card__bottom c-teaser-card--green">
              <p class="c-teaser-card__bodytext">Wir sind ein verlässlicher Partner des Mittelstands und der Weltmarktführer in der Region Heilbronn-Franken. Gemeinsam mit Unternehmen entwickeln wir Innovationen, die Wettbewerbsfähigkeit stärken und nachhaltige Impulse für den Wirtschaftsstandort setzen.</p>
              <div class="c-teaser-card__color c-teaser-card--green"></div>
            </div>
          </div>
          <div class="c-teaser-card c-teaser-card--orange-light"><a class="c-teaser-card__link" href="#" title="Exzellente Lehre"></a>
            <div class="c-teaser-card__head">
              <!-- Grid/ Element header-->
              <header class="frame__header">
                <h4>Exzellente Lehre</h4>
              </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/3/1080/1080" alt="Exzellente Lehre"/>
            </div>
            <div class="c-teaser-card__bottom c-teaser-card--orange-light">
              <p class="c-teaser-card__bodytext">Wir bilden Fach- und Führungskräfte praxisnah und unternehmerisch aus. Mit Studiengängen der TUM School of Computation, Information and Technology sowie der TUM School of Management bereiten wir Studierende gezielt auf die Anforderungen der Arbeitswelt vor.</p>
              <div class="c-teaser-card__color c-teaser-card--orange-light"></div>
            </div>
          </div>
          <div class="c-teaser-card c-teaser-card--state-blue"><a class="c-teaser-card__link" href="#" title="Spitzenforschung"></a>
            <div class="c-teaser-card__head">
              <!-- Grid/ Element header-->
              <header class="frame__header">
                <h4>Spitzenforschung</h4>
              </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/2/1080/1080" alt="Spitzenforschung"/>
            </div>
            <div class="c-teaser-card__bottom c-teaser-card--state-blue">
              <p class="c-teaser-card__bodytext">Am TUM Campus Heilbronn steht interdisziplinäre Forschung zu den Chancen des digitalen Zeitalters im Fokus. Wir verbinden wissenschaftliche Exzellenz mit wirtschaftlicher und gesellschaftlicher Relevanz.</p>
              <div class="c-teaser-card__color c-teaser-card--state-blue"></div>
            </div>
          </div>
          <div class="c-teaser-card c-teaser-card--yellow"><a class="c-teaser-card__link" href="#" title="Regionale Verantwortung"></a>
            <div class="c-teaser-card__head">
              <!-- Grid/ Element header-->
              <header class="frame__header">
                <h4>Regionale Verantwortung</h4>
              </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/4/1080/1080" alt="Regionale Verantwortung"/>
            </div>
            <div class="c-teaser-card__bottom c-teaser-card--yellow">
              <p class="c-teaser-card__bodytext">Wir sind eng mit der Region Heilbronn-Franken vernetzt und fördern den Austausch zwischen Wirtschaft, Politik und Gesellschaft. So treiben wir Innovation, Bildung und Wissens- sowie Technologietransfer aktiv voran.</p>
              <div class="c-teaser-card__color c-teaser-card--yellow"></div>
            </div>
          </div>
          <div class="c-teaser-card c-teaser-card--orange"><a class="c-teaser-card__link" href="#" title="Continuing Education und Lifelong Learning"></a>
            <div class="c-teaser-card__head">
              <!-- Grid/ Element header-->
              <header class="frame__header">
                <h4>Continuing Education und Lifelong Learning</h4>
              </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/5/1080/1080" alt="Continuing Education und Lifelong Learning"/>
            </div>
            <div class="c-teaser-card__bottom c-teaser-card--orange">
              <p class="c-teaser-card__bodytext">Wir entwickeln praxisnahe Weiterbildungsformate, die Unternehmen und Fachkräfte fit für die Herausforderungen des digitalen Zeitalters machen – in enger Verbindung von wissenschaftlicher Exzellenz und wirtschaftlicher Praxis.</p>
              <div class="c-teaser-card__color c-teaser-card--orange"></div>
            </div>
          </div>
          <div class="c-teaser-card c-teaser-card--blue-grey"><a class="c-teaser-card__link" href="#" title="Globale Community und internationale Kooperationen"></a>
            <div class="c-teaser-card__head">
              <!-- Grid/ Element header-->
              <header class="frame__header">
                <h4>Globale Community und internationale Kooperationen</h4>
              </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/6/1080/1080" alt="Globale Community und internationale Kooperationen"/>
            </div>
            <div class="c-teaser-card__bottom c-teaser-card--blue-grey">
              <p class="c-teaser-card__bodytext">Als internationaler Studien- und Forschungsstandort fördern wir eine globale Community aus Studierenden, Forschenden und Partnern. Kooperationen mit führenden Universitäten weltweit stärken Exzellenz, Innovation und Wissensaustausch.</p>
              <div class="c-teaser-card__color c-teaser-card--blue-grey"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none frame--full frame--background frame--blue-dark-301" id="c000002">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--default" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Teaser "Cards" - in 50-50 grid</h2>
        </header>
        <div class="flex">
          <div class="flex__md-6">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-frame frame--small" id="c">
              <div class="c-teaser-cards">
                <div class="c-teaser-card c-teaser-card--green"><a class="c-teaser-card__link" href="#" title="Innovationen für Mittelstands und der Weltmarktführer"></a>
                  <div class="c-teaser-card__head">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Innovationen für Mittelstands und der Weltmarktführer</h4>
                    </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/1/1080/1080" alt="Innovationen für Mittelstands und der Weltmarktführer"/>
                  </div>
                  <div class="c-teaser-card__bottom c-teaser-card--green">
                    <p class="c-teaser-card__bodytext">Wir sind ein verlässlicher Partner des Mittelstands und der Weltmarktführer in der Region Heilbronn-Franken. Gemeinsam mit Unternehmen entwickeln wir Innovationen, die Wettbewerbsfähigkeit stärken und nachhaltige Impulse für den Wirtschaftsstandort setzen.</p>
                    <div class="c-teaser-card__color c-teaser-card--green"></div>
                  </div>
                </div>
                <div class="c-teaser-card c-teaser-card--orange-light"><a class="c-teaser-card__link" href="#" title="Exzellente Lehre"></a>
                  <div class="c-teaser-card__head">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Exzellente Lehre</h4>
                    </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/3/1080/1080" alt="Exzellente Lehre"/>
                  </div>
                  <div class="c-teaser-card__bottom c-teaser-card--orange-light">
                    <p class="c-teaser-card__bodytext">Wir bilden Fach- und Führungskräfte praxisnah und unternehmerisch aus. Mit Studiengängen der TUM School of Computation, Information and Technology sowie der TUM School of Management bereiten wir Studierende gezielt auf die Anforderungen der Arbeitswelt vor.</p>
                    <div class="c-teaser-card__color c-teaser-card--orange-light"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex__md-6">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-frame frame--small" id="c">
              <div class="c-teaser-cards">
                <div class="c-teaser-card c-teaser-card--yellow"><a class="c-teaser-card__link" href="#" title="Regionale Verantwortung"></a>
                  <div class="c-teaser-card__head">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Regionale Verantwortung</h4>
                    </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/4/1080/1080" alt="Regionale Verantwortung"/>
                  </div>
                  <div class="c-teaser-card__bottom c-teaser-card--yellow">
                    <p class="c-teaser-card__bodytext">Wir sind eng mit der Region Heilbronn-Franken vernetzt und fördern den Austausch zwischen Wirtschaft, Politik und Gesellschaft. So treiben wir Innovation, Bildung und Wissens- sowie Technologietransfer aktiv voran.</p>
                    <div class="c-teaser-card__color c-teaser-card--yellow"></div>
                  </div>
                </div>
                <div class="c-teaser-card c-teaser-card--orange"><a class="c-teaser-card__link" href="#" title="Continuing Education und Lifelong Learning"></a>
                  <div class="c-teaser-card__head">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Continuing Education und Lifelong Learning</h4>
                    </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/5/1080/1080" alt="Continuing Education und Lifelong Learning"/>
                  </div>
                  <div class="c-teaser-card__bottom c-teaser-card--orange">
                    <p class="c-teaser-card__bodytext">Wir entwickeln praxisnahe Weiterbildungsformate, die Unternehmen und Fachkräfte fit für die Herausforderungen des digitalen Zeitalters machen – in enger Verbindung von wissenschaftlicher Exzellenz und wirtschaftlicher Praxis.</p>
                    <div class="c-teaser-card__color c-teaser-card--orange"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-" id="c000001">
      <div class="c-slider c-hero-slider">
        <section class="splide c-slider__section" aria-label="Teaser">
          <div class="c-slider__track splide__track">
            <ul class="c-slider__list splide__list">
              <li class="c-slider__slide splide__slide">
                <div class="c-hero-slide">
                  <picture class="c-hero-slide__media">
                    <source srcset="https://placeholder2.in2code.de/images/work/1/2560/1707" media="(min-width: 1920px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/1/1920/1280" media="(min-width: 768px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/1/768/512" type="image/webp"/><img loading="eager" fetchpriority="high" src="https://placeholder2.in2code.de/images/work/1/2560/1707" width="980" height="654" alt="EXZELLENTE &lt;br&gt; KARRIERE &lt;br&gt; CHANCEN" title="EXZELLENTE &lt;br&gt; KARRIERE &lt;br&gt; CHANCEN"/>
                  </picture>
                  <div class="c-hero-slide__content">
                    <div class="container container--small">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h1>EXZELLENTE <br> KARRIERE <br> CHANCEN</h1>
                      </header>
                      <div class="c-textmedia__bodytext">
                        <p>Dein Studium am TUM Campus Heilbronn</p>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-slider__slide splide__slide">
                <div class="c-hero-slide">
                  <div class="c-hero-slide__media">
                    <video muted="muted" loop="loop" playsinline="playsinline" poster="/images/video.png">
                      <source src="/images/video.mp4" type="video/mp4"/>
                    </video>
                  </div>
                  <button class="c-hero-slide__button" type="button" aria-pressed="false" aria-label="Play video" data-play="Play video" data-pause="Pause video"></button>
                  <div class="c-hero-slide__content">
                    <div class="container container--small">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h1>FORSCHUNG <br> MEETS <br> MITTELSTAND</h1>
                      </header>
                      <div class="c-textmedia__bodytext">
                        <p>Exzellente Forschung und praxisnahe Lösungen für nachhaltige Innovation</p>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-slider__slide splide__slide">
                <div class="c-hero-slide">
                  <picture class="c-hero-slide__media">
                    <source srcset="https://placeholder2.in2code.de/images/work/3/2560/1707" media="(min-width: 1920px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/3/1920/1280" media="(min-width: 768px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/3/768/512" type="image/webp"/><img loading="eager" fetchpriority="high" src="https://placeholder2.in2code.de/images/work/3/2560/1707" width="980" height="654" alt="NEWS &amp;&lt;br&gt; HIGHLIGHTS" title="NEWS &amp;&lt;br&gt; HIGHLIGHTS"/>
                  </picture>
                  <div class="c-hero-slide__content">
                    <div class="container container--small">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h1>NEWS &<br> HIGHLIGHTS</h1>
                      </header>
                      <div class="c-textmedia__bodytext">
                        <p>Aktuelles vom TUM Campus Heilbronn</p>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-slider__slide splide__slide">
                <div class="c-hero-slide">
                  <picture class="c-hero-slide__media">
                    <source srcset="https://placeholder2.in2code.de/images/work/4/2560/1707" media="(min-width: 1920px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/4/1920/1280" media="(min-width: 768px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/4/768/512" type="image/webp"/><img loading="eager" fetchpriority="high" src="https://placeholder2.in2code.de/images/work/4/2560/1707" width="980" height="654" alt="SPITZEN-&lt;br&gt;FORSCHUNG,&lt;br&gt; DIE &lt;br&gt; BEGEISTERT" title="SPITZEN-&lt;br&gt;FORSCHUNG,&lt;br&gt; DIE &lt;br&gt; BEGEISTERT"/>
                  </picture>
                  <div class="c-hero-slide__content">
                    <div class="container container--small">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h1>SPITZEN-<br>FORSCHUNG,<br> DIE <br> BEGEISTERT</h1>
                      </header>
                      <div class="c-textmedia__bodytext">
                        <p>Exzellenz in Forschung und Lehre</p>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="c-slider__arrows splide__arrows">
            <button class="c-slider__button c-slider__arrow c-slider__arrow--prev splide__arrow splide__arrow--prev" type="button">
              <svg width="26px" height="26px" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
              </svg>
            </button>
            <div class="c-slider__pagination splide__pagination"></div>
            <button class="c-slider__button c-slider__arrow c-slider__arrow--next splide__arrow splide__arrow--next" type="button">
              <svg width="26px" height="26px" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
              </svg>
            </button>
            <button class="c-slider__autoplay-button" type="button" aria-pressed="false" aria-label="Play video" data-play="Play video" data-pause="Pause video"></button>
          </div>
        </section>
      </div>
    </div>
  </main>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none frame--full frame--background" id="c000001">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--small" id="c">
        <div class="c-slider c-card-slider">
          <section class="splide c-slider__section" aria-label="Slider Cards">
            <div class="c-slider__track splide__track">
              <ul class="c-slider__list splide__list">
                <li class="c-slider__slide splide__slide">
                  <div class="c-card-slide c-card-slide--blue-dark-301"><a href="#" title="Karrierewege, die begeistern"></a>
                    <div class="c-card-slide__head">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h3>Karrierewege, die begeistern</h3>
                      </header><img class="c-card-slide__image" src="https://placeholder2.in2code.de/images/work/1/648/432" width="648" height="432" alt="Karrierewege, die begeistern" title="Karrierewege, die begeistern"/>
                    </div>
                    <div class="c-card-slide__bottom c-card-slide--blue-dark-301">
                      <div class="c-card-slide__bodytext c-textmedia__bodytext">
                        <p>Lerne von erfahrenen Persönlichkeiten und gestalte deinen eigenen Erfolgsweg.</p>
                      </div>
                      <div class="c-card-slide__color c-card-slide--blue-dark-301"></div>
                    </div>
                  </div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-card-slide c-card-slide--blue-dark-540"><a href="#" title="Auf der Spur der Algorithmen, die uns helfen, besser zu entscheiden"></a>
                    <div class="c-card-slide__head">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h3>Auf der Spur der Algorithmen, die uns helfen, besser zu entscheiden</h3>
                      </header><img class="c-card-slide__image" src="https://placeholder2.in2code.de/images/work/2/648/432" width="648" height="432" alt="Auf der Spur der Algorithmen, die uns helfen, besser zu entscheiden" title="Auf der Spur der Algorithmen, die uns helfen, besser zu entscheiden"/>
                    </div>
                    <div class="c-card-slide__bottom c-card-slide--blue-dark-540">
                      <div class="c-card-slide__bodytext c-textmedia__bodytext">
                        <p>Entdecke, wie moderne Technologien unseren Alltag smarter und effizienter machen.</p>
                      </div>
                      <div class="c-card-slide__color c-card-slide--blue-dark-540"></div>
                    </div>
                  </div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-card-slide c-card-slide--blue"><a href="#" title="Wie Chatbots Minderheitensprachen noch cooler machen können"></a>
                    <div class="c-card-slide__head">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h3>Wie Chatbots Minderheitensprachen noch cooler machen können</h3>
                      </header><img class="c-card-slide__image" src="https://placeholder2.in2code.de/images/work/3/648/432" width="648" height="432" alt="Wie Chatbots Minderheitensprachen noch cooler machen können" title="Wie Chatbots Minderheitensprachen noch cooler machen können"/>
                    </div>
                    <div class="c-card-slide__bottom c-card-slide--blue">
                      <div class="c-card-slide__bodytext c-textmedia__bodytext">
                        <p>Innovative KI-Lösungen für mehr Vielfalt und digitale Teilhabe weltweit.</p>
                      </div>
                      <div class="c-card-slide__color c-card-slide--blue"></div>
                    </div>
                  </div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-card-slide c-card-slide--blue-light-542"><a href="#" title="Wer die Vorteile kennt, bildet sich weiter"></a>
                    <div class="c-card-slide__head">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h3>Wer die Vorteile kennt, bildet sich weiter</h3>
                      </header><img class="c-card-slide__image" src="https://placeholder2.in2code.de/images/work/4/648/432" width="648" height="432" alt="Wer die Vorteile kennt, bildet sich weiter" title="Wer die Vorteile kennt, bildet sich weiter"/>
                    </div>
                    <div class="c-card-slide__bottom c-card-slide--blue-light-542">
                      <div class="c-card-slide__bodytext c-textmedia__bodytext">
                        <p>Nutze Weiterbildungsangebote, um dein Wissen gezielt auszubauen.</p>
                      </div>
                      <div class="c-card-slide__color c-card-slide--blue-light-542"></div>
                    </div>
                  </div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-card-slide c-card-slide--blue-light-283"><a href="#" title="Einblicke, die inspirieren"></a>
                    <div class="c-card-slide__head">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h3>Einblicke, die inspirieren</h3>
                      </header><img class="c-card-slide__image" src="https://placeholder2.in2code.de/images/work/5/648/432" width="648" height="432" alt="Einblicke, die inspirieren" title="Einblicke, die inspirieren"/>
                    </div>
                    <div class="c-card-slide__bottom c-card-slide--blue-light-283">
                      <div class="c-card-slide__bodytext c-textmedia__bodytext">
                        <p>Spannende Geschichten und Perspektiven aus Forschung und Praxis.</p>
                      </div>
                      <div class="c-card-slide__color c-card-slide--blue-light-283"></div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="c-slider__arrows splide__arrows">
              <button class="c-slider__button c-slider__arrow c-slider__arrow--prev splide__arrow splide__arrow--prev" type="button">
                <svg width="26px" height="26px" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
                </svg>
              </button>
              <div class="c-slider__pagination splide__pagination"></div>
              <button class="c-slider__button c-slider__arrow c-slider__arrow--next splide__arrow splide__arrow--next" type="button">
                <svg width="26px" height="26px" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                </svg>
              </button>
              <button class="c-slider__autoplay-button" type="button" aria-pressed="false" aria-label="Play video" data-play="Play video" data-pause="Pause video"></button>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none frame--full frame--background frame--blue-dark-301" id="c000002">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--small" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Teaser</h2>
        </header>
        <div class="c-teaser-container">
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Innovationen für Mittelstands und der Weltmarktführer</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/1/1080/1080" alt="Innovationen für Mittelstands und der Weltmarktführer"/></div>
          </div>
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Exzellente Lehre</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/3/1080/1080" alt="Exzellente Lehre"/></div>
          </div>
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Spitzenforschung</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/2/1080/1080" alt="Spitzenforschung"/></div>
          </div>
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Regionale Verantwortung</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/4/1080/1080" alt="Regionale Verantwortung"/></div>
          </div>
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Continuing Education und Lifelong Learning</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/5/1080/1080" alt="Continuing Education und Lifelong Learning"/></div>
          </div>
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Globale Community und internationale Kooperationen</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/6/1080/1080" alt="Globale Community und internationale Kooperationen"/></div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none frame--full frame--background frame--blue-dark-301" id="c000002">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--default" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Teaser - in 50-50 grid</h2>
        </header>
        <div class="flex">
          <div class="flex__md-6">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-frame frame--small" id="c">
              <div class="c-teaser-container">
                <div class="c-teaser">
                  <!-- Grid/ Element header-->
                  <header class="frame__header">
                    <h4>Innovationen für Mittelstands und der Weltmarktführer</h4>
                  </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
                  <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/1/1080/1080" alt="Innovationen für Mittelstands und der Weltmarktführer"/></div>
                </div>
                <div class="c-teaser">
                  <!-- Grid/ Element header-->
                  <header class="frame__header">
                    <h4>Exzellente Lehre</h4>
                  </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
                  <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/3/1080/1080" alt="Exzellente Lehre"/></div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex__md-6">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-frame frame--small" id="c">
              <div class="c-teaser-cards">
                <div class="c-teaser">
                  <!-- Grid/ Element header-->
                  <header class="frame__header">
                    <h4>Regionale Verantwortung</h4>
                  </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
                  <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/4/1080/1080" alt="Regionale Verantwortung"/></div>
                </div>
                <div class="c-teaser">
                  <!-- Grid/ Element header-->
                  <header class="frame__header">
                    <h4>Continuing Education und Lifelong Learning</h4>
                  </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
                  <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/5/1080/1080" alt="Continuing Education und Lifelong Learning"/></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<div class="c-pagination">
  <ul>
    <li class="c-pagination__previous"><a href="#" rel="0">
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
        </svg><span class="u-visually-hidden">Previous</span></a></li>
    <li class="c-pagination__counter">02</li>
    <li class="c-pagination__item"><a href="#">1</a></li>
    <li class="c-pagination__item"><a href="#" aria-current="page">2</a></li>
    <li class="c-pagination__item"><a href="#">3</a></li>
    <li class="c-pagination__item"><a href="#">4</a></li>
    <li class="c-pagination__counter">04</li>
    <li class="c-pagination__next"><a href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
        </svg><span class="u-visually-hidden">Next</span></a></li>
  </ul>
</div>

<div class="cookie-placeholder">
  <p>Dieser Inhalt wird erst nach Zustimmung zu Drittanbieter-Cookies geladen.</p>
  <button class="load-content-btn iubenda-cs-preferences-link btn btn--primary">Inhalt laden</button>
</div>
<div class="cookie-blocked-content u-hide">Iframe oder andere deaktivierte Dinge. Ab https://www.iubenda.com/de/help/4760-cookie-blockierung-manuelles-tagging#implementierung</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type- frame-space-before-none frame--full frame--background frame--grey-medium" id="c000001">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--small" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Logo Slider in small width container</h2>
        </header>
        <div class="c-slider c-logo-slider">
          <section class="splide c-slider__section" aria-label="Logos">
            <div class="c-slider__track splide__track">
              <ul class="c-slider__list splide__list">
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/159x71" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/197x32" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/176x78" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/213x72" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/197x70" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/197x93" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/157x72" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/152x72" alt="Logo" title="Logo"/></a></div>
                </li>
              </ul>
            </div>
            <div class="c-slider__arrows splide__arrows">
              <button class="c-slider__button c-slider__arrow c-slider__arrow--prev splide__arrow splide__arrow--prev" type="button">
                <svg width="26px" height="26px" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
                </svg>
              </button>
              <div class="c-slider__pagination splide__pagination"></div>
              <button class="c-slider__button c-slider__arrow c-slider__arrow--next splide__arrow splide__arrow--next" type="button">
                <svg width="26px" height="26px" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                </svg>
              </button>
              <button class="c-slider__autoplay-button" type="button" aria-pressed="false" aria-label="Play video" data-play="Play video" data-pause="Pause video"></button>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>
</div>

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium frame--small" id="c78234">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Testimonials</h2>
  </header>
  <section class="c-testimonials splide" aria-label="Testimonials">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <div class="c-testimonial">
            <div class="c-testimonial__media">
              <video class="c-testimonial__video" preload="metadata" muted="muted" loop="loop" playsinline="playsinline" tabindex="0" aria-label="Video abspielen: Abdul Berrada – Exzellenz mit Fokus">
                <source src="/images/video.mp4" type="video/mp4"/>
              </video>
              <p class="c-testimonial__name">Abdul Berrada</p>
              <div class="c-testimonial__play" aria-hidden="true">
                <svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
              </div>
              <button class="c-testimonial__mute" type="button" aria-label="Ton ausschalten" aria-pressed="false">
                <svg class="c-testimonial__mute-on" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                </svg>
                <svg class="c-testimonial__mute-off" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <line x1="23" y1="9" x2="17" y2="15"></line>
                  <line x1="17" y1="9" x2="23" y2="15"></line>
                </svg>
              </button>
            </div>
            <div class="c-testimonial__content rte-content">
              <h3>Exzellenz mit Fokus</h3>
              <p>Top-Uni-Vibe mit Fokus auf Skills, die dich wirklich weiterbringen.</p>
            </div>
          </div>
        </li>
        <li class="splide__slide">
          <div class="c-testimonial">
            <div class="c-testimonial__media">
              <video class="c-testimonial__video" preload="metadata" muted="muted" loop="loop" playsinline="playsinline" tabindex="0" aria-label="Video abspielen: Daniel Kurth – Persönlich betreut">
                <source src="/images/video.mp4" type="video/mp4"/>
              </video>
              <p class="c-testimonial__name">Daniel Kurth</p>
              <div class="c-testimonial__play" aria-hidden="true">
                <svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
              </div>
              <button class="c-testimonial__mute" type="button" aria-label="Ton ausschalten" aria-pressed="false">
                <svg class="c-testimonial__mute-on" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                </svg>
                <svg class="c-testimonial__mute-off" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <line x1="23" y1="9" x2="17" y2="15"></line>
                  <line x1="17" y1="9" x2="23" y2="15"></line>
                </svg>
              </button>
            </div>
            <div class="c-testimonial__content rte-content">
              <h3>Persönlich betreut</h3>
              <p>Hier kennt man deinen Namen – nicht nur deine Matrikelnummer.</p>
            </div>
          </div>
        </li>
        <li class="splide__slide">
          <div class="c-testimonial">
            <div class="c-testimonial__media">
              <video class="c-testimonial__video" preload="metadata" muted="muted" loop="loop" playsinline="playsinline" tabindex="0" aria-label="Video abspielen: Janet Parker – Nähe zu Profs">
                <source src="/images/video.mp4" type="video/mp4"/>
              </video>
              <p class="c-testimonial__name">Janet Parker</p>
              <div class="c-testimonial__play" aria-hidden="true">
                <svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
              </div>
              <button class="c-testimonial__mute" type="button" aria-label="Ton ausschalten" aria-pressed="false">
                <svg class="c-testimonial__mute-on" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                </svg>
                <svg class="c-testimonial__mute-off" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <line x1="23" y1="9" x2="17" y2="15"></line>
                  <line x1="17" y1="9" x2="23" y2="15"></line>
                </svg>
              </button>
            </div>
            <div class="c-testimonial__content rte-content">
              <h3>Nähe zu Profs</h3>
              <p>Lernen auf Augenhöhe – mit Mentor:innen statt Massenuni.</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-" id="c000001">
      <div class="c-slider c-news-slider">
        <section class="splide c-slider__section" aria-label="News">
          <div class="c-slider__track splide__track">
            <ul class="c-slider__list splide__list">
              <li class="c-slider__slide splide__slide">
                <div class="c-news-slide">
                  <div class="c-news-slide__date">
                    <div class="c-news-slide__day">13</div>
                    <div class="c-news-slide__month">Oct 2025</div>
                  </div><span class="c-news-slide__heading">Der Staat von Morgen</span><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
                  <div class="c-news-slide__image"><img src="https://placeholder2.in2code.de/images/work/1/1080/1080" alt="Der Staat von Morgen"/></div>
                </div>
              </li>
              <li class="c-slider__slide splide__slide">
                <div class="c-news-slide">
                  <div class="c-news-slide__date">
                    <div class="c-news-slide__day">24</div>
                    <div class="c-news-slide__month">Nov 2025</div>
                  </div><span class="c-news-slide__heading">Der Mensch hat weiter die Hosen an</span><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
                  <div class="c-news-slide__image"><img src="https://placeholder2.in2code.de/images/work/2/1080/1080" alt="Der Mensch hat weiter die Hosen an"/></div>
                </div>
              </li>
              <li class="c-slider__slide splide__slide">
                <div class="c-news-slide">
                  <div class="c-news-slide__date">
                    <div class="c-news-slide__day">27</div>
                    <div class="c-news-slide__month">Nov 2025</div>
                  </div><span class="c-news-slide__heading">Amazon Research Award öffnet Türen</span><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
                  <div class="c-news-slide__image"><img src="https://placeholder2.in2code.de/images/work/3/1080/1080" alt="Amazon Research Award öffnet Türen"/></div>
                </div>
              </li>
            </ul>
          </div>
          <div class="c-slider__pagination splide__pagination"></div>
        </section>
      </div>
    </div>
  </main>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none frame--full frame--background frame--blue-dark-721" id="c000002">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--small" id="c">
        <div class="c-counter-container">
          <div class="c-counter" data-end-number="1">
            <div aria-label="#1"><span class="c-counter__prefix" aria-hidden="true">#</span><span class="c-counter__digit" aria-hidden="true">1</span>
            </div>
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h2>Bestplazierte Universität In Deutschland</h2>
            </header><a class="c-counter__description" href="#">QS World Ranking 2025</a>
          </div>
          <div class="c-counter" data-end-number="22">
            <div aria-label="#22"><span class="c-counter__prefix" aria-hidden="true">#</span><span class="c-counter__digit" aria-hidden="true">22</span>
            </div>
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h2>TUM steigt weltweit auf Platz 22</h2>
            </header><a class="c-counter__description" href="#">QS World Ranking 2025</a>
          </div>
          <div class="c-counter" data-end-number="13">
            <div aria-label="13th"><span class="c-counter__digit" aria-hidden="true">13</span><span class="c-counter__suffix" aria-hidden="true">th</span>
            </div>
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h2>Top position in the Global Employability Ranking</h2>
            </header><a class="c-counter__description" href="#">QS World Ranking 2025</a>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none" id="c000001">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--small" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Events</h2>
        </header>
        <div class="c-event-list-filter">
          <label class="u-visually-hidden" for="event-filter">Filter auswählen</label>
          <select name="event-filter" id="event-filter">
            <option value="">Filter auswählen</option>
            <option value="januar">Januar</option>
            <option value="februar">Februar</option>
          </select>
        </div>
        <div class="c-event-list"><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">25</div>
              <div class="c-event-list-item__month">Mär 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Bürger-Uni</div>
            </div></a><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">01</div>
              <div class="c-event-list-item__month">Apr 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Bachelor in Information Engineering - Info Session</div>
            </div></a><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">07</div>
              <div class="c-event-list-item__month">Apr 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Schlaue Mittagspause: KI-Fachkräfte rekrutieren</div>
            </div></a><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">07</div>
              <div class="c-event-list-item__month">Mär 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Master in Information Engineering - Info Session</div>
            </div></a><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">10</div>
              <div class="c-event-list-item__month">Apr 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Welcome Day Sommersemester 2026</div>
            </div></a><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">17</div>
              <div class="c-event-list-item__month">Apr 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Einführung in die TUM Universitätsbibliothek (Heilbronn)</div>
            </div></a>
        </div><a class="c-event-list-button btn btn--primary btn--large" href="#">Alle Events</a>
      </div>
    </div>
  </main>
</div>

<details class="c-sticky-sidebar">
  <summary id="sidebar-nav-label">Direkteinstieg</summary>
  <nav aria-labelledby="sidebar-nav-label">
    <ul>
      <li><a href="#">Studieninteressierte</a></li>
      <li><a href="#">Studierende</a></li>
      <li><a href="#">Alumni</a></li>
      <li><a href="#">Unternehmen</a></li>
      <li><a href="#">Weiterbildung</a></li>
      <li><a href="#">Öffentlichkeit</a></li>
    </ul>
  </nav>
</details>

<div class="c-imagemap" style="--image-url: url('/Images/campus.png')">
  <div class="c-imagemap-wrapper"><img src="/Images/campus.png" width="2544" height="1664" alt="Lageplan des TUM Campus Heilbronn"/>
    <div class="c-imagemap__item" style="--x: 5.06%; --y: 80.34%"><a class="btn btn--primary btn--large" href="#">Campusführung</a></div>
    <div class="c-imagemap__item" style="--x: 68.06%; --y: 24.34%">
      <div class="c-imagemap__poi"><span class="c-imagemap__poi-text">Point of Interest</span>
        <button class="c-imagemap__poi-marker" type="button" aria-label="Point of Interest: {name}"></button>
      </div>
    </div>
    <div class="c-imagemap__item" style="--x: 30.00%; --y: 35.00%"><span class="c-imagemap__label">Campus Mitte</span></div>
    <div class="c-imagemap__item" style="--x: 5.00%; --y: 14.00%">
      <div class="c-imagemap__thumbnail-wrap">
        <button class="c-imagemap__thumbnail-toggle" type="button" aria-expanded="false" aria-controls="thumbnail-1" aria-label="Show Image: Closeup Image of Building"></button>
        <div class="c-imagemap__thumbnail" id="thumbnail-1" hidden="hidden"><img src="https://placeholder2.in2code.de/images/university/3/300/250" width="300" height="250" alt="Closeup Image of Building"/></div>
      </div>
    </div>
  </div>
</div>

<div class="c-imagemap" style="--image-url: url('/Images/campus.png')">
  <div class="c-imagemap-wrapper"><img src="/Images/campus.png" width="2544" height="1664" alt="Lageplan des TUM Campus Heilbronn"/>
    <div class="c-imagemap__item" style="--x: 5.06%; --y: 80.34%"><a class="btn btn--primary btn--large" href="#">Campusführung</a></div>
    <div class="c-imagemap__item" style="--x: 68.06%; --y: 24.34%">
      <div class="c-imagemap__poi"><span class="c-imagemap__poi-text">Point of Interest</span>
        <button class="c-imagemap__poi-marker" type="button" aria-label="Point of Interest: {name}"></button>
      </div>
    </div>
    <div class="c-imagemap__item" style="--x: 30.00%; --y: 35.00%"><span class="c-imagemap__label">Campus Mitte</span></div>
    <div class="c-imagemap__item" style="--x: 5.00%; --y: 14.00%">
      <div class="c-imagemap__thumbnail-wrap">
        <button class="c-imagemap__thumbnail-toggle" type="button" aria-expanded="false" aria-controls="thumbnail-1" aria-label="Show Image: Closeup Image of Building"></button>
        <div class="c-imagemap__thumbnail" id="thumbnail-1" hidden="hidden"><img src="https://placeholder2.in2code.de/images/university/3/300/250" width="300" height="250" alt="Closeup Image of Building"/></div>
      </div>
    </div>
  </div>
</div>