<!-- Default -->
<div class="stage-insert-audience">
    <ul class="stage-insert-audience__menu">
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--employed icon--before" id="icon-7c6a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-employed"></use>
</svg> Arbeitnehmer
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Für Arbeitnehmer: umfassender Schutz und attraktive Extraleistungen
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-9309" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Die günstigste deutschlandweite Krankenkasse: Bis zu 302 € Beitragsvorteil</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-cc7a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Attraktives Bonusprogramm &amp; 24-Stunden-Medizinberatung</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-9942" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Professionelle Zahnreinigung (bei &gt; 2.000 Zahnärzten)</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-e47f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Homöopathie, Osteopathie und Natur-Arzneimittel</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-fa64" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">eCoaches: Online-Angebote für Fitness &amp; Burnout-Prävention</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-f33a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Die günstigste deutschlandweite Krankenkasse: Bis zu 302 € Beitragsvorteil</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-2687" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Attraktives Bonusprogramm &amp; 24-Stunden-Medizinberatung</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-33e4" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Professionelle Zahnreinigung (bei &gt; 2.000 Zahnärzten)</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-b0cb" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Homöopathie, Osteopathie und Natur-Arzneimittel</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-1e38" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">eCoaches: Online-Angebote für Fitness &amp; Burnout-Prävention</span>
                    </li>
                </ul>
                <div class="stage-insert-audience__cta">
                    <a class="button stage-insert-audience__button button--red" id="button-3967" href="#">Jetzt Mitglied werden
</a>
                    <a class="button stage-insert-audience__button button--blue" id="button-467a" href="#">Optionaler Button
</a>
                </div>
            </div>
        </li>
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--self-employed icon--before" id="icon-a895" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-self-employed"></use>
</svg> Selbstständige
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Preis und Leistung für Selbstständige: weniger zahlen für Rundum-Schutz und starke Extras
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-e4b6" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Die günstigste deutschlandweite Krankenkasse: bis zu 579 € sparen</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-253b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Extraleistungen im Wert von mehr als 1000 Euro, zum Beispiel:</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-7fc5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Haushaltshilfe für Singles und attraktive Krankentagegeld-Versicherung</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-ee0a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Arztterminservice: schnell und einfach zum nächsten Termin</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-4afc" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">24-Stunden-Beratung zu medizinischen Fragen</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-f0dc" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Die günstigste deutschlandweite Krankenkasse: bis zu 579 € sparen</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-3b49" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Extraleistungen im Wert von mehr als 1000 Euro, zum Beispiel:</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-294d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Haushaltshilfe für Singles und attraktive Krankentagegeld-Versicherung</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-eb57" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Arztterminservice: schnell und einfach zum nächsten Termin</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-8d1b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">24-Stunden-Beratung zu medizinischen Fragen</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-b6cb" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">24-Stunden-Beratung zu medizinischen Fragen</span>
                    </li>
                </ul>
                <div class="stage-insert-audience__cta">
                    <a class="button stage-insert-audience__button button--red" id="button-36a1" href="#">Jetzt Mitglied werden
</a>
                    <a class="button stage-insert-audience__button button--blue" id="button-6a83" href="#">Selbstständig
</a>
                </div>
            </div>
        </li>
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--trainee icon--before" id="icon-688e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-trainee"></use>
</svg> Auszubildende
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Für den gesunden Start ins Berufsleben: Die hkk-Vorteile für Auszubildende
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-76d4" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Günstigste deutschlandweite Krankenkasse: jede Menge sparen</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-2956" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">eCoaches für Fitness und Stressreduktion</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-e4aa" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Preisvorteile in Fitness-Studios</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-c194" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Sportmedizinische Untersuchung</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-2636" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Erweiterter Impfschutz auch für Auslandsreisen</span>
                    </li>
                </ul>
                <div class="stage-insert-audience__cta">
                    <a class="button stage-insert-audience__button button--red" id="button-7fad" href="#">Jetzt Mitglied werden
