Barmer Fractal

Overview Components With Badge Images 

<style>
    .page>.teaser--bannermodule {
        color: #d6d9dc;
    }
</style>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - Badge Image Default Top

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-badge-image-default-top</p>
    </div>

</div>

<div class="o-teaser teaser--stage cs--bg-image-a">

    <div class="teaser__image">
        <div class="a-badge-image badge-image--with-spacing badge-image--top">
            <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

        </div>

        <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="Dies ist ein alternativ Text">
        </picture>

    </div>

    <div class="teaser__content">

        <div class="teaser__headline-wrapper">
            <div class="teaser__headline">
                Stark, wenn Du uns brauchst - Unser Vorsprung für Deine Gesundheit

            </div>
        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--primary" href="http://heute.de" title="">
                Mitglied werden
            </a>

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - Badge Image Default Center

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-badge-image-default-center</p>
    </div>

</div>

<div class="o-teaser teaser--stage cs--bg-image-a">

    <div class="teaser__image">
        <div class="a-badge-image badge-image--with-spacing badge-image--center">
            <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

        </div>

        <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="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>

    <div class="teaser__content">

        <div class="teaser__headline-wrapper">
            <div class="teaser__headline">
                Stark, wenn Du uns brauchst - Unser Vorsprung für Deine Gesundheit

            </div>
        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--primary" href="http://heute.de" title="">
                Mitglied werden
            </a>

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - Badge Image Default Bottom

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-badge-image-default-bottom</p>
    </div>

</div>

<div class="o-teaser teaser--stage cs--bg-image-a">

    <div class="teaser__image">
        <div class="a-badge-image badge-image--with-spacing badge-image--bottom">
            <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

        </div>

        <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="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>

    <div class="teaser__content">

        <div class="teaser__headline-wrapper">
            <div class="teaser__headline">
                Stark, wenn Du uns brauchst - Unser Vorsprung für Deine Gesundheit

            </div>
        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--primary" href="http://heute.de" title="">
                Mitglied werden
            </a>

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - Badge Image No Spacing Top

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-badge-image-no-spacing-top</p>
    </div>

</div>

<div class="o-teaser teaser--stage cs--bg-image-a">

    <div class="teaser__image">
        <div class="a-badge-image  badge-image--top">
            <img src="../../images/teaser--stoerer-2.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

        </div>

        <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="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>

    <div class="teaser__content">

        <div class="teaser__headline-wrapper">
            <div class="teaser__headline">
                Stark, wenn Du uns brauchst - Unser Vorsprung für Deine Gesundheit

            </div>
        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--primary" href="http://heute.de" title="">
                Mitglied werden
            </a>

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - Badge Image No Spacing Center

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-badge-image-no-spacing-center</p>
    </div>

</div>

<div class="o-teaser teaser--stage cs--bg-image-a">

    <div class="teaser__image">
        <div class="a-badge-image  badge-image--center">
            <img src="../../images/teaser--stoerer-2.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

        </div>

        <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="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>

    <div class="teaser__content">

        <div class="teaser__headline-wrapper">
            <div class="teaser__headline">
                Stark, wenn Du uns brauchst - Unser Vorsprung für Deine Gesundheit

            </div>
        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--primary" href="http://heute.de" title="">
                Mitglied werden
            </a>

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - Badge Image No Spacing Bottom

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-badge-image-no-spacing-bottom</p>
    </div>

</div>

<div class="o-teaser teaser--stage cs--bg-image-a">

    <div class="teaser__image">
        <div class="a-badge-image  badge-image--bottom">
            <img src="../../images/teaser--stoerer-2.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

        </div>

        <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="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>

    <div class="teaser__content">

        <div class="teaser__headline-wrapper">
            <div class="teaser__headline">
                Stark, wenn Du uns brauchst - Unser Vorsprung für Deine Gesundheit

            </div>
        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--primary" href="http://heute.de" title="">
                Mitglied werden
            </a>

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - Badge Image Default Top Hidden Sm

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-badge-image-default-top-hidden-sm</p>
    </div>

</div>

<div class="o-teaser teaser--stage cs--bg-image-a">

    <div class="teaser__image">
        <div class="a-badge-image badge-image--with-spacing badge-image--top badge-image--hidden-sm">
            <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

        </div>

        <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="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>

    <div class="teaser__content">

        <div class="teaser__headline-wrapper">
            <div class="teaser__headline">
                Stark, wenn Du uns brauchst - Unser Vorsprung für Deine Gesundheit

            </div>
        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--primary" href="http://heute.de" title="">
                Mitglied werden
            </a>

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - Badge Image Default Top Hidden Sm-Md

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-badge-image-default-top-hidden-sm-md</p>
    </div>

