Barmer Fractal

Overview Stage Teasers 

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

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

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

                    </div>
                </div>

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

                </div>
            </div>

        </li>
        <li class="accordion-stage__item">
            <div class="o-card " id="card-cs-b-2">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-cs-b-2">
                        Vorteile für Studenten
                    </div>
                    <div class="card__headline">Studentische Krankenversicherung: Jetzt Studi-Vorteile der Barmer sichern</div>

                </div>

                <div class="card__image">
                    <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-cs-b-3">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-cs-b-3">
                        Barmer empfehlen
                    </div>
                    <div class="card__headline">Sie sind zufrieden mit uns? Dann empfehlen Sie uns gerne weiter</div>

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

                    </div>
                </div>

                <div class="card__image">
                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-tablet.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
                        <img src="../../images/4x3/mann-mit-tablet.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">
        Stage Teaser - Default

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--default</p>
    </div>

</div>

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

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

    </div>

    <div class="teaser__content">

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

            </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 - A + no Button

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--cs-a-no-button</p>
    </div>

</div>

<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="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>

</div>

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

    <h4 class="teaser__headline">
        Stage Teaser - B + Primary Button

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--cs-b-primary</p>
    </div>

</div>

<div class="o-teaser teaser--stage cs--bg-image-b cs--two-colored">

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

    </div>

    <div class="teaser__content">

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

            </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 - C + Secondary Button

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--cs-c-secondary</p>
    </div>

</div>

<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/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--secondary" href="http://heute.de" title="">
                Mitglied werden
            </a>

        </div>

    </div>

</div>

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

    <h4 class="teaser__headline">
        Stage Teaser - D + Conversion-Button

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--cs-d-conversion</p>
    </div>

</div>

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

    <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="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--conversion" href="http://heute.de" title="">
                Mitglied werden
            </a>

        </div>

    </div>

</div>

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

    <h4 class="teaser__headline">
        Stage Teaser - Small

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--small</p>
    </div>

</div>

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

    </div>

    <div class="teaser__content">

        <div class="teaser__headline-wrapper">
            <div class="teaser__headline">
                Dies ist ein schmaler Bühnen-Teaser

            </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 - mit Docking-Container/Siegelliste

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-docking-seals</p>
    </div>

</div>

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

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

    </div>

    <div class="teaser__content">

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

            </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="teaser__docking-placement cs--a">
    <div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init cs--a" 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>

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

    <h4 class="teaser__headline">
        Stage Teaser - mit Docking-Container/Textmodul

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-docking-textmodule</p>
    </div>

</div>

<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="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="teaser__docking-placement ">
    <div class="o-textmodule ">
        <h3 class="textmodule__headline textmodule__headline--h1">Stage-Teaser Headline Docking-Textmodule</h3>
        <div class="a-richtext richtext--intro">

            <p>Baden auf den Malediven, eine Trekkingreise in Laos – all diese fernen Reiseziele werden vorerst wohl für kaum einen Urlauber zu erreichen sein. Dennoch ist es wichtig, sich alle Impfungen zu holen, damit Reisende bei der nächsten großen Reise keine in Form von Krankheiten mit nach Hause bringen.</p>
        </div>

        <div class="a-richtext richtext--article">
            <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. <span lang='en'>This is some <abbr tabindex='0' title='english'>en</abbr> text.</span></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="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Docking-Container/Textmodul CS-A

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-docking-textmodule</p>
    </div>

</div>

<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="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="teaser__docking-placement cs--a">
    <div class="o-textmodule ">
        <h3 class="textmodule__headline textmodule__headline--h1">Stage-Teaser Headline Docking-Textmodule</h3>
        <div class="a-richtext richtext--intro">

            <p>Baden auf den Malediven, eine Trekkingreise in Laos – all diese fernen Reiseziele werden vorerst wohl für kaum einen Urlauber zu erreichen sein. Dennoch ist es wichtig, sich alle Impfungen zu holen, damit Reisende bei der nächsten großen Reise keine in Form von Krankheiten mit nach Hause bringen.</p>
        </div>

        <div class="a-richtext richtext--article">
            <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. <span lang='en'>This is some <abbr tabindex='0' title='english'>en</abbr> text.</span></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="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Docking-Container/Textmodul CS-B

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-docking-textmodule</p>
    </div>