</a>
                </div>
            </div>
        </li>
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--student icon--before" id="icon-2c58" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-student"></use>
</svg> Studierende
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Gesund durchs Studium mit den starken hkk-Vorteilen
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-c734" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Attraktives Bonusprogramm</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-ad8b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Virtuelle Gesundheits-Coaches</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-a115" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Sportmedizinische Untersuchung und Fitness-Preisvorteile</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-213c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Naturarzneimittel, Osteopathie und Homöopathie</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-c147" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Reiseimpfungen</span>
                    </li>
                </ul>
                <div class="stage-insert-audience__cta">
                    <a class="button stage-insert-audience__button button--red" id="button-c027" href="#">Jetzt Mitglied werden
</a>
                </div>
            </div>
        </li>
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--young-family icon--before" id="icon-d84e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-young-family"></use>
</svg> Familien
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Umfassend und besonders günstig: die starken Extras für alle in der Familie!
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-c2ce" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Zusätzliche Vorsorge für Schwangere, Kinder und Jugendliche</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-a2d9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Haushaltshilfe, kostenlose Erstbrille für Kinder &amp; Jugendliche</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-e807" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Homöopathie, Osteopathie und alternative Medikamente</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-35e6" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Erweiterte Schutz- und Reiseimpfungen</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-96d9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Die günstigste deutschlandweite Krankenkasse: bis zu 579 € sparen</span>
                    </li>
                </ul>
                <div class="stage-insert-audience__cta">
                    <a class="button stage-insert-audience__button button--red" id="button-864b" href="#">Jetzt Mitglied werden
</a>
                </div>
            </div>
        </li>
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--company icon--before" id="icon-9dfd" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-company"></use>
</svg> Arbeitgeber
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">hkk-Kunden schätzen das herausragende Verhältnis von Preis und Leistung. Firmen profitieren von kompetentem Service und aktuellen Informationen.
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-7bb5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Die günstigste deutschlandweite Krankenkasse</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-96bb" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Extraleistungen im Wert von mehr als 1000 Euro</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-e954" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Persönliche Betreuung</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-aa7d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Kostenlose Jahreswechselseminare</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-0d43" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Betriebliches Gesundheitsmanagement</span>
                    </li>
                </ul>
            </div>
        </li>
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--user icon--before" id="icon-2b28" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-user"></use>
</svg> Weitere
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Umfassender Versicherungsschutz für Beamte und Pensionäre, Rentner und Freiwillig Versicherte
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-778b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Arztterminservice: schnell und einfach zum nächsten Termin</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-2a43" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Attraktives Bonusprogramm</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-ad28" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Gesundheitskurse vor Ort und online</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-c2c4" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Die günstigste deutschlandweite Krankenkasse</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-764a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Umfangreiche Vorsorgeangebote</span>
                    </li>
                </ul>
                <div class="stage-insert-audience__cta">
                    <a class="button stage-insert-audience__button button--red" id="button-859f" href="#">Jetzt Mitglied werden
</a>
                </div>
            </div>
        </li>
    </ul>
</div>

<!-- Short -->
<div class="stage-insert-audience">
    <ul class="stage-insert-audience__menu">
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--big-employed icon--before" id="icon-2464" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-employed"></use>
</svg> Arbeitnehmer
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Bestes Preis-Leistungs-Verhältnis
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-8402" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Günstigste deutschlandweite Krankenkasse</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-850a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Überdurchschnittliche Leistungen für Versicherte</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-7a78" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr</span>
                    </li>
                </ul>
                <div class="stage-insert-audience__cta">
                    <button class="button stage-insert-audience__button button--red" id="button-eda2" type="button">Jetzt Mitglied werden
</button>
                </div>
            </div>
        </li>
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--big-self-employed icon--before" id="icon-5893" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-self-employed"></use>
</svg> Selbstständige
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Selbständig
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-6d8a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Lorem ipsum</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-1ce3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr</span>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

<!-- Target Groups Unorderlist -->
<div class="stage-insert-audience">
    <ul class="stage-insert-audience__menu">
        <li class="stage-insert-audience__menu-item stage-insert-audience--target-group">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--big-employed icon--before" id="icon-6b2f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-employed"></use>