</div>

<div class="o-teaser teaser--stage cs--bg-image-a">

    <div class="teaser__image">
        <div class="a-badge-image badge-image--with-spacing badge-image--top badge-image--hidden-sm-md">
            <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

        </div>

        <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="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>

    <div class="teaser__content">

        <div class="teaser__headline-wrapper">
            <div class="teaser__headline">
                Stark, wenn Du uns brauchst - Unser Vorsprung für Deine Gesundheit

            </div>
        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--primary" href="http://heute.de" title="">
                Mitglied werden
            </a>

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Testimonial - Badge Image Default Top

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@teaser--stage-with-testimonial-and-badge-image-default-top</p>
    </div>

</div>

<div class="o-teaser teaser--stage cs--bg-image-a">

    <div class="teaser__image">
        <div class="a-badge-image badge-image--with-spacing badge-image--top">
            <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

        </div>

        <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="Dies ist ein alternativ Text" 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 & Badge Image!

            </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">
            &ndash; 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>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Slider Targetgroup - Badge Images all states

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@slider--targetgroup-with-badge-images</p>
    </div>

</div>

<div class="o-slider glide js-slider-init slider--targetgroup cs--bg-image-a" data-slider-type="targetgroup" data-glide-config="{&quot;autoplay&quot;: 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">
                                <div class="a-badge-image badge-image--with-spacing badge-image--top">
                                    <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                                </div>

                                <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">
                                <div class="a-badge-image badge-image--with-spacing badge-image--center">
                                    <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                                </div>

                                <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">
                                <div class="a-badge-image badge-image--with-spacing badge-image--bottom">
                                    <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                                </div>

                                <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">
                                <div class="a-badge-image  badge-image--top">
                                    <img src="../../images/teaser--stoerer-2.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                                </div>

                                <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">
                                <div class="a-badge-image  badge-image--center">
                                    <img src="../../images/teaser--stoerer-2.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                                </div>

                                <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">
                                <div class="a-badge-image  badge-image--bottom">
                                    <img src="../../images/teaser--stoerer-2.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                                </div>

                                <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-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Accordion Stage - Badge Images all states

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@accordion-stage--with-badge-image</p>
    </div>

</div>

<div class="o-accordion-stage js-accordion-stage-init cs--a" data-autoplay="false" data-start-at="0">
    <ul class="accordion-stage__list">
        <li class="accordion-stage__item">
            <div class="o-card " id="card-default-1">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-1">
                        Default Top
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

                    <div class="card__cta-wrapper">
                        <a class="a-btn btn--conversion" href="" title="">
                            Jetzt entdecken
                        </a>

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image badge-image--with-spacing badge-image--top">
                        <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-kind.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-kind.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-kind.jpg">
                        <img src="../../images/4x3/mann-mit-kind.jpg" alt="" loading="lazy">
                    </picture>

                </div>
            </div>

        </li>
        <li class="accordion-stage__item">
            <div class="o-card " id="card-default-2">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-2">
                        Default Center
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

                    <div class="card__cta-wrapper">
                        <a class="a-btn btn--conversion" href="" title="">
                            Jetzt entdecken
                        </a>

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image badge-image--with-spacing badge-image--center">
                        <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-kind.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-kind.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-kind.jpg">
                        <img src="../../images/4x3/mann-mit-kind.jpg" alt="" loading="lazy">
                    </picture>

                </div>
            </div>

        </li>
        <li class="accordion-stage__item">
            <div class="o-card " id="card-default-3">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-3">
                        Default Bottom
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

                    <div class="card__cta-wrapper">
                        <a class="a-btn btn--conversion" href="" title="">
                            Jetzt entdecken
                        </a>

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image badge-image--with-spacing badge-image--bottom">
                        <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-kind.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-kind.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-kind.jpg">
                        <img src="../../images/4x3/mann-mit-kind.jpg" alt="" loading="lazy">
                    </picture>

                </div>
            </div>

        </li>
        <li class="accordion-stage__item">
            <div class="o-card " id="card-default-4">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-4">
                        No Spacing Top
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

                    <div class="card__cta-wrapper">
                        <a class="a-btn btn--conversion" href="" title="">
                            Jetzt entdecken
                        </a>

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image  badge-image--top">
                        <img src="../../images/teaser--stoerer-2.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-kind.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-kind.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-kind.jpg">
                        <img src="../../images/4x3/mann-mit-kind.jpg" alt="" loading="lazy">
                    </picture>

                </div>
            </div>

        </li>
        <li class="accordion-stage__item">
            <div class="o-card " id="card-default-5">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-5">
                        Default Hidden SM
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

                    <div class="card__cta-wrapper">
                        <a class="a-btn btn--conversion" href="" title="">
                            Jetzt entdecken
                        </a>

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image badge-image--with-spacing badge-image--hidden-sm">
                        <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-kind.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-kind.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-kind.jpg">
                        <img src="../../images/4x3/mann-mit-kind.jpg" alt="" loading="lazy">
                    </picture>

                </div>
            </div>

        </li>
        <li class="accordion-stage__item">
            <div class="o-card " id="card-default-6">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-6">
                        Default Hidden Sm-Md
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

                    <div class="card__cta-wrapper">
                        <a class="a-btn btn--conversion" href="" title="">
                            Jetzt entdecken
                        </a>

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image badge-image--with-spacing badge-image--hidden-sm-md">
                        <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-kind.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-kind.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-kind.jpg">
                        <img src="../../images/4x3/mann-mit-kind.jpg" alt="" loading="lazy">
                    </picture>

                </div>
            </div>

        </li>
    </ul>
    <div class="accordion-stage__image-wrapper">

    </div>
