Barmer Fractal

Overview Advertorial 

<div class="o-advertorial advertorial--imagerie-left">
    <div class="advertorial__content">

        <h3 class="advertorial__headline">Advertorial Imagerie Left</h3>

        <div class="advertorial__detailtext">
            <p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>

        </div>

        <a class="a-btn btn--primary" href="" title="">
            Button
        </a>

        <div class="advertorial__local-settings">
            <p>Sie haben schon ein Benutzerkonto?</p>
            <a href="http://zdf.de" class="a-link ">
                <span class="link__inner">Hier geht es direkt zum Login!</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </a>

        </div>
    </div>
    <div class="advertorial__imagerie">
        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
            <source media="(min-width: 641px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
            <img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>
</div>

<div class="o-advertorial ">
    <div class="advertorial__content">

        <h3 class="advertorial__headline">Advertorial With Appstore Buttons</h3>

        <div class="advertorial__detailtext">
            <p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>

        </div>

        <div class="advertorial__objects-wrapper">

            <a class="a-btn " href="#" title="AppStore">
                <img src="../../images/appstore-button--black-height-42px.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </a>

            <a class="a-btn " href="#" title="AppStore">
                <img src="../../images/google-play-badge-height-42px.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </a>

        </div>

        <a class="a-btn btn--primary" href="" title="">
            Button
        </a>

    </div>
    <div class="advertorial__imagerie">
        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
            <source media="(min-width: 641px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
            <img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>
</div>

<div class="o-advertorial advertorial--app js-modal-by-ttag-init">
    <div class="advertorial__content">
        <div class="advertorial__overline">Barmer-App</div>

        <h3 class="advertorial__headline">Advertorial App</h3>

        <div class="advertorial__objects-wrapper">

            <div class="advertorial__iconbar" role="list">

                <div class="o-teaser teaser--iconbar" role="listitem">

                    <div class="teaser__image">

                        <i class="a-icon icon--check" aria-hidden="true"></i>

                    </div>

                    <div class="teaser__content">

                        <div class="teaser__headline">
                            <a class="teaser__target" href="http://tagesschau.de">
                                Kein Porto, kein Gang zum Briefkasten:
                            </a>
                        </div>

                        <div class="teaser__text teaser__text--richtext">
                            AU-Bescheinigung einfach abfotografieren und direkt an die Barmer übermitteln&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </div>

                    </div>

                </div>

                <div class="o-teaser teaser--iconbar" role="listitem">

                    <div class="teaser__image">

                        <i class="a-icon icon--check" aria-hidden="true"></i>

                    </div>

                    <div class="teaser__content">

                        <div class="teaser__headline">
                            <a class="teaser__target" href="http://tagesschau.de">
                                Beitragsbescheinigungen und andere Nachweise ganz einfach anfordern:
                            </a>
                        </div>

                        <div class="teaser__text teaser__text--richtext">
                            Mitgliedsbescheinigung und Versicherungsnachweise unkompliziert downloaden&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </div>

                    </div>

                </div>

                <div class="o-teaser teaser--iconbar" role="listitem">

                    <div class="teaser__image">

                        <i class="a-icon icon--check" aria-hidden="true"></i>

                    </div>

                    <div class="teaser__content">

                        <div class="teaser__headline">
                            Studien- und Schulbescheinigungen hochladen und verschicken:

                        </div>

                        <div class="teaser__text teaser__text--richtext">
                            Die App ganz einfach runterladen und schon heute profitieren
                        </div>

                    </div>

                </div>

            </div>

            <a class="a-btn " href="#" title="AppStore">
                <img src="../../images/appstore-button--black-height-42px.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </a>

            <a class="a-btn " href="#" title="AppStore">
                <img src="../../images/google-play-badge-height-42px.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </a>

        </div>

        <button class="a-btn btn--primary js-modal-by-ttag-trigger" type="button">App herunterladen</button>

        <a class="a-btn btn--secondary" href="" title="">
            Mehr erfahren
        </a>

        <template class="teaser__modal js-modal-by-ttag-target">
            <div class="m-modal modal--qr-codes js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
                <div class="modal__body">
                    <button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>

                    <div class="modal__title">Jetzt BARMER-App herunterladen</div>

                    <div class="modal__content">
                        <div class="modal__text">
                            <p>App Store wählen und QR Code scannen</p>
                        </div>
                        <div class="modal__qr-code-wrapper">
                            <div class="modal__qr-code">
                                <div class="modal__qr-code-label">Apple App Store</div>
                                <div class="modal__qr-code-image">
                                    <a href="https://apps.apple.com/de/app/barmer-app/id956752981" title="Link to Barmer App in Apple Store" tabindex="-1"><img src="../../images/qr-code--apple-app-store.svg" alt="Apple App Store QR-Code" title="Dies ist der title-Text" class="a-image " loading="lazy">
                                    </a>
                                </div>
                                <div class="list--skip-links">
                                    <a class="a-link" href="https://apps.apple.com/de/app/barmer-app/id956752981">https://apps.apple.com/de/app/barmer-app/id956752981</a>
                                </div>
                            </div>
                            <div class="modal__qr-code">
                                <div class="modal__qr-code-label">Google Play Store</div>
                                <div class="modal__qr-code-image">
                                    <a href="https://play.google.com/store/apps/details?id&#x3D;de.barmergek.serviceapp" title="Link to Barmer App in Google Play Store" tabindex="-1"><img src="../../images/qr-code--google-play-store.svg" alt="Google Play Store QR-Code" title="Dies ist der title-Text" class="a-image " loading="lazy">
                                    </a>
                                </div>
                                <div class="list--skip-links">
                                    <a class="a-link" href="https://play.google.com/store/apps/details?id&#x3D;de.barmergek.serviceapp">https://play.google.com/store/apps/details?id&#x3D;de.barmergek.serviceapp</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal__background" aria-hidden="true"></div>
            </div>

        </template>

    </div>
    <div class="advertorial__imagerie">
        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
            <source media="(min-width: 641px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
            <img src="../../images/1x1/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>
