Detail @content-detail
<div class="content-detail">
<div class="content-detail__inner">
<div class="content-detail__block content-detail__block--text" id="id-1bd4">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="content-detail__block content-detail__block--picto-group content-detail__block--breaker" id="id-0088">
<div class="picto-group">
<div class="picto-group__inner">
<h2 class="headline headline--3 picto-group__title">Partner</h2>
<div class="picto-group__text">
<div class="text">
<p>At vero eos et accusam et <a class="link link--internal" href="#">justo duo dolores et ea rebum</a>. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a class="link link--external" href="#" target="_blank" rel="noopener noreferrer">At vero eos et</a></p>
</div>
</div>
<div class="picto-group__items">
<div class="picto-group__item">
<div class="picto-group__item-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Logo Image" height="150" src="https://bildermangel.de/150x150/F5F5F5/28281a.png?text=150x150" width="150" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/150x150/F5F5F5/28281a.png?text=150x150" width="150" height="150" alt="Logo Image" /></div>
</div>
<div class="picto-group__item-content">
<div class="text text--small">
<p>At vero eos et accusam et <a class="link link--internal" href="#">justo duo dolores et ea rebum</a>. Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a class="link link--external" href="#" target="_blank" rel="noopener noreferrer">At vero eos et</a></p>
</div>
</div>
</div>
<div class="picto-group__item">
<div class="picto-group__item-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Logo Image" height="150" src="https://bildermangel.de/150x150/F5F5F5/28281a.png?text=150x150" width="150" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/150x150/F5F5F5/28281a.png?text=150x150" width="150" height="150" alt="Logo Image" /></div>
</div>
<div class="picto-group__item-content">
<div class="text text--small">
<ul>
<li>At vero eos et accusam et <a class="link link--internal" href="#">justo duo dolores et ea rebum</a>.</li>
<li>Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>,</li>
<li>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</li>
<li>voluptua. <a class="link link--external" href="#" target="_blank" rel="noopener noreferrer">At vero eos et</a></li>
</ul>
</div>
</div>
</div>
<div class="picto-group__item">
<div class="picto-group__item-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Logo Image" height="150" src="https://bildermangel.de/150x150/F5F5F5/28281a.png?text=150x150" width="150" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/150x150/F5F5F5/28281a.png?text=150x150" width="150" height="150" alt="Logo Image" /></div>
</div>
<div class="picto-group__item-content">
<div class="text text--small">
<ul>
<li>At vero eos et accusam et <a class="link link--internal" href="#">justo duo dolores et ea rebum</a>.</li>
<li>Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>,</li>
<li>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</li>
<li>voluptua. <a class="link link--external" href="#" target="_blank" rel="noopener noreferrer">At vero eos et</a></li>
</ul>
</div>
</div>
</div>
<div class="picto-group__item">
<div class="picto-group__item-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Logo Image" height="150" src="https://bildermangel.de/150x150/F5F5F5/28281a.png?text=150x150" width="150" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/150x150/F5F5F5/28281a.png?text=150x150" width="150" height="150" alt="Logo Image" /></div>
</div>
<div class="picto-group__item-content">
<div class="text text--small">
<p>At vero eos et accusam et <a class="link link--internal" href="#">justo duo dolores et ea rebum</a>. Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a class="link link--external" href="#" target="_blank" rel="noopener noreferrer">At vero eos et</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-detail__block content-detail__block--quiz" id="id-3c1a">
<div class="quiz js-quiz quiz--green">
<div class="quiz__kicker">Quiz</div>
<div class="quiz__question">
<div class="text">
<p><b>Frage Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.</b></p>
</div>
</div>
<div class="quiz__answers">
<div class="quiz__answer" data-correct="false">
<div class="quiz__answer-text">Antwort A</div>
<div class="quiz__answer-detail">
<div class="text text--small">
<p>Optional: Detailbeschreibung</p>
</div>
</div>
<div class="quiz__answer-explanation">
<div class="text text--small">
<p>Erklärung hier. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue <a class="link" href="#">optionaler Link</a></p>
</div>
</div>
</div>
<div class="quiz__answer" data-correct="true">
<div class="quiz__answer-text">Antwort B</div>
<div class="quiz__answer-explanation">
<div class="text text--small">
<p>Erklärung hier. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue <a class="link" href="#">optionaler Link</a></p>
</div>
</div>
</div>
<div class="quiz__answer" data-correct="false">
<div class="quiz__answer-text">Antwort C</div>
<div class="quiz__answer-explanation">
<div class="text text--small">
<p>Erklärung hier.</p>
</div>
</div>
</div>
<div class="quiz__answer" data-correct="false">
<div class="quiz__answer-text">Antwort D</div>
<div class="quiz__answer-explanation">
<div class="text text--small">
<p>Erklärung hier.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-detail__block content-detail__block--text content-detail__block--aside" id="id-d179">
<div class="content-detail__brand">
<div class="content-detail__brand-kicker">Ähnlicher Beitrag</div>
<div class="content-detail__brand-thumb">
<div class="content-detail__brand-image">
<div class="image loading" style="padding-top: 65.3061224489796%;"><noscript><img class="image__fallback" alt="brand image" height="160" src="https://bildermangel.de/245x160/F5F5F5/28281a.png?text=245x160" width="245" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/245x160/F5F5F5/28281a.png?text=245x160" width="245" height="160" alt="brand image" /></div>
</div><a class="content-detail__brand-content js-overlay-link" href="#" data-overlay-target="content-detail__brand-thumb">
<div class="text"><span>Erzählenden Spitzmarke</span>
<p>Eine eingängige Headline, die das Thema gut erklärt</p>
</div>
</a>
</div>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="content-detail__block content-detail__block--text-image content-detail__block--breaker" id="id-f066">
<div class="text-image">
<div class="text-image__figure">
<figure class="figure" aria-labelledby="figure-90bd-label">
<div class="figure__media" data-gallery="lightbox-c2ed">
<div class="image loading" style="padding-top: 67%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="335" src="https://bildermangel.de/500x335/F5F5F5/28281a.png?text=500x335" width="500" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/500x335/F5F5F5/28281a.png?text=500x335" width="500" height="335" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
</figure>
</div>
<div class="text-image__content">
<div class="text">
<h3 class="headline headline--5">Ich bin eine Zwischenheadline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /><br /><strong><a class="link link--internal" href="test.html">Mehr erfahren</a></strong></p>
</div>
</div>
</div>
</div>
<div class="content-detail__block content-detail__block--text-image content-detail__block--breaker" id="id-c08a">
<div class="text-image text-image--right">
<div class="text-image__figure">
<figure class="figure" aria-labelledby="figure-f221-label">
<div class="figure__media" data-gallery="lightbox-cb19">
<div class="image loading" style="padding-top: 67%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="335" src="https://bildermangel.de/500x335/F5F5F5/28281a.png?text=500x335" width="500" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/500x335/F5F5F5/28281a.png?text=500x335" width="500" height="335" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><button class="copyright js-tooltip figure__copyright" title="Das ist ein Copyright-Hinweis" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
<use xlink:href="#icon-copyright"></use>
</svg></button>
</div>
</figure>
</div>
<div class="text-image__content">
<div class="text">
<h3 class="headline headline--5">Ich bin eine Zwischenheadline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At <a class="link" href="#">vero</a> eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<div class="content-detail__block content-detail__block--text-image content-detail__block--breaker" id="id-6ded">
<div class="text-image">
<div class="text-image__figure">
<figure class="figure" aria-labelledby="figure-1b3c-label">
<div class="figure__media" data-gallery="lightbox-96a2">
<div class="image loading" style="padding-top: 113.99999999999999%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="570" src="https://bildermangel.de/500x570/F5F5F5/28281a.png?text=500x570" width="500" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/500x570/F5F5F5/28281a.png?text=500x570" width="500" height="570" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
<figcaption class="figure__caption" id="figure-1b3c-label">Hier steht eine Bildunterschrift (Foto: Vorname Name)</figcaption>
</figure>
</div>
<div class="text-image__content">
<div class="text">
<h3 class="headline headline--5">Ich bin eine Zwischenheadline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<div class="content-detail__block content-detail__block--textbox" id="id-e08d">
<div class="textbox t-dark">
<div class="text">
<h3 class="headline headline--4">This is a level 3 headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et <a class="link link--internal" href="#">justo duo dolores et ea rebum</a>. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a class="link link--external" href="#" target="_blank" rel="noopener noreferrer">At vero eos et</a> accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><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">Hier weiterlesen</span></a>
</div>
</div>
</div>
<div class="content-detail__block content-detail__block--figure--external-video" id="id-055b">
<figure class="figure" aria-labelledby="figure-1478-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
<figcaption class="figure__caption" id="figure-1478-label"><b>Titel des Videos</b><br /><span class="u-hidden-visually">Dauer: </span>01:23</figcaption>
</figure>
</div>
<div class="content-detail__block content-detail__block--iframe" id="id-4d1f">
<div class="iframe" style="height: 450px"><iframe class="iframe__tag" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d20220.787246657037!2d7.167934!3d50.690279!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bee46b2f777e3d%3A0xfb4becc0408481e2!2sJean-Paul-Stra%C3%9Fe%2012%2C%2053173%20Bonn%2C%20Deutschland!5e0!3m2!1sde!2sus!4v1596813286320!5m2!1sde!2sus" height="450" width="100%" allow="fullscreen"></iframe></div>
</div>
<div class="content-detail__block content-detail__block--overlay-teaser-grid content-detail__block--breaker content-detail__block--full" id="id-f439">
<div class="overlay-teaser-grid overlay-teaser-grid--default">
<div class="overlay-teaser-grid__inner">
<div class="overlay-teaser-grid__col">
<div class="overlay-teaser-grid__item">
<article class="overlay-teaser overlay-teaser--big">
<div class="overlay-teaser__image">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="560" src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" height="560" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div><a class="overlay-teaser__link js-overlay-link" href="#" data-overlay-target="overlay-teaser" target="_blank">
<div class="overlay-teaser__link-icon"><svg class="icon icon--arrow-external" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-external"></use>
</svg></div><span class="overlay-teaser__kicker">Verändern</span>
<h3 class="headline headline--3 overlay-teaser__headline">Unser Jubiläumsmagazin</h3>
</a>
</article>
</div>
</div>
<div class="overlay-teaser-grid__col">
<div class="overlay-teaser-grid__item">
<article class="overlay-teaser">
<div class="overlay-teaser__image">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="560" src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" height="560" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div><a class="overlay-teaser__link js-overlay-link" href="#" data-overlay-target="overlay-teaser"><span class="overlay-teaser__kicker">Verändern</span>
<h4 class="headline headline--4 overlay-teaser__headline">Zukunft made in Baden-Württemberg</h4></a>
</article>
</div>
<div class="overlay-teaser-grid__item">
<article class="overlay-teaser">
<div class="overlay-teaser__image">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="560" src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" height="560" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div><a class="overlay-teaser__link js-overlay-link" href="#" data-overlay-target="overlay-teaser"><span class="overlay-teaser__kicker">Forschungsschiff Aldebaran</span>
<h4 class="headline headline--4 overlay-teaser__headline">Das größte digitale Klassenzimmer</h4></a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="content-detail__block content-detail__block--content-carousel content-detail__block--breaker content-detail__block--full" id="id-0763">
<div class="content-carousel content-carousel--violet">
<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">Unsere Mission</span> <span class="u-hidden-visually">:</span> <br /> <span class="f-w-bold">Den Südwesten als lebenswerte Heimat erhalten</span></h2>
</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">Wir stiften raum für Kreativität mit der</span><span class="u-hidden-visually">:</span><br />Name des Programms</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-0971-content" id="id-0971-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-93dc-title">
<title id="icon-93dc-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-0971-content" aria-labelledby="id-0971-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-9fae">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-5dcb">
<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-4bc1">
<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-3632">
<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-b449"><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-caf9-title">
<title id="icon-caf9-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">Wir stiften raum für Kreativität mit der</span><span class="u-hidden-visually">:</span><br />Name des Programms</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-506c-content" id="id-506c-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-46cf-title">
<title id="icon-46cf-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-506c-content" aria-labelledby="id-506c-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-2562">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-a3eb">
<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-fdea">
<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-1aa1">
<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-bbe8"><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-6527-title">
<title id="icon-6527-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">Wir stiften raum für Kreativität mit der</span><span class="u-hidden-visually">:</span><br />Name des Programms</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-9c9b-content" id="id-9c9b-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5c76-title">
<title id="icon-5c76-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-9c9b-content" aria-labelledby="id-9c9b-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-8979">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-4df5">
<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-e40a">
<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-a91f">
<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-fd19"><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-b947-title">
<title id="icon-b947-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">Wir stiften raum für Kreativität mit der</span><span class="u-hidden-visually">:</span><br />Name des Programms</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-69fe-content" id="id-69fe-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-e7d4-title">
<title id="icon-e7d4-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-69fe-content" aria-labelledby="id-69fe-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-9444">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-c1ec">
<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-f3ff">
<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-149b">
<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-ba87"><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-eab7-title">
<title id="icon-eab7-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">Wir stiften raum für Kreativität mit der</span><span class="u-hidden-visually">:</span><br />Name des Programms</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-e9e8-content" id="id-e9e8-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-dae7-title">
<title id="icon-dae7-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-e9e8-content" aria-labelledby="id-e9e8-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-79df">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-d53d">
<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-d1a1">
<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-5a01">
<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-5bae"><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-446d-title">
<title id="icon-446d-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">Wir stiften raum für Kreativität mit der</span><span class="u-hidden-visually">:</span><br />Name des Programms</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-1003-content" id="id-1003-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-469a-title">
<title id="icon-469a-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-1003-content" aria-labelledby="id-1003-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-ed31">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-bebe">
<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-bdad">
<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-067b">
<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-265f"><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-3a05-title">
<title id="icon-3a05-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 class="content-carousel__bottom">
<div class="link-list link-list--right">
<div class="text link-list__text">
<p>Ich bin Freitext</p>
</div>
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link icon-link--right" href="#"><span class="icon-link__text">Ich in ein Link</span><span class="icon-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-detail__block content-detail__block--story-module content-detail__block--breaker content-detail__block--full" id="id-32b4">
<div class="story-module story-module--mocca story-module--primary">
<div class="story-module__inner">
<div class="story-module__content-wrap">
<div class="story-module__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 js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 1. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</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 js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 2. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</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 js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 3. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</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 js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 4. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</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 js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 5. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</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 js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 6. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</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 js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 7. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</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 js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 8. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
</div>
</div>
<div class="teaser-slider__controls slider__controls"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-detail__block content-detail__block--share" id="id-f9cc">
<div class="share"><button class="share__trigger" type="button"><svg class="icon icon--share share__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-share"></use>
</svg><span class="share__text">Teilen</span></button>
<div class="share__tooltip" aria-hidden="true">
<ul class="share__list">
<li class="share__item"><a class="share__link js-popup" href="#" data-name="Facebook"><svg class="icon icon--facebook" viewBox="0 0 200 200">
<use xlink:href="#icon-facebook"></use>
</svg><span class="share__label">Facebook</span></a></li>
<li class="share__item"><a class="share__link js-popup" href="#" data-name="X"><svg class="icon icon--x" viewBox="0 0 200 200">
<use xlink:href="#icon-x"></use>
</svg><span class="share__label">X</span></a></li>
<li class="share__item"><a class="share__link js-popup" href="#" data-name="Xing"><svg class="icon icon--xing" viewBox="0 0 200 200">
<use xlink:href="#icon-xing"></use>
</svg><span class="share__label">Xing</span></a></li>
<li class="share__item"><a class="share__link" href="#" data-name="E-Mail"><svg class="icon icon--mail-fill" viewBox="0 0 200 200">
<use xlink:href="#icon-mail-fill"></use>
</svg><span class="share__label">E-Mail</span></a></li>
<li class="share__item"><button class="share__link js-copy" type="button" data-clipboard-text="www.Ich-wurde-kopiert.de" data-copy-message="Link kopieren" data-copied-message="In Zwischenablage &#10003;"><svg class="icon icon--copy" viewBox="0 0 200 200">
<use xlink:href="#icon-copy"></use>
</svg><span class="share__label">Link kopieren</span></button></li>
</ul><button class="share__close" type="button" title="Schließen" hidden="hidden"><svg class="icon icon--close" viewBox="0 0 200 200">
<use xlink:href="#icon-close"></use>
</svg></button>
<div class="share__arrow"></div>
</div>
</div>
</div>
</div>
</div>{
"blocks": [
{
"use": "text",
"settings": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n"
}
},
{
"use": "picto-group",
"inherit": true,
"breaker": true
},
{
"use": "quiz",
"inherit": true
},
{
"use": "text",
"settings": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n"
},
"aside": {
"link": "#",
"title": "Ähnlicher Beitrag",
"image": {
"height": 160,
"width": 245,
"alt": "brand image"
},
"text": {
"content": "span Erzählenden Spitzmarke\np Eine eingängige Headline, die das Thema gut erklärt\n"
}
}
},
{
"use": "text-image",
"breaker": true,
"settings": {
"figure": {
"image": {
"width": 500,
"height": 335
},
"caption": null
},
"text": {
"content": "+include('@headline--headline-5', {\n text: 'Ich bin eine Zwischenheadline',\n level: 3,\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.#[br]#[br]#[strong #[a(class='link link--internal', href='test.html') Mehr erfahren]]\n"
}
}
},
{
"use": "text-image",
"breaker": true,
"settings": {
"right": true,
"figure": {
"image": {
"width": 500,
"height": 335
},
"caption": null,
"copyright": true
},
"text": {
"content": "+include('@headline--headline-5', {\n text: 'Ich bin eine Zwischenheadline',\n level: 3,\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At #[a.link(href='#') 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.\n"
}
}
},
{
"use": "text-image",
"breaker": true,
"settings": {
"figure": {
"image": {
"width": 500,
"height": 570
}
},
"text": {
"content": "+include('@headline--headline-5', {\n text: 'Ich bin eine Zwischenheadline',\n level: 3,\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n"
}
}
},
{
"use": "textbox",
"inherit": true
},
{
"use": "figure--external-video",
"inherit": true
},
{
"use": "iframe",
"inherit": true
},
{
"use": "overlay-teaser-grid",
"breaker": true,
"full": true,
"inherit": true
},
{
"use": "content-carousel",
"breaker": true,
"full": true,
"inherit": true
},
{
"use": "story-module",
"breaker": true,
"full": true,
"inherit": true
},
{
"use": "share",
"inherit": true
}
]
}
Artikel @content-detail--article
<div class="content-detail content-detail--article">
<div class="content-detail__inner">
<div class="content-detail__block content-detail__block--article-header content-detail__block--breaker" id="id-f1ab">
<header class="article-header">
<div class="article-header__inner">
<div class="article-header__title">
<h1 class="headline headline--1">Ich bin die Hauptheadline</h1>
</div>
<div class="article-header__text">
<p>Diese neue Art des Bauens eröffnet neue Potentiale und ist klima- wie ressourcenschonend. Entwickelt wurde das Verfahren im Rahmen eines unserer Programme.</p>
</div>
<div class="article-header__meta">
<div class="article-header__meta-item"><svg class="icon icon--calendar" viewBox="0 0 200 200">
<use xlink:href="#icon-calendar"></use>
</svg><span>12.10.</span></div>
<div class="article-header__meta-item"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span>Stuttgart</span></div>
</div>
<div class="article-header__meta-text">
<p>text: Rolf Metzger</p>
</div>
<div class="article-header__share">
<div class="share"><button class="share__trigger" type="button"><svg class="icon icon--share share__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-share"></use>
</svg><span class="share__text">Teilen</span></button>
<div class="share__tooltip" aria-hidden="true">
<ul class="share__list">
<li class="share__item"><a class="share__link js-popup" href="#" data-name="Facebook"><svg class="icon icon--facebook" viewBox="0 0 200 200">
<use xlink:href="#icon-facebook"></use>
</svg><span class="share__label">Facebook</span></a></li>
<li class="share__item"><a class="share__link js-popup" href="#" data-name="X"><svg class="icon icon--x" viewBox="0 0 200 200">
<use xlink:href="#icon-x"></use>
</svg><span class="share__label">X</span></a></li>
<li class="share__item"><a class="share__link js-popup" href="#" data-name="Xing"><svg class="icon icon--xing" viewBox="0 0 200 200">
<use xlink:href="#icon-xing"></use>
</svg><span class="share__label">Xing</span></a></li>
<li class="share__item"><a class="share__link" href="#" data-name="E-Mail"><svg class="icon icon--mail-fill" viewBox="0 0 200 200">
<use xlink:href="#icon-mail-fill"></use>
</svg><span class="share__label">E-Mail</span></a></li>
<li class="share__item"><button class="share__link js-copy" type="button" data-clipboard-text="www.Ich-wurde-kopiert.de" data-copy-message="Link kopieren" data-copied-message="In Zwischenablage &#10003;"><svg class="icon icon--copy" viewBox="0 0 200 200">
<use xlink:href="#icon-copy"></use>
</svg><span class="share__label">Link kopieren</span></button></li>
</ul><button class="share__close" type="button" title="Schließen" hidden="hidden"><svg class="icon icon--close" viewBox="0 0 200 200">
<use xlink:href="#icon-close"></use>
</svg></button>
<div class="share__arrow"></div>
</div>
</div>
</div>
<div class="article-header__figure">
<figure class="figure" aria-labelledby="figure-8a68-label">
<div class="figure__media" data-gallery="lightbox-8a76">
<div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><button class="copyright js-tooltip figure__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
<use xlink:href="#icon-copyright"></use>
</svg></button>
</div>
</figure>
</div>
</div>
</header>
</div>
<div class="content-detail__block content-detail__block--highlight-letter content-detail__block--breaker" id="id-aa1b">
<article class="highlight-letter">
<div class="highlight-letter__inner">
<div class="highlight-letter__letter">L</div>
<div class="text highlight-letter__text">
<p>Lorem ipsum dolor sit amet, <a class="link link--internal" href="#">Interner Link</a>. elitr, sed <a class="link link--external" href="#">Externer Link</a> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</article>
</div>
<div class="content-detail__block content-detail__block--text" id="id-d323">
<div class="text">
<h2 class="headline headline--3">Bild in Übergröße (1040px Breit max)</h2>
</div>
</div>
<div class="content-detail__block content-detail__block--figure content-detail__block--breaker" id="id-db48">
<figure class="figure" aria-labelledby="figure-150f-label">
<div class="figure__media" data-gallery="lightbox-d816">
<div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
<figcaption class="figure__caption" id="figure-150f-label">Hier steht eine Bildunterschrift (Foto: Vorname Name)</figcaption>
</figure>
</div>
<div class="content-detail__block content-detail__block--text" id="id-d486">
<div class="text">
<h2 class="headline headline--3">Ich bin eine Zwischenheadline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="content-detail__block content-detail__block--gallery" id="id-0535">
<div class="gallery">
<div class="gallery__slides-frame">
<div class="gallery__slider">
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-06aa-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600" data-size="900x600" data-gallery="lightbox-7831">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-345f-title">
<title id="icon-345f-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-06aa-label">Slide 1: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-ddcd-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600" data-size="900x600" data-gallery="lightbox-7831">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-cbc7-title">
<title id="icon-cbc7-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-ddcd-label">Slide 2: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-cbcb-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600" data-size="900x600" data-gallery="lightbox-7831">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-890e-title">
<title id="icon-890e-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-cbcb-label">Slide 3: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-b999-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600" data-size="900x600" data-gallery="lightbox-7831">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-e27e-title">
<title id="icon-e27e-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-b999-label">Slide 4: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-99c8-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600" data-size="900x600" data-gallery="lightbox-7831">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d889-title">
<title id="icon-d889-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-99c8-label">Slide 5: Ich bin eine optionale BU</figcaption>
</figure>
</div>
</div>
</div><button class="button button--primary gallery__button" type="button"><svg class="icon icon--gallery button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-gallery"></use>
</svg><span class="button__text">Bilder</span></button>
</div>
</div>
<div class="content-detail__block content-detail__block--gallery" id="id-9c45">
<div class="gallery gallery--slider">
<div class="gallery__slides-frame">
<div class="gallery__slider">
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-d3c1-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-45f2">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-8cd9-title">
<title id="icon-8cd9-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-d3c1-label">Slide 1: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-1526-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-45f2">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-2f46-title">
<title id="icon-2f46-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-1526-label">Slide 2: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-667a-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-45f2">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7a7f-title">
<title id="icon-7a7f-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-667a-label">Slide 3: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-15d4-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-45f2">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c006-title">
<title id="icon-c006-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-15d4-label">Slide 4: Ich bin eine optionale BU</figcaption>
</figure>
</div>
</div>
</div>
<div class="gallery__controls slider__controls"></div>
</div>
</div>
<div class="content-detail__block content-detail__block--quote" id="id-f271">
<figure class="quote">
<blockquote class="quote__text">Ich bin ein Zitat. Ich stehe rechtsbündig und lockere den Text auf</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Vorname Name</div>
</figcaption>
</figure>
</div>
<div class="content-detail__block content-detail__block--text content-detail__block--aside" id="id-cc36">
<div class="content-detail__brand">
<div class="content-detail__brand-kicker">Ähnlicher Beitrag</div>
<div class="content-detail__brand-thumb">
<div class="content-detail__brand-image">
<div class="image loading" style="padding-top: 65.3061224489796%;"><noscript><img class="image__fallback" alt="brand image" height="160" src="https://bildermangel.de/245x160/F5F5F5/28281a.png?text=245x160" width="245" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/245x160/F5F5F5/28281a.png?text=245x160" width="245" height="160" alt="brand image" /></div>
</div><a class="content-detail__brand-content js-overlay-link" href="#" data-overlay-target="content-detail__brand-thumb">
<div class="text"><span>Erzählenden Spitzmarke</span>
<p>Eine eingängige Headline, die das Thema gut erklärt</p>
</div>
</a>
</div>
</div>
<div class="text">
<ul>
<li>Bulletpoint Liste ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt consetetur sadipscing elitr, ut labore</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
</ul>
<ol>
<li>Nummerische Liste ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt consetetur sadipscing elitr, ut labore</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
</ol>
</div>
</div>
<div class="content-detail__block content-detail__block--text" id="id-6fe6">
<div class="text">
<h2 class="headline headline--3">Ich bin eine Zwischenheadline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="content-detail__block content-detail__block--overview-teaser content-detail__block--full" id="id-60d1">
<div class="overview-teaser">
<div class="overview-teaser__image">
<div class="image loading" style="padding-top: 55.55555555555556%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="800" src="https://bildermangel.de/1440x800/6E7180/8E919B.png?text=1440x800" width="1440" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1440x800/6E7180/8E919B.png?text=1440x800" width="1440" height="800" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
<div class="overview-teaser__content">
<div class="overview-teaser__title">
<h2 class="headline headline--1"><span>Wir stiften innovative Forschung</span> Indem wir die Entwicklung neuer Produktions-techniken fördern</h2>
</div>
<div class="overview-teaser__button"><button class="icon-button" type="button"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7df7-title">
<title id="icon-7df7-title">List</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<div class="overview-teaser__share">
<div class="share"><button class="share__trigger" type="button"><svg class="icon icon--share share__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-share"></use>
</svg><span class="share__text">Teilen</span></button>
<div class="share__tooltip" aria-hidden="true">
<ul class="share__list">
<li class="share__item"><a class="share__link js-popup" href="#" data-name="Facebook"><svg class="icon icon--facebook" viewBox="0 0 200 200">
<use xlink:href="#icon-facebook"></use>
</svg><span class="share__label">Facebook</span></a></li>
<li class="share__item"><a class="share__link js-popup" href="#" data-name="X"><svg class="icon icon--x" viewBox="0 0 200 200">
<use xlink:href="#icon-x"></use>
</svg><span class="share__label">X</span></a></li>
<li class="share__item"><a class="share__link js-popup" href="#" data-name="Xing"><svg class="icon icon--xing" viewBox="0 0 200 200">
<use xlink:href="#icon-xing"></use>
</svg><span class="share__label">Xing</span></a></li>
<li class="share__item"><a class="share__link" href="#" data-name="E-Mail"><svg class="icon icon--mail-fill" viewBox="0 0 200 200">
<use xlink:href="#icon-mail-fill"></use>
</svg><span class="share__label">E-Mail</span></a></li>
<li class="share__item"><button class="share__link js-copy" type="button" data-clipboard-text="www.Ich-wurde-kopiert.de" data-copy-message="Link kopieren" data-copied-message="In Zwischenablage &#10003;"><svg class="icon icon--copy" viewBox="0 0 200 200">
<use xlink:href="#icon-copy"></use>
</svg><span class="share__label">Link kopieren</span></button></li>
</ul><button class="share__close" type="button" title="Schließen" hidden="hidden"><svg class="icon icon--close" viewBox="0 0 200 200">
<use xlink:href="#icon-close"></use>
</svg></button>
<div class="share__arrow"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-detail__block content-detail__block--text" id="id-f8d6">
<div class="text">
<h2 class="headline headline--3">Ich bin eine Zwischenheadline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="content-detail__block content-detail__block--jumpbox content-detail__block--breaker" id="id-3312">
<div class="jumpbox">
<h2 class="headline headline--1 jumpbox__headline"><span>Ich bin eine</span> <br /> Jumpbox</h2>
<div class="jumpbox__button"><a class="button button--primary" target="_blank" href="#"><svg class="icon icon--arrow-external button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-external"></use>
</svg><span class="button__text">Website besuchen</span></a></div>
</div>
</div>
<div class="content-detail__block content-detail__block--text" id="id-06b8">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="content-detail__block content-detail__block--figure--external-video" id="id-a3d3">
<figure class="figure" aria-labelledby="figure-64bb-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
<figcaption class="figure__caption" id="figure-64bb-label"><b>Titel des Videos</b><br /><span class="u-hidden-visually">Dauer: </span>01:23</figcaption>
</figure>
</div>
<div class="content-detail__block content-detail__block--text" id="id-c22b">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="content-detail__block content-detail__block--figure--internal-video" id="id-a905">
<figure class="figure" aria-labelledby="figure-fd96-label">
<div class="video loading" style="padding-top: 56.25%;"><video class="video__video js-lazyload lazyload" width="640" height="360" preload="none" poster="https://bildermangel.de/640x360/6E7180/8E919B.png?text=640x360 Poster" muted="muted" autoplay="autoplay" loop="loop" id="video--a765" playsinline="playsinline">
<source src="/images/video/big_buck_bunny.mp4" type="video/mp4" />
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />Ihr Browser unterstützt kein HTML5 video.</video><button class="icon-button video__button" type="button" aria-controls="video--a765"><svg class="icon icon--play icon-button__icon video__play" viewBox="0 0 200 200" role="img" aria-labelledby="icon-f136-title">
<title id="icon-f136-title">Video abspielen</title>
<use xlink:href="#icon-play"></use>
</svg><svg class="icon icon--pause icon-button__icon video__pause" viewBox="0 0 200 200" role="img" aria-labelledby="icon-552b-title">
<title id="icon-552b-title">Video pausieren</title>
<use xlink:href="#icon-pause"></use>
</svg></button></div>
<figcaption class="figure__caption" id="figure-fd96-label"><b>Titel des internen Videos</b><br /><span class="u-hidden-visually">Dauer: </span>01:23</figcaption>
</figure>
</div>
<div class="content-detail__block content-detail__block--text" id="id-7d51">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="content-detail__block content-detail__block--figure--internal-video content-detail__block--breaker" id="id-a966">
<figure class="figure" aria-labelledby="figure-e38a-label">
<div class="video loading" style="padding-top: 56.25%;"><video class="video__video js-lazyload lazyload" width="640" height="360" preload="none" poster="https://bildermangel.de/640x360/6E7180/8E919B.png?text=640x360 Poster" muted="muted" autoplay="autoplay" loop="loop" id="video--2a02" playsinline="playsinline">
<source src="/images/video/big_buck_bunny.mp4" type="video/mp4" />
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />Ihr Browser unterstützt kein HTML5 video.</video><button class="icon-button video__button" type="button" aria-controls="video--2a02"><svg class="icon icon--play icon-button__icon video__play" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7f6e-title">
<title id="icon-7f6e-title">Video abspielen</title>
<use xlink:href="#icon-play"></use>
</svg><svg class="icon icon--pause icon-button__icon video__pause" viewBox="0 0 200 200" role="img" aria-labelledby="icon-87e6-title">
<title id="icon-87e6-title">Video pausieren</title>
<use xlink:href="#icon-pause"></use>
</svg></button></div>
<figcaption class="figure__caption" id="figure-e38a-label"><b>Titel des internen Videos</b><br /><span class="u-hidden-visually">Dauer: </span>01:23</figcaption>
</figure>
</div>
<div class="content-detail__block content-detail__block--contact-box content-detail__block--breaker" id="id-d6aa">
<div class="contact-box contact-box--blue contact-box--highlight">
<div class="contact-box__headline">
<h2 class="headline headline--2">Kontakt</h2>
</div>
<div class="contact-box__details">
<div class="contact-box__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Jan Philipp Schewe" height="175" src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" height="175" alt="Jan Philipp Schewe" /></div>
</div><button class="copyright js-tooltip contact-box__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
<use xlink:href="#icon-copyright"></use>
</svg></button>
<div class="text contact-box__text">
<p><strong>Jan Philipp Schewe </strong><br /> Tel <a href="tel:71124847615">+49 (0) 711 248 476-15</a><br /> Fax +49 (0) 711 248 476-50 <br /> <a class="link" href="schewe@bwstiftung.de">schewe@bwstiftung.de</a></p>
</div>
</div>
</div>
</div>
</div>
</div>{
"blocks": [
{
"use": "article-header",
"inherit": true,
"breaker": true
},
{
"use": "highlight-letter",
"inherit": true,
"breaker": true
},
{
"use": "text",
"settings": {
"content": "+include('@headline--headline-3', {\n text: 'Bild in Übergröße (1040px Breit max)',\n level: 2\n})\n"
}
},
{
"use": "figure",
"inherit": true,
"breaker": true
},
{
"use": "text",
"settings": {
"content": "+include('@headline--headline-3', {\n text: 'Ich bin eine Zwischenheadline',\n level: 2\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n"
}
},
{
"use": "gallery",
"inherit": true
},
{
"use": "gallery",
"inherit": true,
"settings": {
"items": [
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"caption": "Slide 1: Ich bin eine optionale BU"
}
},
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"caption": "Slide 2: Ich bin eine optionale BU"
}
},
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"caption": "Slide 3: Ich bin eine optionale BU"
}
},
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"caption": "Slide 4: Ich bin eine optionale BU"
}
}
],
"button": null,
"slider": true
}
},
{
"use": "quote",
"settings": {
"text": "Ich bin ein Zitat. Ich stehe rechtsbündig und lockere den Text auf",
"caption": "Vorname Name"
}
},
{
"use": "text",
"settings": {
"content": "ul\n li Bulletpoint Liste ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt consetetur sadipscing elitr, ut labore\n li Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n\nol\n li Nummerische Liste ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt consetetur sadipscing elitr, ut labore\n li Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n"
},
"aside": {
"link": "#",
"title": "Ähnlicher Beitrag",
"image": {
"height": 160,
"width": 245,
"alt": "brand image"
},
"text": {
"content": "span Erzählenden Spitzmarke\np Eine eingängige Headline, die das Thema gut erklärt\n"
}
}
},
{
"use": "text",
"settings": {
"content": "+include('@headline--headline-3', {\n text: 'Ich bin eine Zwischenheadline',\n level: 2\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n"
}
},
{
"use": "overview-teaser",
"inherit": true,
"full": true
},
{
"use": "text",
"settings": {
"content": "+include('@headline--headline-3', {\n text: 'Ich bin eine Zwischenheadline',\n level: 2\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n"
}
},
{
"use": "jumpbox",
"inherit": true,
"breaker": true
},
{
"use": "text",
"settings": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n"
}
},
{
"use": "figure--external-video",
"inherit": true
},
{
"use": "text",
"settings": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n"
}
},
{
"use": "figure--internal-video",
"inherit": true
},
{
"use": "text",
"settings": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n"
}
},
{
"use": "figure--internal-video",
"breaker": true,
"inherit": true
},
{
"use": "contact-box",
"inherit": true,
"breaker": true,
"settings": {
"highlight": true,
"headline": {
"text": "Kontakt",
"size": 2,
"level": 2
},
"text": {
"content": "p #[strong Jan Philipp Schewe ]#[br] Tel #[a(href='tel:71124847615') +49 (0) 711 248 476-15]#[br] Fax +49 (0) 711 248 476-50 #[br] #[a.link(href='schewe@bwstiftung.de') schewe@bwstiftung.de]\n"
}
}
}
],
"article": true
}