</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Tab Stage - Badge Images all states

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@tab-stage--default-with-badge-images</p>
    </div>

</div>

<div class="o-tab-stage tab-stage--default js-tab-stage-init">
    <div class="tab-stage__images">
        <div class="tab-stage__images-wrapper is-selected">
            <div class="a-badge-image badge-image--with-spacing badge-image--top">
                <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

            </div>

            <picture class="a-picture ">
                <source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
                <source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
                <img src="../../images/16x9/barmer-app-yeah.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
            </picture>

        </div>
        <div class="tab-stage__images-wrapper " aria-hidden="true">
            <div class="a-badge-image badge-image--with-spacing badge-image--center">
                <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

            </div>

            <picture class="a-picture ">
                <source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
                <source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
                <img src="../../images/16x9/barmer-app-yeah.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
            </picture>

        </div>
        <div class="tab-stage__images-wrapper " aria-hidden="true">
            <div class="a-badge-image badge-image--with-spacing badge-image--bottom">
                <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

            </div>

            <picture class="a-picture ">
                <source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
                <source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
                <img src="../../images/16x9/barmer-app-yeah.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
            </picture>

        </div>
        <div class="tab-stage__images-wrapper " aria-hidden="true">
            <div class="a-badge-image  badge-image--top">
                <img src="../../images/teaser--stoerer-2.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

            </div>

            <picture class="a-picture ">
                <source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
                <source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
                <img src="../../images/16x9/barmer-app-yeah.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
            </picture>

        </div>
    </div>

    <div class="o-selection-wrapper selection-wrapper--tab-stage">

        <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">Yoga Kurs</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">Fitness Studio</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">Kinder Karate</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">Professionelle Zahnreinigung</button>

                </li>
            </ul>

        </div>

        <div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-1" aria-labelledby="btn-tab-1">

            <div class="o-teaser teaser--big-headline">

                <h2 class="teaser__headline">
                    Bonuspunkten<br />beim Yoga.

                </h2>

                <div class="teaser__text">
                    Yoga macht nicht nur einen schlanken Daumen. Mit der Verwendung einer glutenfreien Yogamatte, fördern sie auch Ihre Darmbakterien.

                </div>

                <div class="teaser__button-wrapper">
                    <a class="a-btn btn--conversion" href="#" title="">
                        Jetzt App downloaden
                    </a>

                    <a class="a-btn btn--primary btn--login" href="#" title="">
                        Meine BARMER<i class="a-icon icon--profile" aria-hidden="true"></i>
                    </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 teaser--big-headline">

                <h2 class="teaser__headline">
                    Bonuspunkten beim Fitness Studio.

                </h2>

                <div class="teaser__text">
                    Mal wieder keine glutenfreie Yogamatte genommen? Tauchen Sie mit Hilfe der „Meine Barmer“-App und ihren Bonuspunkten für einige Monate unter, ohne von Ihren Bekannten entdeckt zu werden.

                </div>

                <div class="teaser__button-wrapper">
                    <a class="a-btn btn--conversion" href="#" title="">
                        Jetzt App downloaden
                    </a>

                    <a class="a-btn btn--primary btn--login" href="#" title="">
                        Meine BARMER<i class="a-icon icon--profile" aria-hidden="true"></i>
                    </a>

                </div>

            </div>

        </div>
        <div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-3" aria-labelledby="btn-tab-3" hidden>

            <div class="o-teaser teaser--big-headline">

                <h2 class="teaser__headline">
                    Bonuspunkten beim Kinder Karate.

                </h2>

                <div class="teaser__text">
                    Verteidigen Sie sich gegen überhöhte Taschengeldforderungen ihrer Kinder.

                </div>

                <div class="teaser__button-wrapper">
                    <a class="a-btn btn--conversion" href="#" title="">
                        Jetzt App downloaden
                    </a>

                    <a class="a-btn btn--primary btn--login" href="#" title="">
                        Meine BARMER<i class="a-icon icon--profile" aria-hidden="true"></i>
                    </a>

                </div>

            </div>

        </div>
        <div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-4" aria-labelledby="btn-tab-4" hidden>

            <div class="o-teaser teaser--big-headline">

                <h2 class="teaser__headline">
                    Bonuspunkten<br />beim Zahnarzt.

                </h2>

                <div class="teaser__text">
                    Die Bonuspunkte wurden mit Experten aus der Zahnmedizin entwickelt. Sowohl die Wirksamkeit der einzelnen Punkte als auch der Nutzen werden dadurch wissenschaftlich belegt: sofortige und langanhaltende Schmerzlinderung, klinisch bestätigte Formel und geeignet für tägliche Anwendung.

                </div>

                <div class="teaser__button-wrapper">
                    <a class="a-btn btn--conversion" href="#" title="">
                        Jetzt App downloaden
                    </a>

                    <a class="a-btn btn--primary btn--login" href="#" title="">
                        Meine BARMER<i class="a-icon icon--profile" aria-hidden="true"></i>
                    </a>

                </div>

            </div>

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Tab Stage Reverse - Badge Images all states

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@tab-stage--reverse-with-badge-images</p>
    </div>