</svg> Arbeitnehmer
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Bestes Preis-Leistungs-Verhältnis
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-f079" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Günstigste deutschlandweite Krankenkasse</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-5187" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Überdurchschnittliche Leistungen für Versicherte</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-b054" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr</span>
                    </li>
                </ul>
                <div class="stage-insert-audience__cta">
                    <button class="button stage-insert-audience__button button--red" id="button-8a44" type="button">Jetzt Mitglied werden
</button>
                    <a class="button stage-insert-audience__button button--blue button--transparent" id="button-9357" href="#">Selbstständig
</a>
                </div>
                <div class="formatted-text formatted-text--small">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem.</p>
                </div>
            </div>
        </li>
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--big-self-employed icon--before" id="icon-88e6" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-self-employed"></use>
</svg> Selbstständige
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Selbständig
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-2807" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Lorem ipsum</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-7114" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr</span>
                    </li>
                </ul>
                <div class="formatted-text formatted-text--small">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem.</p>
                </div>
            </div>
        </li>
    </ul>
</div>

<!-- Target Groups Orderlist -->
<div class="stage-insert-audience">
    <ul class="stage-insert-audience__menu">
        <li class="stage-insert-audience__menu-item stage-insert-audience--target-group">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--big-employed icon--before" id="icon-03a7" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-employed"></use>
</svg> Arbeitnehmer
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Bestes Preis-Leistungs-Verhältnis
                </h1>
                <ol class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-50ec" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Günstigste deutschlandweite Krankenkasse</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-bf39" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Überdurchschnittliche Leistungen für Versicherte</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-b1c9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr</span>
                    </li>
                </ol>
                <div class="stage-insert-audience__cta">
                    <button class="button stage-insert-audience__button button--red" id="button-b968" type="button">Jetzt Mitglied werden
</button>
                    <a class="button stage-insert-audience__button button--blue button--transparent" id="button-a64a" href="#">Selbstständig
</a>
                </div>
                <div class="formatted-text formatted-text--small">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem.</p>
                </div>
            </div>
        </li>
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--big-self-employed icon--before" id="icon-fcdd" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-self-employed"></use>
</svg> Selbstständige
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Selbständig
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-fd7d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Lorem ipsum</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-d5ae" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr</span>
                    </li>
                </ul>
                <div class="formatted-text formatted-text--small">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem.</p>
                </div>
            </div>
        </li>
    </ul>
</div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render stage insert
.stage-insert-audience&attributes(attr)
  //- Elements
  if elements
    ul.stage-insert-audience__menu
      each item in elements
        if item.defaultOrderStyle
          -
            item.itemAttr = item.itemAttr || {};
            item.itemAttr.class = classList(item.itemAttr.class);
            item.itemAttr.class.push('stage-insert-audience--target-group');

        li.stage-insert-audience__menu-item&attributes(item.itemAttr)
          .stage-insert-audience__menu-item-header
            | #[!= include('@icon', { icon: item.icon, before: true, attr: { class: 'stage-insert-audience__menu-icon' } })] #{item.title}

          if item.content
            .stage-insert-audience__tab
              //- Headline
              if item.content.headline
                - item.content.headlineOptions = Object.assign({}, {text: item.content.headline}, item.content.headlineOptions)
                != include('@headline--headline-1', item.content.headlineOptions)

              //- List
              if item.content.list
                - listType = item.content.order ? 'ol' : 'ul'
                #{listType}.stage-insert-audience__list
                  each listItem in item.content.list
                    li.stage-insert-audience__list-item
                      != include('@icon', { icon: 'checkmark-circle', before: true, attr: { class: 'stage-insert-audience__list-icon' } })
                      span.stage-insert-audience__list-item-text #{listItem}

              //- Buttons
              if item.content.buttons
                .stage-insert-audience__cta
                  each button in item.content.buttons
                    - button.settings = Object.assign({}, {attr: { class: 'stage-insert-audience__button'}}, button.settings)
                    != include(`@${button.use}`, button.settings)

              //- text
              if item.content.text
                != include('@formatted-text', {small: true, content: item.content.text})
