Content-Carousel @content-carousel

Design

Variants

Mobbing & Du large @content-carousel--mud-large

Vorschau in eignem Tab anzeigen
 
<div class="content-carousel content-carousel--mud-green">
  <div class="content-carousel__inner">
    <div class="content-carousel__content-wrap">
      <div class="content-carousel__content">
        <div class="content-carousel__top">
          <h2 class="headline headline--1"><span class="f-w-normal">Wissenswertes</span> <br />Was ist Mobbing</h2>
          <div class="content-carousel__text">
            <div class="text">
              <p>„Viktor scheint in der Klasse keinen sehr guten Stand zu haben. Bei Gruppenarbeiten muss letzten Endes meistens ich entscheiden, welche Gruppe ihn noch bei sich aufnehmen soll. Auch in den Pausen sehe ich Viktor fast immer alleine herumstehen.„</p><a class="button button--primary" href="#"><span class="button__text">Mehr dazu</span></a>
            </div>
          </div>
        </div>
        <div class="content-carousel__slider">
          <div class="teaser-slider">
            <div class="teaser-slider__inner">
              <div class="teaser-slider__block">
                <div class="teaser-slider__items">
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                    </article>
                  </div>
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                    </article>
                  </div>
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                    </article>
                  </div>
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                    </article>
                  </div>
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                    </article>
                  </div>
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
              <div class="teaser-slider__controls slider__controls"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Mobbing & Du small @content-carousel--mud-small

Vorschau in eignem Tab anzeigen
 