</div>

<div class="o-tab-stage tab-stage--reverse js-tab-stage-init">
    <div class="tab-stage__images">
        <div class="tab-stage__images-wrapper is-selected">
            <div class="a-badge-image badge-image--with-spacing badge-image--top">
                <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

            </div>

            <picture class="a-picture ">
                <source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
                <source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
                <img src="../../images/16x9/barmer-app-yeah.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
            </picture>

        </div>
        <div class="tab-stage__images-wrapper " aria-hidden="true">
            <div class="a-badge-image badge-image--with-spacing badge-image--center">
                <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

            </div>

            <picture class="a-picture ">
                <source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
                <source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
                <img src="../../images/16x9/barmer-app-yeah.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
            </picture>

        </div>
        <div class="tab-stage__images-wrapper " aria-hidden="true">
            <div class="a-badge-image badge-image--with-spacing badge-image--bottom">
                <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

            </div>

            <picture class="a-picture ">
                <source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
                <source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
                <img src="../../images/16x9/barmer-app-yeah.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
            </picture>

        </div>
        <div class="tab-stage__images-wrapper " aria-hidden="true">
            <div class="a-badge-image  badge-image--top">
                <img src="../../images/teaser--stoerer-2.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

            </div>

            <picture class="a-picture ">
                <source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
                <source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
                <img src="../../images/16x9/barmer-app-yeah.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
            </picture>

        </div>
    </div>

    <div class="o-selection-wrapper selection-wrapper--tab-stage">

        <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">Yoga Kurs</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">Fitness Studio</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">Kinder Karate</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">Professionelle Zahnreinigung</button>

                </li>
            </ul>

        </div>

        <div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-1" aria-labelledby="btn-tab-1">

            <div class="o-teaser teaser--big-headline">

                <h2 class="teaser__headline">
                    Bonuspunkten<br />beim Yoga.

                </h2>

                <div class="teaser__text">
                    Yoga macht nicht nur einen schlanken Daumen. Mit der Verwendung einer glutenfreien Yogamatte, fördern sie auch Ihre Darmbakterien.

                </div>

                <div class="teaser__button-wrapper">
                    <a class="a-btn btn--conversion" href="#" title="">
                        Jetzt App downloaden
                    </a>

                    <a class="a-btn btn--primary btn--login" href="#" title="">
                        Meine BARMER<i class="a-icon icon--profile" aria-hidden="true"></i>
                    </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 teaser--big-headline">

                <h2 class="teaser__headline">
                    Bonuspunkten beim Fitness Studio.

                </h2>

                <div class="teaser__text">
                    Mal wieder keine glutenfreie Yogamatte genommen? Tauchen Sie mit Hilfe der „Meine Barmer“-App und ihren Bonuspunkten für einige Monate unter, ohne von Ihren Bekannten entdeckt zu werden.

                </div>

                <div class="teaser__button-wrapper">
                    <a class="a-btn btn--conversion" href="#" title="">
                        Jetzt App downloaden
                    </a>

                    <a class="a-btn btn--primary btn--login" href="#" title="">
                        Meine BARMER<i class="a-icon icon--profile" aria-hidden="true"></i>
                    </a>

                </div>

            </div>

        </div>
        <div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-3" aria-labelledby="btn-tab-3" hidden>

            <div class="o-teaser teaser--big-headline">

                <h2 class="teaser__headline">
                    Bonuspunkten beim Kinder Karate.

                </h2>

                <div class="teaser__text">
                    Verteidigen Sie sich gegen überhöhte Taschengeldforderungen ihrer Kinder.

                </div>

                <div class="teaser__button-wrapper">
                    <a class="a-btn btn--conversion" href="#" title="">
                        Jetzt App downloaden
                    </a>

                    <a class="a-btn btn--primary btn--login" href="#" title="">
                        Meine BARMER<i class="a-icon icon--profile" aria-hidden="true"></i>
                    </a>

                </div>

            </div>

        </div>
        <div class="selection-wrapper__tabpanel" role="tabpanel" id="tab-panel-4" aria-labelledby="btn-tab-4" hidden>

            <div class="o-teaser teaser--big-headline">

                <h2 class="teaser__headline">
                    Bonuspunkten<br />beim Zahnarzt.

                </h2>

                <div class="teaser__text">
                    Die Bonuspunkte wurden mit Experten aus der Zahnmedizin entwickelt. Sowohl die Wirksamkeit der einzelnen Punkte als auch der Nutzen werden dadurch wissenschaftlich belegt: sofortige und langanhaltende Schmerzlinderung, klinisch bestätigte Formel und geeignet für tägliche Anwendung.

                </div>

                <div class="teaser__button-wrapper">
                    <a class="a-btn btn--conversion" href="#" title="">
                        Jetzt App downloaden
                    </a>

                    <a class="a-btn btn--primary btn--login" href="#" title="">
                        Meine BARMER<i class="a-icon icon--profile" aria-hidden="true"></i>
                    </a>

                </div>

            </div>

        </div>

    </div>