/* Default */
{
  "elements": [
    {
      "title": "Arbeitnehmer",
      "icon": "employed",
      "content": {
        "headline": "Für Arbeitnehmer: umfassender Schutz und attraktive Extraleistungen",
        "list": [
          "Die günstigste deutschlandweite Krankenkasse: Bis zu 302 € Beitragsvorteil",
          "Attraktives Bonusprogramm & 24-Stunden-Medizinberatung",
          "Professionelle Zahnreinigung (bei > 2.000 Zahnärzten)",
          "Homöopathie, Osteopathie und Natur-Arzneimittel",
          "eCoaches: Online-Angebote für Fitness & Burnout-Prävention",
          "Die günstigste deutschlandweite Krankenkasse: Bis zu 302 € Beitragsvorteil",
          "Attraktives Bonusprogramm & 24-Stunden-Medizinberatung",
          "Professionelle Zahnreinigung (bei > 2.000 Zahnärzten)",
          "Homöopathie, Osteopathie und Natur-Arzneimittel",
          "eCoaches: Online-Angebote für Fitness & Burnout-Prävention"
        ],
        "buttons": [
          {
            "use": "button--red",
            "settings": {
              "text": "Jetzt Mitglied werden",
              "link": "#"
            }
          },
          {
            "use": "button--blue",
            "settings": {
              "text": "Optionaler Button"
            }
          }
        ]
      }
    },
    {
      "title": "Selbstständige",
      "icon": "self-employed",
      "content": {
        "headline": "Preis und Leistung für Selbstständige: weniger zahlen für Rundum-Schutz und starke Extras",
        "list": [
          "Die günstigste deutschlandweite Krankenkasse: bis zu 579 € sparen",
          "Extraleistungen im Wert von mehr als 1000 Euro, zum Beispiel:",
          "Haushaltshilfe für Singles und attraktive Krankentagegeld-Versicherung",
          "Arztterminservice: schnell und einfach zum nächsten Termin",
          "24-Stunden-Beratung zu medizinischen Fragen",
          "Die günstigste deutschlandweite Krankenkasse: bis zu 579 € sparen",
          "Extraleistungen im Wert von mehr als 1000 Euro, zum Beispiel:",
          "Haushaltshilfe für Singles und attraktive Krankentagegeld-Versicherung",
          "Arztterminservice: schnell und einfach zum nächsten Termin",
          "24-Stunden-Beratung zu medizinischen Fragen",
          "24-Stunden-Beratung zu medizinischen Fragen"
        ],
        "buttons": [
          {
            "use": "button--red",
            "settings": {
              "text": "Jetzt Mitglied werden",
              "link": "#"
            }
          },
          {
            "use": "button--blue",
            "settings": {
              "text": "Selbstständig"
            }
          }
        ]
      }
    },
    {
      "title": "Auszubildende",
      "icon": "trainee",
      "content": {
        "headline": "Für den gesunden Start ins Berufsleben: Die hkk-Vorteile für Auszubildende",
        "list": [
          "Günstigste deutschlandweite Krankenkasse: jede Menge sparen",
          "eCoaches für Fitness und Stressreduktion",
          "Preisvorteile in Fitness-Studios",
          "Sportmedizinische Untersuchung",
          "Erweiterter Impfschutz auch für Auslandsreisen"
        ],
        "buttons": [
          {
            "use": "button--red",
            "settings": {
              "text": "Jetzt Mitglied werden",
              "link": "#"
            }
          }
        ]
      }
    },
    {
      "title": "Studierende",
      "icon": "student",
      "content": {
        "headline": "Gesund durchs Studium mit den starken hkk-Vorteilen",
        "list": [
          "Attraktives Bonusprogramm",
          "Virtuelle Gesundheits-Coaches",
          "Sportmedizinische Untersuchung und Fitness-Preisvorteile",
          "Naturarzneimittel, Osteopathie und Homöopathie",
          "Reiseimpfungen"
        ],
        "buttons": [
          {
            "use": "button--red",
            "settings": {
              "text": "Jetzt Mitglied werden",
              "link": "#"
            }
          }
        ]
      }
    },
    {
      "title": "Familien",
      "icon": "young-family",
      "content": {
        "headline": "Umfassend und besonders günstig: die starken Extras für alle in der Familie!",
        "list": [
          "Zusätzliche Vorsorge für Schwangere, Kinder und Jugendliche",
          "Haushaltshilfe, kostenlose Erstbrille für Kinder & Jugendliche",
          "Homöopathie, Osteopathie und alternative Medikamente",
          "Erweiterte Schutz- und Reiseimpfungen",
          "Die günstigste deutschlandweite Krankenkasse: bis zu 579 € sparen"
        ],
        "buttons": [
          {
            "use": "button--red",
            "settings": {
              "text": "Jetzt Mitglied werden",
              "link": "#"
            }
          }
        ]
      }
    },
    {
      "title": "Arbeitgeber",
      "icon": "company",
      "content": {
        "headline": "hkk-Kunden schätzen das herausragende Verhältnis von Preis und Leistung. Firmen profitieren von kompetentem Service und aktuellen Informationen.",
        "list": [
          "Die günstigste deutschlandweite Krankenkasse",
          "Extraleistungen im Wert von mehr als 1000 Euro",
          "Persönliche Betreuung",
          "Kostenlose Jahreswechselseminare",
          "Betriebliches Gesundheitsmanagement"
        ],
        "button": "hkk-Firmenservice"
      }
    },
    {
      "title": "Weitere",
      "icon": "user",
      "content": {
        "headline": "Umfassender Versicherungsschutz für Beamte und Pensionäre, Rentner und Freiwillig Versicherte",
        "list": [
          "Arztterminservice: schnell und einfach zum nächsten Termin",
          "Attraktives Bonusprogramm",
          "Gesundheitskurse vor Ort und online",
          "Die günstigste deutschlandweite Krankenkasse",
          "Umfangreiche Vorsorgeangebote"
        ],
        "buttons": [
          {
            "use": "button--red",
            "settings": {
              "text": "Jetzt Mitglied werden",
              "link": "#"
            }
          }
        ]
      }
    }
  ]
}