</div>

<div class="o-advertorial cs--a js-teaser-targeting-init">
    <div class="advertorial__content">

        <div class="advertorial__objects-wrapper">

            <div class="advertorial__iconbar" role="list">

                <div class="o-teaser teaser--iconbar" role="listitem">

                    <div class="teaser__image">

                        <i class="a-icon icon--check" aria-hidden="true"></i>

                    </div>

                    <div class="teaser__content">

                        <div class="teaser__headline">
                            <a class="teaser__target" href="http://tagesschau.de">
                                Kein Porto, kein Gang zum Briefkasten:
                            </a>
                        </div>

                        <div class="teaser__text teaser__text--richtext">
                            AU-Bescheinigung einfach abfotografieren und direkt an die Barmer übermitteln&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </div>

                    </div>

                </div>

                <div class="o-teaser teaser--iconbar" role="listitem">

                    <div class="teaser__image">

                        <i class="a-icon icon--check" aria-hidden="true"></i>

                    </div>

                    <div class="teaser__content">

                        <div class="teaser__headline">
                            <a class="teaser__target" href="http://tagesschau.de">
                                Beitragsbescheinigungen und andere Nachweise ganz einfach anfordern:
                            </a>
                        </div>

                        <div class="teaser__text teaser__text--richtext">
                            Mitgliedsbescheinigung und Versicherungsnachweise unkompliziert downloaden&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </div>

                    </div>

                </div>

                <div class="o-teaser teaser--iconbar" role="listitem">

                    <div class="teaser__image">

                        <i class="a-icon icon--check" aria-hidden="true"></i>

                    </div>

                    <div class="teaser__content">

                        <div class="teaser__headline">
                            Studien- und Schulbescheinigungen hochladen und verschicken:

                        </div>

                        <div class="teaser__text teaser__text--richtext">
                            Die App ganz einfach runterladen und schon heute profitieren
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>
    <div class="advertorial__imagerie">
        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
            <source media="(min-width: 641px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
            <img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>
</div>

<div class="o-advertorial ">
    <div class="advertorial__content">

        <h3 class="advertorial__headline">Advertorial With Slider</h3>

        <div class="advertorial__detailtext">
            <p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>

        </div>

        <a class="a-btn btn--primary" href="" title="">
            Button
        </a>

        <div class="advertorial__local-settings">
            <p>Sie haben schon ein Benutzerkonto?</p>
            <a href="http://zdf.de" class="a-link ">
                <span class="link__inner">Hier geht es direkt zum Login!</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </a>

        </div>
    </div>
    <div class="advertorial__imagerie">
        <div class="o-slider glide js-slider-init slider--advertorial" data-slider-type="advertorial" data-glide-config="{&quot;autoplay&quot;: 10000 }">

            <div class="slider__area">

                <div class="slider__track-wrapper">

                    <div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
                        <button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
                        <button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
                    </div>

                    <div class="slider__track glide__track slider__track--advertorial" data-glide-el="track">
                        <ul class="glide__slides slider__slides--advertorial" aria-label="Karusell mit 6 Elementen">
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
                                    <img src="../../images/5x7/mann-mit-tablet.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/eltern-kind-blumen-712x534.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/eltern-kind-blumen-714x1000.jpg">
                                    <img src="../../images/5x7/eltern-kind-blumen-714x1000.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/eltern-baby-tablet-712x534.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
                                    <img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/tippen-auf-tastatur-712x534.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/tippen-auf-tastatur-714x1000.jpg">
                                    <img src="../../images/5x7/tippen-auf-tastatur-714x1000.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/laechelnder-mann-712x534.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/laechelnder-mann-714x1000.jpg">
                                    <img src="../../images/5x7/laechelnder-mann-714x1000.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/abstimmung-des-verwaltungsrats-712x534.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
                                    <img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="">
                                </picture>

                            </li>
                        </ul>
                    </div>

                </div>

                <div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
                    <ul class="slider-bullets__list" data-glide-el="controls[nav]">
                        <li class="slider-bullet glide__bullet" data-glide-dir="=0">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=1">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=3">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=4">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 5</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=5">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 6</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                    </ul>
                </div>

            </div>

        </div>

    </div>