<div class="content-carousel content-carousel--mud-yellow content-carousel--small">
  <div class="content-carousel__inner">
    <div class="content-carousel__content-wrap">
      <div class="content-carousel__content">
        <div class="content-carousel__top">
          <h2 class="headline headline--1">Bausteine des Programms</h2>
          <div class="content-carousel__text">
            <div class="text">
              <p>Mobbing&Du verwendet einen „Blended Intervention“-Ansatz, welcher die Vorteile von Präsenzveranstaltungen und E-Learning kombiniert.</p>
            </div>
          </div>
        </div>
        <div class="content-carousel__slider">
          <div class="teaser-slider teaser-slider--small">
            <div class="teaser-slider__inner">
              <div class="teaser-slider__block">
                <div class="teaser-slider__items">
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                      <div class="teaser__icon-button">
                        <div class="quickinfo">
                          <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-59c9-content" id="id-59c9-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-a00d-title">
                                <title id="icon-a00d-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-59c9-content" aria-labelledby="id-59c9-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-cd9c">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-717e">
                                  <div class="text">
                                    <p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-79b3">
                                  <div class="jumpbox jumpbox--condensed">
                                    <div class="jumpbox__text">
                                      <div class="text">
                                        <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-1c0f">
                                  <div class="link-list">
                                    <ul class="link-list__list">
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                                    </ul>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-65e6"><a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
                                      <use xlink:href="#icon-arrow-right"></use>
                                    </svg><span class="button__text">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-754b-title">
                                    <title id="icon-754b-title">Schnellinfo schließen</title>
                                    <use xlink:href="#icon-close"></use>
                                  </svg></button>
                              </div>
                            </div>
                          </article>
                        </div>
                      </div>
                    </article>
                  </div>
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                      <div class="teaser__icon-button">
                        <div class="quickinfo">
                          <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-0a88-content" id="id-0a88-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3ece-title">
                                <title id="icon-3ece-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-0a88-content" aria-labelledby="id-0a88-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-a83a">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-8984">
                                  <div class="text">
                                    <p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-63cd">
                                  <div class="jumpbox jumpbox--condensed">
                                    <div class="jumpbox__text">
                                      <div class="text">
                                        <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-71d8">
                                  <div class="link-list">
                                    <ul class="link-list__list">
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                                    </ul>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-33c5"><a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
                                      <use xlink:href="#icon-arrow-right"></use>
                                    </svg><span class="button__text">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-bed7-title">
                                    <title id="icon-bed7-title">Schnellinfo schließen</title>
                                    <use xlink:href="#icon-close"></use>
                                  </svg></button>
                              </div>
                            </div>
                          </article>
                        </div>
                      </div>
                    </article>
                  </div>
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                      <div class="teaser__icon-button">
                        <div class="quickinfo">
                          <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-e5b7-content" id="id-e5b7-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-da7e-title">
                                <title id="icon-da7e-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-e5b7-content" aria-labelledby="id-e5b7-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-91a4">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-2d6f">
                                  <div class="text">
                                    <p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-bef6">
                                  <div class="jumpbox jumpbox--condensed">
                                    <div class="jumpbox__text">
                                      <div class="text">
                                        <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-6325">
                                  <div class="link-list">
                                    <ul class="link-list__list">
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                                    </ul>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-eea3"><a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
                                      <use xlink:href="#icon-arrow-right"></use>
                                    </svg><span class="button__text">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3e55-title">
                                    <title id="icon-3e55-title">Schnellinfo schließen</title>
                                    <use xlink:href="#icon-close"></use>
                                  </svg></button>
                              </div>
                            </div>
                          </article>
                        </div>
                      </div>
                    </article>
                  </div>
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                      <div class="teaser__icon-button">
                        <div class="quickinfo">
                          <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-1434-content" id="id-1434-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7c9c-title">
                                <title id="icon-7c9c-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-1434-content" aria-labelledby="id-1434-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-ddfa">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-a903">
                                  <div class="text">
                                    <p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-904e">
                                  <div class="jumpbox jumpbox--condensed">
                                    <div class="jumpbox__text">
                                      <div class="text">
                                        <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-83a9">
                                  <div class="link-list">
                                    <ul class="link-list__list">
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                                    </ul>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-0702"><a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
                                      <use xlink:href="#icon-arrow-right"></use>
                                    </svg><span class="button__text">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-82dd-title">
                                    <title id="icon-82dd-title">Schnellinfo schließen</title>
                                    <use xlink:href="#icon-close"></use>
                                  </svg></button>
                              </div>
                            </div>
                          </article>
                        </div>
                      </div>
                    </article>
                  </div>
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                      <div class="teaser__icon-button">
                        <div class="quickinfo">
                          <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-26f8-content" id="id-26f8-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-63b7-title">
                                <title id="icon-63b7-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-26f8-content" aria-labelledby="id-26f8-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-3585">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-a1da">
                                  <div class="text">
                                    <p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-f226">
                                  <div class="jumpbox jumpbox--condensed">
                                    <div class="jumpbox__text">
                                      <div class="text">
                                        <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-d955">
                                  <div class="link-list">
                                    <ul class="link-list__list">
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                                    </ul>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-7135"><a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
                                      <use xlink:href="#icon-arrow-right"></use>
                                    </svg><span class="button__text">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-4c2c-title">
                                    <title id="icon-4c2c-title">Schnellinfo schließen</title>
                                    <use xlink:href="#icon-close"></use>
                                  </svg></button>
                              </div>
                            </div>
                          </article>
                        </div>
                      </div>
                    </article>
                  </div>
                  <div class="teaser-slider__item">
                    <article class="teaser">
                      <div class="teaser__content">
                        <div class="teaser__media">
                          <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
                        </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
                          <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
                        </a>
                      </div>
                      <div class="teaser__icon-button">
                        <div class="quickinfo">
                          <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-f5ba-content" id="id-f5ba-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-b504-title">
                                <title id="icon-b504-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-f5ba-content" aria-labelledby="id-f5ba-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-39cb">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-e6a1">
                                  <div class="text">
                                    <p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-ce4b">
                                  <div class="jumpbox jumpbox--condensed">
                                    <div class="jumpbox__text">
                                      <div class="text">
                                        <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-5e58">
                                  <div class="link-list">
                                    <ul class="link-list__list">
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                      <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                                    </ul>
                                  </div>
                                </div>
                                <div class="quickinfo__block" id="block-id-05ad"><a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
                                      <use xlink:href="#icon-arrow-right"></use>
                                    </svg><span class="button__text">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-32a8-title">
                                    <title id="icon-32a8-title">Schnellinfo schließen</title>
                                    <use xlink:href="#icon-close"></use>
                                  </svg></button>
                              </div>
                            </div>
                          </article>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
              <div class="teaser-slider__controls slider__controls"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>