<article class="p-article ">
    <div class="o-article-head article-head--stage">

        <div class="article-head__stage">
            <!-- nicht als figure, da keine caption ausgespielt wird -->
            <picture class="a-picture ">
                <source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
                <source media="(min-width: 641px)" srcset="../../images/36x11/mr-right.jpg">
                <img src="../../images/36x11/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
            </picture>

        </div>
        <div class="m-breadcrumb breadcrumb--main">
            <span class="breadcrumb__label sr-only">Sie befinden sich hier:</span>
            <ul class="a-list-basic list--breadcrumb">
                <li class="list__item list__item--breadcrumb">
                    <a href="/components/preview/homepage" class="a-link ">Barmer Startseite</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                </li>
                <li class="list__item list__item--breadcrumb">
                    <a href="/components/preview/article" class="a-link "><span class="link__inner">Themen-Übersichtseite</span><i class="a-icon icon--lock" aria-label=""></i></a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                </li>
                <li class="list__item list__item--breadcrumb">
                    Barmer So ein Unterthema
                </li>
            </ul>

        </div>

        <div class="article-head__meta">
            <div class="article-head__label">Label und nicht Overline</div>

            <h1 class="article-head__headline">Welche Reiseschutzimpfung ist empfohlen?</h1>
            <div class="article-head__readingtime">
                <i class="a-icon icon--timer" aria-hidden="true"></i>
                Lesedauer unter 6 Minuten
            </div>
        </div>

        <div class="article-head__info">
            <div class="m-list list--authors">

                <i class="a-icon icon--edit" aria-hidden="true"></i>
                <h4 class="list__headline">
                    Autor
                </h4>

                <ul class="a-list-basic ">
                    <li class="list__item ">
                        Birgit Frohn, Diplom-Biologin
                    </li>
                    <li class="list__item ">
                        BARMER Redaktion, Jane Doe (Ich bin der sehr lange Untertitel am Autor)
                    </li>
                    <li class="list__item ">
                        <a href="http://zdf.de" class="a-link ">
                            <span class="link__inner">Martin Zimmerman (Klick um mehr Informationen zu sehen)</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </a>

                    </li>
                </ul>

            </div>

            <div class="m-list list--quality">

                <i class="a-icon icon--check" aria-hidden="true"></i>
                <h4 class="list__headline">
                    Qualitätssicherung
                </h4>

                <ul class="a-list-basic ">
                    <li class="list__item ">
                        Heidi Gunther (Apothekerin bei der BARMER)
                    </li>
                    <li class="list__item ">
                        John Doe QS
                    </li>
                    <li class="list__item ">
                        Almeda GmbH, Ich stehe für Qualität, habe einen langen Namen, Sonderzeichen äöüß, Dr. med Schneider
                    </li>
                    <li class="list__item ">
                        <a href="http://zdf.de" class="a-link ">
                            <span class="link__inner">Anja Keller</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </a>

                    </li>
                </ul>

            </div>

        </div>

    </div>

    <div class="o-calculator calculator--benefit js-calculator-benefit-init is-new-client">

        <!-- @TODO: Bin mit nicht sicher, in wie weit ein FORM-Element aufgrund der Card-Aufbauweise hier überhaupt nötig/sinnvoll ist -->
        <form id="bc_form" class="calculator__form" name="bc_benefits">
            <fieldset class="calculator__fieldset">
                <div class="calculator__card-deck">
                    <div class="calculator__card" id="bc_card_0" hidden>

                        <div class="calculator__card-content">
                            <!-- @TODO: Bild muss anders eingebunden werden wg Persitierung der src-URL! -->
                            <img src="https://www.barmer.de/blueprint/servlet/image/25714/36x11/1080/330/19cd3ccb1b2d0f3bff773a81eff2286/Wd/familie-tobt-im-garten.jpg" alt="Bild" />
                            <br />
                            <div class="calculator__card-content-bar-headline">Gesundheit ist, was du draus machst.</div>
                            <p>
                                <strong>Wir stellen Dich in den Mittelpunkt: Mit unseren Zusatzleistungen sparst Du bares Geld für Dinge,
                                    die Dir wichtig sind.</strong>
                                <br />
                                <br />
                                Mach den Test und erfahre mit nur wenigen Klicks, wie auch Du ganz persönlich von der BARMER profitieren
                                kannst.
                            </p>

                        </div>

                        <div class="calculator__card-nav">
                            <input type="button" class="calculator__btn--secondary a-btn btn--secondary" value="Schenk uns 2 Minuten deiner Zeit">
                        </div>
                    </div>

                    <!-- CARD 1 interests -->
                    <div class="calculator__card" id="bc_card_1" hidden>
                        <div class="calculator__card-content">
                            <div class="calculator__card-content-headline" id="bc_card_1_content_headline">Platzhalter: Was interessiert
                                Sie
                                besonders?
                            </div>
                            <p class="calculator__card-content-description" id="bc_card_1_content_description">Platzhalter:
                                Mehrfachauswahl
                                möglich</p>
                            <div class="calculator__options-wrapper">
                                <label for="bc_interests_food">
                                    <div class="calculator__card-content-tile" id="bc_card_1_content_tile_bc_interests_food">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_interests_food" id="bc_interests_food" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_1_content_tile_bc_interests_food_checkbox_text">
                                            Platzhalter: Ernährung
                                        </div>
                                    </div>
                                </label>

                                <label for="bc_interests_relaxation">
                                    <div class="calculator__card-content-tile" id="bc_card_1_content_tile_bc_interests_relaxation">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_interests_relaxation" id="bc_interests_relaxation" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_1_content_tile_bc_interests_relaxation_checkbox_text">
                                            Platzhalter: Entspannung
                                        </div>
                                    </div>
                                </label>

                                <label for="bc_interests_sports">
                                    <div class="calculator__card-content-tile" id="bc_card_1_content_tile_bc_interests_sports">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_interests_sports" id="bc_interests_sports" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_1_content_tile_bc_interests_sports_checkbox_text">
                                            Platzhalter: Sport
                                        </div>
                                    </div>
                                </label>

                                <label for="bc_interests_family">
                                    <div class="calculator__card-content-tile" id="bc_card_1_content_tile_bc_interests_family">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_interests_family" id="bc_interests_family" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_1_content_tile_bc_interests_family_checkbox_text">
                                            Platzhalter: Familie & Kinderwunsch
                                        </div>
                                    </div>
                                </label>
                                <label for="bc_interests_health">
                                    <div class="calculator__card-content-tile" id="bc_card_1_content_tile_bc_interests_health">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_interests_health" id="bc_interests_health" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_1_content_tile_bc_interests_health_checkbox_text">
                                            Platzhalter: Gesundheit
                                        </div>
                                    </div>
                                </label>
                                <label for="bc_interests_travel">
                                    <div class="calculator__card-content-tile" id="bc_card_1_content_tile_bc_interests_travel">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_interests_travel" id="bc_interests_travel" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_1_content_tile_bc_interests_travel_checkbox_text">
                                            Platzhalter: Reisen
                                        </div>
                                    </div>
                                </label>
                            </div>

                            <div class="calculator__input-errormessage" id="bc_interests_errormessage"></div>

                        </div>

                        <div class="calculator__card-nav">
                            <input type="button" class="a-btn btn--primary calculator__btn--primary calculator__nav-btn--next" id="bc_card_1_nav_button_next" value="Platzhalter: Weiter">
                        </div>
                    </div>

                    <!-- CARD 2 matches -->
                    <div class="calculator__card" id="bc_card_2" hidden>
                        <div class="calculator__card-content">
                            <div class="calculator__card-content-headline" id="bc_card_2_content_headline">Platzhalter: Sie sind...
                            </div>
                            <p class="calculator__card-content-description" id="bc_card_2_content_description">Platzhalter:
                                Mehrfachauswahl
                                möglich</p>

                            <div class="calculator__options-wrapper">
                                <label for="bc_matches_student">
                                    <div class="calculator__card-content-tile" id="bc_card_2_content_tile_bc_matches_student">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_matches_student" id="bc_matches_student" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_2_content_tile_bc_matches_student_checkbox_text">
                                            Platzhalter: Student(in)
                                        </div>
                                    </div>
                                </label>

                                <label for="bc_matches_pupil_apprentice">
                                    <div class="calculator__card-content-tile" id="bc_card_2_content_tile_bc_matches_pupil_apprentice">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_matches_pupil_apprentice" id="bc_matches_pupil_apprentice" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_2_content_tile_bc_matches_pupil_apprentice_checkbox_text">Platzhalter: in Schule oder
                                            Ausbildung
                                        </div>
                                    </div>
                                </label>

                                <label for="bc_matches_employee">
                                    <div class="calculator__card-content-tile" id="bc_card_2_content_tile_bc_matches_employee">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_matches_employee" id="bc_matches_employee" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_2_content_tile_bc_matches_employee_checkbox_text">
                                            Platzhalter: Angestellte(r)
                                        </div>
                                    </div>
                                </label>

                                <label for="bc_matches_self_employed">
                                    <div class="calculator__card-content-tile" id="bc_card_2_content_tile_bc_matches_self_employed">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_matches_self_employed" id="bc_matches_self_employed" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_2_content_tile_bc_matches_self_employed_checkbox_text">
                                            Platzhalter: selbstständig
                                        </div>
                                    </div>
                                </label>

                                <label for="bc_matches_retired">
                                    <div class="calculator__card-content-tile" id="bc_card_2_content_tile_bc_matches_retired">
                                        <input type="checkbox" class="calculator__card-checkbox" name="bc_matches_retired" id="bc_matches_retired" value="true">
                                        <span class="calculator__card-checkbox-placeholder" aria-hidden="true"></span>
                                        <div class="calculator__card-checkbox-text" id="bc_card_2_content_tile_bc_matches_retired_checkbox_text">
                                            Platzhalter: Rentner(in)
                                        </div>
                                    </div>
                                </label>
                            </div>

                            <div class="calculator__input-errormessage" id="bc_matches_errormessage"></div>
                        </div>

                        <div class="calculator__card-nav">
                            <input type="button" class="calculator__btn--secondary a-btn btn--secondary bc_card_nav_button_prev" id="bc_card_2_nav_button_previous" value="Platzhalter: Zurück">
                            <input type="button" class="a-btn btn--primary calculator__btn--primary calculator__nav-btn--next" id="bc_card_2_nav_button_next" value="Platzhalter: Weiter">
                        </div>
                    </div>

                    <!-- CARD 3 personal data -->
                    <div class="calculator__card" id="bc_card_3" hidden>
                        <div class="calculator__card-content">
                            <div class="calculator__card-content-headline" id="bc_card_3_content_headline">Platzhalter: Sie sind...
                            </div>
                            <div id="bc_gender" class="calculator__card-section">
                                <div class="calculator__options-wrapper">
                                    <label for="bc_gender_f">
                                        <div class="calculator__card-content-tile" id="bc_card_3_content_tile_bc_gender_f">
                                            <input class="js-show-hide-content-3_1 calculator__card-radio calculator__field-radio" type="radio" name="bc_gender" id="bc_gender_f" value="f">
                                            <span class="calculator__card-radio-placeholder" aria-hidden="true"></span>
                                            <div class="calculator__card-radio-text" id="bc_card_3_content_tile_bc_gender_f_radio_text">
                                                Platzhalter:
                                                weiblich
                                            </div>
                                        </div>
                                    </label>

                                    <label for="bc_gender_m">
                                        <div class="calculator__card-content-tile" id="bc_card_3_content_tile_bc_gender_m">
                                            <input class="js-show-hide-content-3_1 calculator__card-radio calculator__field-radio" type="radio" name="bc_gender" id="bc_gender_m" value="m">
                                            <span class="calculator__card-radio-placeholder" aria-hidden="true"></span>
                                            <div class="calculator__card-radio-text" id="bc_card_3_content_tile_bc_gender_m_radio_text">
                                                Platzhalter:
                                                männlich
                                            </div>
                                        </div>
                                    </label>

                                    <label for="bc_gender_d">
                                        <div class="calculator__card-content-tile" id="bc_card_3_content_tile_bc_gender_d">
                                            <input class="js-show-hide-content-3 calculator__card-radio calculator__field-radio" type="radio" name="bc_gender" id="bc_gender_d" value="d">
                                            <span class="calculator__card-radio-placeholder" aria-hidden="true"></span>
                                            <div class="calculator__card-radio-text" id="bc_card_3_content_tile_bc_gender_d_radio_text">
                                                Platzhalter:
                                                divers
                                            </div>
                                        </div>
                                    </label>
                                </div>

                                <div class="calculator__form-hint " id="bc_card_3_content_hint_1">
                                    <!--
                  <div class="bc_form_hint_wrapper"><i class="icon icon-info" aria-hidden="true"></i><div class="bc_form_hint_text">Bitte beachten Sie, dass wir bei der Auswahl "divers" einige geschlechtsspezifische Leistungen, wie zum Beispiel Schwangerschaftsvorsorge, bei der Berechnung der Vorteile nicht berücksichtigen können.</div> </div>
                -->
                                </div>

                                <div class="calculator__input-errormessage " id="bc_gender_errormessage"></div>
                            </div>

                            <div class=" calculator__card-section calculator__section--age" id="bc_card_3_content_section_age">
                                <div class="calculator__card-content-headline" id="bc_card_3_content_section_age_content_headline">
                                    Platzhalter: Ihr
                                    Alter ist
                                </div>
                                <p class="calculator__slider-wrapper">
                                    <input type="range" class="calculator__slider js-range-for-me-person" id="bc_age" name="bc_age" min="0" max="120" step="1" value="0">
                                    <span class="calculator__slider-value" id="bc_age_info_placement">Platzhalter: ?</span>
                                    <label for="bc_age" id="bc_card_3_age_info_placement_text">Platzhalter: Jahre</label>
                                <div class="calculator__input-errormessage" id="bc_age_errormessage"></div>
                                </p>
                            </div>

                            <div class="calculator__input-wrapper">
                                <!-- !!! createListOfPersons(); is needed here if bc is run for the second time and already at least bc_user is given -->
                                <input type="button" id="bc_card_nav_card_3_button_additional_persons" class="calculator__btn--secondary a-btn btn--secondary bc_card_nav_button_content_1 calculator__display-none js-add-additional-persons" value="Platzhalter: Familienmitglied hinzufügen">
                            </div>
                        </div>

                        <div class="calculator__card-nav">
                            <input type="button" class="calculator__btn--secondary a-btn btn--secondary bc_card_nav_button_prev" id="bc_card_3_nav_button_previous" value="Platzhalter: Zurück">
                            <input type="button" id="bc_card_nav_card_3_button_benefits" class=" a-btn btn--primary calculator__btn--primary calculator__display-none js-jump-gender-to-results" value="Platzhalter: Zu Ihren BARMER-Vorteilen">
                        </div>

                    </div>

                    <!-- CARD 4 overview additional persons -->
                    <div class="calculator__card bc_card_type_5" id="bc_card_4" hidden>

                        <div class="calculator__card-content">

                            <div class="calculator__card-content-headline" id="bc_card_4_content_headline">Platzhalter: Die
                                Krankenversicherung
                                für die ganze Familie
                            </div>
                            <div class="calculator__card-content-description">
                                <div id="bc_card_4_content_description">
                                    <p>Platzhalter: Natürlich profitieren alle in der Familienversicherung von den BARMER-Vorteilen.</p>
                                    <p class="calculator__list-title">Hinzugefügte Personen:</p>
                                </div>
                                <div class="calculator__list-wrapper" id="bc_list_additional_persons"></div>
                            </div>

                            <div class="calculator__input-wrapper">
                                <input type="button" class="a-btn btn--secondary bc_card_nav_button_content_1 js-add-person" id="bc_card_4_nav_button_content_1" value="Platzhalter: Familienmitglied hinzufügen">
                            </div>

                        </div>

                        <div class="calculator__card-nav">
                            <input type="button" class="calculator__btn--secondary a-btn btn--secondary bc_card_nav_button_prev" id="bc_card_4_nav_button_previous" value="Platzhalter: Zurück">
                            <input type="button" class="calculator__btn--secondary a-btn btn--primary calculator__nav-btn--next calculator__display-none js-jump-additional-persons-to-results" id="bc_card_4_nav_button_content_2" value="Platzhalter: Zu den BARMER-Vorteilen">
                        </div>

                    </div>

                    <!-- @TODO: Checken des Markups. Ich habe das Gefühl, dass an mehreren Ecken die Verschachtelung nicht stimmt und zuviele/zuwenige Closing DIVs/Ps da sind!! -->

                    <!-- CARD 5 add/alter additional person -->
                    <div class="calculator__card bc_card_type_5" id="bc_card_5" hidden>

                        <div class="calculator__card-content">
                            <div class="calculator__card-content-headline" id="bc_card_5_content_headline">Platzhalter: Familienmitglied
                                hinzufügen
                            </div>
                            <p class="calculator__card-content-description">
                                <label class="calculator__text-input-label" id="bc_card_5_text_input_label_1">Platzhalter: Wie lautet der
                                    Name?</label>
                                <input class="js-show-hide-content-additional-person-gender calculator__text" type="text" name="bc_additional_person_name" id="bc_additional_person_name">
                            <div class="calculator__input-errormessage" id="bc_additional_person_name_errormessage"></div>
                            </p><!-- @TODO: Wait, hier stimmt mit den closing P-Tags hier und drei Zeilen dadrunter nicht -->
                            <div class=" calculator__display-none calculator__card-section" id="bc_additional_person_gender">
                                <!-- id has to be the same as name of radio to be addressable for setAttribute within function markError() -->
                                </p>

                                <p class="calculator__card-content-description calculator__card-content-title" id="bc_card_5_content_description_1">
                                    Platzhalter: Bitte geben Sie das Geschlecht an
                                </p>

                                <div class="calculator__options-wrapper">
                                    <label for="bc_additional_person_gender_f">
                                        <div class="calculator__card-content-tile" id="bc_card_5_content_tile_bc_additional_person_gender_f">
                                            <input type="radio" class="calculator__card-radio calculator__input--radio" name="bc_additional_person_gender" id="bc_additional_person_gender_f" value="f">
                                            <span class="calculator__card-radio-placeholder" aria-hidden="true"></span>
                                            <div class="calculator__card-radio-text" id="bc_card_5_content_tile_bc_additional_person_gender_f_radio_text">Platzhalter: weiblich
                                            </div>
                                        </div>
                                    </label>

                                    <label for="bc_additional_person_gender_m">
                                        <div class="calculator__card-content-tile" id="bc_card_5_content_tile_bc_additional_person_gender_m">
                                            <input class="js-show-hide-content-5-1 calculator__card-radio calculator__input--radio" type="radio" name="bc_additional_person_gender" id="bc_additional_person_gender_m" value="m">
                                            <span class="calculator__card-radio-placeholder" aria-hidden="true"></span>
                                            <div class="calculator__card-radio-text" id="bc_card_5_content_tile_bc_additional_person_gender_m_radio_text">Platzhalter: männlich
                                            </div>
                                        </div>
                                    </label>

                                    <label for="bc_additional_person_gender_d">
                                        <div class="calculator__card-content-tile" id="bc_card_5_content_tile_bc_additional_person_gender_d">
                                            <input class="js-show-hide-content-5 calculator__card-radio calculator__input--radio" type="radio" name="bc_additional_person_gender" id="bc_additional_person_gender_d" value="d">
                                            <span class="calculator__card-radio-placeholder" aria-hidden="true"></span>
                                            <div class="calculator__card-radio-text" id="bc_card_5_content_tile_bc_additional_person_gender_d_radio_text">Platzhalter: divers
                                            </div>
                                        </div>
                                    </label>
                                </div>

                                <div class="calculator__form-hint " id="bc_card_5_content_hint_1">
                                </div>

                                <div class="calculator__input-errormessage" id="bc_additional_person_gender_errormessage"></div>
                            </div>

                            <div class=" calculator__display-none calculator__card-section" id="bc_card_5_content_section_age">
                                <p class="calculator__card-content-description calculator__card-content-title" id="bc_card_5_content_description_2">
                                    Platzhalter: Bitte verraten Sie uns das Alter
                                </p>
                                <p class="calculator__slider-wrapper">
                                    <input type="range" class="calculator__slider js-range-for-additional-person" id="bc_additional_person_age" name="bc_additional_person_age" min="0" max="120" step="1" value="0">
                                    <span class="calculator__slider-value" id="bc_additional_person_age_info_placement">Platzhalter: ?</span>
                                    <label for="bc_additional_person_age" id="bc_additional_person_age_info">Platzhalter: Jahre</label>
                                <div class="calculator__input-errormessage" id="bc_additional_person_age_errormessage"></div>
                                </p>
                            </div>

                            <div class="calculator__input-errormessage" name="bc_additional_person_errormessage" id="bc_additional_person_errormessage"></div>
                        </div>

                        <div class="calculator__card-nav">
                            <input type="button" class="calculator__btn--secondary a-btn btn--secondary bc_card_nav_button_prev" id="bc_card_5_nav_button_previous" value="Platzhalter: Zurück">
                            <input type="button" id="bc_card_nav_card_5_button_add_person" class=" a-btn btn--primary calculator__btn--primary calculator__nav-btn--next calculator__display-none js-save-additional-person" value="Platzhalter: hinzufügen">
                        </div>
                    </div>

                    <!-- CARD 6 collection of benefits -->
                    <div class="calculator__card" id="bc_card_6" hidden>

                        <div class="calculator__card-content-headline" id="bc_card_6_content_headline">Platzhalter: Ihr persönlicher Vorteil aus unseren Extra-Leistungen:
                        </div>

                        <div class="calculator__card-content">
                            <div class="calculator__result-overview" id="bc_benefits_overview"></div>
                        </div>

                        <div class="calculator__card-nav">
                            <span id="bc_card_6_nav_button_membership"></span>
                            <input type="button" class="calculator__btn--secondary a-btn btn--secondary calculator__nav-btn--home" id="bc_card_6_nav_button_home" value="Platzhalter: Neu berechnen">
                        </div>
                    </div>

                </div>
            </fieldset>
        </form>

    </div>

    <div class="o-teaser-collection teaser-collection--certifications js-teaser-targeting-init">

        <h3 class="teaser-collection__headline teaser-collection__headline--h4">Zertifizierung</h3>

        <div class="teaser-collection__text">
            <p>Auf unsere Informationen können Sie sich verlassen. Sie sind hochwertig und zertifiziert. Dafür haben wir Brief und Siegel.</p>

        </div>

        <div class="teaser-collection__teaser-wrapper">
            <a href="" class="o-teaser teaser--icon-image">

                <div class="teaser__image">

                    <img src="../../images/afgis-siegel.jpg" 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/stiftung-health-on-the-net--hon--siegel.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="">
                Redaktionelle Grundsätze
            </a>

        </div>

    </div>

