Calculator: Benefit Leaving Clients

<div class="o-calculator calculator--benefit js-calculator-benefit-init is-leaving-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>