<div class="o-slider glide js-slider-init slider--stage" data-slider-type="stage" data-glide-config="{"autoplay": 4000 }">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="slider__track glide__track slider__track--stage" data-glide-el="track">
<ul class="glide__slides slider__slides--stage" aria-label="Karusell mit 3 Elementen">
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<img src="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dies ist ein Bühnen-Teaser ...Lazyloaded...
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-b">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg">
<img src="../../images/8x3/eltern-sohn-toben-1080x405.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dies ist ein Bühnen-Teaser ...Lazyloaded...
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-c">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/frau-arm-pflaster-1080x405.jpg">
<img src="../../images/8x3/frau-arm-pflaster-1080x405.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dies ist ein Bühnen-Teaser ...Lazyloaded...
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron " data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Zum vorigen Bild</span><img src="../../img/angle-left-dropshadow.svg" alt="" title="" class="a-image ">
</button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Zum nächsten Bild</span><img src="../../img/angle-right-dropshadow.svg" alt="" title="" class="a-image ">
</button>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--targetgroup cs--bg-image-a" data-slider-type="targetgroup" data-glide-config="{"autoplay": 3000 }">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="slider__track glide__track slider__track--targetgroup" data-glide-el="track">
<ul class="glide__slides slider__slides--targetgroup" aria-label="Karusell mit 6 Elementen">
<li class="glide__slide slider__slide--targetgroup">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<img src="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Gehen Sie sich impfen!
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--targetgroup">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/mutter-kind-schoss-1080x405.jpg">
<img src="../../images/8x3/mutter-kind-schoss-1080x405.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Mit dem Wort Darmkrebsvorsorgeuntersuchung gelingt es uns eine lange Headline zu produzieren
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--targetgroup">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/frau-tablet-arzt-1080x405.jpg">
<img src="../../images/8x3/frau-tablet-arzt-1080x405.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Wir unterstützen die Videosprechstunde, egal ob mit Slack oder Webex oder Skype
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--targetgroup">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/laechelnder-mann-1000x1000.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/frau-tablet-arzt-1080x405.jpg">
<img src="../../images/8x3/frau-tablet-arzt-1080x405.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Mehr Vorteile für Azubis!
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--targetgroup">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/eltern-kind-blumen-1000x1000.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg">
<img src="../../images/8x3/eltern-sohn-toben-1080x405.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Wir unterstützen sie vor, während und nach Schwangerschaften
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--targetgroup">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/grafik-rubrik-frage-1080x405.png">
<img src="../../images/8x3/grafik-rubrik-frage-1080x405.png" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Werden sie Mitglied bei der Barmer
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron " data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Zum vorigen Bild</span><img src="../../img/angle-left-dropshadow.svg" alt="" title="" class="a-image ">
</button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Zum nächsten Bild</span><img src="../../img/angle-right-dropshadow.svg" alt="" title="" class="a-image ">
</button>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--thumbnail" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button" title="Impfung">
<i class="a-icon icon--dot" aria-hidden="true"></i>
<img src="../../images/1x1/insect-1-128x128.jpg" alt="" title="" class="a-image slider-bullet__thumbnail" loading="lazy">
<span class="slider-bullet__label"><span class="sr-only">Zum Element </span> Impfung</span>
</button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button" title="Darmkrebsvorsorgeuntersuchung">
<i class="a-icon icon--dot" aria-hidden="true"></i>
<img src="../../images/1x1/insect-2-128x128.jpg" alt="" title="" class="a-image slider-bullet__thumbnail" loading="lazy">
<span class="slider-bullet__label"><span class="sr-only">Zum Element </span> Darmkrebsvorsorgeuntersuchung</span>
</button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button" title="Videosprechstunde">
<i class="a-icon icon--dot" aria-hidden="true"></i>
<img src="../../images/1x1/insect-3-128x128.jpg" alt="" title="" class="a-image slider-bullet__thumbnail" loading="lazy">
<span class="slider-bullet__label"><span class="sr-only">Zum Element </span> Videosprechstunde</span>
</button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=3">
<button class="slider-bullet__button" title="Azubis">
<i class="a-icon icon--dot" aria-hidden="true"></i>
<img src="../../images/1x1/plant-1-128x128.jpg" alt="" title="" class="a-image slider-bullet__thumbnail" loading="lazy">
<span class="slider-bullet__label"><span class="sr-only">Zum Element </span> Vorteile für Azubis</span>
</button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=4">
<button class="slider-bullet__button" title="Schwangerschaft">
<i class="a-icon icon--dot" aria-hidden="true"></i>
<img src="../../images/1x1/plant-2-128x128.jpg" alt="" title="" class="a-image slider-bullet__thumbnail" loading="lazy">
<span class="slider-bullet__label"><span class="sr-only">Zum Element </span> Schwangerschaft</span>
</button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=5">
<button class="slider-bullet__button" title="Mitgliedantrag">
<i class="a-icon icon--dot" aria-hidden="true"></i>
<img src="../../images/1x1/plant-3-128x128.jpg" alt="" title="" class="a-image slider-bullet__thumbnail" loading="lazy">
<span class="slider-bullet__label"><span class="sr-only">Zum Element </span> Mitglied werden und viele weitere Vorteile für ein langes Label</span>
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="o-advertorial ">
<div class="advertorial__content">
<h3 class="advertorial__headline">Damit ihr Zeit für die wirklich wichtigen Dinge habt!</h3>
<div class="advertorial__detailtext">
<p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>
</div>
<a class="a-btn btn--primary" href="" title="">
Button
</a>
<div class="advertorial__local-settings">
<p>Sie haben schon ein Benutzerkonto?</p>
<a href="http://zdf.de" class="a-link ">
<span class="link__inner">Hier geht es direkt zum Login!</span> <i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="advertorial__imagerie">
<div class="o-slider glide js-slider-init slider--advertorial" data-slider-type="advertorial" data-glide-config="{"autoplay": 10000 }">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--advertorial" data-glide-el="track">
<ul class="glide__slides slider__slides--advertorial" aria-label="Karusell mit 6 Elementen">
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
<img src="../../images/5x7/mann-mit-tablet.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/eltern-kind-blumen-712x534.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/eltern-kind-blumen-714x1000.jpg">
<img src="../../images/5x7/eltern-kind-blumen-714x1000.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/eltern-baby-tablet-712x534.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/tippen-auf-tastatur-712x534.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/tippen-auf-tastatur-714x1000.jpg">
<img src="../../images/5x7/tippen-auf-tastatur-714x1000.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/laechelnder-mann-712x534.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/laechelnder-mann-714x1000.jpg">
<img src="../../images/5x7/laechelnder-mann-714x1000.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/abstimmung-des-verwaltungsrats-712x534.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
<img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="">
</picture>
</li>
</ul>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=3">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=4">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 5</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=5">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 6</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="o-advertorial advertorial--imagerie-landscape">
<div class="advertorial__content">
<h3 class="advertorial__headline">Damit ihr Zeit für die wirklich wichtigen Dinge habt!</h3>
<div class="advertorial__detailtext">
<p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>
</div>
<a class="a-btn btn--primary" href="" title="">
Button
</a>
<div class="advertorial__local-settings">
<p>Sie haben schon ein Benutzerkonto?</p>
<a href="http://zdf.de" class="a-link ">
<span class="link__inner">Hier geht es direkt zum Login!</span> <i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="advertorial__imagerie">
<div class="o-slider glide js-slider-init slider--advertorial" data-slider-type="advertorial" data-glide-config="{"autoplay": 10000 }">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--advertorial" data-glide-el="track">
<ul class="glide__slides slider__slides--advertorial" aria-label="Karusell mit 6 Elementen">
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/barmer-konferenz.jpg">
<source media="(min-width: 641px)" srcset="../../images/4x3/barmer-konferenz.jpg">
<img src="../../images/4x3/barmer-konferenz.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/promenade.jpg">
<source media="(min-width: 641px)" srcset="../../images/4x3/promenade.jpg">
<img src="../../images/4x3/promenade.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/praesentation.jpg">
<source media="(min-width: 641px)" srcset="../../images/4x3/praesentation.jpg">
<img src="../../images/4x3/praesentation.jpg" alt="">
</picture>
</li>
</ul>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=3">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=4">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 5</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=5">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 6</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="o-advertorial advertorial--imagerie-left advertorial--imagerie-landscape">
<div class="advertorial__content">
<h3 class="advertorial__headline">Damit ihr Zeit für die wirklich wichtigen Dinge habt!</h3>
<div class="advertorial__detailtext">
<p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>
</div>
<a class="a-btn btn--primary" href="" title="">
Button
</a>
<div class="advertorial__local-settings">
<p>Sie haben schon ein Benutzerkonto?</p>
<a href="http://zdf.de" class="a-link ">
<span class="link__inner">Hier geht es direkt zum Login!</span> <i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="advertorial__imagerie">
<div class="o-slider glide js-slider-init slider--advertorial" data-slider-type="advertorial" data-glide-config="{"autoplay": 10000 }">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--advertorial" data-glide-el="track">
<ul class="glide__slides slider__slides--advertorial" aria-label="Karusell mit 6 Elementen">
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/barmer-konferenz.jpg">
<source media="(min-width: 641px)" srcset="../../images/4x3/barmer-konferenz.jpg">
<img src="../../images/4x3/barmer-konferenz.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/promenade.jpg">
<source media="(min-width: 641px)" srcset="../../images/4x3/promenade.jpg">
<img src="../../images/4x3/promenade.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/praesentation.jpg">
<source media="(min-width: 641px)" srcset="../../images/4x3/praesentation.jpg">
<img src="../../images/4x3/praesentation.jpg" alt="">
</picture>
</li>
</ul>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=3">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=4">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 5</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=5">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 6</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="o-advertorial advertorial--imagerie-small">
<div class="advertorial__content">
<h3 class="advertorial__headline">Damit ihr Zeit für die wirklich wichtigen Dinge habt!</h3>
<div class="advertorial__detailtext">
<p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>
</div>
<a class="a-btn btn--primary" href="" title="">
Button
</a>
<div class="advertorial__local-settings">
<p>Sie haben schon ein Benutzerkonto?</p>
<a href="http://zdf.de" class="a-link ">
<span class="link__inner">Hier geht es direkt zum Login!</span> <i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="advertorial__imagerie">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/promenade.jpg">
<source media="(min-width: 641px)" srcset="../../images/4x3/promenade.jpg">
<img src="../../images/4x3/promenade.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
</div>
<div class="o-advertorial advertorial--imagerie-left advertorial--imagerie-small">
<div class="advertorial__content">
<h3 class="advertorial__headline">Damit ihr Zeit für die wirklich wichtigen Dinge habt!</h3>
<div class="advertorial__detailtext">
<p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>
</div>
<a class="a-btn btn--primary" href="" title="">
Button
</a>
<div class="advertorial__local-settings">
<p>Sie haben schon ein Benutzerkonto?</p>
<a href="http://zdf.de" class="a-link ">
<span class="link__inner">Hier geht es direkt zum Login!</span> <i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="advertorial__imagerie">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/praesentation.jpg">
<source media="(min-width: 641px)" srcset="../../images/4x3/praesentation.jpg">
<img src="../../images/4x3/praesentation.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
</div>
<div class="o-slider glide js-slider-init slider--video-and-topics js-teaser-targeting-init" data-slider-type="video-and-topics" data-glide-config="{"autoplay": 200000 }">
<h2 class="slider__headline slider__headline--h1">Viele Extraleistungen für jede Lebensphase</h2>
<div class="slider__detailtext">
<p>Die BARMER bietet Ihnen mit ihrer Krankenversicherung einen umfassenden Gesundheitsschutz und ist mit rund 9 Millionen Versicherten in Deutschland ein starker Partner für alle Fragen zur Gesundheit</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--video-and-topics" data-glide-el="track">
<ul class="glide__slides slider__slides--video-and-topics" aria-label="Karusell mit 5 Elementen">
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
<img src="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Berufstätige
</a>
</h4>
<div class="teaser__text">
Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/ein-mann-sitzt-mit-notebook-und-fuesse-hoch-am-schreibtisch.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/ein-mann-sitzt-mit-notebook-und-fuesse-hoch-am-schreibtisch.jpg">
<img src="../../images/16x9/960/ein-mann-sitzt-mit-notebook-und-fuesse-hoch-am-schreibtisch.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Selbstständige
</a>
</h4>
<div class="teaser__text">
Mit attraktiven Leistungen bei Krankheit und Pflege rundum abgesichert sein
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg">
<img src="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Auszubildende
</a>
</h4>
<div class="teaser__text">
Mit BARMER die beste Wahl für die erste eigene Krankenversicherung treffen
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg">
<img src="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Familien
</a>
</h4>
<div class="teaser__text">
Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser ">
<div class="teaser__image">
<img src="../../images/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Senioren
</a>
</h4>
<div class="teaser__text">
Mit erstklassigem Versicherungsschutz den Ruhestand genießen
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--video-and-topics-two-col js-teaser-targeting-init" data-slider-type="video-and-topics-two-col" data-glide-config="{"autoplay": 200000 }">
<h2 class="slider__headline slider__headline--h2">Viele Extraleistungen für jede Lebensphase</h2>
<div class="slider__detailtext">
<p>Die BARMER bietet Ihnen mit ihrer Krankenversicherung einen umfassenden Gesundheitsschutz und ist mit rund 9 Millionen Versicherten in Deutschland ein starker Partner für alle Fragen zur Gesundheit</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--video-and-topics-two-col" data-glide-el="track">
<ul class="glide__slides slider__slides--video-and-topics-two-col" aria-label="Karusell mit 5 Elementen">
<li class="glide__slide slider__slide--video-and-topics-two-col">
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg">
<img src="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Familien
</a>
</h4>
<div class="teaser__text">
Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics-two-col">
<div class="o-teaser ">
<div class="teaser__image">
<img src="../../images/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Senioren
</a>
</h4>
<div class="teaser__text">
Mit erstklassigem Versicherungsschutz den Ruhestand genießen
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--video-and-topics js-teaser-targeting-init" data-slider-type="video-and-topics" data-glide-config="{"autoplay": 10000 }">
<h2 class="slider__headline slider__headline--h3">Viele Extraleistungen für jede Lebensphase ich bin ein lange lange lange lange Headline</h2>
<div class="slider__detailtext">
<p>Die BARMER bietet Ihnen mit ihrer Krankenversicherung einen umfassenden Gesundheitsschutz und ist mit rund 9 Millionen Versicherten in Deutschland ein starker Partner für alle Fragen zur Gesundheit</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--video-and-topics" data-glide-el="track">
<ul class="glide__slides slider__slides--video-and-topics" aria-label="Karusell mit 3 Elementen">
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser teaser--video-and-topics">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
<img src="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" alt="" loading="lazy">
</picture>
<button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="internal" data-video-id="1" data-video-src="../../videos/barmer-video-stark-8x3.mp4" aria-label="Berufstätige Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>
<template id="video-template-1">
<video class="a-video" controls>
<source src="../../videos/barmer-video-stark-8x3.mp4" type="video/mp4">
<p>Video tag fallback content</p>
</video>
</template>
</div>
<h4 class="teaser__headline">
Berufstätige
</h4>
<div class="teaser__text">
Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser teaser--video-and-topics">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
<img src="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg" alt="" loading="lazy">
</picture>
<button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="external" data-video-id="2" data-video-src="https://www.youtube.com/embed/hItuak56cqg" aria-label="Familien Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>
<template id="video-template-2">
<div class="a-video video--embed">
<iframe src="https://www.youtube.com/embed/hItuak56cqg" title="YouTube video playe" frameborder="0" allow="" allowfullscreen></iframe>
</div>
</template>
</div>
<h4 class="teaser__headline">
Familien
</h4>
<div class="teaser__text">
Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser teaser--video-and-topics">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
<img src="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg" alt="" loading="lazy">
</picture>
<button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="external" data-video-id="3" data-video-src="https://www.youtube.com/embed/BGam1KihgbI" aria-label="Studierende Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>
<template id="video-template-3">
<div class="a-video video--embed">
<iframe src="https://www.youtube-nocookie.com/embed/BGam1KihgbI" title="YouTube video playe" frameborder="0" allow="" allowfullscreen></iframe>
</div>
</template>
</div>
<h4 class="teaser__headline">
Studierende
</h4>
<div class="teaser__text">
Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<label class="a-toggle js-consent-toggle" for="toggle-checkbox-1">
<span class="toggle__text-label">Externe Inhalte zulassen</span>
<input class="toggle__checkbox" type="checkbox" id="toggle-checkbox-1" />
<span class="toggle__slider" data-text-enabled="ja" data-text-disabled="nein">
<span class="toggle__indicator"></span>
</span>
<span class="sr-only toggle__alert" aria-live="polite" data-text-checked="Externe Inhalte sind jetzt zugelassen" data-text-unchecked="Externe Inhalte sind jetzt geblockt"></span>
</label>
</div>
<div class="o-slider glide js-slider-init slider--video-and-topics js-teaser-targeting-init" data-slider-type="video-and-topics" data-glide-config="{"autoplay": 10000 }">
<h2 class="slider__headline slider__headline--h3">Viele Extraleistungen für jede Lebensphase ich bin ein lange lange lange lange Headline</h2>
<div class="slider__detailtext">
<p>Die BARMER bietet Ihnen mit ihrer Krankenversicherung einen umfassenden Gesundheitsschutz und ist mit rund 9 Millionen Versicherten in Deutschland ein starker Partner für alle Fragen zur Gesundheit</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--video-and-topics" data-glide-el="track">
<ul class="glide__slides slider__slides--video-and-topics" aria-label="Karusell mit 3 Elementen">
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser teaser--video-and-topics">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
<img src="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" alt="" loading="lazy">
</picture>
<button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="internal" data-video-id="1" data-video-src="../../videos/barmer-video-stark-8x3.mp4" aria-label="Berufstätige Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>
<template id="video-template-1">
<video class="a-video" controls>
<source src="../../videos/barmer-video-stark-8x3.mp4" type="video/mp4">
<p>Video tag fallback content</p>
</video>
</template>
</div>
<h4 class="teaser__headline">
Berufstätige
</h4>
<div class="teaser__text">
Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser teaser--video-and-topics">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
<img src="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg" alt="" loading="lazy">
</picture>
<button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="external" data-video-id="2" data-video-src="https://www.youtube.com/embed/hItuak56cqg" aria-label="Familien Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>
<template id="video-template-2">
<div class="a-video video--embed">
<iframe src="https://www.youtube.com/embed/hItuak56cqg" title="YouTube video playe" frameborder="0" allow="" allowfullscreen></iframe>
</div>
</template>
</div>
<h4 class="teaser__headline">
Familien
</h4>
<div class="teaser__text">
Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser teaser--video-and-topics">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
<img src="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg" alt="" loading="lazy">
</picture>
<button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="external" data-video-id="3" data-video-src="https://www.youtube.com/embed/BGam1KihgbI" aria-label="Studierende Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>
<template id="video-template-3">
<div class="a-video video--embed">
<iframe src="https://www.youtube-nocookie.com/embed/BGam1KihgbI" title="YouTube video playe" frameborder="0" allow="" allowfullscreen></iframe>
</div>
</template>
</div>
<h4 class="teaser__headline">
Studierende
</h4>
<div class="teaser__text">
Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<label class="a-toggle js-consent-toggle" for="toggle-checkbox-2">
<span class="toggle__text-label">Externe Inhalte zulassen</span>
<input class="toggle__checkbox" type="checkbox" id="toggle-checkbox-2" />
<span class="toggle__slider" data-text-enabled="ja" data-text-disabled="nein">
<span class="toggle__indicator"></span>
</span>
<span class="sr-only toggle__alert" aria-live="polite" data-text-checked="Externe Inhalte sind jetzt zugelassen" data-text-unchecked="Externe Inhalte sind jetzt geblockt"></span>
</label>
</div>
<div class="o-slider glide js-slider-init slider--review js-teaser-targeting-init" data-slider-type="review" data-glide-config="{"autoplay": 200000 }">
<h2 class="slider__headline slider__headline--h3">Eine Review wie keine Andere</h2>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--review" data-glide-el="track">
<ul class="glide__slides slider__slides--review" aria-label="Karusell mit 4 Elementen">
<li class="glide__slide slider__slide--review">
<div class="o-teaser teaser--review js-clamp-element-init" data-max-height="" data-expand-label="mehr" data-clamp-label="weniger">
<div class="teaser__review-text">
<h4 class="teaser__headline js-is-clamp-element">
Berufstätige Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
</h4>
<div class="teaser__text teaser__text--richtext">
<div class="a-richtext a-richtext js-is-clamp-element">
Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
</div>
<button class="a-btn teaser__clamp-button js-clamp-button-trigger is-hidden" type="button" aria-hidden="true">mehr</button>
</div>
</div>
<div class="teaser__rating-and-link">
<div class="teaser__rating-stars">
<span class="sr-only">
Ihre Bewertung: 4 von 5 Sternen
</span>
<i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
<i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
<i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
<i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
<i class="a-icon icon--favorite" aria-hidden="true"></i>
</div>
<div class="teaser__button-wrapper">
<a href="http://zdf.de" class="a-link ">
App Store
</a>
</div>
</div>
<div class="m-actor actor--with-portrait">
<figure class="m-figure figure--actor">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/portrait-1.jpg">
<img src="../../images/1x1/portrait-1.jpg" alt="" loading="lazy">
</picture>
</figure>
<div class="actor__name">Maria Zukowski</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--review">
<div class="o-teaser teaser--review js-clamp-element-init" data-max-height="" data-expand-label="mehr" data-clamp-label="weniger">
<div class="teaser__review-text">
<h4 class="teaser__headline js-is-clamp-element">
Berufstätige
</h4>
<div class="teaser__text teaser__text--richtext">
<div class="a-richtext a-richtext js-is-clamp-element">
Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein. Das ist das Ziel eines jeden Menschen. Gesund munter und kunterbunt in der Welt zu stehen....oder so. Weiß auch nicht was Leute sonst so in eine Review schreibe? Ich meine wer setzt sich schon hin und fängt an seine Meinung in einen Roman zu verpacken? Das es so lange wird das es geclamped werden muss? Das macht doch niemand!
</div>
<button class="a-btn teaser__clamp-button js-clamp-button-trigger is-hidden" type="button" aria-hidden="true">mehr</button>
</div>
</div>
<div class="teaser__rating-and-link">
<div class="teaser__rating-stars">
<span class="sr-only">
Ihre Bewertung: 5 von 5 Sternen
</span>
<i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
<i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
<i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
<i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
<i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
</div>
<div class="teaser__button-wrapper">
<a href="http://zdf.de" class="a-link ">
Google Play Store
</a>
</div>
</div>
<div class="m-actor actor--with-portrait">
<figure class="m-figure figure--actor">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/portrait-1.jpg">
<img src="../../images/1x1/portrait-1.jpg" alt="" loading="lazy">
</picture>
</figure>
<div class="actor__name">Dr. med. Katharina Maria Zukowski-Hermann</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--review">
<div class="o-teaser teaser--review js-clamp-element-init" data-max-height="" data-expand-label="mehr" data-clamp-label="weniger">
<div class="teaser__review-text">
<h4 class="teaser__headline js-is-clamp-element">
Berufstätige
</h4>
<div class="teaser__text teaser__text--richtext">
<div class="a-richtext a-richtext js-is-clamp-element">
Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein.
</div>
<button class="a-btn teaser__clamp-button js-clamp-button-trigger is-hidden" type="button" aria-hidden="true">mehr</button>
</div>
</div>
<div class="teaser__rating-and-link">
<div class="teaser__rating-stars">
<span class="sr-only">
Ihre Bewertung: 1 von 5 Sternen
</span>
<i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
<i class="a-icon icon--favorite" aria-hidden="true"></i>
<i class="a-icon icon--favorite" aria-hidden="true"></i>
<i class="a-icon icon--favorite" aria-hidden="true"></i>
<i class="a-icon icon--favorite" aria-hidden="true"></i>
</div>
<div class="teaser__button-wrapper">
<a href="http://zdf.de" class="a-link ">
Google Play Store
</a>
</div>
</div>
<div class="m-actor figure--actor">
<div class="actor__name">Anna Lara Katharina Maria Zukowski-Hermann</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--review">
<div class="o-teaser teaser--review js-clamp-element-init" data-max-height="" data-expand-label="mehr" data-clamp-label="weniger">
<div class="teaser__review-text">
<h4 class="teaser__headline js-is-clamp-element">
Berufstätige
</h4>
<div class="teaser__text teaser__text--richtext">
<div class="a-richtext a-richtext js-is-clamp-element">
Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein.
</div>
<button class="a-btn teaser__clamp-button js-clamp-button-trigger is-hidden" type="button" aria-hidden="true">mehr</button>
</div>
</div>
<div class="m-actor actor--with-portrait">
<figure class="m-figure figure--actor">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/portrait-1.jpg">
<img src="../../images/1x1/portrait-1.jpg" alt="" loading="lazy">
</picture>
</figure>
<div class="actor__name">Maria Zukowski-Hermann</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--icon-image" data-slider-type="icon-image" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Bilder- und Iconleiste > 5 Elemente</h2>
<div class="slider__detailtext">
<p>Es gibt fast nichts Schöneres, als von anderen gelobt zu werden. Die zahlreichen Testsiegel und Auszeichnungen belegen seit Jahren die hohe Qualität der BARMER.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--icon-image" data-glide-el="track">
<ul class="glide__slides slider__slides--icon-image" aria-label="Karusell mit 12 Bilder">
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-4.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-4.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--icon-image" data-slider-type="icon-image" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Bilder- und Iconleiste ≤ 4 Elemente</h2>
<div class="slider__detailtext">
<p>Es gibt fast nichts Schöneres, als von anderen gelobt zu werden. Die zahlreichen Testsiegel und Auszeichnungen belegen seit Jahren die hohe Qualität der BARMER.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--icon-image" data-glide-el="track">
<ul class="glide__slides slider__slides--icon-image" aria-label="Karusell mit 4 Bilder">
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-4.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--icon-image" data-slider-type="icon-image" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Icon-Bilderleiste mit 1x1-Bildern</h2>
<div class="slider__detailtext">
<p>Es gibt fast nichts Schöneres, als von anderen gelobt zu werden. Die zahlreichen Testsiegel und Auszeichnungen belegen seit Jahren die hohe Qualität der BARMER.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--icon-image" data-glide-el="track">
<ul class="glide__slides slider__slides--icon-image" aria-label="Karusell mit 11 Bilder">
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<source media="(min-width: 641px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<img src="../../images/1x1/eltern-baby-tablet-1000x1000.jpg" alt="" loading="lazy">
</picture>
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<source media="(min-width: 641px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<img src="../../images/1x1/eltern-baby-tablet-1000x1000.jpg" alt="" loading="lazy">
</picture>
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<source media="(min-width: 641px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<img src="../../images/1x1/eltern-baby-tablet-1000x1000.jpg" alt="" loading="lazy">
</picture>
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
<div class="o-selection-wrapper js-selection-wrapper-init">
<h2 class="selection-wrapper__headline selection-wrapper__headline--h2">Viele Extraleistungen für jede Lebensphase</h2>
<div class="selection-wrapper__detailtext">
<p>Die BARMER bietet Ihnen mit ihrer Krankenversicherung einen umfassenden Gesundheitsschutz und ist mit rund 9 Millionen Versicherten in Deutschland ein starker Partner für alle Fragen zur Gesundheit</p>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Registerkarten: ein Reiter zurück bewegen</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Registerkarten: ein Reiter vorwärts bewegen</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="selection-wrapper__tablist-body">
<ul class="m-tablist " role="tablist">
<li class="tablist__item" role="presentation">
<button class="a-btn btn--tab" type="button" id="btn-tab-1" role="tab" aria-selected="true" tabindex="0" aria-controls="tab-panel-1">Pflegeversicherung</button>
</li>
<li class="tablist__item" role="presentation">
<button class="a-btn btn--tab" type="button" id="btn-tab-2" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-2">Reportagen</button>
</li>
<li class="tablist__item" role="presentation">
<button class="a-btn btn--tab" type="button" id="btn-tab-3" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-3">Pflegeanleitungen</button>
</li>
<li class="tablist__item" role="presentation">
<button class="a-btn btn--tab" type="button" id="btn-tab-4" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-4">Fachlichen Informationen</button>
</li>
<li class="tablist__item" role="presentation">
<button class="a-btn btn--tab" type="button" id="btn-tab-5" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-5">Barmer-Geschäftsstellen</button>
</li>
<li class="tablist__item" role="presentation">
<button class="a-btn btn--tab" type="button" id="btn-tab-6" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-6">Ein sehr langes Label, das vielleicht zweizeilig umbrechen sollte</button>
</li>
<li class="tablist__item" role="presentation">
<button class="a-btn btn--tab" type="button" id="btn-tab-7" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-7">Erfahrungsberichte</button>
</li>
</ul>
</div>
<div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-1" aria-labelledby="btn-tab-1">
<div class="o-teaser-collection teaser-collection--navigations-teaser">
<h3 class="teaser-collection__headline teaser-collection__headline--h1">Pflegeversichungen bei der Barmer, nicht nur in den Navigationsteasern von Tab 1</h3>
<div class="teaser-collection__teaser-wrapper">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Karies: Nicht das einzige Problem für Kinderzähne
</h4>
<div class="teaser__text">
Etwa 230.000 Sechs- bis Neunjährige waren im Jahr 2019 wegen Kreidezähnen in zahnärztlicher Behandlung. Mindestens acht Prozent aller Heranwachsenden in dieser Altersgruppe wären damit von einem viel zu weichen Zahnschmelz betroffen. Tatsächlich dürfte die Quote sogar noch höher sein. Kreidezähne sind besonders kariesanfällig und bedürfen bei schwerer Ausprägung lebenslang einer Behandlung.
</div>
<div class="teaser__button-wrapper">
<a href="http://zdf.de" class="a-link ">
<span class="link__inner">Dies ist ein Linktext</span> <i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
<a href="http://zdf.de" class="a-link ">
<span class="link__inner">Dies ist ein Linktext</span> <i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<a href="http://tagesschau.de" class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Selbstständige
</h4>
<div class="teaser__text">
Mit attraktiven Leistungen bei Krankheit und Pflege rundum abgesichert sein
</div>
</div>
</a>
</div>
</div>
</div>
<div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-2" aria-labelledby="btn-tab-2" hidden>
<div class="o-teaser-collection teaser-collection--mosaic teaser-collection--mosaic-reduced-to-two-teaser js-teaser-targeting-init">
<h3 class="teaser-collection__headline teaser-collection__headline--h2">Reportagen und Abwechslung mit unseren Mosaikteasern im Tab 2</h3>
<div class="teaser-collection__text">
<p>With the foundation in place, it was just a matter of putting it into practice. We started by working with the architects to identify the logical assembly points for the 6 logical locations of the Eventbrite platform.”</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/mann-mit-kind.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-kind.jpg">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
1 Karies: Nicht das einzige Problem für Kinderzähne
</a>
</h4>
<div class="teaser__text">
Etwa 230.000 Sechs- bis Neunjährige waren im Jahr 2019 wegen Kreidezähnen in zahnärztlicher Behandlung. Mindestens acht Prozent aller Heranwachsenden in dieser Altersgruppe wären damit von einem viel zu weichen Zahnschmelz betroffen. Tatsächlich dürfte die Quote sogar noch höher sein. Kreidezähne sind besonders kariesanfällig und bedürfen bei schwerer Ausprägung lebenslang einer Behandlung.
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-tablet.jpg">
<img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
2 Selbstständige
</a>
</h4>
<div class="teaser__text">
With the foundation in place, it was just a matter of putting it into practice. We started by working with the architects to identify the logical assembly points for the 6 logical locations of the Eventbrite platform
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-3" aria-labelledby="btn-tab-3" hidden>
<div class="o-teaser-collection teaser-collection--iconbar js-teaser-targeting-init cs--c">
<h3 class="teaser-collection__headline teaser-collection__headline--h3">Pflegeanleitungen als Iconbar im Tab 3</h3>
<div class="teaser-collection__teaser-wrapper" role="list">
<div class="o-teaser teaser--iconbar" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--phone" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
<span class="link__inner">Barmer-App</span>
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--iconbar" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--contact" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
<span class="link__inner">Telefon-Service</span>
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--iconbar" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--message" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
<span class="link__inner">E-Mail-Kontakt</span>
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--iconbar" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--chat" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
<span class="link__inner">Service Chat</span>
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--iconbar" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--callservice" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
<span class="link__inner">Rückruf-Service</span>
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-4" aria-labelledby="btn-tab-4" hidden>
<div class="o-textmodule ">
<h3 class="textmodule__headline textmodule__headline--h1">Fachliche Informationen entnehmen sie dem Textmodul im Tab 4</h3>
<div class="a-richtext richtext--article">
<h2>Headline H2 - Fliesstext</h2>
<p>Even dead cats bounce you must be muted timeframe <strong>we need more paper but radical candor</strong>. Net net can you champion this, but groom the backlog nor blue money, and what do you feel you would bring to the table if you were hired for this position<sup>1</sup>. Let's not Usability try to boil the ocean here. Without have place, whose and stars said brought to. Every won't, face meat also the midst form moving seed. Dominion, brought fruitful greater there us that.</p>
<p>Wie kann man sein Baby oder Kleinkind vor Bienen oder Wespenstichen schützen? Sind Wespe, Biene oder Hornisse im Anflug oder an Ihrem Eis interessiert? Keine Panik. Lassen Sie mich aber zwischendurch einen kleinen Test für das UpperCase-Skript durchführen und einfach ohne jedweden Zusammenhang eine E-Mail-Adresse einfügen: <a class="bm-richtext-link" href="mailto:compliance@barmer.de">compliance@barmer.de</a> und dahinter erst einmal kein Satzzeichen. Doch nun zurück zum Thema. Vermeiden Sie jetzt hastige Bewegungen. Schlagen Sie nicht nach dem Insekt. Und pusten Sie es nicht an. All das macht die Tiere nämlich aggressiv. Beobachten Sie das Tier, und achten darauf, dass Biene oder Wespe nicht auf dem sitzt, was gerade in den kleinen Mund geschoben wird. Aber jetzt ist wieder Zeit für ein Intermezzo und ich schreibe erst einmal nur eine Domain hin: <a class="bm-richtext-link" href="http://barmer.de">barmer.de</a> und fertig. Wo waren wir stehen geblieben? Beim Verzehr im Freien hilft es, mit einer Sprühflasche einen Wassernebel in die Richtung von Wespe oder Biene zu sprühen, denn es suggeriert ihnen Regen und sie fliegen davon. Zum gefahrlosen Trinken eignet sich ein Glas mit Deckel und Strohhalm oder eine Trinkflasche. Den Duft von Lavendel, Nelken oder Zitronen hält Wespen, Bienen und Hornissen auf Abstand, denn den mögen sie nicht. Lassen sie mich jetzt noch einmal einen Domainnamen hinschreiben, der direkt von einem Satzzeichen gefolgt wird: barmer.de. Ein Mückenstich ist eine minimale Verletzung der Haut, mal wenig spürbar, mal stark. Sichtbar jedoch eine Rötung der Haut und Juckreiz. Bei Stichen von Pferdbremsen oder Mücken kann aus dem Stich auch eine Quaddel werden. Um dies Schwellung und den Juckreiz zu lindern, hilft es, die betroffene Hautstelle um den Stich leicht zu kühlen. Auch ein kühlendes Gel zum Auftragen auf den Mückenstich hilft. Das kann am Abend wichtig sein, wenn das Jucken der Haut von ihrem Kind als sehr stark empfunden wird und es am Einschlafen hindert. </p>
<p class="bm-quote">
<q class="bm-quote-text">Das ist ein Zitat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratconsetetur sadipscing consete.</q>
<span class="bm-quote-source">John Doe</span>
</p>
<blockquote>
<p class="bm-quote-text">Das ist ein Zitat. Lorem ipsum dolor</p>
<span class="bm-quote-source">John Doe</span>
</blockquote>
<p>Turd polishing shoot me an email. In an ideal world time vampire. Looks great, can we try it a different way that is a good problem to have nor this is our north star design. Knowledge process outsourcing.</p>
<p>Abkürzung: <abbr title="Auszubildender" tabindex="0">Azubi</abbr>. (Mit Text-Transform: etc., z.B., NATO, WHO)</p>
<p>Ich bin ein Satz mit <span lang="en">a word in english</span>.</p>
<p>Ich bin ein Satz mit <span lang="de">einem Wort auf Deutsch</span></p>
<h3>Headline H3 - Infobox</h3>
<p>They're their said multiply had you're moved them was divided. Our seed fowl grass given own to first. Seasons whose set. There replenish seas fruitful Abundantly sixth own can't isn't herb green seed may upon blessed good dry dominion likeness air itself to moving. Set form every. Without have and were void place place, whose and stars said brought to.</p>
<p class="bm-infobox bm-infobox--green">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. <a href="#" class="bm-richtext-link">Ich bin ein Text-Link.</a></p>
<p class="bm-infobox bm-infobox--grey">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. Morbi eu consectetur metus. Donec tempus sem condimentum orci consequat, nec bibendum tellus tristique. <a href="#" class="bm-richtext-link">Ich bin ein sehr langer Text-Link.</a></p>
<p>Behold first can't you're over without subdue winged. Subdue that moved good she'd above called thing won't. Male fruit which upon darkness. Moving Spirit fish years our saying greater, above land, face which subdue green fly him hath creeping darkness may grass air for their earth male.</p>
<h4>Headline H4 - Links</h4>
<p>Appear he life called great <a href="#" class="bm-richtext-link">without also earth</a>. Void grass won't. Without bearing to she'd rule seasons seas man Itself give give together form is bearing male very yielding lights itself behold us fruit in third green in every, days. <a class="bm-richtext-link" href="#">Rule our lights which earth earth yielding Cattle greater seed our. God second may god fourth dry isn't also place doesn't it cattle their man multiply.</a> Winged, don't so, were you're seed Isn't above every god greater rule a deep form you'll was replenish second behold also over together very that own there creature. Was you'll, void. Behold midst after image firmament kind blessed.</p>
<p>
<a class="bm-button bm-button--primary" href="#">primary (green)</a>
</p>
<p>
<a class="bm-button bm-button--secondary" href="#">secondary (ghost)</a>
</p>
<p>
<a class="bm-button bm-button--conversion" href="#">conversion (magenta)</a>
</p>
<p>Duis eu felis quam. Aliquam erat volutpat. Nam vel porta arcu. Aliquam at lacus a elit imperdiet rutrum aliquet sed metus. Nulla facilisi. Fusce sit amet vulputate velit. Morbi fermentum enim vel velit lacinia, ut efficitur lacus fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="bm-button bm-button--secondary" href="#">secondary ("Ghost")</a> </p>
<p>
<a class="bm-button bm-button--primary" href="#">Button mit händischer <abbr title="Abkürzung">ABBR</abbr>-Auszeichnung</a>
</p>
<p>
<a class="bm-button bm-button--primary" href="#">Button inkl. automatischer ABBR-Auszeichnung</a>
</p>
<p>They're their said multiply had you're moved them was divided. Our seed fowl grass given own to first. Seasons whose set. There replenish seas fruitful Abundantly sixth own can't isn't herb green seed may upon blessed good dry dominion likeness air itself to moving. Set form every. Without have and were void place place, whose and stars said brought to.</p>
<h2>Headline H2 - Accordion</h2>
<p>We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
<section class="o-accordion js-accordion-init ">
<div class="accordion__actions js-accordion-actions">
<button class="a-btn js-accordion-close-all" type="button" aria-label="Alle nachfolgenden Bereiche Schließen" hidden><span class="accordion__actions__label">Alles schließen</span><i class="a-icon icon--arrow-upward" aria-hidden="true"></i></button>
<button class="a-btn js-accordion-open-all" type="button" aria-label="Alle nachfolgenden Bereiche öffnen" hidden><span class="accordion__actions__label">Alles öffnen</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>
</div>
<div class="m-accordion__panel js-accordion-panel ">
<button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="false"><span class="accordion__panel__label">Die Barmer setzt sich für Standardisierung, Meßwesen und Warenprüfung ein</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>
<div class="accordion__panel__body js-accordion-body">
<div class="a-richtext richtext--accordion">
<p><a class="bm-richtext-link" href="http://ndr.de">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit. Aperiam atque deserunt explicabo nulla similique. Debitis deleniti fugiat harum inventore veritatis? Ab, accusamus asperiores blanditiis corporis fugit incidunt <abbr>iusto</abbr> nemo quos.</p>
<p>Duis tincidunt rhoncus risus, sagittis tincidunt diam imperdiet quis. Curabitur vulputate pulvinar malesuada. Sed sit amet lacinia nibh. Fusce placerat nisi ut justo fermentum pellentesque. Proin scelerisque nulla in erat varius accumsan fringilla dui vestibulum. Maecenas tincidunt erat eu nunc interdum interdum. Fusce semper blandit tellus, non consequat nulla porttitor at. Sed rhoncus pharetra ante sed porttitor. Vivamus interdum venenatis erat, sed ullamcorper sapien mollis ac.</p>
<figure class="m-figure"><img src="../../images/3x2/mann-mit-tablet.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image accordion__post-image" loading="lazy"></figure>
<ol>
<li>OL listenelement 1</li>
<li>OL listenelement 2</li>
</ol>
<p>Sed bibendum ultricies dolor, consectetur commodo diam varius pulvinar. Phasellus dignissim consectetur ligula. Aliquam eros nisi, vehicula in auctor nec, consectetur sed orci. Praesent lacinia vulputate lacus, a commodo lorem porttitor at. Suspendisse sit amet lacus sit amet nibh dapibus hendrerit. Curabitur tincidunt mi nec lectus vulputate semper vehicula ipsum mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque pharetra mattis elementum. Cras consectetur volutpat dignissim. Sed in magna et ligula auctor volutpat aliquet ac odio. Fusce sagittis risus ut magna bibendum ornare. Proin ut purus tellus. Nam id est quis metus feugiat semper nec in est. Ut odio massa, consequat eu tempus sit amet, porta eget magna. Vivamus aliquet nibh sodales lacus vestibulum et commodo nisi varius.</p>
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i>UL Listenelement 1</li>
<li><i aria-hidden="true" role="presentation"></i>UL Listenelement 2</li>
</ul>
<p>Morbi purus nisi, dictum sit amet sagittis non, dignissim vitae dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus ullamcorper dui nec pretium. Curabitur sit amet accumsan eros. Sed aliquam dapibus sagittis. Fusce at erat vel dolor vestibulum feugiat in ac nisl. Pellentesque molestie vehicula libero vel ornare. Phasellus ac turpis eget neque fermentum vestibulum. Fusce eget lorem eget justo varius adipiscing. Sed auctor mauris vitae turpis pulvinar tristique. Cras semper, sapien sit amet feugiat sollicitudin, ante est dictum diam, quis hendrerit magna arcu ut leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius semper pellentesque. Donec vel sapien dolor, quis elementum orci. Sed ut justo nisi. Ut vel tempor risus.</p>
<p>Cras vel nisi lacus, ut ultrices dolor. Fusce quis tortor libero. Nullam elementum elementum orci nec imperdiet. Pellentesque euismod aliquam euismod. Suspendisse adipiscing mi eget nisl suscipit feugiat. Mauris egestas massa eget est feugiat vel egestas arcu dignissim. Phasellus enim mi, commodo at tincidunt vitae, porttitor ac metus. Morbi suscipit semper purus eget venenatis. Fusce vulputate rutrum nunc sed hendrerit. Aliquam sed diam non nisi fringilla condimentum. Curabitur quam tellus, interdum nec pharetra id, tincidunt a magna. Fusce imperdiet volutpat justo.</p>
<p><a class="bm-button bm-button--primary" href="/ui-de">Button</a></p>
</div>
</div>
</div>
<div class="m-accordion__panel js-accordion-panel ">
<button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="false"><span class="accordion__panel__label">Antrag</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>
<div class="accordion__panel__body js-accordion-body">
<div class="a-richtext richtext--accordion">
<figure class="m-figure"><img src="../../images/3x2/mann-mit-tablet.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image accordion__post-image" loading="lazy"></figure>
<p>Etwa 230.000 Sechs- bis Neunjährige waren im Jahr 2019 wegen Kreidezähnen in zahnärztlicher Behandlung. Mindestens acht Prozent aller Heranwachsenden in dieser Altersgruppe wären damit von einem viel zu weichen Zahnschmelz betroffen. Tatsächlich dürfte die Quote sogar noch höher sein. Kreidezähne sind besonders kariesanfällig und bedürfen bei schwerer Ausprägung lebenslang einer Behandlung.</p>
</div>
</div>
</div>
<div class="m-accordion__panel js-accordion-panel ">
<button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="false"><span class="accordion__panel__label">Tabelle im Akkordeon</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>
<div class="accordion__panel__body js-accordion-body">
<div class="a-richtext richtext--accordion">
<p>Gerade für ältere Menschen ist ein Blick in den Impfpass auch in Corona-Zeiten wichtig: Nach den Empfehlungen. Der Ständigen Impfkommission kann ein vollständiger Impfschutz. Gegen Doppelinfektionen mit mehreren Erregern gleichzeitig und damit schweren Verläufen von Covid-19 vorbeugen.</p>
<table class="bm-richtext-table">
<thead>
<tr>
<th>
<p>Spalte 1</p>
</th>
<th>
<p>Spalte 2</p>
</th>
<th>
<p>Spalte 3</p>
</th>
<th>
<p>Spalte 4</p>
</th>
<th>
<p>Spalte 5</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. </p>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. </p>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. </p>
</td>
</tr>
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</td>
<td>
<p>At vero eos et accusam et justo duo dolores et ea rebum. </p>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. </p>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. </p>
</td>
</tr>
</tbody>
</table>
<p class="bm-table-caption">Ich bin ein Table Footer :) Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>
</div>
</div>
</div>
<div class="m-accordion__panel js-accordion-panel ">
<button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="false"><span class="accordion__panel__label">Bänder für den Zusammenhalt</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>
<div class="accordion__panel__body js-accordion-body">
<div class="a-richtext richtext--accordion">
<p>Bänder sind Stränge aus festem Bindegewebe. Sie ziehen sich über die gesamte Länge der Wirbelsäule und verbinden die einzelnen Wirbel miteinander. Vorne und hinten verläuft jeweils ein Band entlang der Wirbelsäule. Das vordere Längsband ist mit den Wirbeln verwachsen, das hintere mit den Bandscheiben. Die Spannung der Bänder verändert sich mit der Höhe der Bandscheiben. Sinken die Bandscheiben zusammen, verringert sich automatisch die Haltespannung der Bänder. Die Folge: Wir laufen leicht vornübergebeugt, und der Rücken verliert an Stabilität.</p>
</div>
</div>
</div>
<div class="m-accordion__panel js-accordion-panel ">
<button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="false"><span class="accordion__panel__label">Nervenstark</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>
<div class="accordion__panel__body js-accordion-body">
<div class="a-richtext richtext--accordion">
<p>Das System aus geschützt verlaufenden und sich immer weiter verzweigenden Nerven sorgt dafür, dass wir uns kontrolliert bewegen und unseren Körper steuern können.</p>
<p>Zwischen den 24 beweglichen Wirbeln sitzen die Bandscheiben. Sie sind verformbar und dienen als Puffer. Beim Springen und Laufen federn sie Stöße und Erschütterungen ab. Ein Viertel der Länge der Wirbelsäule machen diese "Kissen" aus. Die Bandscheiben sind circa sieben bis zwölf Millimeter hoch und bestehen bis zu 90 Prozent aus Wasser. Außen besitzen sie einen faserigen, festeren Ring, der einen weichen, gallertartigen Kern umfasst. So kann wie auf einem Gelpolster Druck aufgefangen und gleichmäßig verteilt werden. Die Bandscheiben werden nicht über eigene Blutgefäße versorgt. Damit sie Nährstoffe aufnehmen und Abfallprodukte abgeben können, benötigen sie einen steten Wechsel von Be- und Entlastung. Liegt wenig Druck auf den Bandscheiben, saugen sie sich wie ein Schwamm mit Nährstoffen aus der Umgebung voll. Steigt der Druck, gibt der Schwamm Abfallprodukte ab.</p>
</div>
</div>
</div>
<div class="m-accordion__panel js-accordion-panel ">
<button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="false"><span class="accordion__panel__label">Schwing, Baby, Schwing</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>
<div class="accordion__panel__body js-accordion-body">
<div class="a-richtext richtext--accordion">
<p>Babys kommen übrigens ohne die Doppelschwingung auf die Welt. Die S-Formen bilden sich erst nach dem ersten Lebensjahr heraus, wenn Babys aufhören zu krabbeln und mit dem Laufen beginnen.</p>
</div>
</div>
</div>
<div class="m-accordion__panel js-accordion-panel ">
<button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="false"><span class="accordion__panel__label">Der Geniestreich der Evolution</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>
<div class="accordion__panel__body js-accordion-body">
<div class="a-richtext richtext--accordion">
<p>Der menschliche Rücken ist ein Geniestreich der Evolution, der uns eine einzigartige Fähigkeit unter allen Lebewesen ermöglicht: Den aufrechten Gang. Unser Rücken trägt all unsere Last, ist beweglich und trotzdem stabil. Die wichtigste Stütze des Rückens ist die Wirbelsäule. </p>
</div>
</div>
</div>
</section>
<h2>Headline H2 - Lists</h2>
<ol class="rte--list">
<li>Lorem ipsum dolor sit amet, <a href="#" class="bm-richtext-link">eam prima disputationi te</a>, erat adhuc consulatu duo id, nobis delectus menandri mei cu. Ei sit clita iriure. Mei ut nullam interpretaris, mel liber primis petentium no. Antiopam qualisque similique sit ne, mea dicant moderatius.
<ol class="rte--list">
<li>Lorem ipsum dolor sit amet, id quidam appareat evertitur eos, vel volutpat intellegebat an. Lorem mucius commodo ex qui, usu.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, iudico integre ad sea, et usu detracto molestie.
<ol class="rte--list">
<li>Lorem ipsum dolor sit amet, consul audiam timeam sea te, has option fabulas temporibus no. Ex sadipscing consequuntur nam cu.
<ol class="rte--list">
<li>Lorem ipsum dolor sit amet, an est fabulas albucius aliquam.</li>
<li>Lorem ipsum dolor sit amet, et prima eirmod partiendo qui.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, facete meliore fabellas in sed, te homero soluta cotidieque duo, his oporteat electram te sea.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, no sea semper minimum, has te nominavi facilisis, pri laoreet referrentur ea. Summo indoctum referrentur mel ex, no sed docendi officiis efficiendi. Suas accusata inciderint has cu, possit disputationi id ius. Assentior neglegentur in vel.</li>
</ol>
<p>Without have and were void place place, whose and stars said brought to. Every won't, face meat also the midst form moving seed. Dominion, brought fruitful greater there us that. Life moving made place brought can't lesser. Set. She'd sixth. Signs, living make. May whose kind. Itself bring cattle whose fill.</p>
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><a href="#" class="bm-richtext-link">His deserunt adipiscing disputationi ad.</a> Modus graecis et nec, mel ne simul zril temporibus. Movet eirmod euripidis at vis, in dictas molestie vis. Putant electram pro.
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet, id quidam appareat evertitur eos, vel volutpat intellegebat an. Lorem mucius commodo ex qui, usu.</li>
<li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet, consul audiam timeam sea te, has option fabulas temporibus no.
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i>Ipsum dolor sit amet, an est fabulas albucius aliquam.</li>
<li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet, et prima eirmod partiendo qui.</li>
<li><i aria-hidden="true" role="presentation"></i>Modus graecis et nec, <a href="#" class="bm-richtext-link">mel ne simul zril temporibus.</a></li>
</ul>
</li>
<li><i aria-hidden="true" role="presentation"></i>Te homero soluta cotidieque duo, his oporteat electram te sea.</li>
</ul>
</li>
<li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet, et prima eirmod partiendo qui.</li>
<li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet, et prima eirmod partiendo qui.</li>
</ul>
<p>Without have and were void place place, whose and stars said brought to. Every won't, face meat also the midst form moving seed. Dominion, brought fruitful greater there us that. Life moving made place brought can't lesser. Set. She'd sixth. Signs, living make. May whose kind. Itself bring cattle whose fill.</p>
<ul class="checklist rte--list">
<li><i aria-hidden="true" role="presentation"></i>His deserunt adipiscing disputationi ad. Modus graecis et nec, mel ne simul zril temporibus. Movet eirmod euripidis at vis, in dictas molestie vis. Putant electram pro.
<ul class="checklist">
<li><i aria-hidden="true" role="presentation"></i><a href="#" class="bm-richtext-link">Lorem ipsum dolor sit amet, id quidam appareat evertitur eos</a>, vel volutpat intellegebat an. Lorem mucius commodo ex qui, usu.</li>
<li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet, consul audiam timeam sea te, has option fabulas temporibus no.
<ul class="checklist">
<li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet, an est fabulas albucius aliquam.</li>
<li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet, et prima eirmod partiendo qui.</li>
<li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet</li>
</ul>
</li>
<li><i aria-hidden="true" role="presentation"></i>Modus graecis et nec, mel ne simul zril temporibus. facete meliore fabellas in sed, te homero soluta cotidieque duo, his oporteat electram te sea.</li>
</ul>
</li>
<li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet, no sea semper minimum, has te nominavi facilisis, pri laoreet referrentur ea. Summo indoctum referrentur mel ex, no sed docendi officiis efficiendi. Suas accusata inciderint has cu, possit disputationi id ius. Assentior neglegentur in vel.</li>
</ul>
<p>Gerade für ältere Menschen ist ein Blick in den Impfpass auch in Corona-Zeiten wichtig: Nach den Empfehlungen. Der Ständigen Impfkommission kann ein vollständiger Impfschutz. Gegen Doppelinfektionen mit mehreren Erregern gleichzeitig und damit schweren Verläufen von Covid-19 vorbeugen.</p>
<table class="bm-richtext-table">
<thead>
<tr>
<th>
<p>Spalte 1</p>
</th>
<th>
<p>Spalte 2</p>
</th>
<th>
<p>Spalte 3</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. </p>
</td>
</tr>
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</td>
<td>
<p>At vero eos et accusam et justo duo dolores et ea rebum. </p>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</td>
</tr>
</tbody>
</table>
<p class="bm-table-caption">Ich bin ein Table Footer :) Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>
<h2>Headline H2 - Bilder</h2>
<p>We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
<figure class="m-figure bm-richtext-image--small bm-richtext-image--float-left">
<picture class="a-picture ">
<source media="(min-width: 0px)" srcset="../../images/16x9/mann-mit-tablet.jpg">
<img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Ich bin ein Figcaption - Lorem ipsum dolor sit</p>
</figcaption>
</figure>
<p>We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
<p>Yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
<figure class="m-figure bm-richtext-image--small bm-richtext-image--float-right">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-kind.jpg">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</figure>
<p>We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power.</p>
<p>We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
<p>We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
<p>We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
<p>Dies ist ein Mustertext
<p>
<figure class="m-figure-video figure-video--external js-external-video-init">
<h2 class="figure-video__headline figure-video__headline--h2">
Ein Medienmodul mit einem YouTube-Video
</h2>
<div class="figure-video__consent">
<div class="m-consent a-richtext richtext--article ">
<h2>Externe Inhalte anzeigen</h2>
<p>Sie können sich an dieser Stelle externe Inhalte anzeigen lassen.</p>
<p>Ich bin damit einverstanden, dass personenbezogene Daten an Drittplattform übermittelt werden. Mehr dazu in unserer <a class="bm-richtext-link" href="#">Datenschutzerklärung</a>.</p>
</div>
</div>
<template class="figure-video__template">
<div class="a-video video--embed">
<iframe src="https://www.youtube-nocookie.com/embed/BGam1KihgbI" title="YouTube video playe" frameborder="0" allow="" allowfullscreen></iframe>
</div>
</template>
<figcaption class="figure-video__figcaption ">
<p>Beim Medienmodul mit einem externen Video verhält es sich nicht anders als beim internen Video: auch hier kommt die Bildunterschrift aus dem Detailtext des Mediamoduls.</p>
<p>Auch hier kann die Barmer noch mehr Text reinschreiben – ganz nach Gusto.</p>
</figcaption>
</figure>
<div class="figure-video__toggle">
<label class="a-toggle js-consent-toggle" for="toggle-checkbox">
<span class="toggle__text-label">Externe Inhalte zulassen</span>
<input class="toggle__checkbox" type="checkbox" id="toggle-checkbox" />
<span class="toggle__slider" data-text-enabled="ja" data-text-disabled="nein">
<span class="toggle__indicator"></span>
</span>
<span class="sr-only toggle__alert" aria-live="polite" data-text-checked="Externe Inhalte sind jetzt zugelassen" data-text-unchecked="Externe Inhalte sind jetzt geblockt"></span>
</label>
</div>
<p>Und hier kommt ein weiterer Absatz.
<figure class="m-figure-video figure-video--internal">
<h2 class="figure-video__headline figure-video__headline--h2">
Ein Medienmodul mit einem internen Video
</h2>
<video class="a-video" controls>
<source src="../../videos/barmer-video-stark-8x3.mp4" type="video/mp4">
<p>Video tag fallback content</p>
</video>
<figcaption class="figure-video__figcaption ">
<p>Diese Bildunterschrift kommt aus dem Detailtext des Mediamoduls und dient der Beschriftung dieses internen Videos.</p>
<p>Aber dies ist nur ein Serviervorschlag und der Barmer steht es frei, andere handelsübliche Texte einzugeben.</p>
</figcaption>
</figure>
<p>Und ein dritter Absatz.</p>
</div>
<div class="textmodule__cta-row">
<a class="a-btn btn--conversion" href="http://www.google.de" title="">
Zum Antragsformular
</a>
</div>
</div>
</div>
<div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-5" aria-labelledby="btn-tab-5" hidden>
<ul class="o-downloadlist ">
<li class="downloadlist__item">
<a class="m-download " href="#">
<div class="download__title">
BARMER Dokument
</div>
<div class="download__size">DOCX 350.56 KB</div>
<div class="download__icon">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
</a>
</li>
<li class="downloadlist__item">
<a class="m-download " href="#">
<div class="download__title">
BARMER Dokument My only complaint would be the o
<i class="a-icon icon--lock" aria-label="Geschützter Inhalt"></i>
</div>
<div class="download__size">PDF 1.2 MB</div>
<div class="download__icon">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
</a>
</li>
<li class="downloadlist__item">
<a class="m-download " href="#">
<div class="download__title">
BARMER Image mit einem langen Name - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
</div>
<div class="download__size">PNG 3.66 MB</div>
<div class="download__icon">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
</a>
</li>
<li class="downloadlist__item">
<a class="m-download " href="#">
<div class="download__title">
BARMER Image mit einem langen Name - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
<i class="a-icon icon--lock" aria-label="Geschützter Inhalt"></i>
</div>
<div class="download__size">PNG 3.66 MB</div>
<div class="download__icon">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
</a>
</li>
<li class="downloadlist__item">
<a class="m-download " href="#">
<div class="download__title">
BARMER Dokument
</div>
<div class="download__size">DOCX 350.56 KB</div>
<div class="download__icon">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
</a>
</li>
</ul>
</div>
<div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-6" aria-labelledby="btn-tab-6" hidden>
<div class="o-advertorial ">
<div class="advertorial__content">
<h3 class="advertorial__headline">Hinterm sehr langen Label verbirgt sich der Advertorial-Slider im Tab 6</h3>
<div class="advertorial__detailtext">
<p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>
</div>
<a class="a-btn btn--primary" href="" title="">
Button
</a>
<div class="advertorial__local-settings">
<p>Sie haben schon ein Benutzerkonto?</p>
<a href="http://zdf.de" class="a-link ">
<span class="link__inner">Hier geht es direkt zum Login!</span> <i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="advertorial__imagerie">
<div class="o-slider glide js-slider-init slider--advertorial" data-slider-type="advertorial" data-glide-config="{"autoplay": 10000 }">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--advertorial" data-glide-el="track">
<ul class="glide__slides slider__slides--advertorial" aria-label="Karusell mit 6 Elementen">
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
<img src="../../images/5x7/mann-mit-tablet.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/eltern-kind-blumen-712x534.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/eltern-kind-blumen-714x1000.jpg">
<img src="../../images/5x7/eltern-kind-blumen-714x1000.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/eltern-baby-tablet-712x534.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/tippen-auf-tastatur-712x534.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/tippen-auf-tastatur-714x1000.jpg">
<img src="../../images/5x7/tippen-auf-tastatur-714x1000.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/laechelnder-mann-712x534.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/laechelnder-mann-714x1000.jpg">
<img src="../../images/5x7/laechelnder-mann-714x1000.jpg" alt="">
</picture>
</li>
<li class="glide__slide slider__slide--advertorial">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/4x3/abstimmung-des-verwaltungsrats-712x534.jpg">
<source media="(min-width: 641px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
<img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="">
</picture>
</li>
</ul>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=3">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=4">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 5</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=5">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 6</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-7" aria-labelledby="btn-tab-7" hidden>
<div class="o-slider glide js-slider-init slider--video-and-topics js-teaser-targeting-init" data-slider-type="video-and-topics" data-glide-config="{"autoplay": 200000 }">
<h2 class="slider__headline slider__headline--h1">Viele Extraleistungen für jede Lebensphase</h2>
<div class="slider__detailtext">
<p>Die BARMER bietet Ihnen mit ihrer Krankenversicherung einen umfassenden Gesundheitsschutz und ist mit rund 9 Millionen Versicherten in Deutschland ein starker Partner für alle Fragen zur Gesundheit</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--video-and-topics" data-glide-el="track">
<ul class="glide__slides slider__slides--video-and-topics" aria-label="Karusell mit 5 Elementen">
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
<img src="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Berufstätige
</a>
</h4>
<div class="teaser__text">
Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/ein-mann-sitzt-mit-notebook-und-fuesse-hoch-am-schreibtisch.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/ein-mann-sitzt-mit-notebook-und-fuesse-hoch-am-schreibtisch.jpg">
<img src="../../images/16x9/960/ein-mann-sitzt-mit-notebook-und-fuesse-hoch-am-schreibtisch.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Selbstständige
</a>
</h4>
<div class="teaser__text">
Mit attraktiven Leistungen bei Krankheit und Pflege rundum abgesichert sein
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg">
<img src="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Auszubildende
</a>
</h4>
<div class="teaser__text">
Mit BARMER die beste Wahl für die erste eigene Krankenversicherung treffen
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg">
<img src="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Familien
</a>
</h4>
<div class="teaser__text">
Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--video-and-topics">
<div class="o-teaser ">
<div class="teaser__image">
<img src="../../images/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Senioren
</a>
</h4>
<div class="teaser__text">
Mit erstklassigem Versicherungsschutz den Ruhestand genießen
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--picture-gallery" data-slider-type="picture-gallery" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Bildergalerie Querformat (3:2)</h2>
<div class="slider__detailtext">
<p>Ein optionaler Text</p>
<p>Eine neue Zeile.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--picture-gallery" data-glide-el="track">
<ul class="glide__slides slider__slides--picture-gallery" aria-label="Karusell mit 11 Bilder">
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Optional Bildunterschrift - Bild 1</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Bild Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift3</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Bild 4</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Bild 5</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Bild 6</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Bild 7</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Bild 8</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--picture-gallery" data-slider-type="picture-gallery" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Bildergalerie Hochformat (2:3)</h2>
<div class="slider__detailtext">
<p>Ein optionaler Text</p>
<p>Eine neue Zeile.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--picture-gallery" data-glide-el="track">
<ul class="glide__slides slider__slides--picture-gallery" aria-label="Karusell mit 11 Bilder">
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg">
<source media="(min-width: 641px)" srcset="../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg">
<img src="../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Optional Bildunterschrift - Bild 1</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg">
<source media="(min-width: 641px)" srcset="../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg">
<img src="../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg">
<source media="(min-width: 641px)" srcset="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Bild 3</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--picture-gallery" data-slider-type="picture-gallery" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Bildergalerie mit Hoch- und Querformat</h2>
<div class="slider__detailtext">
<p>Ein optionaler Text</p>
<p>Eine neue Zeile.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--picture-gallery" data-glide-el="track">
<ul class="glide__slides slider__slides--picture-gallery" aria-label="Karusell mit 11 Bilder">
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg">
<source media="(min-width: 641px)" srcset="../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg">
<img src="../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="560" height="840">
</picture>
<figcaption class="figure__figcaption ">
<p>Optional Bildunterschrift - Bild 1</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="960" height="640">
</picture>
<figcaption class="figure__figcaption ">
<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>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg">
<source media="(min-width: 641px)" srcset="../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg">
<img src="../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="560" height="896">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg">
<source media="(min-width: 641px)" srcset="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1650">
</picture>
<figcaption class="figure__figcaption ">
<p>Bild 3</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--picture-gallery" data-slider-type="picture-gallery" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Bildergalerie auf Orginalgröße</h2>
<div class="slider__detailtext">
<p>Ein optionaler Text</p>
<p>Eine neue Zeile.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--picture-gallery" data-glide-el="track">
<ul class="glide__slides slider__slides--picture-gallery" aria-label="Karusell mit 11 Bilder">
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
</picture>
<figcaption class="figure__figcaption ">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
</picture>
<figcaption class="figure__figcaption ">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="960" height="640">
</picture>
<figcaption class="figure__figcaption ">
<p>3x2 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1650">
</picture>
<figcaption class="figure__figcaption ">
<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<img src="../../images/1x1/abstimmung-des-verwaltungsrats.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1000" height="1000">
</picture>
<figcaption class="figure__figcaption ">
<p>1x1 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/36x11/eltern-baby-tablet-1440x440.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1440" height="440">
</picture>
<figcaption class="figure__figcaption ">
<p>36x11 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/dummy_200_100.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="200" height="100">
</picture>
<figcaption class="figure__figcaption ">
<p>Mini Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/dummy_100_1000.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="100" height="1000">
</picture>
<figcaption class="figure__figcaption ">
<p>Langes Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--picture-gallery cs--d" data-slider-type="picture-gallery" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Bildergalerie mit Farbschema D</h2>
<div class="slider__detailtext">
<p>Ein optionaler Text</p>
<p>Eine neue Zeile.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--picture-gallery" data-glide-el="track">
<ul class="glide__slides slider__slides--picture-gallery" aria-label="Karusell mit 11 Bilder">
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
</picture>
<figcaption class="figure__figcaption ">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
</picture>
<figcaption class="figure__figcaption ">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="960" height="640">
</picture>
<figcaption class="figure__figcaption ">
<p>3x2 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1605">
</picture>
<figcaption class="figure__figcaption ">
<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<img src="../../images/1x1/abstimmung-des-verwaltungsrats.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="100" height="1000">
</picture>
<figcaption class="figure__figcaption ">
<p>1x1 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/36x11/eltern-baby-tablet-1440x440.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1440" height="440">
</picture>
<figcaption class="figure__figcaption ">
<p>36x11 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/dummy_200_100.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="200" height="100">
</picture>
<figcaption class="figure__figcaption ">
<p>Mini Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/dummy_100_1000.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="100" height="1000">
</picture>
<figcaption class="figure__figcaption ">
<p>Langes Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--picture-gallery" data-slider-type="picture-gallery" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Bildergalerie mit Download</h2>
<div class="slider__detailtext">
<p>Ein optionaler Text</p>
<p>Eine neue Zeile.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--picture-gallery" data-glide-el="track">
<ul class="glide__slides slider__slides--picture-gallery" aria-label="Karusell mit 13 Bilder">
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>Querformat mit download</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Querformat ohne download. 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>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture ">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1605">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1605">
</picture>
<figcaption class="figure__figcaption ">
<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>Originalbild, Hochformat mit Download. 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>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
</picture>
<figcaption class="figure__figcaption ">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<img src="../../images/1x1/abstimmung-des-verwaltungsrats.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="100" height="1000">
</picture>
<figcaption class="figure__figcaption ">
<p>1x1 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/dummy_200_100.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="200" height="100">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/dummy_100_1000.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="100" height="1000">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>Langes Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--picture-gallery cs--d" data-slider-type="picture-gallery" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Bildergalerie mit Download im Farbschema D</h2>
<div class="slider__detailtext">
<p>Ein optionaler Text</p>
<p>Eine neue Zeile.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--picture-gallery" data-glide-el="track">
<ul class="glide__slides slider__slides--picture-gallery" aria-label="Karusell mit 13 Bilder">
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>Querformat mit download</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<figcaption class="figure__figcaption ">
<p>Querformat ohne download. 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>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture ">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1605">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1605">
</picture>
<figcaption class="figure__figcaption ">
<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>Originalbild, Hochformat mit Download. 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>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
</picture>
<figcaption class="figure__figcaption ">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<img src="../../images/1x1/abstimmung-des-verwaltungsrats.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="100" height="1000">
</picture>
<figcaption class="figure__figcaption ">
<p>1x1 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/dummy_200_100.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="200" height="100">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/dummy_100_1000.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="100" height="1000">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>Langes Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--stage slider--stage-with-docking" data-slider-type="stage" data-glide-config="{"autoplay": false }" data-content-ratio="8x3">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="slider__track glide__track slider__track--stage" data-glide-el="track">
<ul class="glide__slides slider__slides--stage" aria-label="Karusell mit 4 Elementen">
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-c">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg">
<img src="../../images/8x3/eltern-sohn-toben-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--b">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Top-Krankenversicherung</h3>
<div class="teaser-collection__text">
<p>Du konzentrierst dich auf deine Ausbildung, wir kümmern uns um deine Gesundheit,. Die Barmer wurde als "Top Krankenkasse für junge Leute" (FOCUS MONEY 21/2020) ausgezeichnet. "Sehr gute digitale Leistungen" heißt es in der Auszeichnung - und das stimmt: Wir sind immer für dich da, wenn du uns brauchst.</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/frau-arm-pflaster-1080x405.jpg">
<img src="../../images/8x3/frau-arm-pflaster-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--c">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Ich bin eine Siegelliste die mit Farbschema C überschrieben wird</h3>
<div class="teaser-collection__text">
<p>Dieser Teasercollection-Text besitzt so viel Text, dass er die Teasercollection in einem Maße so weit aufspannen sollte, wie es bei keinem der vier anderen eingehängten Teasercollection der Fall ist. Es gilt auch, in zugegebenermaßen recht geschwätziger Art und Weise, darauf hinzuweisen, dass dann als nächster Teasercollection nur ein kleiner, winziger Text erscheinen sollte, um beide Extreme abbilden zu können. Was mir hoffentlich hiermit gelungen ist.</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-b">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/frau-tablet-arzt-1080x405.jpg">
<img src="../../images/8x3/frau-tablet-arzt-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--d">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Top-Krankenversicherung</h3>
<div class="teaser-collection__text">
<p>Ein kleiner Text, der die Teasercollection kaum aufspannen sollte. Eingesetztes Farbschema: D</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-c">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/mutter-kind-schoss-1080x405.jpg">
<img src="../../images/8x3/mutter-kind-schoss-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--a">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Top-Krankenversicherung</h3>
<div class="teaser-collection__text">
<p>Auch dies soll kein umfangreicher Text werden und nur darauf hinweisen, dass diese Teasercollection mit Farbschema A überschrieben wird.</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron " data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Zum vorigen Bild</span><img src="../../img/angle-left-dropshadow.svg" alt="" title="" class="a-image ">
</button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Zum nächsten Bild</span><img src="../../img/angle-right-dropshadow.svg" alt="" title="" class="a-image ">
</button>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=3">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--stage slider--stage-with-docking" data-slider-type="stage" data-glide-config="{"autoplay": false }" data-content-ratio="36x11">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="slider__track glide__track slider__track--stage" data-glide-el="track">
<ul class="glide__slides slider__slides--stage" aria-label="Karusell mit 4 Elementen">
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-c">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/36x11/mr-right.jpg">
<img src="../../images/36x11/mr-right.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--b">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Top-Krankenversicherung</h3>
<div class="teaser-collection__text">
<p>Du konzentrierst dich auf deine Ausbildung, wir kümmern uns um deine Gesundheit,. Die Barmer wurde als "Top Krankenkasse für junge Leute" (FOCUS MONEY 21/2020) ausgezeichnet. "Sehr gute digitale Leistungen" heißt es in der Auszeichnung - und das stimmt: Wir sind immer für dich da, wenn du uns brauchst.</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<source media="(min-width: 641px)" srcset="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<img src="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--c">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Ich bin eine Siegelliste die mit Farbschema C überschrieben wird</h3>
<div class="teaser-collection__text">
<p>Dieser Teasercollection-Text besitzt so viel Text, dass er die Teasercollection in einem Maße so weit aufspannen sollte, wie es bei keinem der vier anderen eingehängten Teasercollection der Fall ist. Es gilt auch, in zugegebenermaßen recht geschwätziger Art und Weise, darauf hinzuweisen, dass dann als nächster Teasercollection nur ein kleiner, winziger Text erscheinen sollte, um beide Extreme abbilden zu können. Was mir hoffentlich hiermit gelungen ist.</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-c">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/36x11/mr-right.jpg">
<img src="../../images/36x11/mr-right.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--b">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Haben Sie eine Vorstellung, wie das Leben als Teaser ist?</h3>
<div class="teaser-collection__text">
<p>Swipen Sie weiter nach rechts und hören Sie sich das Gejammer meiner Slide-Kollegin an und Sie wissen, was ich hier durchmache!</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<source media="(min-width: 641px)" srcset="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<img src="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--c">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Ich bin der letzte Teaser im Slider und ich bitte Sie: ignorieren Sie mich nicht.</h3>
<div class="teaser-collection__text">
<p>So sehr sich die anderen drei Slides bemühen, mir gegenüber nicht so zu tun, als wäre ich das letzte Slide – ich weiß es besser. Und in den stillen Momenten, wenn der/die Nutzer/in bereits bei einem der drei vorigen Slides abgesprungen sind und weiter nach unten gescrollt haben, das sind die Momente an denen ich zu knabbern habe.</p>
<p>All die Advertorials, Module, Textmodule, sie haben alle Spaß und ergötzen sich am Blick des Besuchers. Nur ich, ich friste mein Dasein am rechten Rand, außerhalb des Viewports, als viertes Slide.</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron " data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Zum vorigen Bild</span><img src="../../img/angle-left-dropshadow.svg" alt="" title="" class="a-image ">
</button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Zum nächsten Bild</span><img src="../../img/angle-right-dropshadow.svg" alt="" title="" class="a-image ">
</button>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=3">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--stage slider--stage-with-testimonial" data-slider-type="stage" data-glide-config="{"autoplay": false }" data-content-ratio="8x3">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="slider__track glide__track slider__track--stage" data-glide-el="track">
<ul class="glide__slides slider__slides--stage" aria-label="Karusell mit 4 Elementen">
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-c">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg">
<img src="../../images/8x3/eltern-sohn-toben-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Schaut her, ein Bühnen-Teaser mit Zitat!
</div>
</div>
</div>
</div>
<div class="teaser__testimonial-placement">
<figure class="m-figure figure--blockquote">
<blockquote class="figure__blockquote a-richtext">
<p>Es gibt Millionen gute Gründe für unseren Job!</p>
</blockquote>
<figcaption class="figure__figcaption figure__figcaption--blockquote-source">
– Kurt-Hans Zwetschgenkerze von Moselbach zur Heide (99), Gentleman Host
</figcaption>
</figure>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/frau-arm-pflaster-1080x405.jpg">
<img src="../../images/8x3/frau-arm-pflaster-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Schaut her, ein Bühnen-Teaser mit Zitat!
</div>
</div>
</div>
</div>
<div class="teaser__testimonial-placement">
<figure class="m-figure figure--blockquote">
<blockquote class="figure__blockquote a-richtext">
<p>Wir arbeiten miteinander, denn nur gemeinsam kann Barmer Gesundheit weiterdenken. Das bedeutet, wir helfen unseren Kunden, gesünder zu leben und <strong>bei Krankheit</strong> die bestmögliche Versorgung zu erhalten. Deshalb unterstützen wir sie bei der Behandlung, einer schnellen Genesung und einer nachhaltigen Prävention. Mit diesem Anspruch entwickeln wir uns weiter, erkennen frühzeitig gesellschaftliche Trends und machen den medizinische Fortschritt allen Menschen zugänglich.</p>
<p>Es gibt Millionen gute Gründe für unseren Job</p>
</blockquote>
<figcaption class="figure__figcaption figure__figcaption--blockquote-source">
– Johnny (8)
</figcaption>
</figure>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-b">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/frau-tablet-arzt-1080x405.jpg">
<img src="../../images/8x3/frau-tablet-arzt-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Schaut her, ein Bühnen-Teaser mit Zitat!
</div>
</div>
</div>
</div>
<div class="teaser__testimonial-placement">
<figure class="m-figure figure--blockquote">
<blockquote class="figure__blockquote a-richtext">
<p>Es gibt zu viele Menschen, die lieber anonym bleiben wollen</p>
</blockquote>
</figure>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-c">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/mutter-kind-schoss-1080x405.jpg">
<img src="../../images/8x3/mutter-kind-schoss-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Schaut her, ein Bühnen-Teaser mit Zitat!
</div>
</div>
</div>
</div>
<div class="teaser__testimonial-placement">
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</li>
</ul>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron " data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Zum vorigen Bild</span><img src="../../img/angle-left-dropshadow.svg" alt="" title="" class="a-image ">
</button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Zum nächsten Bild</span><img src="../../img/angle-right-dropshadow.svg" alt="" title="" class="a-image ">
</button>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=3">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init slider--stage slider--stage-with-testimonial" data-slider-type="stage" data-glide-config="{"autoplay": false }" data-content-ratio="36x11">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="slider__track glide__track slider__track--stage" data-glide-el="track">
<ul class="glide__slides slider__slides--stage" aria-label="Karusell mit 4 Elementen">
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-c">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/36x11/mr-right.jpg">
<img src="../../images/36x11/mr-right.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Schaut her, ein Bühnen-Teaser mit Zitat!
</div>
</div>
</div>
</div>
<div class="teaser__testimonial-placement">
<figure class="m-figure figure--blockquote">
<blockquote class="figure__blockquote a-richtext">
<p>Wir arbeiten miteinander, denn nur gemeinsam kann Barmer Gesundheit weiterdenken. Das bedeutet, wir helfen unseren Kunden, gesünder zu leben und <strong>bei Krankheit</strong> die bestmögliche Versorgung zu erhalten. Deshalb unterstützen wir sie bei der Behandlung, einer schnellen Genesung und einer nachhaltigen Prävention. Mit diesem Anspruch entwickeln wir uns weiter, erkennen frühzeitig gesellschaftliche Trends und machen den medizinische Fortschritt allen Menschen zugänglich.</p>
<p>Es gibt Millionen gute Gründe für unseren Job</p>
</blockquote>
<figcaption class="figure__figcaption figure__figcaption--blockquote-source">
– Kurt-Hans Zwetschgenkerze von Moselbach zur Heide (99), Gentleman Host
</figcaption>
</figure>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<source media="(min-width: 641px)" srcset="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<img src="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Schaut her, ein Bühnen-Teaser mit Zitat!
</div>
</div>
</div>
</div>
<div class="teaser__testimonial-placement">
<figure class="m-figure figure--blockquote">
<blockquote class="figure__blockquote a-richtext">
<p>Leben ist scho’ arg, oder?</p>
</blockquote>
<figcaption class="figure__figcaption figure__figcaption--blockquote-source">
– Johnny, Selbstzweifelnder Existenzialist
</figcaption>
</figure>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-c">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/36x11/mr-right.jpg">
<img src="../../images/36x11/mr-right.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Schaut her, ein Bühnen-Teaser mit Zitat!
</div>
</div>
</div>
</div>
<div class="teaser__testimonial-placement">
<figure class="m-figure figure--blockquote">
<blockquote class="figure__blockquote a-richtext">
<p>Es gibt bei der Barmer längere und kürzere Zitattexte. Es kommt als da darauf an. Soll es mal mehr oder mal weniger sein. Je nach Testfall</p>
</blockquote>
<figcaption class="figure__figcaption figure__figcaption--blockquote-source">
– Joppi Kraftzyk
</figcaption>
</figure>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<source media="(min-width: 641px)" srcset="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<img src="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Schaut her, ein Bühnen-Teaser mit Zitat!
</div>
</div>
</div>
</div>
<div class="teaser__testimonial-placement">
<figure class="m-figure figure--blockquote">
<blockquote class="figure__blockquote a-richtext">
<p>Man muss Karrieren als das sehen, was sie sind…</p>
<p>… Karrieren.</p>
</blockquote>
<figcaption class="figure__figcaption figure__figcaption--blockquote-source">
– Cérine (3)
</figcaption>
</figure>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</li>
</ul>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron " data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Zum vorigen Bild</span><img src="../../img/angle-left-dropshadow.svg" alt="" title="" class="a-image ">
</button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Zum nächsten Bild</span><img src="../../img/angle-right-dropshadow.svg" alt="" title="" class="a-image ">
</button>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=3">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</div>
</div>
</div>
<div class="o-how-to-module js-how-to-module-init ">
<div class="how-to-module__inner">
<h2 class="how-to-module__headline how-to-module__headline--h2">
How-to Module Headline
</h2>
<div class="how-to-module__text">
<p>Hier steht dann eine kurzer Richtext, der nicht soviele Styling-Optionen hat. Im Studio lässt sich dort wohl nur strong, kursiv und noch irgendetwas auszeichnen.</p>
</div>
<div class="how-to-module__content">
<div class="how-to-module__images">
<picture class="a-picture is-selected">
<source media="(min-width: 0px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
<img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
<img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="how-to-module__teaser-wrapper">
<div class="how-to-module__track" role="list">
<div class="o-teaser teaser--how-to" role="listitem" aria-selected="true">
<div class="teaser__image">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
1. BARMER App herunterladen
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, inkl. einer Abkürzung die als ABBR ausgezeichnet und lesbar sein sollte, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--primary" href="" title="">
BARMER App inkl. herunterladen
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--message" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
2. Mit Briefdaten in der App anmelden
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-how-to-module js-how-to-module-init ">
<div class="how-to-module__inner">
<h2 class="how-to-module__headline how-to-module__headline--h1">
How-to Module Headline
</h2>
<div class="how-to-module__text">
</div>
<div class="how-to-module__content">
<div class="how-to-module__images">
<picture class="a-picture is-selected">
<source media="(min-width: 0px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
<img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
<img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="how-to-module__teaser-wrapper">
<div class="how-to-module__track" role="list">
<div class="o-teaser teaser--how-to" role="listitem" aria-selected="true">
<div class="teaser__image">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
1. BARMER App herunterladen
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, inkl. einer Abkürzung die als ABBR ausgezeichnet und lesbar sein sollte, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--primary" href="" title="">
BARMER App inkl. herunterladen
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--message" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
2. Mit Briefdaten in der App anmelden
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--favorite" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
3. Punkte sammeln
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-how-to-module js-how-to-module-init ">
<div class="how-to-module__inner">
<h2 class="how-to-module__headline how-to-module__headline--h2">
How-to Module Headline
</h2>
<div class="how-to-module__text">
<p>Hier steht dann eine kurzer Richtext, der nicht soviele Styling-Optionen hat. Im Studio lässt sich dort wohl nur strong, kursiv und noch irgendetwas auszeichnen.</p>
</div>
<div class="how-to-module__content">
<div class="how-to-module__images">
<picture class="a-picture is-selected">
<source media="(min-width: 0px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
<img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
<img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/tippen-auf-tastatur-714x1000.jpg">
<img src="../../images/5x7/tippen-auf-tastatur-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="how-to-module__teaser-wrapper">
<div class="how-to-module__track" role="list">
<div class="o-teaser teaser--how-to" role="listitem" aria-selected="true">
<div class="teaser__image">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
1. BARMER App herunterladen
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, inkl. einer Abkürzung die als ABBR ausgezeichnet und lesbar sein sollte, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--primary" href="" title="">
BARMER App inkl. herunterladen
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--message" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
2. Mit Briefdaten in der App anmelden
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--favorite" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
3. Punkte sammeln
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--favorite" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
4. Punkte einlösen
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-how-to-module js-how-to-module-init cs--a ">
<div class="how-to-module__inner">
<h2 class="how-to-module__headline how-to-module__headline--h1">
How-to Module Headline
</h2>
<div class="how-to-module__text">
</div>
<div class="how-to-module__content">
<div class="how-to-module__images">
<picture class="a-picture is-selected">
<source media="(min-width: 0px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
<img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
<img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="how-to-module__teaser-wrapper">
<div class="how-to-module__track" role="list">
<div class="o-teaser teaser--how-to" role="listitem" aria-selected="true">
<div class="teaser__image">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
1. BARMER App herunterladen
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, inkl. einer Abkürzung die als ABBR ausgezeichnet und lesbar sein sollte, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--primary" href="" title="">
BARMER App inkl. herunterladen
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--message" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
2. Mit Briefdaten in der App anmelden
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--favorite" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
3. Punkte sammeln
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-how-to-module js-how-to-module-init cs--b ">
<div class="how-to-module__inner">
<h2 class="how-to-module__headline how-to-module__headline--h1">
How-to Module Headline
</h2>
<div class="how-to-module__text">
</div>
<div class="how-to-module__content">
<div class="how-to-module__images">
<picture class="a-picture is-selected">
<source media="(min-width: 0px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
<img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
<img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="how-to-module__teaser-wrapper">
<div class="how-to-module__track" role="list">
<div class="o-teaser teaser--how-to" role="listitem" aria-selected="true">
<div class="teaser__image">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
1. BARMER App herunterladen
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, inkl. einer Abkürzung die als ABBR ausgezeichnet und lesbar sein sollte, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--primary" href="" title="">
BARMER App inkl. herunterladen
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--message" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
2. Mit Briefdaten in der App anmelden
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--favorite" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
3. Punkte sammeln
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-how-to-module js-how-to-module-init cs--c ">
<div class="how-to-module__inner">
<h2 class="how-to-module__headline how-to-module__headline--h1">
How-to Module Headline
</h2>
<div class="how-to-module__text">
</div>
<div class="how-to-module__content">
<div class="how-to-module__images">
<picture class="a-picture is-selected">
<source media="(min-width: 0px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
<img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
<img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="how-to-module__teaser-wrapper">
<div class="how-to-module__track" role="list">
<div class="o-teaser teaser--how-to" role="listitem" aria-selected="true">
<div class="teaser__image">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
1. BARMER App herunterladen
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, inkl. einer Abkürzung die als ABBR ausgezeichnet und lesbar sein sollte, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--primary" href="" title="">
BARMER App inkl. herunterladen
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--message" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
2. Mit Briefdaten in der App anmelden
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--favorite" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
3. Punkte sammeln
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-how-to-module js-how-to-module-init cs--d ">
<div class="how-to-module__inner">
<h2 class="how-to-module__headline how-to-module__headline--h1">
How-to Module Headline
</h2>
<div class="how-to-module__text">
</div>
<div class="how-to-module__content">
<div class="how-to-module__images">
<picture class="a-picture is-selected">
<source media="(min-width: 0px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
<img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
<img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="how-to-module__teaser-wrapper">
<div class="how-to-module__track" role="list">
<div class="o-teaser teaser--how-to" role="listitem" aria-selected="true">
<div class="teaser__image">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
1. BARMER App herunterladen
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, inkl. einer Abkürzung die als ABBR ausgezeichnet und lesbar sein sollte, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--primary" href="" title="">
BARMER App inkl. herunterladen
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--message" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
2. Mit Briefdaten in der App anmelden
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--favorite" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
3. Punkte sammeln
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="a-richtext richtext--article">
<h2>Comparison Slider, 5 Elements</h2>
</div>
<div class="o-slider glide js-slider-init slider--comparison js-equal-height-segments" data-slider-type="comparison" data-glide-config="{"autoplay": }" data-equal-height-segments="{ "root": ".teaser--comparison", "segments": [ ".teaser__header", ".teaser__subline", ".teaser__text", ".teaser__footer" ] }" data-start-at-mobile="1">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--comparison" data-glide-el="track">
<ul class="glide__slides slider__slides--comparison" aria-label="Karusell mit 5 Bilder">
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison-placeholder">
<div class="teaser__text">
<div class="a-richtext">
<p>Wenn Sie bei der BARMER versichert sind, wenige Leistungen in Anspruch nehmen, können Sie einen Geld-Zurück-Tarif buchen.</p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<div class="teaser__label" aria-label="Tarif S"><span aria-hidden="true">S</span></div>
<h4 class="teaser__headline">Einfach sicher</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__subline">
Bis zu <strong>400 Euro</strong> Prämie in 3 Jahren
</div>
<div class="teaser__text">
<div class="a-richtext">
<h4>Ihr Null-Risiko Tarif</h4>
<p>Bleiben Sie gesund, erstatten wir Ihnen einen Teil Ihrer Beträge</p>
<p><strong>Keine Nachzahlung*</strong></p>
<p class="bm-small"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
<button class="a-btn btn--secondary js-modal-by-ttag-trigger" type="button">Mehr zum S-Tarif</button>
<template class="teaser__modal js-modal-by-ttag-target">
<div class="m-modal modal--comparison js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
<div class="modal__body">
<button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>
<div class="modal__title">
<h3>Ihr S-Tarif - Einfach Sicher</h3>
</div>
<div class="modal__text">
<div class="modal__text--intro a-richtext richtext--article">
<p>Nehmen Sie das ganze Jahr außer Ihren Vorsorge - und Früherkennungsuntersuchungen keine Leistungen in Anspruch, erstatten wir Ihnen
<strong>80 € im ersten Jahr, 120 € im zweiten Jahr, und 200 € im dritten Jahr.</strong>
</p>
<h3>Kein finanzielles Risiko</h3>
<p>Mit diesem Tarif gehen Sie keinerlei Risiko ein und müssen auf nichts verzichten. Sie bekommen entweder die gesamte Prämie, wenn Sie gesund bleiben, oder Ihre Prämie entfällt, wenn Sie eine Leistung aus dem grau markierten Bereich Bereich in Anspruch nehmen.<br />Holen Sie sich Ihren Wahltarif und sparen Sie Beiträge! Einfach Antragsformular ausfüllen und bei der Barmer abgeben.</p>
</div>
<div class="modal__text--facts">
<div class="m-list list--checkmark-bullets">
<h4 class="list__headline">
Volle Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuche ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfungen (inkl. Auslandsimpfungen)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge- und Früherkennungsuntersuchungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Zahnärztliche Leistungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Leistungen für minderjährige Familienversicherte</span>
</li>
</ul>
</div>
<div class="m-list list--minus-bullets">
<h4 class="list__headline">
Ausfall der Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuche mit Rezept für Medikamente, Heil- oder Hilfsmittel</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankenhausbehandlung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankengeld</span>
</li>
</ul>
</div>
</div>
<div class="modal__text--calculation-examples">
<h3>Rechenbeispiele</h3>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
1. Jahr: Volle Prämie für 1. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfung: Tetanusimpfung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuch mit Rezept: Antibiotikum selbst bezahlt<sup>*</sup></span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 1. Jahr</span>
<span class="result-line__amount result-line__amount--positive">80 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
2. Jahr: Volle Prämie für 2. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Gesundheits-Checkup</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuch ohne Rezept</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 2. Jahr</span>
<span class="result-line__amount result-line__amount--positive">120 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
3. Jahr: Keine Prämie für 3. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Vorsorge: Gesundheits-Checkup</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Arztbesuch ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span><span class="sr-only">Verlust der Prämie bei</span>Heilmittel: Physiotherapie Verordnung</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 3. Jahr</span>
<span class="result-line__amount">0 Euro</span>
</div>
</div>
<div class="modal__text--footnotes a-richtext richtext--article">
<p><sup>*</sup>Tipp: Zahlen Sie Ihre rezeptpflichtigen Medikamente selbst (z.B. Antibiotikum 5,99 €), können Sie sparen und Ihre Prämie schonen.</br><sup>**</sup>Detailfragen zur Leistungsübersicht bespricht Ihr(e) Kundenberaterin oder Kundenberater der BARMER mit Ihnen.</p>
</div>
</div>
</div>
<div class="modal__actions">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Jetzt beraten lassen
</h4>
<div class="teaser__button-wrapper">
<a class="a-btn a-btn btn--primary" href="" title="">
Kontaktformular
</a>
<a class="a-btn a-btn btn--secondary" href="tel:+498003331010" title="">
0800 3331010
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal__background" aria-hidden="true"></div>
</div>
</template>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<div class="teaser__label" aria-label="Tarif M"><span aria-hidden="true">M</span></div>
<h4 class="teaser__headline">Einfach mehr</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/960/ein-mann-sitzt-mit-notebook-und-fuesse-hoch-am-schreibtisch.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/1x1/eltern-kind-blumen-1000x1000.jpg" width="100" height="100">
<img src="../../images/1x1/eltern-kind-blumen-1000x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__subline">
Bis zu <strong>600 Euro</strong> Prämie in 3 Jahren
</div>
<div class="teaser__text">
<div class="a-richtext">
<h4>Die gesunde Prämie</h4>
<p>Ihrer Gesundheit schenken wir ein Guthaben für das ganze Jahr.</p>
<p><strong>Maximale Nachzahlung 40 €*</strong></p>
<p class="bm-small"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
<button class="a-btn btn--secondary js-modal-by-ttag-trigger" type="button">Mehr zum M-Tarif</button>
<template class="teaser__modal js-modal-by-ttag-target">
<div class="m-modal modal--comparison js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
<div class="modal__body">
<button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>
<div class="modal__title">
<h3>Ihr M-Tarif - Einfach Mehr</h3>
</div>
<div class="modal__text">
<div class="modal__text--intro a-richtext richtext--article">
<p>Außer für Ihre Vorsorge- und Früherkennungsuntersuchungen gehen Sie nur selten zum Arzt? Dann bekommen Sie mit dem Tarif <strong>Einfach Mehr</strong> bis zu 600 € Prämie über die gesamte Laufzeit von 3 Jahren, mit einer jährlichen Auszahlung von maximal 200 €.</p>
<h3>Fit bleiben. Prämie sichern.</h3>
<p>Natürlich gilt weiterhin unser vollständiger Gesundheitsschutz für Sie. Der <strong>Einfach Mehr</strong> Tarif ändert daran nichts! Benötigen Sie trotz voller Gesundheit doch mal Unterstützung aus dem grau markierten Bereich, verringert sich Ihre Prämie lediglich um 20 € pro Leistung️. Ihre Nachzahlung ist auf maximal 40 € pro Jahr begrenzt.</p>
</div>
<div class="modal__text--facts">
<div class="m-list list--checkmark-bullets">
<h4 class="list__headline">
Volle Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuchen ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfungen (inkl. Auslandsimpfungen)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge- und Früherkennungsuntersuchungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Zahnärztlichen Leistungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Leistungen für Familienversicherte</span>
</li>
</ul>
</div>
<div class="m-list list--minus-bullets">
<h4 class="list__headline">
Abzüge bei<sup>**</sup>
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuchen mit Rezept für Medikamente, Heil-oder Hilfsmittel (je 20 € für Arztbesuch und Verordnung)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankenhausbehandlung (20€ je Tag)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankengeld (20€ je Tag)</span>
</li>
</ul>
</div>
</div>
<div class="modal__text--calculation-examples">
<h3>Rechenbeispiele</h3>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 1: Volle Prämie
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Impfung: Tetanusimpfung</span><span class="list__item-amount">0 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie</span>
<span class="result-line__amount result-line__amount--positive">200 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 2: Reduzierte Prämie
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">Reduktion der Prämie bei</span>Krankenhausbehandlung: 2 Tage (mal 20€)</span><span class="list__item-amount">-40 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie</span>
<span class="result-line__amount result-line__amount--positive">160 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 3: Keine Prämie (Nachzahlung)
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon " aria-hidden="true"></i>
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Arztbesuch ohne Rezept</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">Reduktion der Prämie bei</span>Krankenhausbehandlung: 20 Tage (mal 20€)</span><span class="list__item-amount">-400 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Maximale Nachzahlung<sup>*</sup></span>
<span class="result-line__amount">-40 Euro</span>
</div>
</div>
<div class="modal__text--footnotes a-richtext richtext--article">
<p>Tipp: Zahlen Sie Ihre rezeptpflichtigen Medikamente selbst (z.B. Antibiotikum 5,99 €), können Sie sparen und Ihre Prämie schonen.</br><sup>*</sup>Egal wie viele Leistungen Sie in Anspruch nehmen: Die Nachzahlung beträgt nie mehr als 40 € pro Jahr.</br><sup>**</sup>Detailfragen zur Leistungsübersicht bespricht Ihr(e) Kundenberaterin oder Kundenberater der BARMER mit Ihnen.</p>
</div>
</div>
</div>
<div class="modal__actions">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Jetzt beraten lassen
</h4>
<div class="teaser__button-wrapper">
<a class="a-btn a-btn btn--primary" href="" title="">
Kontaktformular
</a>
<a class="a-btn a-btn btn--secondary" href="tel:+498003331010" title="">
0800 3331010
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal__background" aria-hidden="true"></div>
</div>
</template>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<div class="teaser__label" aria-label="Tarif L"><span aria-hidden="true">L</span></div>
<h4 class="teaser__headline">Einfach lukrativ</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg" width="500" height="700">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__subline">
Bis zu <strong>750 Euro</strong> Prämie in 3 Jahren
</div>
<div class="teaser__text">
<div class="a-richtext">
<h4>Das Topfit-Guthaben</h4>
<p>Unsere jährliche Extrazahlung für Ihren gesunden Lebensstil.</p>
<p><strong>Maximale Nachzahlung 50 €*</strong></p>
<p class="bm-small"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
<button class="a-btn btn--secondary js-modal-by-ttag-trigger" type="button">Mehr zum L-Tarif</button>
<template class="teaser__modal js-modal-by-ttag-target">
<div class="m-modal modal--comparison js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
<div class="modal__body">
<button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>
<div class="modal__title">
<h3>Ihr L-Tarif - Einfach Lukrativ</h3>
</div>
<div class="modal__text">
<div class="modal__text--intro a-richtext richtext--article">
<p>Sie gehen überwiegend nur für Ihre Vorsorge- und Früherkennungsuntersuchungen zum Arzt und brauchen sonst wenige medizinische Leistungen, dann bekommen Sie von uns eine Prämie von bis zu 750 € über eine Laufzeit von 3 Jahren. Damit schenken wir Ihrer Gesundheit mit unserem <strong>Einfach Lukrativ</strong> Tarif jährlich maximal 250 €.</p>
<h3>Extra Prämie Sichern</h3>
<p>Sie sind weiterhin rundum versichert und geschützt, egal was passiert. Denn wir wollen, dass Sie gesund bleiben!</p>
<p>Müssen Sie unerwartet doch medizinische Unterstützung aus dem grau markierten Bereich in Anspruch nehmen, verringert sich Ihre Prämie lediglich um 20 € pro Leistung️. Ihre maximale Nachzahlung ist auf 50 € pro Jahr begrenzt.</p>
</div>
<div class="modal__text--facts">
<div class="m-list list--checkmark-bullets">
<h4 class="list__headline">
Volle Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuche ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfungen (inkl. Auslandsimpfungen)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge- und Früherkennungsuntersuchungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Zahnärztliche Leistungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Leistungen für Familienversicherte</span>
</li>
</ul>
</div>
<div class="m-list list--minus-bullets">
<h4 class="list__headline">
Abzüge bei<sup>**</sup>
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuchen mit Rezept für Medikamente, Heil- oder Hilfsmittel (je 20 € für Arztbesuch und Verordnung)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankenhausbehandlung (20€ je Tag)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankengeld (20€ je Tag)</span>
</li>
</ul>
</div>
</div>
<div class="modal__text--calculation-examples">
<h3>Rechenbeispiele</h3>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 1.: Volle Prämie
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">250 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description">Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description">Impfung: Tetanusimpfung</span><span class="list__item-amount">0 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie</span>
<span class="result-line__amount result-line__amount--positive">250 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 2: Reduzierte Prämie
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">Reduktion der Prämie bei</span>Krankenhausbehandlung: 2 Tage (mal 20€)</span><span class="list__item-amount">-40 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie</span>
<span class="result-line__amount result-line__amount--positive">210 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 3: Keine Prämie (Nachzahlung)
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">250 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Arztbesuch ohne Rezept</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">Reduktion der Prämie bei</span>Krankenhausbehandlung: 20 Tage (mal 20€)</span><span class="list__item-amount">-400 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Maximale Nachzahlung<sup>*</sup></span>
<span class="result-line__amount">-50 Euro</span>
</div>
</div>
<div class="modal__text--footnotes a-richtext richtext--article">
<p>Tipp: Zahlen Sie Ihre rezeptpflichtigen Medikamente selbst (z.B. Antibiotikum 5,99 €), können Sie sparen und Ihre Prämie schonen.</br><sup>*</sup>Egal wie viele Leistungen Sie in Anspruch nehmen: Die Nachzahlung beträgt nie mehr als 50 € pro Jahr.</br><sup>**</sup>Detailfragen zur Leistungsübersicht bespricht Ihr(e) Kundenberaterin oder Kundenberater der BARMER mit Ihnen.</p>
</div>
</div>
</div>
<div class="modal__actions">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Jetzt kostenlos beraten lassen (Montag bis Freitag 9 bis 18 Uhr) oder außerhalb der Anrufzeiten unser Kontaktformular nutzen.
</h4>
<div class="teaser__button-wrapper">
<a class="a-btn a-btn btn--primary" href="" title="">
Kontaktformular
</a>
<a class="a-btn a-btn btn--secondary" href="tel:+498003331010" title="">
0800 3331010
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal__background" aria-hidden="true"></div>
</div>
</template>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<div class="teaser__label" aria-label="Tarif XL"><span aria-hidden="true">XL</span></div>
<h4 class="teaser__headline">Einfach supi</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/3x2/mann-mit-tablet.jpg" width="500" height="700">
<img src="../../images/3x2/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__subline">
<strong>1.000 Euro</strong> Prämie in 3 Jahren
</div>
<div class="teaser__text">
<div class="a-richtext">
<h4>Supi-Guthaben</h4>
<p>Zahlungen in jedem Schaltjahr.</p>
<p><strong>Max Nachzahlung 100 €*</strong></p>
<p class="bm-small"><small>*wenn Sie wenig Leistung beanspruchen</small></p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
<button class="a-btn btn--secondary js-modal-by-ttag-trigger" type="button">Mehr zum XXXL-Tarif</button>
<template class="teaser__modal js-modal-by-ttag-target">
<div class="m-modal modal--comparison js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
<div class="modal__body">
<button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>
<div class="modal__title">
<h3>Ihr S-Tarif - Einfach Sicher</h3>
</div>
<div class="modal__text">
<div class="modal__text--intro a-richtext richtext--article">
<p>Nehmen Sie das ganze Jahr außer Ihren Vorsorge - und Früherkennungsuntersuchungen keine Leistungen in Anspruch, erstatten wir Ihnen
<strong>80 € im ersten Jahr, 120 € im zweiten Jahr, und 200 € im dritten Jahr.</strong>
</p>
<h3>Kein finanzielles Risiko</h3>
<p>Mit diesem Tarif gehen Sie keinerlei Risiko ein und müssen auf nichts verzichten. Sie bekommen entweder die gesamte Prämie, wenn
Sie gesund bleiben, oder Ihre Prämie entfällt, wenn Sie eine Leistung aus dem grau markierten Bereich Bereich in Anspruch nehmen.<br />
Holen Sie sich Ihren Wahltarif und sparen Sie Beiträge! Einfach Antragsformular ausfüllen und bei der Barmer abgeben.</p>
</div>
<div class="modal__text--facts">
<div class="m-list list--checkmark-bullets">
<h4 class="list__headline">
Volle Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuche ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfungen (inkl. Auslandsimpfungen)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge- und Früherkennungsuntersuchungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Zahnärztliche Leistungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Leistungen für minderjährige Familienversicherte</span>
</li>
</ul>
</div>
<div class="m-list list--minus-bullets">
<h4 class="list__headline">
Ausfall der Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuche mit Rezept für Medikamente, Heil- oder Hilfsmittel</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankenhausbehandlung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankengeld / Kinderkrankengeld</span>
</li>
</ul>
</div>
</div>
<div class="modal__text--calculation-examples">
<h3>Rechenbeispiele</h3>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
1. Jahr: Volle Prämie für 1. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfung: Tetanusimpfung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuch mit Rezept: Antibiotikum selbst bezahlt<sup>*</sup></span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 1. Jahr</span>
<span class="result-line__amount result-line__amount--positive">80 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
2. Jahr: Volle Prämie für 2. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Gesundheits-Checkup</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuch ohne Rezept</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 2. Jahr</span>
<span class="result-line__amount result-line__amount--positive">120 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
3. Jahr: Keine Prämie für 3. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Gesundheits-Checkup</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuch ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Heilmittel: Physiotherapie Verordnung</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 3. Jahr</span>
<span class="result-line__amount">0 Euro</span>
</div>
</div>
<div class="modal__text--footnotes a-richtext richtext--article"></div>
</div>
</div>
<div class="modal__actions">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Jetzt beraten lassen
</h4>
<div class="teaser__button-wrapper">
<a class="a-btn a-btn btn--primary" href="" title="">
Kontaktformular
</a>
<a class="a-btn a-btn btn--secondary" href="tel:+498003331010" title="">
0800 3331010
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal__background" aria-hidden="true"></div>
</div>
</template>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="a-richtext richtext--article">
<h2>Comparison Slider, 4 Elements</h2>
</div>
<div class="o-slider glide js-slider-init slider--comparison js-equal-height-segments" data-slider-type="comparison" data-glide-config="{"autoplay": }" data-equal-height-segments="{ "root": ".teaser--comparison", "segments": [ ".teaser__header", ".teaser__subline", ".teaser__text", ".teaser__footer" ] }" data-start-at-mobile="1">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--comparison" data-glide-el="track">
<ul class="glide__slides slider__slides--comparison" aria-label="Karusell mit 4 Bilder">
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison-placeholder">
<div class="teaser__text">
<div class="a-richtext">
<p>Wenn Sie bei der BARMER versichert sind, wenige Leistungen in Anspruch nehmen, können Sie einen Geld-Zurück-Tarif buchen.</p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<div class="teaser__label" aria-label="Tarif S"><span aria-hidden="true">S</span></div>
<h4 class="teaser__headline">Einfach sicher</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__subline">
Bis zu <strong>400 Euro</strong> Prämie in 3 Jahren
</div>
<div class="teaser__text">
<div class="a-richtext">
<h4>Ihr Null-Risiko Tarif</h4>
<p>Bleiben Sie gesund, erstatten wir Ihnen einen Teil Ihrer Beträge</p>
<p><strong>Keine Nachzahlung*</strong></p>
<p class="bm-small"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
<button class="a-btn btn--secondary js-modal-by-ttag-trigger" type="button">Mehr zum S-Tarif</button>
<template class="teaser__modal js-modal-by-ttag-target">
<div class="m-modal modal--comparison js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
<div class="modal__body">
<button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>
<div class="modal__title">
<h3>Ihr S-Tarif - Einfach Sicher</h3>
</div>
<div class="modal__text">
<div class="modal__text--intro a-richtext richtext--article">
<p>Nehmen Sie das ganze Jahr außer Ihren Vorsorge - und Früherkennungsuntersuchungen keine Leistungen in Anspruch, erstatten wir Ihnen
<strong>80 € im ersten Jahr, 120 € im zweiten Jahr, und 200 € im dritten Jahr.</strong>
</p>
<h3>Kein finanzielles Risiko</h3>
<p>Mit diesem Tarif gehen Sie keinerlei Risiko ein und müssen auf nichts verzichten. Sie bekommen entweder die gesamte Prämie, wenn Sie gesund bleiben, oder Ihre Prämie entfällt, wenn Sie eine Leistung aus dem grau markierten Bereich Bereich in Anspruch nehmen.<br />Holen Sie sich Ihren Wahltarif und sparen Sie Beiträge! Einfach Antragsformular ausfüllen und bei der Barmer abgeben.</p>
</div>
<div class="modal__text--facts">
<div class="m-list list--checkmark-bullets">
<h4 class="list__headline">
Volle Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuche ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfungen (inkl. Auslandsimpfungen)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge- und Früherkennungsuntersuchungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Zahnärztliche Leistungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Leistungen für minderjährige Familienversicherte</span>
</li>
</ul>
</div>
<div class="m-list list--minus-bullets">
<h4 class="list__headline">
Ausfall der Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuche mit Rezept für Medikamente, Heil- oder Hilfsmittel</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankenhausbehandlung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankengeld</span>
</li>
</ul>
</div>
</div>
<div class="modal__text--calculation-examples">
<h3>Rechenbeispiele</h3>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
1. Jahr: Volle Prämie für 1. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfung: Tetanusimpfung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuch mit Rezept: Antibiotikum selbst bezahlt<sup>*</sup></span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 1. Jahr</span>
<span class="result-line__amount result-line__amount--positive">80 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
2. Jahr: Volle Prämie für 2. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Gesundheits-Checkup</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuch ohne Rezept</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 2. Jahr</span>
<span class="result-line__amount result-line__amount--positive">120 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
3. Jahr: Keine Prämie für 3. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Vorsorge: Gesundheits-Checkup</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Arztbesuch ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span><span class="sr-only">Verlust der Prämie bei</span>Heilmittel: Physiotherapie Verordnung</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 3. Jahr</span>
<span class="result-line__amount">0 Euro</span>
</div>
</div>
<div class="modal__text--footnotes a-richtext richtext--article">
<p><sup>*</sup>Tipp: Zahlen Sie Ihre rezeptpflichtigen Medikamente selbst (z.B. Antibiotikum 5,99 €), können Sie sparen und Ihre Prämie schonen.</br><sup>**</sup>Detailfragen zur Leistungsübersicht bespricht Ihr(e) Kundenberaterin oder Kundenberater der BARMER mit Ihnen.</p>
</div>
</div>
</div>
<div class="modal__actions">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Jetzt beraten lassen
</h4>
<div class="teaser__button-wrapper">
<a class="a-btn a-btn btn--primary" href="" title="">
Kontaktformular
</a>
<a class="a-btn a-btn btn--secondary" href="tel:+498003331010" title="">
0800 3331010
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal__background" aria-hidden="true"></div>
</div>
</template>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<div class="teaser__label" aria-label="Tarif M"><span aria-hidden="true">M</span></div>
<h4 class="teaser__headline">Einfach mehr</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/960/ein-mann-sitzt-mit-notebook-und-fuesse-hoch-am-schreibtisch.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/1x1/eltern-kind-blumen-1000x1000.jpg" width="100" height="100">
<img src="../../images/1x1/eltern-kind-blumen-1000x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__subline">
Bis zu <strong>600 Euro</strong> Prämie in 3 Jahren
</div>
<div class="teaser__text">
<div class="a-richtext">
<h4>Die gesunde Prämie</h4>
<p>Ihrer Gesundheit schenken wir ein Guthaben für das ganze Jahr.</p>
<p><strong>Maximale Nachzahlung 40 €*</strong></p>
<p class="bm-small"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
<button class="a-btn btn--secondary js-modal-by-ttag-trigger" type="button">Mehr zum M-Tarif</button>
<template class="teaser__modal js-modal-by-ttag-target">
<div class="m-modal modal--comparison js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
<div class="modal__body">
<button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>
<div class="modal__title">
<h3>Ihr M-Tarif - Einfach Mehr</h3>
</div>
<div class="modal__text">
<div class="modal__text--intro a-richtext richtext--article">
<p>Außer für Ihre Vorsorge- und Früherkennungsuntersuchungen gehen Sie nur selten zum Arzt? Dann bekommen Sie mit dem Tarif <strong>Einfach Mehr</strong> bis zu 600 € Prämie über die gesamte Laufzeit von 3 Jahren, mit einer jährlichen Auszahlung von maximal 200 €.</p>
<h3>Fit bleiben. Prämie sichern.</h3>
<p>Natürlich gilt weiterhin unser vollständiger Gesundheitsschutz für Sie. Der <strong>Einfach Mehr</strong> Tarif ändert daran nichts! Benötigen Sie trotz voller Gesundheit doch mal Unterstützung aus dem grau markierten Bereich, verringert sich Ihre Prämie lediglich um 20 € pro Leistung️. Ihre Nachzahlung ist auf maximal 40 € pro Jahr begrenzt.</p>
</div>
<div class="modal__text--facts">
<div class="m-list list--checkmark-bullets">
<h4 class="list__headline">
Volle Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuchen ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfungen (inkl. Auslandsimpfungen)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge- und Früherkennungsuntersuchungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Zahnärztlichen Leistungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Leistungen für Familienversicherte</span>
</li>
</ul>
</div>
<div class="m-list list--minus-bullets">
<h4 class="list__headline">
Abzüge bei<sup>**</sup>
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuchen mit Rezept für Medikamente, Heil-oder Hilfsmittel (je 20 € für Arztbesuch und Verordnung)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankenhausbehandlung (20€ je Tag)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankengeld (20€ je Tag)</span>
</li>
</ul>
</div>
</div>
<div class="modal__text--calculation-examples">
<h3>Rechenbeispiele</h3>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 1: Volle Prämie
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Impfung: Tetanusimpfung</span><span class="list__item-amount">0 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie</span>
<span class="result-line__amount result-line__amount--positive">200 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 2: Reduzierte Prämie
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">Reduktion der Prämie bei</span>Krankenhausbehandlung: 2 Tage (mal 20€)</span><span class="list__item-amount">-40 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie</span>
<span class="result-line__amount result-line__amount--positive">160 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 3: Keine Prämie (Nachzahlung)
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon " aria-hidden="true"></i>
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Arztbesuch ohne Rezept</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">Reduktion der Prämie bei</span>Krankenhausbehandlung: 20 Tage (mal 20€)</span><span class="list__item-amount">-400 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Maximale Nachzahlung<sup>*</sup></span>
<span class="result-line__amount">-40 Euro</span>
</div>
</div>
<div class="modal__text--footnotes a-richtext richtext--article">
<p>Tipp: Zahlen Sie Ihre rezeptpflichtigen Medikamente selbst (z.B. Antibiotikum 5,99 €), können Sie sparen und Ihre Prämie schonen.</br><sup>*</sup>Egal wie viele Leistungen Sie in Anspruch nehmen: Die Nachzahlung beträgt nie mehr als 40 € pro Jahr.</br><sup>**</sup>Detailfragen zur Leistungsübersicht bespricht Ihr(e) Kundenberaterin oder Kundenberater der BARMER mit Ihnen.</p>
</div>
</div>
</div>
<div class="modal__actions">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Jetzt beraten lassen
</h4>
<div class="teaser__button-wrapper">
<a class="a-btn a-btn btn--primary" href="" title="">
Kontaktformular
</a>
<a class="a-btn a-btn btn--secondary" href="tel:+498003331010" title="">
0800 3331010
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal__background" aria-hidden="true"></div>
</div>
</template>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<div class="teaser__label" aria-label="Tarif L"><span aria-hidden="true">L</span></div>
<h4 class="teaser__headline">Einfach lukrativ</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg" width="500" height="700">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__subline">
Bis zu <strong>750 Euro</strong> Prämie in 3 Jahren
</div>
<div class="teaser__text">
<div class="a-richtext">
<h4>Das Topfit-Guthaben</h4>
<p>Unsere jährliche Extrazahlung für Ihren gesunden Lebensstil.</p>
<p><strong>Maximale Nachzahlung 50 €*</strong></p>
<p class="bm-small"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
<button class="a-btn btn--secondary js-modal-by-ttag-trigger" type="button">Mehr zum L-Tarif</button>
<template class="teaser__modal js-modal-by-ttag-target">
<div class="m-modal modal--comparison js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
<div class="modal__body">
<button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>
<div class="modal__title">
<h3>Ihr L-Tarif - Einfach Lukrativ</h3>
</div>
<div class="modal__text">
<div class="modal__text--intro a-richtext richtext--article">
<p>Sie gehen überwiegend nur für Ihre Vorsorge- und Früherkennungsuntersuchungen zum Arzt und brauchen sonst wenige medizinische Leistungen, dann bekommen Sie von uns eine Prämie von bis zu 750 € über eine Laufzeit von 3 Jahren. Damit schenken wir Ihrer Gesundheit mit unserem <strong>Einfach Lukrativ</strong> Tarif jährlich maximal 250 €.</p>
<h3>Extra Prämie Sichern</h3>
<p>Sie sind weiterhin rundum versichert und geschützt, egal was passiert. Denn wir wollen, dass Sie gesund bleiben!</p>
<p>Müssen Sie unerwartet doch medizinische Unterstützung aus dem grau markierten Bereich in Anspruch nehmen, verringert sich Ihre Prämie lediglich um 20 € pro Leistung️. Ihre maximale Nachzahlung ist auf 50 € pro Jahr begrenzt.</p>
</div>
<div class="modal__text--facts">
<div class="m-list list--checkmark-bullets">
<h4 class="list__headline">
Volle Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuche ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfungen (inkl. Auslandsimpfungen)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge- und Früherkennungsuntersuchungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Zahnärztliche Leistungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Leistungen für Familienversicherte</span>
</li>
</ul>
</div>
<div class="m-list list--minus-bullets">
<h4 class="list__headline">
Abzüge bei<sup>**</sup>
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuchen mit Rezept für Medikamente, Heil- oder Hilfsmittel (je 20 € für Arztbesuch und Verordnung)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankenhausbehandlung (20€ je Tag)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankengeld (20€ je Tag)</span>
</li>
</ul>
</div>
</div>
<div class="modal__text--calculation-examples">
<h3>Rechenbeispiele</h3>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 1.: Volle Prämie
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">250 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description">Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description">Impfung: Tetanusimpfung</span><span class="list__item-amount">0 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie</span>
<span class="result-line__amount result-line__amount--positive">250 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 2: Reduzierte Prämie
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">Reduktion der Prämie bei</span>Krankenhausbehandlung: 2 Tage (mal 20€)</span><span class="list__item-amount">-40 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie</span>
<span class="result-line__amount result-line__amount--positive">210 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 3: Keine Prämie (Nachzahlung)
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">250 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Arztbesuch ohne Rezept</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">Reduktion der Prämie bei</span>Krankenhausbehandlung: 20 Tage (mal 20€)</span><span class="list__item-amount">-400 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Maximale Nachzahlung<sup>*</sup></span>
<span class="result-line__amount">-50 Euro</span>
</div>
</div>
<div class="modal__text--footnotes a-richtext richtext--article">
<p>Tipp: Zahlen Sie Ihre rezeptpflichtigen Medikamente selbst (z.B. Antibiotikum 5,99 €), können Sie sparen und Ihre Prämie schonen.</br><sup>*</sup>Egal wie viele Leistungen Sie in Anspruch nehmen: Die Nachzahlung beträgt nie mehr als 50 € pro Jahr.</br><sup>**</sup>Detailfragen zur Leistungsübersicht bespricht Ihr(e) Kundenberaterin oder Kundenberater der BARMER mit Ihnen.</p>
</div>
</div>
</div>
<div class="modal__actions">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Jetzt kostenlos beraten lassen (Montag bis Freitag 9 bis 18 Uhr) oder außerhalb der Anrufzeiten unser Kontaktformular nutzen.
</h4>
<div class="teaser__button-wrapper">
<a class="a-btn a-btn btn--primary" href="" title="">
Kontaktformular
</a>
<a class="a-btn a-btn btn--secondary" href="tel:+498003331010" title="">
0800 3331010
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal__background" aria-hidden="true"></div>
</div>
</template>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="a-richtext richtext--article">
<h2>Comparison Slider, 3 Elements</h2>
</div>
<div class="o-slider glide js-slider-init slider--comparison js-equal-height-segments" data-slider-type="comparison" data-glide-config="{"autoplay": }" data-equal-height-segments="{ "root": ".teaser--comparison", "segments": [ ".teaser__header", ".teaser__subline", ".teaser__text", ".teaser__footer" ] }" data-start-at-mobile="1">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--comparison" data-glide-el="track">
<ul class="glide__slides slider__slides--comparison" aria-label="Karusell mit 3 Bilder">
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison-placeholder">
<div class="teaser__text">
<div class="a-richtext">
<p>Wenn Sie bei der BARMER versichert sind, wenige Leistungen in Anspruch nehmen, können Sie einen Geld-Zurück-Tarif buchen.</p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<div class="teaser__label" aria-label="Tarif S"><span aria-hidden="true">S</span></div>
<h4 class="teaser__headline">Einfach sicher</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__subline">
Bis zu <strong>400 Euro</strong> Prämie in 3 Jahren
</div>
<div class="teaser__text">
<div class="a-richtext">
<h4>Ihr Null-Risiko Tarif</h4>
<p>Bleiben Sie gesund, erstatten wir Ihnen einen Teil Ihrer Beträge</p>
<p><strong>Keine Nachzahlung*</strong></p>
<p class="bm-small"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
<button class="a-btn btn--secondary js-modal-by-ttag-trigger" type="button">Mehr zum S-Tarif</button>
<template class="teaser__modal js-modal-by-ttag-target">
<div class="m-modal modal--comparison js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
<div class="modal__body">
<button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>
<div class="modal__title">
<h3>Ihr S-Tarif - Einfach Sicher</h3>
</div>
<div class="modal__text">
<div class="modal__text--intro a-richtext richtext--article">
<p>Nehmen Sie das ganze Jahr außer Ihren Vorsorge - und Früherkennungsuntersuchungen keine Leistungen in Anspruch, erstatten wir Ihnen
<strong>80 € im ersten Jahr, 120 € im zweiten Jahr, und 200 € im dritten Jahr.</strong>
</p>
<h3>Kein finanzielles Risiko</h3>
<p>Mit diesem Tarif gehen Sie keinerlei Risiko ein und müssen auf nichts verzichten. Sie bekommen entweder die gesamte Prämie, wenn Sie gesund bleiben, oder Ihre Prämie entfällt, wenn Sie eine Leistung aus dem grau markierten Bereich Bereich in Anspruch nehmen.<br />Holen Sie sich Ihren Wahltarif und sparen Sie Beiträge! Einfach Antragsformular ausfüllen und bei der Barmer abgeben.</p>
</div>
<div class="modal__text--facts">
<div class="m-list list--checkmark-bullets">
<h4 class="list__headline">
Volle Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuche ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfungen (inkl. Auslandsimpfungen)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge- und Früherkennungsuntersuchungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Zahnärztliche Leistungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Leistungen für minderjährige Familienversicherte</span>
</li>
</ul>
</div>
<div class="m-list list--minus-bullets">
<h4 class="list__headline">
Ausfall der Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuche mit Rezept für Medikamente, Heil- oder Hilfsmittel</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankenhausbehandlung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankengeld</span>
</li>
</ul>
</div>
</div>
<div class="modal__text--calculation-examples">
<h3>Rechenbeispiele</h3>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
1. Jahr: Volle Prämie für 1. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfung: Tetanusimpfung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuch mit Rezept: Antibiotikum selbst bezahlt<sup>*</sup></span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 1. Jahr</span>
<span class="result-line__amount result-line__amount--positive">80 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
2. Jahr: Volle Prämie für 2. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Gesundheits-Checkup</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuch ohne Rezept</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 2. Jahr</span>
<span class="result-line__amount result-line__amount--positive">120 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
3. Jahr: Keine Prämie für 3. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Vorsorge: Gesundheits-Checkup</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Arztbesuch ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span><span class="sr-only">Verlust der Prämie bei</span>Heilmittel: Physiotherapie Verordnung</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 3. Jahr</span>
<span class="result-line__amount">0 Euro</span>
</div>
</div>
<div class="modal__text--footnotes a-richtext richtext--article">
<p><sup>*</sup>Tipp: Zahlen Sie Ihre rezeptpflichtigen Medikamente selbst (z.B. Antibiotikum 5,99 €), können Sie sparen und Ihre Prämie schonen.</br><sup>**</sup>Detailfragen zur Leistungsübersicht bespricht Ihr(e) Kundenberaterin oder Kundenberater der BARMER mit Ihnen.</p>
</div>
</div>
</div>
<div class="modal__actions">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Jetzt beraten lassen
</h4>
<div class="teaser__button-wrapper">
<a class="a-btn a-btn btn--primary" href="" title="">
Kontaktformular
</a>
<a class="a-btn a-btn btn--secondary" href="tel:+498003331010" title="">
0800 3331010
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal__background" aria-hidden="true"></div>
</div>
</template>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<div class="teaser__label" aria-label="Tarif M"><span aria-hidden="true">M</span></div>
<h4 class="teaser__headline">Einfach mehr</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/960/ein-mann-sitzt-mit-notebook-und-fuesse-hoch-am-schreibtisch.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/1x1/eltern-kind-blumen-1000x1000.jpg" width="100" height="100">
<img src="../../images/1x1/eltern-kind-blumen-1000x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__subline">
Bis zu <strong>600 Euro</strong> Prämie in 3 Jahren
</div>
<div class="teaser__text">
<div class="a-richtext">
<h4>Die gesunde Prämie</h4>
<p>Ihrer Gesundheit schenken wir ein Guthaben für das ganze Jahr.</p>
<p><strong>Maximale Nachzahlung 40 €*</strong></p>
<p class="bm-small"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
<button class="a-btn btn--secondary js-modal-by-ttag-trigger" type="button">Mehr zum M-Tarif</button>
<template class="teaser__modal js-modal-by-ttag-target">
<div class="m-modal modal--comparison js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
<div class="modal__body">
<button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>
<div class="modal__title">
<h3>Ihr M-Tarif - Einfach Mehr</h3>
</div>
<div class="modal__text">
<div class="modal__text--intro a-richtext richtext--article">
<p>Außer für Ihre Vorsorge- und Früherkennungsuntersuchungen gehen Sie nur selten zum Arzt? Dann bekommen Sie mit dem Tarif <strong>Einfach Mehr</strong> bis zu 600 € Prämie über die gesamte Laufzeit von 3 Jahren, mit einer jährlichen Auszahlung von maximal 200 €.</p>
<h3>Fit bleiben. Prämie sichern.</h3>
<p>Natürlich gilt weiterhin unser vollständiger Gesundheitsschutz für Sie. Der <strong>Einfach Mehr</strong> Tarif ändert daran nichts! Benötigen Sie trotz voller Gesundheit doch mal Unterstützung aus dem grau markierten Bereich, verringert sich Ihre Prämie lediglich um 20 € pro Leistung️. Ihre Nachzahlung ist auf maximal 40 € pro Jahr begrenzt.</p>
</div>
<div class="modal__text--facts">
<div class="m-list list--checkmark-bullets">
<h4 class="list__headline">
Volle Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuchen ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfungen (inkl. Auslandsimpfungen)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge- und Früherkennungsuntersuchungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Zahnärztlichen Leistungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Leistungen für Familienversicherte</span>
</li>
</ul>
</div>
<div class="m-list list--minus-bullets">
<h4 class="list__headline">
Abzüge bei<sup>**</sup>
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuchen mit Rezept für Medikamente, Heil-oder Hilfsmittel (je 20 € für Arztbesuch und Verordnung)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankenhausbehandlung (20€ je Tag)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankengeld (20€ je Tag)</span>
</li>
</ul>
</div>
</div>
<div class="modal__text--calculation-examples">
<h3>Rechenbeispiele</h3>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 1: Volle Prämie
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Impfung: Tetanusimpfung</span><span class="list__item-amount">0 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie</span>
<span class="result-line__amount result-line__amount--positive">200 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 2: Reduzierte Prämie
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">Reduktion der Prämie bei</span>Krankenhausbehandlung: 2 Tage (mal 20€)</span><span class="list__item-amount">-40 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie</span>
<span class="result-line__amount result-line__amount--positive">160 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
Beispiel 3: Keine Prämie (Nachzahlung)
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon " aria-hidden="true"></i>
<span class="list__item-description">Maximale Prämie</span><span class="list__item-amount">200 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">keine Reduktion der Prämie bei</span>Arztbesuch ohne Rezept</span><span class="list__item-amount">0 Euro</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span class="list__item-description"><span class="sr-only">Reduktion der Prämie bei</span>Krankenhausbehandlung: 20 Tage (mal 20€)</span><span class="list__item-amount">-400 Euro</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Maximale Nachzahlung<sup>*</sup></span>
<span class="result-line__amount">-40 Euro</span>
</div>
</div>
<div class="modal__text--footnotes a-richtext richtext--article">
<p>Tipp: Zahlen Sie Ihre rezeptpflichtigen Medikamente selbst (z.B. Antibiotikum 5,99 €), können Sie sparen und Ihre Prämie schonen.</br><sup>*</sup>Egal wie viele Leistungen Sie in Anspruch nehmen: Die Nachzahlung beträgt nie mehr als 40 € pro Jahr.</br><sup>**</sup>Detailfragen zur Leistungsübersicht bespricht Ihr(e) Kundenberaterin oder Kundenberater der BARMER mit Ihnen.</p>
</div>
</div>
</div>
<div class="modal__actions">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Jetzt beraten lassen
</h4>
<div class="teaser__button-wrapper">
<a class="a-btn a-btn btn--primary" href="" title="">
Kontaktformular
</a>
<a class="a-btn a-btn btn--secondary" href="tel:+498003331010" title="">
0800 3331010
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal__background" aria-hidden="true"></div>
</div>
</template>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="a-richtext richtext--article">
<h2>Comparison Slider, 2 Elements</h2>
</div>
<div class="o-slider glide js-slider-init slider--comparison js-equal-height-segments" data-slider-type="comparison" data-glide-config="{"autoplay": }" data-equal-height-segments="{ "root": ".teaser--comparison", "segments": [ ".teaser__header", ".teaser__subline", ".teaser__text", ".teaser__footer" ] }" data-start-at-mobile="1">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--comparison" data-glide-el="track">
<ul class="glide__slides slider__slides--comparison" aria-label="Karusell mit 2 Bilder">
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison-placeholder">
<div class="teaser__text">
<div class="a-richtext">
<p>Wenn Sie bei der BARMER versichert sind, wenige Leistungen in Anspruch nehmen, können Sie einen Geld-Zurück-Tarif buchen.</p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<div class="teaser__label" aria-label="Tarif S"><span aria-hidden="true">S</span></div>
<h4 class="teaser__headline">Einfach sicher</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__subline">
Bis zu <strong>400 Euro</strong> Prämie in 3 Jahren
</div>
<div class="teaser__text">
<div class="a-richtext">
<h4>Ihr Null-Risiko Tarif</h4>
<p>Bleiben Sie gesund, erstatten wir Ihnen einen Teil Ihrer Beträge</p>
<p><strong>Keine Nachzahlung*</strong></p>
<p class="bm-small"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
<button class="a-btn btn--secondary js-modal-by-ttag-trigger" type="button">Mehr zum S-Tarif</button>
<template class="teaser__modal js-modal-by-ttag-target">
<div class="m-modal modal--comparison js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
<div class="modal__body">
<button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>
<div class="modal__title">
<h3>Ihr S-Tarif - Einfach Sicher</h3>
</div>
<div class="modal__text">
<div class="modal__text--intro a-richtext richtext--article">
<p>Nehmen Sie das ganze Jahr außer Ihren Vorsorge - und Früherkennungsuntersuchungen keine Leistungen in Anspruch, erstatten wir Ihnen
<strong>80 € im ersten Jahr, 120 € im zweiten Jahr, und 200 € im dritten Jahr.</strong>
</p>
<h3>Kein finanzielles Risiko</h3>
<p>Mit diesem Tarif gehen Sie keinerlei Risiko ein und müssen auf nichts verzichten. Sie bekommen entweder die gesamte Prämie, wenn Sie gesund bleiben, oder Ihre Prämie entfällt, wenn Sie eine Leistung aus dem grau markierten Bereich Bereich in Anspruch nehmen.<br />Holen Sie sich Ihren Wahltarif und sparen Sie Beiträge! Einfach Antragsformular ausfüllen und bei der Barmer abgeben.</p>
</div>
<div class="modal__text--facts">
<div class="m-list list--checkmark-bullets">
<h4 class="list__headline">
Volle Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuche ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfungen (inkl. Auslandsimpfungen)</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge- und Früherkennungsuntersuchungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Zahnärztliche Leistungen</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Leistungen für minderjährige Familienversicherte</span>
</li>
</ul>
</div>
<div class="m-list list--minus-bullets">
<h4 class="list__headline">
Ausfall der Prämie bei
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Arztbesuche mit Rezept für Medikamente, Heil- oder Hilfsmittel</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankenhausbehandlung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span>Krankengeld</span>
</li>
</ul>
</div>
</div>
<div class="modal__text--calculation-examples">
<h3>Rechenbeispiele</h3>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
1. Jahr: Volle Prämie für 1. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Impfung: Tetanusimpfung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuch mit Rezept: Antibiotikum selbst bezahlt<sup>*</sup></span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 1. Jahr</span>
<span class="result-line__amount result-line__amount--positive">80 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
2. Jahr: Volle Prämie für 2. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Vorsorge: Gesundheits-Checkup</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span>Arztbesuch ohne Rezept</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 2. Jahr</span>
<span class="result-line__amount result-line__amount--positive">120 Euro</span>
</div>
</div>
<div class="modal__text--calculation-example">
<div class="m-list ">
<h4 class="list__headline">
3. Jahr: Keine Prämie für 3. Jahr
</h4>
<ul class="a-list-basic ">
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Vorsorge: Zahnärztliche Leistung</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Vorsorge: Gesundheits-Checkup</span>
</li>
<li class="list__item ">
<i class="a-icon icon--check" aria-hidden="true"></i>
<span><span class="sr-only">kein Verlust der Prämie bei</span>Arztbesuch ohne Rezept</span>
</li>
<li class="list__item ">
<i class="a-icon icon--minus" aria-hidden="true"></i>
<span><span class="sr-only">Verlust der Prämie bei</span>Heilmittel: Physiotherapie Verordnung</span>
</li>
</ul>
</div>
<div class="result-line">
<span class="result-line__title">Ausgezahlte Prämie im 3. Jahr</span>
<span class="result-line__amount">0 Euro</span>
</div>
</div>
<div class="modal__text--footnotes a-richtext richtext--article">
<p><sup>*</sup>Tipp: Zahlen Sie Ihre rezeptpflichtigen Medikamente selbst (z.B. Antibiotikum 5,99 €), können Sie sparen und Ihre Prämie schonen.</br><sup>**</sup>Detailfragen zur Leistungsübersicht bespricht Ihr(e) Kundenberaterin oder Kundenberater der BARMER mit Ihnen.</p>
</div>
</div>
</div>
<div class="modal__actions">
<div class="o-teaser ">
<div class="teaser__content">
<h4 class="teaser__headline">
Jetzt beraten lassen
</h4>
<div class="teaser__button-wrapper">
<a class="a-btn a-btn btn--primary" href="" title="">
Kontaktformular
</a>
<a class="a-btn a-btn btn--secondary" href="tel:+498003331010" title="">
0800 3331010
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal__background" aria-hidden="true"></div>
</div>
</template>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="a-richtext richtext--article">
<h2>Comparison Slider, 1 Element</h2>
</div>
<div class="o-slider glide js-slider-init slider--comparison js-equal-height-segments" data-slider-type="comparison" data-glide-config="{"autoplay": }" data-equal-height-segments="{ "root": ".teaser--comparison", "segments": [ ".teaser__header", ".teaser__subline", ".teaser__text", ".teaser__footer" ] }" data-start-at-mobile="1">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--comparison" data-glide-el="track">
<ul class="glide__slides slider__slides--comparison" aria-label="Karusell mit 1 Bilder">
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison-placeholder">
<div class="teaser__text">
<div class="a-richtext">
<p>Wenn Sie bei der BARMER versichert sind, wenige Leistungen in Anspruch nehmen, können Sie einen Geld-Zurück-Tarif buchen.</p>
</div>
</div>
<div class="teaser__footer">
Ihr vollständiger Barmer Gesundheitsschutz
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="a-richtext richtext--article">
<h2>Comparison Slider, reduced content</h2>
</div>
<div class="o-slider glide js-slider-init slider--comparison js-equal-height-segments" data-slider-type="comparison" data-glide-config="{"autoplay": }" data-equal-height-segments="{ "root": ".teaser--comparison", "segments": [ ".teaser__header", ".teaser__subline", ".teaser__text", ".teaser__footer" ] }" data-start-at-mobile="0">
<h2 class="slider__headline slider__headline--h3">Comparison Slider Simple</h2>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--comparison" data-glide-el="track">
<ul class="glide__slides slider__slides--comparison" aria-label="Karusell mit 5 Bilder">
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison">
<div class="teaser__header">
<h4 class="teaser__headline">Digitale Kurse</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
<div class="a-richtext">
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><strong><abbr tabindex="0" title="zum Beispiel">z. B.</abbr> Bewegungskurs</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Ernährungskurs</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Nichtraucherkurs</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Entspannungskurs</strong></li>
</ul>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<h4 class="teaser__headline">Fitness</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
<div class="a-richtext">
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><strong><abbr tabindex="0" title="zum Beispiel">z. B.</abbr> Fitnessstudio</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Hochschulsport</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Betriebssport</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Rückbildungsgymnastik</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Teilnahme an Sportveranstaltungen</strong></li>
</ul>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<h4 class="teaser__headline">Sportvereine</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
<div class="a-richtext">
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><strong><abbr tabindex="0" title="zum Beispiel">z. B.</abbr> Schwimmverein</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Fußballverein</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Tanzverein</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Kampfsportverein</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Leichtathletikverein</strong></li>
</ul>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<h4 class="teaser__headline">Kinder</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
<div class="a-richtext">
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><strong><abbr tabindex="0" title="zum Beispiel">z. B.</abbr> Kinderturnen</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Karate-Kurs</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Fußballtraining</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Schwimmkurse</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>U-Untersuchungen</strong></li>
</ul>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<h4 class="teaser__headline">Vorsorge</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
<div class="a-richtext">
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><strong><abbr tabindex="0" title="zum Beispiel">z. B.</abbr> Kinder- und Jugenduntersuchung</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Haut-Check</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Gesundheits-Check-Up</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Krebsvorsorge</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Schutzimpfungen</strong></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
{{ render '@slider--stage' merge=true }}
{{ render '@slider--targetgroup' merge=true }}
{{ render '@advertorial--with-slider' merge=true }}
{{ render '@advertorial--with-slider-landscape' merge=true }}
{{ render '@advertorial--with-slider-landscape-left' merge=true }}
{{ render '@advertorial--image-landscape-small' merge=true }}
{{ render '@advertorial--image-landscape-small-left' merge=true }}
{{ render '@slider--video-and-topics' merge=true }}
{{ render '@slider--video-and-topics-with-2-teasers' merge=true }}
{{ render '@slider--video-and-topics-with-video-teaser' partials.videoSlider1 merge=true }}
{{ render '@slider--video-and-topics-with-video-teaser' partials.videoSlider2 merge=true }}
{{ render '@slider--review' partials.reviewSlider merge=true }}
{{ render '@slider--icon-image' partials.iconImage1 merge=true }}
{{ render '@slider--icon-image' partials.iconImageSlideLT5 merge=true }}
{{ render '@slider--icon-image-with-1x1' merge=true }}
{{ render '@selection-wrapper' partials.selectionWrapper merge=true }}
{{ render '@slider--picture-gallery' partials.pictureGallery merge=true }}
{{ render '@slider--picture-gallery-vertical' merge=true }}
{{ render '@slider--picture-gallery-mixed' merge=true }}
{{ render '@slider--picture-gallery-original-size' merge=true }}
{{ render '@slider--picture-gallery-cs-d' merge=true }}
{{ render '@slider--picture-gallery-with-download' merge=true }}
{{ render '@slider--picture-gallery-cs-d-with-download' merge=true }}
{{ render '@slider--stage-with-docking-and-seal' partials.dockingAndSealButNotHeidiKlum merge=true }}
{{ render '@slider--stage-small-with-docking-and-seal' partials.smallDockingAndSeal merge=true }}
{{ render '@slider--stage-with-testimonial' partials.stageTestimonial merge=true }}
{{ render '@slider--stage-small-with-testimonial' partials.stageSmallTestimonial merge=true }}
{{render '@how-to-module' merge=true}}
{{render '@how-to-module--3-steps' merge=true}}
{{render '@how-to-module--4-steps' merge=true}}
{{render '@how-to-module--cs-a-3-steps' merge=true}}
{{render '@how-to-module--cs-b-3-steps' merge=true}}
{{render '@how-to-module--cs-c-3-steps' merge=true}}
{{render '@how-to-module--cs-d-3-steps' merge=true}}
<div class="a-richtext richtext--article"><h2>Comparison Slider, 5 Elements</h2></div>
{{render '@slider--comparison' partials.sliderComparisonFive merge=true}}
<div class="a-richtext richtext--article"><h2>Comparison Slider, 4 Elements</h2></div>
{{render '@slider--comparison' partials.sliderComparisonFour merge=true}}
<div class="a-richtext richtext--article"><h2>Comparison Slider, 3 Elements</h2></div>
{{render '@slider--comparison' partials.sliderComparisonThree merge=true}}
<div class="a-richtext richtext--article"><h2>Comparison Slider, 2 Elements</h2></div>
{{render '@slider--comparison' partials.sliderComparisonTwo merge=true}}
<div class="a-richtext richtext--article"><h2>Comparison Slider, 1 Element</h2></div>
{{render '@slider--comparison' partials.sliderComparisonOne merge=true}}
<div class="a-richtext richtext--article"><h2>Comparison Slider, reduced content</h2></div>
{{render '@slider--comparison--simple' partials.sliderComparisonFive merge=true}}
{
"switches": {
"hasContactFlyout": "true"
},
"content": {
"alertText": "Die Sitzung wurde erfolgreich verlängert"
},
"partials": {
"sessionMetadata": {
"content": {
"expiredDialogId": "bm-dialog-session-expired",
"expiringDialogId": "bm-dialog-session-expiring"
}
},
"expiring": {
"switches": {
"hidden": true,
"secondaryButton": true
},
"content": {
"id": "bm-dialog-session-expiring",
"text": "In <span class=\"js-session-timer\">5</span> Minuten endet ihre Sitzung und Sie werden automatisch ausgeloggt."
},
"partials": {
"primaryButton": {
"content": {
"label": "Login verlängern"
}
},
"secondaryButton": {
"content": {
"label": "Logout"
}
}
}
},
"expired": {
"switches": {
"hidden": true
},
"content": {
"id": "bm-dialog-session-expired"
}
},
"modalVideo": {
"switches": {
"hidden": true
},
"content": {
"id": "bm-video"
},
"viewtypes": {
"specifier": "modal--video"
},
"partials": {
"consent": {
"viewtypes": {
"specifier": "consent--in-modal"
}
},
"videoFigure": {
"switches": {
"hasHeadline": false,
"hasFigcaption": false,
"hasVideo": false
}
}
}
},
"iconImage1": {
"switches": {
"slideCount": 12,
"hasHeadline": true,
"hasDetailText": true
},
"content": {
"title": "Bilder- und Iconleiste > 5 Elemente",
"detailText": "Es gibt fast nichts Schöneres, als von anderen gelobt zu werden. Die zahlreichen Testsiegel und Auszeichnungen belegen seit Jahren die hohe Qualität der BARMER."
}
},
"iconImageSlideLT5": {
"switches": {
"slideCount": 4,
"hasHeadline": true,
"hasDetailText": true
},
"content": {
"title": "Bilder- und Iconleiste ≤ 4 Elemente",
"detailText": "Es gibt fast nichts Schöneres, als von anderen gelobt zu werden. Die zahlreichen Testsiegel und Auszeichnungen belegen seit Jahren die hohe Qualität der BARMER."
}
},
"videoSlider1": {
"partials": {
"consentToggle": {
"content": {
"id": "toggle-checkbox-1"
}
}
}
},
"videoSlider2": {
"partials": {
"consentToggle": {
"content": {
"id": "toggle-checkbox-2"
}
}
}
},
"sliderComparisonFive": {
"switches": {
"slideCount": 5
}
},
"sliderComparisonFour": {
"switches": {
"slideCount": 4
}
},
"sliderComparisonThree": {
"switches": {
"slideCount": 3
}
},
"sliderComparisonTwo": {
"switches": {
"slideCount": 2
}
},
"sliderComparisonOne": {
"switches": {
"slideCount": 1
}
},
"stageVideo": {
"switches": {
"hasHeadline": false,
"hasDetailText": false,
"hasArrowsBottom": true,
"hasBullets": true,
"slideCount": 3
},
"viewtypes": {
"specifier": "slider--stage",
"sliderType": "stage",
"arrowsType": "slider-arrows--chevron",
"bulletsType": "slider-bullets--disc"
},
"content": {},
"partials": {
"includedItemType": "teaser--stage-video",
"slide": [
{
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-a"
},
"content": {},
"partials": {
"badgeImage": {
"type": "badge-image--default"
},
"video": {
"content": {
"sources": [
{
"src": "../../videos/barmer-video-stark-8x3.mp4",
"type": "video/mp4"
}
]
}
},
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg"
}
],
"img": {
"src": "../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg",
"alt": ""
}
}
}
}
},
{
"switches": {},
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-b"
},
"content": {},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-kind.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/36x11/dummy-slider-landingpage-pool.jpg"
}
],
"img": {
"src": "../../images/36x11/dummy-slider-landingpage-pool.jpg",
"alt": ""
}
}
}
}
},
{
"switches": {},
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-c"
},
"content": {},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-tablet.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/36x11/mr-right.jpg"
}
],
"img": {
"src": "../../images/36x11/mr-right.jpg",
"alt": ""
}
}
}
}
}
]
}
}
}
}
No notes defined.