</div>

<div class="o-advertorial advertorial--imagerie-landscape">
    <div class="advertorial__content">

        <h3 class="advertorial__headline">Advertorial Image Landscape</h3>

        <div class="advertorial__detailtext">
            <p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>

        </div>

        <a class="a-btn btn--primary" href="" title="">
            Button
        </a>

        <div class="advertorial__local-settings">
            <p>Sie haben schon ein Benutzerkonto?</p>
            <a href="http://zdf.de" class="a-link ">
                <span class="link__inner">Hier geht es direkt zum Login!</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </a>

        </div>
    </div>
    <div class="advertorial__imagerie">
        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/4x3/barmer-konferenz.jpg">
            <source media="(min-width: 641px)" srcset="../../images/4x3/barmer-konferenz.jpg">
            <img src="../../images/4x3/barmer-konferenz.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>
</div>

<div class="o-advertorial advertorial--imagerie-small">
    <div class="advertorial__content">

        <h3 class="advertorial__headline">Advertorial Image Landscape Small</h3>

        <div class="advertorial__detailtext">
            <p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>

        </div>

        <a class="a-btn btn--primary" href="" title="">
            Button
        </a>

        <div class="advertorial__local-settings">
            <p>Sie haben schon ein Benutzerkonto?</p>
            <a href="http://zdf.de" class="a-link ">
                <span class="link__inner">Hier geht es direkt zum Login!</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </a>

        </div>
    </div>
    <div class="advertorial__imagerie">
        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/4x3/promenade.jpg">
            <source media="(min-width: 641px)" srcset="../../images/4x3/promenade.jpg">
            <img src="../../images/4x3/promenade.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>
</div>

<div class="o-advertorial advertorial--imagerie-left advertorial--imagerie-small">
    <div class="advertorial__content">

        <h3 class="advertorial__headline">Advertorial Image Landscape Left</h3>

        <div class="advertorial__detailtext">
            <p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>

        </div>

        <a class="a-btn btn--primary" href="" title="">
            Button
        </a>

        <div class="advertorial__local-settings">
            <p>Sie haben schon ein Benutzerkonto?</p>
            <a href="http://zdf.de" class="a-link ">
                <span class="link__inner">Hier geht es direkt zum Login!</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </a>

        </div>
    </div>
    <div class="advertorial__imagerie">
        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/4x3/praesentation.jpg">
            <source media="(min-width: 641px)" srcset="../../images/4x3/praesentation.jpg">
            <img src="../../images/4x3/praesentation.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>
</div>

<div class="o-advertorial advertorial--imagerie-landscape">
    <div class="advertorial__content">

        <h3 class="advertorial__headline">Advertorial Image With Slider Landscape</h3>

        <div class="advertorial__detailtext">
            <p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>

        </div>

        <a class="a-btn btn--primary" href="" title="">
            Button
        </a>

        <div class="advertorial__local-settings">
            <p>Sie haben schon ein Benutzerkonto?</p>
            <a href="http://zdf.de" class="a-link ">
                <span class="link__inner">Hier geht es direkt zum Login!</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </a>

        </div>
    </div>
    <div class="advertorial__imagerie">
        <div class="o-slider glide js-slider-init slider--advertorial" data-slider-type="advertorial" data-glide-config="{&quot;autoplay&quot;: 10000 }">

            <div class="slider__area">

                <div class="slider__track-wrapper">

                    <div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
                        <button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
                        <button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
                    </div>

                    <div class="slider__track glide__track slider__track--advertorial" data-glide-el="track">
                        <ul class="glide__slides slider__slides--advertorial" aria-label="Karusell mit 6 Elementen">
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/barmer-konferenz.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/4x3/barmer-konferenz.jpg">
                                    <img src="../../images/4x3/barmer-konferenz.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/promenade.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/4x3/promenade.jpg">
                                    <img src="../../images/4x3/promenade.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/praesentation.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/4x3/praesentation.jpg">
                                    <img src="../../images/4x3/praesentation.jpg" alt="">
                                </picture>

                            </li>
                        </ul>
                    </div>

                </div>

                <div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
                    <ul class="slider-bullets__list" data-glide-el="controls[nav]">
                        <li class="slider-bullet glide__bullet" data-glide-dir="=0">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=1">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=3">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=4">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 5</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=5">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 6</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                    </ul>
                </div>

            </div>

        </div>

    </div>