/* Short */
{
  "elements": [
    {
      "title": "Arbeitnehmer",
      "icon": "big-employed",
      "content": {
        "headline": "Bestes Preis-Leistungs-Verhältnis",
        "list": [
          "Günstigste deutschlandweite Krankenkasse",
          "Überdurchschnittliche Leistungen für Versicherte",
          "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
        ],
        "buttons": [
          {
            "use": "button--red",
            "settings": {
              "text": "Jetzt Mitglied werden"
            }
          }
        ]
      }
    },
    {
      "title": "Selbstständige",
      "icon": "big-self-employed",
      "content": {
        "headline": "Selbständig",
        "list": [
          "Lorem ipsum",
          "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
        ],
        "button": "Los geht's"
      }
    }
  ]
}

/* Target Groups Unorderlist */
{
  "elements": [
    {
      "title": "Arbeitnehmer",
      "icon": "big-employed",
      "defaultOrderStyle": true,
      "content": {
        "headline": "Bestes Preis-Leistungs-Verhältnis",
        "list": [
          "Günstigste deutschlandweite Krankenkasse",
          "Überdurchschnittliche Leistungen für Versicherte",
          "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
        ],
        "buttons": [
          {
            "use": "button--red",
            "settings": {
              "text": "Jetzt Mitglied werden"
            }
          },
          {
            "use": "button--blue",
            "settings": {
              "text": "Selbstständig",
              "transparent": true
            }
          }
        ],
        "text": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n"
      }
    },
    {
      "title": "Selbstständige",
      "icon": "big-self-employed",
      "content": {
        "headline": "Selbständig",
        "text": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n",
        "list": [
          "Lorem ipsum",
          "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
        ],
        "button": "Los geht's"
      }
    }
  ]
}