</article>

<div class="o-content-footer">
    <div class="content-footer__info-container">
        <div class="a-plaintext plaintext--webcode">Webcode: a000876</div>

        <div class="m-timestamp "><span class="timestamp__label">Letzte Aktualisierung:</span> <time class="a-datetime ">06.03.2020</time>
        </div>

    </div>
    <div class="content-footer__cta-container">
        <form class="m-user-rating js-user-rating" action="/mock/page-rating-response.json" method="GET" data-success-message="Vielen Dank für Ihr Feedback.">
            <div class="user-rating__stars">
                <h3 class="user-rating__headline">Wie bewerten Sie diesen Artikel?</h3>
                <div class="a-rating-stars" role="group" aria-labelledby="rating-label">
                    <span class="sr-only" id="rating-label">Ihre Bewertung: </span>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="1">
                        <span class="sr-only">Ihre Bewertung: 1 Stern</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="2">
                        <span class="sr-only">Ihre Bewertung: 2 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="3">
                        <span class="sr-only">Ihre Bewertung: 3 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="4">
                        <span class="sr-only">Ihre Bewertung: 4 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="5">
                        <span class="sr-only">Ihre Bewertung: 5 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                </div>

            </div>

            <div class="user-rating__message" hidden>
                <label class="a-label user-rating__label" for="bm-rating-textarea">
                    Haben Sie noch weitere Anmerkungen zu Ihrer Bewertung?

                    <span class="sr-only">Maximale Zeichenzahl: 1000</span>
                </label>

                <div class="user-rating__textarea-wrapper">
                    <textarea class="a-textarea " id="bm-rating-textarea" name="comment" placeholder="Wir freuen uns über Ihre Anregungen..." autocomplete="off" maxlength="1000"></textarea>

                    <div class="a-counter " data-target="#bm-rating-textarea" hidden>
                        <span class="counter__current"></span>
                        /
                        <span class="counter__max"></span>
                    </div>

                </div>
                <input type="hidden" name="webcode" value="a000876">
                <label class="a-label user-rating__name-label" for="ratingname" aria-hidden="true">
                    Name

                </label>

                <input type="text" value="" class="a-input user-rating__name" id="ratingname" name="name" autocomplete="off" tabindex="-1" aria-hidden="true">

                <button class="a-btn btn--secondary js-rating-cancel" type="button">Abbrechen</button>

                <button class="a-btn btn--primary js-rating-submit" type="submit">Abschicken</button>

            </div>
            <div class="user-rating__success-text" hidden>
                <div class="a-richtext ">
                    <p>Vielen Dank für Ihr Feedback.<br><a href="#" class="bm-richtext-link">Link</a></p>
                </div>

            </div>
        </form>

        <div class="m-list list--socialmedia js-socialmedia">

            <ul class="a-list-basic list--social-icon">
                <li class="list__item ">
                    <a class="a-btn btn--print" href="javascript:window.print();" title="Drucken">
                        <i class="a-icon icon--print" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei Twitter teilen" target="_blank" data-service="twitter">
                        <i class="a-icon icon--twitter" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei Facebook teilen" target="_blank" data-service="facebook">
                        <i class="a-icon icon--facebook" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="whatsapp://send?text&#x3D;Krankenkasse%3A%20Starke%20Leistungen%20und%20Top-Service%20%7C%20BARMER%20https%3A%2F%2Fwww.barmer.de%2F" title="Bei Whatsapp teilen" data-service="whatsapp">
                        <i class="a-icon icon--whatsapp" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei XING teilen" target="_blank" data-service="xing">
                        <i class="a-icon icon--xing" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei LinkedIn teilen" target="_blank" data-service="linkedin">
                        <i class="a-icon icon--linkedin" aria-hidden="true"></i>
                    </a>

                </li>
            </ul>

        </div>

    </div>