</div>

<div class="o-advertorial advertorial--imagerie-left advertorial--imagerie-landscape">
    <div class="advertorial__content">

        <h3 class="advertorial__headline">Advertorial With Slider Landscape Left</h3>

        <div class="advertorial__detailtext">
            <p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>

        </div>

        <a class="a-btn btn--primary" href="" title="">
            Button
        </a>

        <div class="advertorial__local-settings">
            <p>Sie haben schon ein Benutzerkonto?</p>
            <a href="http://zdf.de" class="a-link ">
                <span class="link__inner">Hier geht es direkt zum Login!</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </a>

        </div>
    </div>
    <div class="advertorial__imagerie">
        <div class="o-slider glide js-slider-init slider--advertorial" data-slider-type="advertorial" data-glide-config="{&quot;autoplay&quot;: 10000 }">

            <div class="slider__area">

                <div class="slider__track-wrapper">

                    <div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
                        <button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
                        <button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
                    </div>

                    <div class="slider__track glide__track slider__track--advertorial" data-glide-el="track">
                        <ul class="glide__slides slider__slides--advertorial" aria-label="Karusell mit 6 Elementen">
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/barmer-konferenz.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/4x3/barmer-konferenz.jpg">
                                    <img src="../../images/4x3/barmer-konferenz.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/promenade.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/4x3/promenade.jpg">
                                    <img src="../../images/4x3/promenade.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/praesentation.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/4x3/praesentation.jpg">
                                    <img src="../../images/4x3/praesentation.jpg" alt="">
                                </picture>

                            </li>
                        </ul>
                    </div>

                </div>

                <div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
                    <ul class="slider-bullets__list" data-glide-el="controls[nav]">
                        <li class="slider-bullet glide__bullet" data-glide-dir="=0">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=1">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=3">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 4</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=4">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 5</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=5">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 6</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                    </ul>
                </div>

            </div>

        </div>

    </div>
</div>
 
{{render '@advertorial--imagerie-left' partials.advertorialImagerieLeft merge=true}}
{{render '@advertorial--with-appstore-buttons' partials.advertorialAppstoreButtons merge=true}}
{{render '@advertorial--app' partials.advertorialApp merge=true}}
{{render '@advertorial--with-iconbar' partials.advertorialIconbar merge=true}}
{{render '@advertorial--with-slider' partials.advertorialSlider merge=true}}
{{render '@advertorial--image-landscape' partials.advertorialImageLandscape merge=true}}
{{render '@advertorial--image-landscape-small' partials.advertorialImageLandscapeSmall merge=true}}
{{render '@advertorial--image-landscape-small-left' partials.advertorialImageLandscapeLeft merge=true}}
{{render '@advertorial--with-slider-landscape' partials.advertorialSliderLandscape merge=true}}
{{render '@advertorial--with-slider-landscape-left' partials.advertorialSliderLandscapeLeft 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
          }
        }
      }
    },
    "advertorialImagerieLeft": {
      "content": {
        "headline": "Advertorial Imagerie Left"
      }
    },
    "advertorialAppstoreButtons": {
      "content": {
        "headline": "Advertorial With Appstore Buttons"
      }
    },
    "advertorialApp": {
      "content": {
        "headline": "Advertorial App"
      }
    },
    "advertorialIconbar": {
      "content": {
        "headline": "Advertorial With Iconbar"
      }
    },
    "advertorialSlider": {
      "content": {
        "headline": "Advertorial With Slider"
      }
    },
    "advertorialImageLandscape": {
      "content": {
        "headline": "Advertorial Image Landscape"
      }
    },
    "advertorialImageLandscapeSmall": {
      "content": {
        "headline": "Advertorial Image Landscape Small"
      }
    },
    "advertorialImageLandscapeLeft": {
      "content": {
        "headline": "Advertorial Image Landscape Left"
      }
    },
    "advertorialSliderLandscape": {
      "content": {
        "headline": "Advertorial Image With Slider Landscape"
      }
    },
    "advertorialSliderLandscapeLeft": {
      "content": {
        "headline": "Advertorial With Slider Landscape Left"
      }
    }
  }
}

No notes defined.