</div>

<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="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="teaser__docking-placement cs--b">
    <div class="o-textmodule ">
        <h3 class="textmodule__headline textmodule__headline--h1">Stage-Teaser Headline Docking-Textmodule</h3>
        <div class="a-richtext richtext--intro">

            <p>Baden auf den Malediven, eine Trekkingreise in Laos – all diese fernen Reiseziele werden vorerst wohl für kaum einen Urlauber zu erreichen sein. Dennoch ist es wichtig, sich alle Impfungen zu holen, damit Reisende bei der nächsten großen Reise keine in Form von Krankheiten mit nach Hause bringen.</p>
        </div>

        <div class="a-richtext richtext--article">
            <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. <span lang='en'>This is some <abbr tabindex='0' title='english'>en</abbr> text.</span></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="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Docking-Container/Textmodul CS-C

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-docking-textmodule</p>
    </div>

</div>

<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="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="teaser__docking-placement cs--c">
    <div class="o-textmodule ">
        <h3 class="textmodule__headline textmodule__headline--h1">Stage-Teaser Headline Docking-Textmodule</h3>
        <div class="a-richtext richtext--intro">

            <p>Baden auf den Malediven, eine Trekkingreise in Laos – all diese fernen Reiseziele werden vorerst wohl für kaum einen Urlauber zu erreichen sein. Dennoch ist es wichtig, sich alle Impfungen zu holen, damit Reisende bei der nächsten großen Reise keine in Form von Krankheiten mit nach Hause bringen.</p>
        </div>

        <div class="a-richtext richtext--article">
            <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. <span lang='en'>This is some <abbr tabindex='0' title='english'>en</abbr> text.</span></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="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Docking-Container/Textmodul CS-D

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-docking-textmodule</p>
    </div>

</div>

<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="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="teaser__docking-placement cs--d">
    <div class="o-textmodule ">
        <h3 class="textmodule__headline textmodule__headline--h1">Stage-Teaser Headline Docking-Textmodule</h3>
        <div class="a-richtext richtext--intro">

            <p>Baden auf den Malediven, eine Trekkingreise in Laos – all diese fernen Reiseziele werden vorerst wohl für kaum einen Urlauber zu erreichen sein. Dennoch ist es wichtig, sich alle Impfungen zu holen, damit Reisende bei der nächsten großen Reise keine in Form von Krankheiten mit nach Hause bringen.</p>
        </div>

        <div class="a-richtext richtext--article">
            <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. <span lang='en'>This is some <abbr tabindex='0' title='english'>en</abbr> text.</span></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="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, normale Ausprägung

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<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="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>

</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--primary" href="http://heute.de" title="">
            Mitglied werden
        </a>

    </div>

</div>

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

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, 2 Absätze

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<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="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>

</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">
            &ndash; Kurt-Hans Zwetschgenkerze von Moselbach zur Heide (99), Gentleman Host
        </figcaption>
    </figure>

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

    </div>

</div>

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

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, ohne Zitatquelle

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<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="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>

</div>

<div class="teaser__testimonial-placement">

    <figure class="m-figure figure--blockquote">

        <blockquote class="figure__blockquote a-richtext">
            <p>Sind Pinguine eine geeignete Zielgruppe für die allerneuesten Kühlschrank-Innovationen?</p>
        </blockquote>

    </figure>

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

    </div>

</div>

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

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, ohne Zitattext

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<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="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>

</div>

<div class="teaser__testimonial-placement">

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

    </div>

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

{{render '@accordion-stage--cs-b' merge=true}}

{{render '@bannermodule--default' this.partials.txtDefault merge=true}}
{{render '@stage-teaser--default' this.partials.stDefault merge=true }}

{{render '@bannermodule--default' this.partials.txtANoButton merge=true}}
{{render '@stage-teaser--cs-a-no-button' this.partials.stANoButton merge=true }}