</div>
 
<style>
  .page > .teaser--bannermodule {
    color: #d6d9dc;
  }
</style>

{{ render '@bannermodule--default' this.partials.txtStageTeaserDefaultTop merge=true }}
{{ render '@stage-teaser--with-badge-image-default-top' this.partials.stStageTeaserDefault merge=true }}

{{ render '@bannermodule--default' this.partials.txtStageTeaserDefaultCenter merge=true }}
{{ render '@stage-teaser--with-badge-image-default-center' this.partials.stStageTeaserDefaultCenter merge=true }}

{{ render '@bannermodule--default' this.partials.txtStageTeaserDefaultBottom merge=true }}
{{ render '@stage-teaser--with-badge-image-default-bottom' this.partials.stStageTeaserDefaultBottom merge=true }}

{{ render '@bannermodule--default' this.partials.txtNoSpacingTop merge=true }}
{{ render '@stage-teaser--with-badge-image-no-spacing-top' this.partials.stNoSpacingTop merge=true }}

{{ render '@bannermodule--default' this.partials.txtNoSpacingCenter merge=true }}
{{ render '@stage-teaser--with-badge-image-no-spacing-center' this.partials.stNoSpacingCenter merge=true }}

{{ render '@bannermodule--default' this.partials.txtNoSpacingBottom merge=true }}
{{ render '@stage-teaser--with-badge-image-no-spacing-bottom' this.partials.stNoSpacingBottom merge=true }}

