Nested Teaserlist

<section class="o-nested-teaserlist js-nested-teaserlist-init">

    <div class="nested-teaserlist__title">
        <h3 class="nested-teaserlist__headline">
            So unterstützt die Barmer Sie als <span>…</span>
            <span class="nested-teaserlist__headline-text-primary">Studierende</span> beim Thema <span>…</span>
            <span class="nested-teaserlist__headline-text-secondary">Mentale Gesundheit</span>:
        </h3>
    </div>

    <div class="nested-teaserlist__tags">

        <section class="nested-teaserlist__tags-primary">
            <div class="sr-only">Bitte wählen Sie eine Zielgruppe aus</div>

            <ul class="nested-teaserlist__tags-list" role="radiogroup">
                <li class="nested-teaserlist__tags-listitem">
                    <a class="a-tag tag--primary" href="/mock/nested-teaserlist-familien.html" role="radio" aria-checked="false">Familien</a>
                </li>
                <li class="nested-teaserlist__tags-listitem">
                    <a class="a-tag tag--primary" href="/mock/nested-teaserlist-auszubildende.html" role="radio" aria-checked="false">Auszubildende</a>
                </li>
                <li class="nested-teaserlist__tags-listitem">
                    <a class="a-tag tag--primary" href="#" role="radio" aria-checked="false">Studierende</a>
                </li>
                <li class="nested-teaserlist__tags-listitem">
                    <a class="a-tag tag--primary" href="#" role="radio" aria-checked="false">Berufstätige</a>
                </li>
                <li class="nested-teaserlist__tags-listitem">
                    <a class="a-tag tag--primary" href="#" role="radio" aria-checked="false">Selbstständige</a>
                </li>
                <li class="nested-teaserlist__tags-listitem">
                    <a class="a-tag tag--primary" href="#" role="radio" aria-checked="false">Senioren</a>
                </li>
            </ul>

        </section>

        <!-- For templating only -->
        <section class="nested-teaserlist__tags-secondary" hidden>

            <a class="a-tag tag--primary-selected" href="/mock/nested-teaserlist-initial.html">
                <span class="sr-only">Ausgewählte Zielgruppe:</span>
                Familien <i class="a-icon icon--close" aria-hidden="true"></i>
                <span class="sr-only">Durch nochmaliges Auswählen dieser Zielgruppe, heben Sie die Auswahl auf.</span>
            </a>

            <div class="sr-only">Bitte wählen Sie für die Zielgruppe ein Thema aus:</div>

            <ul class="nested-teaserlist__tags-list">
                <li class="nested-teaserlist__tags-listitem">
                    <a class="a-tag tag--secondary" href="/mock/nested-teaserlist-familien-ernaehrung.html">Ernährung</a>
                </li>
                <li class="nested-teaserlist__tags-listitem">
                    <a class="a-tag tag--secondary" href="/mock/nested-teaserlist-familien-mentale-gesundheit.html">Mentale Gesundheit</a>
                </li>
                <li class="nested-teaserlist__tags-listitem">
                    <a class="a-tag tag--secondary" href="/mock/nested-teaserlist-familien-fitness.html">Fitness</a>
                </li>
            </ul>

            <a class="a-btn btn--reset js-teaserlist-tags-reset" href="/mock/nested-teaserlist-initial.html">Auswahl löschen</a>

        </section>

    </div>

    <div class="nested-teaserlist__teaserlist">
        <div class="o-teaser-collection teaser-collection--four-col-teaserlist js-teaser-targeting-init">

            <div class="teaser-collection__teaser-wrapper">

                <div class="o-teaser ">

                    <div class="teaser__image">

                        <img src="../../images/3x2/mann-mit-kind.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

                    </div>

                    <h4 class="teaser__headline">
                        <a class="teaser__target" href="http://tagesschau.de">
                            Karies: Nicht das einzige Problem für Kinderzähne
                        </a>
                    </h4>

                    <div class="teaser__text">
                        Etwa 230.000 Sechs- bis Neunjährige waren im Jahr 2019 wegen Kreidezähnen in zahnärztlicher Behandlung. Mindestens acht Prozent aller Heranwachsenden in dieser Altersgruppe wären damit von einem viel zu weichen Zahnschmelz betroffen. Tatsächlich dürfte die Quote sogar noch höher sein. Kreidezähne sind besonders kariesanfällig und bedürfen bei schwerer Ausprägung lebenslang einer Behandlung.
                        &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                    </div>

                </div>

                <div class="o-teaser ">

                    <div class="teaser__image">

                        <img src="../../images/3x2/mann-mit-tablet.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

                    </div>

                    <h4 class="teaser__headline">
                        <a class="teaser__target" href="http://tagesschau.de">
                            Selbstständige
                        </a>
                    </h4>

                    <div class="teaser__text">
                        Mit attraktiven Leistungen bei Krankheit und Pflege rundum abgesichert sein
                        &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                    </div>

                </div>

                <div class="o-teaser ">

                    <div class="teaser__image">

                        <img src="../../images/3x2/barmer-app-yeah.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

                    </div>

                    <h4 class="teaser__headline">
                        Studierende - ohne Teaser Verlinkung

                    </h4>

                    <div class="teaser__text">
                        Mit attraktiven Leistungen bei Krankheit und Pflege rundum abgesichert sein

                    </div>

                </div>

                <div class="o-teaser ">

                    <div class="teaser__image">

                        <img src="../../images/3x2/mann-mit-kind.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

                    </div>

                    <h4 class="teaser__headline">
                        <a class="teaser__target" href="http://tagesschau.de">
                            Essen, Trinken, Rauchen: Warum diese Strategien nicht gegen Stress helfen
                        </a>
                    </h4>

                    <div class="teaser__text">
                        Wer gestresst ist, greift schneller auf Suchtmittel zurück. Denn Substanzen wie Alkohol aktivieren das Belohnungssystem des menschlichen Gehirn. Mit negativen Folgen für die Gesundheit.
                        &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                    </div>

                </div>

            </div>

        </div>

    </div>

</section>