{{render '@bannermodule--default' this.partials.txtBPrimary merge=true}}
{{render '@stage-teaser--cs-b-primary' this.partials.stBPrimary merge=true }}

{{render '@bannermodule--default' this.partials.txtCSecondary merge=true}}
{{render '@stage-teaser--cs-c-secondary' this.partials.stCSecondary merge=true }}

{{render '@bannermodule--default' this.partials.txtDConversion merge=true}}
{{render '@stage-teaser--cs-d-conversion' this.partials.stDConversion merge=true }}

{{render '@bannermodule--default' this.partials.txtSmall merge=true}}
{{render '@stage-teaser--small' this.partials.stSmall merge=true }}

{{render '@bannermodule--default' this.partials.txtDocking merge=true}}
{{render '@stage-teaser--with-docking-seals' this.partials.stDocking merge=true }}

{{render '@bannermodule--default' this.partials.txtDockingTextmodule merge=true}}
{{render '@stage-teaser--with-docking-textmodule' }}

{{render '@bannermodule--default' this.partials.txtDockingTextmodule-a merge=true}}
{{render '@stage-teaser--with-docking-textmodule-cs-a' context.viewtypes.dockingSpecifier }}

{{render '@bannermodule--default' this.partials.txtDockingTextmodule-b merge=true}}
{{render '@stage-teaser--with-docking-textmodule-cs-b' context.viewtypes.dockingSpecifier }}

{{render '@bannermodule--default' this.partials.txtDockingTextmodule-c merge=true}}
{{render '@stage-teaser--with-docking-textmodule-cs-c' context.viewtypes.dockingSpecifier }}

{{render '@bannermodule--default' this.partials.txtDockingTextmodule-d merge=true}}
{{render '@stage-teaser--with-docking-textmodule-cs-d' context.viewtypes.dockingSpecifier }}

{{render '@bannermodule--default' this.partials.txtTestimonial merge=true}}
{{render '@stage-teaser--with-testimonial' this.partials.stTestimonial merge=true }}

{{render '@bannermodule--default' this.partials.txtTestimonial2Paragraphs merge=true}}
{{render '@stage-teaser--with-testimonial' this.partials.stTestimonial2Paragraphs merge=true }}

{{render '@bannermodule--default' this.partials.txtTestimonialNoSource merge=true}}
{{render '@stage-teaser--with-testimonial' this.partials.stTestimonialNoSource merge=true }}