/* Target Groups Orderlist */
{
  "elements": [
    {
      "title": "Arbeitnehmer",
      "icon": "big-employed",
      "defaultOrderStyle": true,
      "content": {
        "order": true,
        "headline": "Bestes Preis-Leistungs-Verhältnis",
        "list": [
          "Günstigste deutschlandweite Krankenkasse",
          "Überdurchschnittliche Leistungen für Versicherte",
          "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
        ],
        "buttons": [
          {
            "use": "button--red",
            "settings": {
              "text": "Jetzt Mitglied werden"
            }
          },
          {
            "use": "button--blue",
            "settings": {
              "text": "Selbstständig",
              "transparent": true
            }
          }
        ],
        "text": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n"
      }
    },
    {
      "title": "Selbstständige",
      "icon": "big-self-employed",
      "content": {
        "headline": "Selbständig",
        "text": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n",
        "list": [
          "Lorem ipsum",
          "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
        ],
        "button": "Los geht's"
      }
    }
  ]
}

  • Content:
    import randomId from '../../../javascripts/utils/random-id';
    
    class StageInsertAudience {
      constructor($el) {
        this.$el = $el;
        this.$menu = this.$el
          .querySelector('.stage-insert-audience__menu');
    
        this.$menuItems = this.$el
          .querySelectorAll('.stage-insert-audience__menu-item');
    
        this.initMediaQuery({
          s: '(max-width: 581px)',
          m: '(max-width: 750px)',
        });
        this.initAccessibleAttributes();
        this.initEvents();
    
        this.calculateHeight();
    
        this.resizeHandler = this.handleResize.bind(this);
        window.addEventListener('resize', this.resizeHandler);
      }
    
      initAccessibleAttributes() {
        this.$menu.setAttribute('role', 'tablist');
    
        this.$menuItems.forEach(($menuItem, index) => {
          const id = randomId();
          const $content = $menuItem
            .querySelector('.stage-insert-audience__tab');
    
          // Set IDs
          $menuItem.setAttribute('id', `menu-item-${id}`);
          $content.setAttribute('id', `menu-item-tab-${id}`);
    
          // Set roles
          $menuItem.setAttribute('role', 'tab');
          $menuItem.setAttribute('tabindex', 0);
          $content.setAttribute('role', 'tabpanel');
    
          // Setup relationship
          $menuItem.setAttribute('aria-controls', `menu-item-tab-${id}`);
          $content.setAttribute('aria-labelledby', `menu-item-${id}`);
    
          // Other attributes
          $menuItem.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
          $content.setAttribute('aria-hidden', index === 0 ? 'false' : 'true');
        });
      }
    
      initEvents() {
        this.$menuItems.forEach(
          ($menuItem) => {
            const $header = $menuItem
              .querySelector('.stage-insert-audience__menu-item-header');
    
            $header.addEventListener('click', () => {
              this.toggleShow($menuItem);
            });
          },
        );
    
        this.$menuItems.forEach(
          ($menuItem) => {
            $menuItem.addEventListener('keydown', (event) => {
              const $first =
                this.$menuItems[0];
              const $last =
                this.$menuItems[this.$menuItems.length - 1];
              const $next =
                $last !== $menuItem ? $menuItem.nextElementSibling : false;
              const $prev =
                $first !== $menuItem ? $menuItem.previousElementSibling : false;
    
              // Prevent default event
              if ([13, 32, 35, 36, 37, 38, 39, 40].indexOf(event.which) >= 0) {
                event.preventDefault();
                event.stopPropagation();
              }
    
              // eslint-disable-next-line default-case
              switch (event.which) {
                // Left/Up
                case 37:
                case 38:
                  // Check for previous tab
                  if (!$prev) { $last.focus(); } else { $prev.focus(); }
                  break;
    
                // Right/Down
                case 39:
                case 40:
                  // Check for next tab
                  if (!$next) { $first.focus(); } else { $next.focus(); }
                  break;
    
                // Home
                case 36:
                  // Set focus on first tab
                  $first.focus();
                  break;
    
                // End
                case 35:
                  // Set focus on last tab
                  $last.focus();
                  break;
    
                // Enter/Space
                case 13:
                case 32:
                  // Show content
                  $menuItem
                    .querySelector('.stage-insert-audience__menu-item-header')
                    .click();
                  break;
              }
            });
          },
        );
      }
    
      initMediaQuery(constraints) {
        this.mediaQuery = {};
        Object.keys(constraints).forEach((key) => {
          this.mediaQuery[key] = window.matchMedia(constraints[key]);
        });
      }
    
      toggleShow($el) {
        const selected = this.mediaQuery.s.matches ?
          $el.getAttribute('aria-selected') === 'true' : false;
    
        this.hideAll();
    
        $el.setAttribute('aria-selected', (!selected).toString());
        $el.querySelector('.stage-insert-audience__tab')
          .setAttribute('aria-hidden', (selected).toString());
      }
    
      hideAll() {
        this.$menuItems.forEach(
          ($menuItem) => {
            $menuItem
              .setAttribute('aria-selected', 'false');
    
            $menuItem
              .querySelector('.stage-insert-audience__tab')
              .setAttribute('aria-hidden', 'true');
          },
        );
      }
    
      calculateHeight() {
        this.$menu.removeAttribute('style');
        if (!this.mediaQuery.m.matches) {
          const menuHeight = this.$menu.offsetHeight;
          let maxHeight = menuHeight;
    
          this.$menuItems.forEach(
            ($menuItem) => {
              // make element visible to get height
              this.toggleShow($menuItem);
    
              const $content = $menuItem.querySelector(
                '.stage-insert-audience__tab'
              );
    
              const height = parseInt($content.scrollHeight, 10);
    
              if (height > maxHeight) {
                maxHeight = height;
              }
              // hide element
              this.toggleShow($menuItem);
            }
          );
          // show first tab
          this.toggleShow(this.$menuItems[0]);
          // set menu height
          this.$menu.setAttribute('style', `height: ${maxHeight}px`);
        }
      }
    
      handleResize() {
        this.calculateHeight();
      }
    }
    
    document.querySelectorAll('.stage-insert-audience').forEach(
      $el => new StageInsertAudience($el),
    );
    
  • URL: /components/raw/stage-insert-audience/stage-insert-audience.js
  • Filesystem Path: src/components/organisms/stage-insert-audience/stage-insert-audience.js
  • Size: 5.3 KB
  • Content:
    $stage-insert-min-height: 360px;
    $stage-insert-audience-breakpoint: 750px;
    
    @mixin arrow-svg($color: #fff) {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9"><path fill="' + $color + '" d="M8 6.6L1.7.3C1.33-.1.7-.1.3.3-.1.67-.1 1.3.3 1.7l7 7c.38.4 1.02.4 1.4 0l7-7c.4-.38.4-1.02 0-1.4-.38-.4-1.02-.4-1.4 0L8 6.6z"/></svg>');
      content: '';
      display: inline-block;
      height: 0.9rem;
      transform: translate(0, -50%);
      transition: $default-transition-duration transform;
      width: 1.6rem;
    }
    
    .stage-insert-audience {
      background-color: $color-steelgrey-light;
      position: relative;
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        display: flex;
        min-height: $stage-insert-min-height;
      }
    }
    
    .stage-insert-audience__tab {
      background-color: $color-steelgrey-light;
      color: $color-blue;
      display: none;
      padding: 3rem 0 2.5rem;
    
      .headline {
        @include mq($from: m, $until: l) {
          font-size: 1.5rem;
        }
      }
    
      .formatted-text {
        color: $color-anthracite;
        margin-top: 1rem;
    
        @include mq($from: l) {
          margin-top: 3rem;
        }
      }
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        padding: 2rem 2.5rem 2.5rem;
        position: absolute;
        right: 4rem;
        top: 0;
        width: calc(60% - 4rem);
      }
    
      @include mq($from: l) {
        padding: 3rem 3.5rem 3.5rem;
        width: calc(70% - 4rem);
      }
    
      @include mq($from: xl) {
        padding: 4rem 4.5rem 4.5rem;
        width: calc(66.66% - 4rem);
      }
    }
    
    .stage-insert-audience__menu {
      @include list-reset();
    
      background-color: $color-blue;
      color: #fff;
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        padding: 2rem 0 2rem 2rem;
        width: 40%;
      }
    
      @include mq($from: l) {
        width: 30%;
      }
    
      @include mq($from: xl) {
        width: 33.33%;
      }
    }
    
    .stage-insert-audience__menu-item {
      background-color: $color-blue;
      padding: 0 2.5rem;
    
      @include mq($until: $stage-insert-audience-breakpoint) {
        position: relative;
    
        &::after {
          @include arrow-svg();
    
          pointer-events: none;
          position: absolute;
          right: 3rem;
          top: 3rem;
        }
      }
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        &:hover {
          background-color: darken($color-blue, 10%);
        }
      }
    }
    
    .stage-insert-audience__menu-item[aria-selected='true'] {
      background-color: $color-steelgrey-light;
      color: $color-blue;
    
      .stage-insert-audience__tab {
        animation: accordionIn 0.45s normal ease-in-out both 1;
        display: block;
      }
    
      @include mq($until: $stage-insert-audience-breakpoint) {
        &::after {
          @include arrow-svg($color-blue);
    
          transform: translate(0, -50%) rotate(180deg);
        }
      }
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        border-radius: 5px 0 0 5px;
      }
    }
    
    .stage-insert-audience__menu-item-header {
      font-size: 1.9rem;
      font-weight: bold;
      line-height: 6rem;
      margin-left: -2.5rem;
      margin-right: -2.5rem;
      min-height: 6rem;
      padding-left: 2.5rem;
      user-select: none;
    
      .stage-insert-audience__menu-item:not(:last-child) & {
        border-bottom: 1px solid darken($color-blue, 10%);
      }
    
      .stage-insert-audience__menu-item[aria-selected='true'] & {
        border-bottom: 0;
      }
    
      &:hover {
        cursor: pointer;
      }
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        margin-right: 0;
      }
    }
    
    .stage-insert-audience__menu-icon {
      height: 1.8em;
      margin-right: 1em;
      position: relative;
      top: 0.5em;
      width: 2em;
    }
    
    .stage-insert-audience__list {
      @include list-reset();
    
      font-size: 1.7rem;
      padding-top: 1rem;
    
      @include mq($from: m, $until: xl) {
        font-size: 1.5rem;
      }
    }
    
    .stage-insert-audience__list-item {
      margin-bottom: 1rem;
      padding-left: 2.5rem;
      position: relative;
    
      &:last-child {
        margin-bottom: 0;
      }
    
      @include mq($from: l) {
        padding-left: 3.5rem;
      }
    }
    
    .stage-insert-audience__list-item-text {
      opacity: 0.85;
    }
    
    .stage-insert-audience__list-icon {
      color: $color-blue;
      left: 0;
      position: absolute;
      top: 0.5rem;
    }
    
    .stage-insert-audience__cta {
      display: flex;
      flex-basis: 21rem;
      flex-wrap: wrap;
      margin-left: -0.75rem;
      margin-top: 1rem;
    
      @include mq($from: l) {
        margin-top: 3rem;
      }
    }
    
    .stage-insert-audience__button {
      margin: 0 0.75rem;
      min-width: 21rem;
    
      & + & {
        margin-left: 0.75rem;
      }
    
      @include mq($until: l) {
        margin-top: 1rem;
      }
    }
    
    @keyframes accordionIn {
      0% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }
    
    .breaker-audience .stage-insert-audience__menu {
      @include mq($from: m) {
        margin-left: -2.5rem;
        padding-left: 0;
      }
    }
    
    .stage-insert-audience--target-group {
      .stage-insert-audience__list-icon {
        display: none;
      }
    
      // stylelint-disable selector-no-qualifying-type
      ul.stage-insert-audience__list {
        list-style: disc;
        padding-left: 2rem;
      }
    
      ol.stage-insert-audience__list {
        list-style: decimal;
        padding-left: 2rem;
      }
    
      .stage-insert-audience__list-item {
        padding-left: 0;
    
        @include mq($from: m) {
          padding-left: 0.5rem;
        }
      }
    }
    
  • URL: /components/raw/stage-insert-audience/stage-insert-audience.scss
  • Filesystem Path: src/components/organisms/stage-insert-audience/stage-insert-audience.scss
  • Size: 5 KB

There are no notes for this item.