</div>

<div class="o-teaser-collection teaser-collection--related-content">

    <h3 class="teaser-collection__headline teaser-collection__headline--h3">Entspannung, Abwechslung und Inspiration - mit unseren digitalen Angeboten</h3>

    <div class="teaser-collection__teaser-wrapper">
        <a href="http://tagesschau.de" class="o-teaser ">

            <div class="teaser__image">

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

            </div>

            <div class="teaser__text">
                Karies: Nicht das einzige Problem für Kinderzähne
                &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </div>

        </a>

        <a href="http://tagesschau.de" class="o-teaser ">

            <div class="teaser__image">

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

            </div>

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

        </a>

        <a href="http://tagesschau.de" class="o-teaser ">

            <div class="teaser__image">

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

            </div>

            <div class="teaser__text">
                Mit digitalen Services und vielen Extras kostengünstig krankenversichert sein
                &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </div>

        </a>

    </div>

</div>
<article class="p-article {{viewtypes.specifier}}">
  {{render '@article-head' partials.articleHead merge=true}}

  {{!-- main modules in article --}}

  {{render '@calculator--benefit-new-clients' merge=true }}

  {{!-- End main modules in article --}}

  {{render '@teaser-collections--certifications' merge=true }}

</article>

{{render '@content-footer' merge=true}}
{{render '@teaser-collections--related-content' 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
          }
        }
      }
    }
  }
}

No notes defined.