{{render '@bannermodule--default' this.partials.txtTestimonialNoText merge=true}}
{{render '@stage-teaser--with-testimonial' this.partials.stTestimonialNoText 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
          }
        }
      }
    },
    "txtDefault": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - Default",
            "richtext": "<p>@stage-teaser--default</p>"
          }
        }
      }
    },
    "stDefault": {
      "viewtypes": {
        "specifier": "teaser--stage cs--bg-image-a cs--two-colored"
      },
      "content": {
        "headline": "<span>Stark, wenn Du uns brauchst - Unser </span><mark>Vorsprung</mark><span> für Deine Gesundheit</span>"
      }
    },
    "txtANoButton": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - A + no Button",
            "richtext": "<p>@stage-teaser--cs-a-no-button</p>"
          }
        }
      }
    },
    "txtBPrimary": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - B + Primary Button",
            "richtext": "<p>@stage-teaser--cs-b-primary</p>"
          }
        }
      }
    },
    "txtCSecondary": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - C + Secondary Button",
            "richtext": "<p>@stage-teaser--cs-c-secondary</p>"
          }
        }
      }
    },
    "txtDConversion": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - D + Conversion-Button",
            "richtext": "<p>@stage-teaser--cs-d-conversion</p>"
          }
        }
      }
    },
    "txtSmall": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - Small",
            "richtext": "<p>@stage-teaser--small</p>"
          }
        }
      }
    },
    "txtDocking": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Docking-Container/Siegelliste",
            "richtext": "<p>@stage-teaser--with-docking-seals</p>"
          }
        }
      }
    },
    "stDocking": {
      "viewtypes": {
        "specifier": "teaser--stage cs--bg-image-a cs--two-colored"
      },
      "content": {
        "headline": "<span>Stark, wenn Du uns brauchst - Unser </span><mark>Vorsprung</mark><span> für Deine Gesundheit</span>"
      }
    },
    "txtDockingTextmodule": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Docking-Container/Textmodul",
            "richtext": "<p>@stage-teaser--with-docking-textmodule</p>"
          }
        }
      }
    },
    "txtDockingTextmodule-a": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Docking-Container/Textmodul CS-A",
            "richtext": "<p>@stage-teaser--with-docking-textmodule</p>"
          }
        }
      }
    },
    "txtDockingTextmodule-b": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Docking-Container/Textmodul CS-B",
            "richtext": "<p>@stage-teaser--with-docking-textmodule</p>"
          }
        }
      }
    },
    "txtDockingTextmodule-c": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Docking-Container/Textmodul CS-C",
            "richtext": "<p>@stage-teaser--with-docking-textmodule</p>"
          }
        }
      }
    },
    "txtDockingTextmodule-d": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Docking-Container/Textmodul CS-D",
            "richtext": "<p>@stage-teaser--with-docking-textmodule</p>"
          }
        }
      }
    },
    "txtTestimonial": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Zitat, normale Ausprägung",
            "richtext": "<p>@stage-teaser--with-testimonial</p>"
          }
        }
      }
    },
    "stTestimonial": {
      "switches": {
        "hasButton": false,
        "hasTestimonialButton": true,
        "hasTestimonialPlacement": true,
        "hasTestimonial": true
      },
      "partials": {
        "blockquote": {
          "content": {
            "blockquoteRichtext": "<p>Es gibt Millionen gute Gründe für unseren Job!</p>",
            "blockquoteSourceName": "Kurt-Hans Zwetschgenkerze von Moselbach zur Heide",
            "blockquoteSourceAge": "99",
            "blockquoteSourcePosition": "Gentleman Host"
          }
        }
      }
    },
    "txtTestimonial2Paragraphs": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Zitat, 2 Absätze",
            "richtext": "<p>@stage-teaser--with-testimonial</p>"
          }
        }
      }
    },
    "stTestimonial2Paragraphs": {
      "switches": {
        "hasButton": false,
        "hasTestimonialButton": true,
        "hasTestimonialPlacement": true,
        "hasTestimonial": true
      },
      "partials": {
        "blockquote": {
          "content": {
            "blockquoteRichtext": "<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>\n\n      <p>Es gibt Millionen gute Gründe für unseren Job</p>",
            "blockquoteSourceName": "Kurt-Hans Zwetschgenkerze von Moselbach zur Heide",
            "blockquoteSourceAge": "99",
            "blockquoteSourcePosition": "Gentleman Host"
          }
        }
      }
    },
    "txtTestimonialNoSource": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Zitat, ohne Zitatquelle",
            "richtext": "<p>@stage-teaser--with-testimonial</p>"
          }
        }
      }
    },
    "stTestimonialNoSource": {
      "switches": {
        "hasButton": false,
        "hasTestimonialButton": true,
        "hasTestimonialPlacement": true,
        "hasTestimonial": true
      },
      "partials": {
        "blockquote": {
          "switches": {
            "hasFigcaption": false
          },
          "content": {
            "blockquoteRichtext": "<p>Sind Pinguine eine geeignete Zielgruppe für die allerneuesten Kühlschrank-Innovationen?</p>"
          }
        }
      }
    },
    "txtTestimonialNoText": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Zitat, ohne Zitattext",
            "richtext": "<p>@stage-teaser--with-testimonial</p>"
          }
        }
      }
    },
    "stTestimonialNoText": {
      "switches": {
        "hasButton": false,
        "hasTestimonialButton": true,
        "hasTestimonialPlacement": true,
        "hasTestimonial": false
      },
      "partials": {
        "blockquote": {}
      }
    }
  }
}

No notes defined.