{{ render '@bannermodule--default' this.partials.txtStageTeaserDefaultTopHiddenSm merge=true }}
{{ render '@stage-teaser--with-badge-image-default-top-hidden-sm' this.partials.stStageTeaserDefaultTopHiddenSm merge=true }}

{{ render '@bannermodule--default' this.partials.txtStageTeaserDefaultTopHiddenMd merge=true }}
{{ render '@stage-teaser--with-badge-image-default-top-hidden-sm-md' this.partials.stStageTeaserDefaultTopHiddenMd merge=true }}

{{ render '@bannermodule--default' this.partials.txtTestimonialDefaultTop merge=true }}
{{ render '@teaser--stage-with-testimonial-and-badge-image-default-top' this.partials.stTestimonialDefaultTop merge=true }}

{{ render '@bannermodule--default' this.partials.txtSliderTargetgroupAllStates merge=true }}
{{ render '@slider--targetgroup-with-badge-images' this.partials.stSliderTargetgroupAllStates merge=true }}

{{ render '@bannermodule--default' this.partials.txtAccordionAllStates merge=true }}
{{ render '@accordion-stage--with-badge-image' this.partials.stAccordionAllStates merge=true }}

{{ render '@bannermodule--default' this.partials.txtTabStageDefaultAllStates merge=true }}
{{ render '@tab-stage--default-with-badge-images' this.partials.stTabStageDefaultAllStates merge=true }}

{{ render '@bannermodule--default' this.partials.txtTabStageReverseAllStates merge=true }}
{{ render '@tab-stage--reverse-with-badge-images' this.partials.stTabStageReverseAllStates 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
          }
        }
      }
    },
    "txtStageTeaserDefaultTop": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - Badge Image Default Top",
            "richtext": "<p>@stage-teaser--with-badge-image-default-top</p>"
          }
        }
      }
    },
    "txtStageTeaserDefaultCenter": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - Badge Image Default Center",
            "richtext": "<p>@stage-teaser--with-badge-image-default-center</p>"
          }
        }
      }
    },
    "txtStageTeaserDefaultBottom": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - Badge Image Default Bottom",
            "richtext": "<p>@stage-teaser--with-badge-image-default-bottom</p>"
          }
        }
      }
    },
    "txtNoSpacingTop": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - Badge Image No Spacing Top",
            "richtext": "<p>@stage-teaser--with-badge-image-no-spacing-top</p>"
          }
        }
      }
    },
    "txtNoSpacingCenter": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - Badge Image No Spacing Center",
            "richtext": "<p>@stage-teaser--with-badge-image-no-spacing-center</p>"
          }
        }
      }
    },
    "txtNoSpacingBottom": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - Badge Image No Spacing Bottom",
            "richtext": "<p>@stage-teaser--with-badge-image-no-spacing-bottom</p>"
          }
        }
      }
    },
    "txtStageTeaserDefaultTopHiddenSm": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - Badge Image Default Top Hidden Sm",
            "richtext": "<p>@stage-teaser--with-badge-image-default-top-hidden-sm</p>"
          }
        }
      }
    },
    "txtStageTeaserDefaultTopHiddenMd": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - Badge Image Default Top Hidden Sm-Md",
            "richtext": "<p>@stage-teaser--with-badge-image-default-top-hidden-sm-md</p>"
          }
        }
      }
    },
    "txtTestimonialDefaultTop": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Testimonial - Badge Image Default Top",
            "richtext": "<p>@teaser--stage-with-testimonial-and-badge-image-default-top</p>"
          }
        }
      }
    },
    "txtSliderTargetgroupAllStates": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Slider Targetgroup - Badge Images all states",
            "richtext": "<p>@slider--targetgroup-with-badge-images</p>"
          }
        }
      }
    },
    "txtAccordionAllStates": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Accordion Stage - Badge Images all states",
            "richtext": "<p>@accordion-stage--with-badge-image</p>"
          }
        }
      }
    },
    "txtTabStageDefaultAllStates": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Tab Stage - Badge Images all states",
            "richtext": "<p>@tab-stage--default-with-badge-images</p>"
          }
        }
      }
    },
    "txtTabStageReverseAllStates": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Tab Stage Reverse - Badge Images all states",
            "richtext": "<p>@tab-stage--reverse-with-badge-images</p>"
          }
        }
      }
    }
  }
}

No notes defined.