<!-- 50 25 25 -->
<section class="grid grid--50-25-25">
    <header class="grid__header">
        <h2 class="headline headline--kicker">Gut zu wissen
        </h2>
    </header>
    <div class="grid__inner">
        <div class="grid__column">
            <div class="teaser teaser--image">
                <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/50-25-25.jpg" />
                </div>
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Erkältung: 7 Tipps zum Schutz
                        </h3>
                    </div>
                    <p class="teaser__text">Erkältungen einfach lindern - oder besser noch gar nicht erst ausbrechen lassen: Das sind die Themen dieser Rubrik.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Erkältung: 7 Tipps zum Schutz"</span></span>
<svg class="icon icon--arrow-right" id="icon-d1d6" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
        <div class="grid__column">
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Alternative Heilmethoden
                        </h3>
                    </div>
                    <p class="teaser__text">Neben den schulmedizinischen Verfahren sind in den letzten Jahrzehnten verstärkt Naturheilverfahren gerfagt.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Alternative Heilmethoden"</span></span>
<svg class="icon icon--arrow-right" id="icon-9017" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Kinder &amp; Gesundheit
                        </h3>
                    </div>
                    <p class="teaser__text">Wie stillt man mit fester Nahrung ab? Was hilft gegen Kinderschnupfen? Was hat Sehschwäche mit Stubenhocken zu tun? Darüber informieren wir Sie hier.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Kinder & Gesundheit"</span></span>
<svg class="icon icon--arrow-right" id="icon-38b1" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
        <div class="grid__column">
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Zähne
                        </h3>
                    </div>
                    <p class="teaser__text">Erfahren Sie, worauf Sie beim Kauf einer Zahnbürste achten sollten, wie Sie die Angst vor dem Zahnarzt überwinden, wofür Milchzähne gut sind und mehr.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Zähne"</span></span>
<svg class="icon icon--arrow-right" id="icon-5833" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Allergie
                        </h3>
                    </div>
                    <p class="teaser__text">Viele Menschen leiden an Allergien – Tendenz steigend. Einige sind angeboren, andere entwickeln sich mit den Jahren. Wir haben für Sie Informationen rund um das Thema Allergien zusammengestellt.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Allergie"</span></span>
<svg class="icon icon--arrow-right" id="icon-3c4f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
    </div>
</section>

<!-- 50 25 -->
<section class="grid grid--50-25">
    <div class="grid__inner">
        <div class="grid__column">
            <div class="box box--bordered">
                <div class="box__content">
                    <div class="box__headline">
                        <h3 class="headline headline--headline-1">Häufige Fragen und Antworten
                        </h3>
                    </div>
                    <ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-74ba" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Bietet die hkk ein Bonusprogramm?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-a743" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Wer zahlt die professionelle Zahnreinigung?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-f9a8" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Krankmeldung &amp; Krankengeld - was gibt es zu beachten?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-dd4e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Wie bin ich im Ausland versichert?
                            </a>
                        </li>
                    </ul>
                    <div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Alle Fragen und Antworten</span>
<svg class="icon icon--arrow-right" id="icon-3e37" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid__column">
            <div class="box box--light-blue">
                <div class="box__content">
                    <div class="box__headline">
                        <h3 class="headline headline--headline-1">Kontakt
                        </h3>
                    </div>
                    <ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--online-consulting" id="icon-f916" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-online-consulting"></use>
</svg>Online Geschäftsstelle
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--mail" id="icon-deec" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>E-Mail schreiben
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--form" id="icon-a159" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-form"></use>
</svg>Kontaktformular
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--pin" id="icon-6ad6" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-pin"></use>
</svg>Geschäftstelle finden
                            </a>
                        </li>
                    </ul>
                    <div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr Kontaktdaten</span>
<svg class="icon icon--arrow-right" id="icon-a53c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 50 25 2 -->
<section class="grid grid--50-25">
    <div class="grid__inner">
        <div class="grid__column">
            <div class="box box--bordered box--grow">
                <div class="box__content">
                    <div class="box__headline">
                        <h3 class="headline headline--headline-1">Häufige Fragen und Antworten
                        </h3>
                    </div>
                    <ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-460d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Bietet die hkk ein Bonusprogramm?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-5041" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Wer zahlt die professionelle Zahnreinigung?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-0d7c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Krankmeldung &amp; Krankengeld - was gibt es zu beachten?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-0a6c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Wie bin ich im Ausland versichert?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-cbaa" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Lorem ipsum
                            </a>
                        </li>
                    </ul>
                    <div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Alle Fragen und Antworten</span>
<svg class="icon icon--arrow-right" id="icon-875d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid__column">
            <div class="box box--light-blue box--grow">
                <div class="box__content">
                    <div class="box__headline">
                        <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Der Kicker<span class="u-hidden-visually">: </span></span>
                            </span>Das ist eine Headline einer Box
                        </h3>
                    </div>
                    <form class="form form--inline">
                        <div class="form__inner">
                            <div class="form-group">
                                <label class="label u-hidden-visually" for="email">E-Mail</label>
                                <div class="form-group__inner">
                                    <input class="input input--email" type="email" placeholder="E-Mail-Adresse" required="required" autocomplete="email" id="email" name="email" />
                                </div>
                            </div>
                            <div class="form__submit">
                                <input class="button button--blue" type="submit" value="Weiter" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 50 50 -->
<section class="grid grid--50-50">
    <div class="grid__inner">
        <div class="grid__column">
            <div class="box box--bordered box--grow">
                <div class="box__content">
                    <div class="box__headline">
                        <h3 class="headline headline--headline-1">Häufige Fragen und Antworten
                        </h3>
                    </div>
                    <ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-a03c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Bietet die hkk ein Bonusprogramm?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-9dc6" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Wer zahlt die professionelle Zahnreinigung?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-98a1" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Krankmeldung &amp; Krankengeld - was gibt es zu beachten?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-c9a6" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Wie bin ich im Ausland versichert?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-5622" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Lorem ipsum
                            </a>
                        </li>
                    </ul>
                    <div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Alle Fragen und Antworten</span>
<svg class="icon icon--arrow-right" id="icon-6004" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid__column">
            <div class="box box--light-blue box--grow">
                <div class="box__content">
                    <div class="box__headline">
                        <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Der Kicker<span class="u-hidden-visually">: </span></span>
                            </span>Das ist eine Headline einer Box
                        </h3>
                    </div>
                    <form class="form form--inline">
                        <div class="form__inner">
                            <div class="form-group">
                                <label class="label u-hidden-visually" for="email">E-Mail</label>
                                <div class="form-group__inner">
                                    <input class="input input--email" type="email" placeholder="E-Mail-Adresse" required="required" autocomplete="email" id="email" name="email" />
                                </div>
                            </div>
                            <div class="form__submit">
                                <input class="button button--blue" type="submit" value="Weiter" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 25 50 25 -->
<section class="grid grid--25-50-25">
    <header class="grid__header grid__header--big">
        <h2 class="grid__headline">Ihre Rechte</h2>
        <p class="grid__description">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.</p>
    </header>
    <div class="grid__inner">
        <div class="grid__column">
            <div class="box box--bordered">
                <div class="box__content">
                    <div class="box__headline">
                        <h3 class="headline headline--headline-1">Elterngeld: Alles was Sie wissen müssen
                        </h3>
                    </div>
                    <ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-2365" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Elterngeld für wen?
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-8d82" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Höhe des Elterngeldes
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-3506" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Anspruchsdauer
                            </a>
                        </li>
                        <li class="icon-list__item">
                            <a class="icon-block" href="#">
                                <svg class="icon icon-block__icon icon--internal-link" id="icon-42af" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Anträge und Fristen
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="box box--sand">
                <div class="box__icon">
                    <svg class="icon icon--big-calendar" id="icon-76cc" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-calendar"></use>
</svg>
                </div>
                <div class="box__content">
                    <div class="box__headline">
                        <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Der Kicker<span class="u-hidden-visually">: </span></span>
                            </span>Geld und Fristen einfach berechnen
                        </h3>
                    </div>
                    <p>Gewinnen Sie den Überblick über Beginn und Ende Ihres Ansprüche.</p>
                </div>
            </div>
            <div class="box box--sand">
                <div class="box__icon">
                    <svg class="icon icon--big-calendar" id="icon-203d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-calendar"></use>
</svg>
                </div>
                <div class="box__content">
                    <div class="box__headline">
                        <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Der Kicker<span class="u-hidden-visually">: </span></span>
                            </span>Dies ist ein dritter Container
                        </h3>
                    </div>
                    <p>Dieser wird erst später angezeigt.</p>
                </div>
            </div>
        </div>
        <div class="grid__column">
            <div class="teaser teaser--image">
                <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/25-50-25.jpg" />
                </div>
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">7 Fakten zum Mutterschaftsgeld
                        </h3>
                    </div>
                    <p class="teaser__text">Die hkk bezahlt 6 Wochen vor und 8 Wochen nach der Geburt Mutterschaftsgeld in Höhe Ihres letzten Nettoverdienstes.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "7 Fakten zum Mutterschaftsgeld"</span></span>
<svg class="icon icon--arrow-right" id="icon-57f9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Schwangerschaft und Arbeit
                        </h3>
                    </div>
                    <p class="teaser__text">Als werdende Mutter haben Sie das Recht auf besonderen Schutz und Fürsorge der Gesellschaft.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Schwangerschaft und Arbeit"</span></span>
<svg class="icon icon--arrow-right" id="icon-37ef" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Schwangerschaft
                        </h3>
                    </div>
                    <p class="teaser__text">Lorem ipsum dolor sit atmet...</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Schwangerschaft"</span></span>
<svg class="icon icon--arrow-right" id="icon-2af9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
        <div class="grid__column">
            <div class="teaser teaser--image">
                <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/25-50-25-2.jpg" />
                </div>
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Mutterschutz
                        </h3>
                    </div>
                    <p class="teaser__text">Der Mutterschutz gilt für alle schwangeren Frauen, die in einem Arbeitsverhältnis stehen.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Mutterschutz"</span></span>
<svg class="icon icon--arrow-right" id="icon-2a97" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser teaser--image">
                <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/25-50-25-3.jpg" />
                </div>
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Elternzeit – so geht's
                        </h3>
                    </div>
                    <p class="teaser__text">Nach der Geburt können Eltern bis zur Vollendung dessen dritten Lebensjahres Elternzeit nehmen.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Elternzeit – so geht's"</span></span>
<svg class="icon icon--arrow-right" id="icon-2497" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser teaser--image">
                <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/25-50-25-2.jpg" />
                </div>
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Lorem ipsum
                        </h3>
                    </div>
                    <p class="teaser__text">Lorem ipsum dolor sit atmet...</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Lorem ipsum"</span></span>
<svg class="icon icon--arrow-right" id="icon-1358" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
    </div>
</section>

<!-- 33 33 33 -->
<section class="grid grid--33-33-33">
    <div class="grid__inner">
        <div class="grid__column">
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Preis-Leistungs-Vorteil
                        </h3>
                    </div>
                    <p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Preis-Leistungs-Vorteil"</span></span>
<svg class="icon icon--arrow-right" id="icon-802b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">hkk im Test
                        </h3>
                    </div>
                    <p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "hkk im Test"</span></span>
<svg class="icon icon--arrow-right" id="icon-288c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
        <div class="grid__column">
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">
                            <svg class="icon headline__hkk-plus icon--hkk-plus" id="icon-16ed" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-16ed">
  <title id="title-icon-16ed">HKK Plus</title>
  <use xlink:href="#icon-hkk-plus"></use>
</svg>hkk Leistungsplus
                        </h3>
                    </div>
                    <p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "hkk Leistungsplus"</span></span>
<svg class="icon icon--arrow-right" id="icon-b5af" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Service und Beratung
                        </h3>
                    </div>
                    <p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Service und Beratung"</span></span>
<svg class="icon icon--arrow-right" id="icon-5c03" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
        <div class="grid__column">
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Geldvorteile
                        </h3>
                    </div>
                    <p class="teaser__text">Die hkk belohnt Ihre Aktivitäten rund um Vorsorge und Prävention mit bis zu 250 Euro pro Jahr.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Geldvorteile"</span></span>
<svg class="icon icon--arrow-right" id="icon-4c5f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Meine hkk
                        </h3>
                    </div>
                    <p class="teaser__text">In Ihrem persönlichen Bereich können Sie Formalitäten schnell und unkompliziert von zu Hause aus erledigen und dazu noch kostenfrei attraktive Online-Services nutzen.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Meine hkk"</span></span>
<svg class="icon icon--arrow-right" id="icon-c2f6" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
    </div>
</section>

<!-- 25 25 25 25 -->
<section class="grid grid--25-25-25-25">
    <div class="grid__inner">
        <div class="grid__column">
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Preis-Leistungs-Vorteil
                        </h3>
                    </div>
                    <p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Preis-Leistungs-Vorteil"</span></span>
<svg class="icon icon--arrow-right" id="icon-6ef5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">hkk im Test
                        </h3>
                    </div>
                    <p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "hkk im Test"</span></span>
<svg class="icon icon--arrow-right" id="icon-1934" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
        <div class="grid__column">
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">
                            <svg class="icon headline__hkk-plus icon--hkk-plus" id="icon-62d6" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-62d6">
  <title id="title-icon-62d6">HKK Plus</title>
  <use xlink:href="#icon-hkk-plus"></use>
</svg>hkk Leistungsplus
                        </h3>
                    </div>
                    <p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "hkk Leistungsplus"</span></span>
<svg class="icon icon--arrow-right" id="icon-468b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Service und Beratung
                        </h3>
                    </div>
                    <p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Service und Beratung"</span></span>
<svg class="icon icon--arrow-right" id="icon-5af6" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
        <div class="grid__column">
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Geldvorteile
                        </h3>
                    </div>
                    <p class="teaser__text">Die hkk belohnt Ihre Aktivitäten rund um Vorsorge und Prävention mit bis zu 250 Euro pro Jahr.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Geldvorteile"</span></span>
<svg class="icon icon--arrow-right" id="icon-0f5e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
            <div class="teaser">
                <div class="teaser__inner">
                    <div class="teaser__headline">
                        <h3 class="headline headline--headline-1">Meine hkk
                        </h3>
                    </div>
                    <p class="teaser__text">In Ihrem persönlichen Bereich können Sie Formalitäten schnell und unkompliziert von zu Hause aus erledigen und dazu noch kostenfrei attraktive Online-Services nutzen.</p>
                    <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Meine hkk"</span></span>
<svg class="icon icon--arrow-right" id="icon-44f2" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                </div>
                <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
            </div>
        </div>
        <div class="grid__column">
            <div class="box box--light-blue">
                <div class="box__content">
                    <div class="box__headline">
                        <h3 class="headline headline--headline-1">Das ist eine Headline einer Box
                        </h3>
                    </div>
                    <form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
                        <div class="form__inner">
                            <div class="form-group">
                                <label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
                                <div class="form-group__inner">
                                    <select class="select" required="required" id="current-health-insurance" name="current-health-insurance">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option value="aok-bayern">AOK Bayern</option>
  <option value="bkk-akzo-nobel-bayern">BKK Akzo Nobel Bayern</option>
</select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
                                <div class="form-group__inner">
                                    <input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
                                </div>
                            </div>
                            <div class="form__submit">
                                <input class="button button--blue" type="submit" value="Vorteil berechnen" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

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

  //- Set hidden content option
  if (hiddenAfter) attr['data-hidden-after'] = hiddenAfter;

  //- Set CTA label text
  if (ctaLabel) attr['data-cta-label'] = ctaLabel;

  //- Allowed grids
  const allowed = [
    '100',
    '50-50',
    '50-25',
    '50-25-25',
    '33-33-33',
    '25-50-25',
    '25-25-25-25',
  ];

  // Add modifier
  if (!size || !allowed.includes(size)) size = '100';
  attr.class.push(`grid--${size}`);

//- Render grid
section.grid&attributes(attr)
  //- Header
  if smallHeadline
    header.grid__header
      != include('@headline--kicker', {text: smallHeadline, level: 2})
  else if headline || description
    header.grid__header.grid__header--big
      if headline
        h2.grid__headline #{headline}
      if description
        p.grid__description #{description}

  //- Grid inners
  .grid__inner
    //- Render grid columns
    if columns
      each column in columns
        .grid__column
          //- Render column contents
          each content in column
            != include(`@${content.use}`, content)
/* 50 25 25 */
{
  "size": "50-25-25",
  "smallHeadline": "Gut zu wissen",
  "columns": [
    [
      {
        "use": "teaser",
        "headline": "Erkältung: 7 Tipps zum Schutz",
        "text": "Erkältungen einfach lindern - oder besser noch gar nicht erst ausbrechen lassen: Das sind die Themen dieser Rubrik.",
        "image": "/images/dummy/50-25-25.jpg"
      }
    ],
    [
      {
        "use": "teaser",
        "headline": "Alternative Heilmethoden",
        "text": "Neben den schulmedizinischen Verfahren sind in den letzten Jahrzehnten verstärkt Naturheilverfahren gerfagt."
      },
      {
        "use": "teaser",
        "headline": "Kinder & Gesundheit",
        "text": "Wie stillt man mit fester Nahrung ab? Was hilft gegen Kinderschnupfen? Was hat Sehschwäche mit Stubenhocken zu tun? Darüber informieren wir Sie hier."
      }
    ],
    [
      {
        "use": "teaser",
        "headline": "Zähne",
        "text": "Erfahren Sie, worauf Sie beim Kauf einer Zahnbürste achten sollten, wie Sie die Angst vor dem Zahnarzt überwinden, wofür Milchzähne gut sind und mehr."
      },
      {
        "use": "teaser",
        "headline": "Allergie",
        "text": "Viele Menschen leiden an Allergien – Tendenz steigend. Einige sind angeboren, andere entwickeln sich mit den Jahren. Wir haben für Sie Informationen rund um das Thema Allergien zusammengestellt."
      }
    ]
  ]
}

/* 50 25 */
{
  "size": "50-25",
  "columns": [
    [
      {
        "use": "box--list-bordered",
        "headline": "Häufige Fragen und Antworten",
        "more": "Alle Fragen und Antworten",
        "content": "-\n  items = [\n    {text: 'Bietet die hkk ein Bonusprogramm?', icon: 'internal-link', link: '#'},\n    {text: 'Wer zahlt die professionelle Zahnreinigung?', icon: 'internal-link', link: '#'},\n    {text: 'Krankmeldung & Krankengeld - was gibt es zu beachten?', icon: 'internal-link', link: '#'},\n    {text: 'Wie bin ich im Ausland versichert?', icon: 'internal-link', link: '#'},\n  ];\n!= include('@icon-list--lined-without-trailing', {items})\n"
      }
    ],
    [
      {
        "use": "box--list",
        "headline": "Kontakt",
        "more": "Mehr Kontaktdaten",
        "content": "-\n  items = [\n    {text: 'Online Geschäftsstelle', icon: 'online-consulting', link: '#'},\n    {text: 'E-Mail schreiben', icon: 'mail', link: '#'},\n    {text: 'Kontaktformular', icon: 'form', link: '#'},\n    {text: 'Geschäftstelle finden', icon: 'pin', link: '#'},\n  ];\n!= include('@icon-list--lined-without-trailing', {items})\n"
      }
    ]
  ]
}

/* 50 25 2 */
{
  "size": "50-25",
  "columns": [
    [
      {
        "use": "box--list-bordered",
        "headline": "Häufige Fragen und Antworten",
        "more": "Alle Fragen und Antworten",
        "grow": true,
        "content": "-\n  items = [\n    {text: 'Bietet die hkk ein Bonusprogramm?', icon: 'internal-link', link: '#'},\n    {text: 'Wer zahlt die professionelle Zahnreinigung?', icon: 'internal-link', link: '#'},\n    {text: 'Krankmeldung & Krankengeld - was gibt es zu beachten?', icon: 'internal-link', link: '#'},\n    {text: 'Wie bin ich im Ausland versichert?', icon: 'internal-link', link: '#'},\n    {text: 'Lorem ipsum', icon: 'internal-link', link: '#'},\n  ];\n!= include('@icon-list--lined-without-trailing', {items})\n"
      }
    ],
    [
      {
        "use": "box--simple-form",
        "grow": true
      }
    ]
  ]
}

/* 50 50 */
{
  "size": "50-50",
  "columns": [
    [
      {
        "use": "box--list-bordered",
        "headline": "Häufige Fragen und Antworten",
        "more": "Alle Fragen und Antworten",
        "grow": true,
        "content": "-\n  items = [\n    {text: 'Bietet die hkk ein Bonusprogramm?', icon: 'internal-link', link: '#'},\n    {text: 'Wer zahlt die professionelle Zahnreinigung?', icon: 'internal-link', link: '#'},\n    {text: 'Krankmeldung & Krankengeld - was gibt es zu beachten?', icon: 'internal-link', link: '#'},\n    {text: 'Wie bin ich im Ausland versichert?', icon: 'internal-link', link: '#'},\n    {text: 'Lorem ipsum', icon: 'internal-link', link: '#'},\n  ];\n!= include('@icon-list--lined-without-trailing', {items})\n"
      }
    ],
    [
      {
        "use": "box--simple-form",
        "grow": true
      }
    ]
  ]
}

/* 25 50 25 */
{
  "size": "25-50-25",
  "headline": "Ihre Rechte",
  "description": "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.",
  "columns": [
    [
      {
        "use": "box--list-bordered",
        "headline": "Elterngeld: Alles was Sie wissen müssen",
        "link": null,
        "content": "-\n  items = [\n    {text: 'Elterngeld für wen?', icon: 'internal-link', link: '#'},\n    {text: 'Höhe des Elterngeldes', icon: 'internal-link', link: '#'},\n    {text: 'Anspruchsdauer', icon: 'internal-link', link: '#'},\n    {text: 'Anträge und Fristen', icon: 'internal-link', link: '#'},\n  ];\n!= include('@icon-list--lined-without-trailing', {items})\n"
      },
      {
        "use": "box--icon-sand",
        "icon": "big-calendar",
        "headline": "Geld und Fristen einfach berechnen",
        "content": "p Gewinnen Sie den Überblick über Beginn und Ende Ihres Ansprüche.\n",
        "more": "Zum Fristenkalender"
      },
      {
        "use": "box--icon-sand",
        "icon": "big-calendar",
        "headline": "Dies ist ein dritter Container",
        "content": "p Dieser wird erst später angezeigt.\n",
        "more": "Zum Kalender"
      }
    ],
    [
      {
        "use": "teaser",
        "headline": "7 Fakten zum Mutterschaftsgeld",
        "text": "Die hkk bezahlt 6 Wochen vor und 8 Wochen nach der Geburt Mutterschaftsgeld in Höhe Ihres letzten Nettoverdienstes.",
        "image": "/images/dummy/25-50-25.jpg"
      },
      {
        "use": "teaser",
        "headline": "Schwangerschaft und Arbeit",
        "text": "Als werdende Mutter haben Sie das Recht auf besonderen Schutz und Fürsorge der Gesellschaft."
      },
      {
        "use": "teaser",
        "headline": "Schwangerschaft",
        "text": "Lorem ipsum dolor sit atmet..."
      }
    ],
    [
      {
        "use": "teaser",
        "headline": "Mutterschutz",
        "text": "Der Mutterschutz gilt für alle schwangeren Frauen, die in einem Arbeitsverhältnis stehen.",
        "image": "/images/dummy/25-50-25-2.jpg"
      },
      {
        "use": "teaser",
        "headline": "Elternzeit – so geht's",
        "text": "Nach der Geburt können Eltern bis zur Vollendung dessen dritten Lebensjahres Elternzeit nehmen.",
        "image": "/images/dummy/25-50-25-3.jpg"
      },
      {
        "use": "teaser",
        "headline": "Lorem ipsum",
        "text": "Lorem ipsum dolor sit atmet...",
        "image": "/images/dummy/25-50-25-2.jpg"
      }
    ]
  ]
}

/* 33 33 33 */
{
  "size": "33-33-33",
  "columns": [
    [
      {
        "use": "teaser",
        "headline": "Preis-Leistungs-Vorteil",
        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      },
      {
        "use": "teaser",
        "headline": "hkk im Test",
        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      }
    ],
    [
      {
        "use": "teaser",
        "headline": "hkk Leistungsplus",
        "hkkPlus": true,
        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      },
      {
        "use": "teaser",
        "headline": "Service und Beratung",
        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      }
    ],
    [
      {
        "use": "teaser",
        "headline": "Geldvorteile",
        "text": "Die hkk belohnt Ihre Aktivitäten rund um Vorsorge und Prävention mit bis zu 250 Euro pro Jahr."
      },
      {
        "use": "teaser",
        "headline": "Meine hkk",
        "text": "In Ihrem persönlichen Bereich können Sie Formalitäten schnell und unkompliziert von zu Hause aus erledigen und dazu noch kostenfrei attraktive Online-Services nutzen."
      }
    ]
  ]
}

/* 25 25 25 25 */
{
  "size": "25-25-25-25",
  "columns": [
    [
      {
        "use": "teaser",
        "headline": "Preis-Leistungs-Vorteil",
        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      },
      {
        "use": "teaser",
        "headline": "hkk im Test",
        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      }
    ],
    [
      {
        "use": "teaser",
        "headline": "hkk Leistungsplus",
        "hkkPlus": true,
        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      },
      {
        "use": "teaser",
        "headline": "Service und Beratung",
        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      }
    ],
    [
      {
        "use": "teaser",
        "headline": "Geldvorteile",
        "text": "Die hkk belohnt Ihre Aktivitäten rund um Vorsorge und Prävention mit bis zu 250 Euro pro Jahr."
      },
      {
        "use": "teaser",
        "headline": "Meine hkk",
        "text": "In Ihrem persönlichen Bereich können Sie Formalitäten schnell und unkompliziert von zu Hause aus erledigen und dazu noch kostenfrei attraktive Online-Services nutzen."
      }
    ],
    [
      {
        "use": "box--form"
      }
    ]
  ]
}

  • Content:
    const SELECTORS = {
      hidden: 'grid__element--hidden',
    };
    
    export default class Column {
      constructor($el, options) {
        this.$el = $el;
        this.options = options;
    
        this.initContentElements();
        this.initContentVisibility();
      }
    
      initContentElements() {
        this.$contentElements = this.$el
          .querySelectorAll(':scope > div');
      }
    
      initContentVisibility() {
        const visibilityLimit = this.options.length - this.$contentElements.length;
    
        if (visibilityLimit) {
          this.$contentElements.slice(visibilityLimit).forEach(
            $el => $el.classList.add(SELECTORS.hidden),
          );
        }
      }
    
      extend() {
        this.$contentElements.forEach(
          $el => $el.classList.remove(SELECTORS.hidden),
        );
      }
    
      remove($el) {
        if (this.$el.contains($el)) this.$el.removeChild($el);
      }
    }
    
  • URL: /components/raw/grid/grid-column.js
  • Filesystem Path: src/components/organisms/grid/grid-column.js
  • Size: 810 Bytes
  • Content:
    import h from 'hyperscript';
    import Column from './grid-column';
    
    const SELECTORS = {
      inner: '.grid__inner',
      column: '.grid__column',
      extend: '.grid__extend',
      cta: 'a.grid__extend-button.button.button--blue.button--outline',
    };
    
    export default class Grid {
      constructor($el) {
        this.$el = $el;
    
        this.initMediaQuery('(min-width: 1191px)');
      }
    
      initMediaQuery(constraints) {
        this.mediaQuery = window.matchMedia(constraints);
        this.mediaQuery.addListener(this.mediaQueryListener.bind(this));
        this.mediaQueryListener(this.mediaQuery);
      }
    
      mediaQueryListener(mediaQuery) {
        if (mediaQuery.matches) this.initExtendableGrid();
        else if (this.columns) this.extend();
      }
    
      initExtendableGrid() {
        this.extended = false;
    
        this.initGridColumns({ length: this.$el.dataset.hiddenAfter });
        this.initCTA();
      }
    
      initGridColumns(options = {}) {
        this.inner = this.$el
          .querySelector(SELECTORS.inner);
    
        this.columns = this.$el
          .querySelectorAll(SELECTORS.column)
          .map($el => new Column($el, options));
      }
    
      initCTA() {
        this.$cta = h(SELECTORS.extend,
          h(SELECTORS.cta, {
            href: '#',
            onclick: (event) => {
              event.preventDefault();
    
              this.extend();
            },
          }, this.$el.dataset.ctaLabel),
        );
    
        this.inner.appendChild(this.$cta);
      }
    
      extend() {
        if (!this.extended) {
          this.extended = true;
          this.inner.removeChild(this.$cta);
          this.columns.forEach(column => column.extend());
        }
      }
    }
    
    // Initialize Grid
    document.querySelectorAll('.grid[data-hidden-after]').forEach(
      $el => new Grid($el),
    );
    
  • URL: /components/raw/grid/grid.js
  • Filesystem Path: src/components/organisms/grid/grid.js
  • Size: 1.6 KB
  • Content:
    .grid {
      margin-bottom: 1rem;
    
      &:last-child {
        margin-bottom: 0;
      }
    
      @include mq($from: m) {
        &:not(:last-child) {
          margin-bottom: 2rem;
        }
      }
    
      @include mq($from: l) {
        &:not(:last-child) {
          margin-bottom: 3rem;
        }
      }
    }
    
    .grid__header {
      margin-bottom: 2rem;
    }
    
    .grid__header--big {
      &::after {
        background-color: $color-blue;
        content: '';
        display: block;
        height: 0.4rem;
        margin: 2.5rem auto 4rem;
        width: 6rem;
    
        @include mq($from: m) {
          height: 0.5rem;
          width: 7.5rem;
        }
      }
    }
    
    .grid__headline,
    .grid__description {
      color: $color-blue;
      margin-left: auto;
      margin-right: auto;
      max-width: 72rem;
      text-align: center;
    }
    
    .grid__headline {
      font-size: 2.3rem;
      letter-spacing: 0.4px;
      line-height: 2.7rem;
      text-transform: uppercase;
    
      @include mq($from: m) {
        font-size: 2.8rem;
        line-height: 3.3rem;
      }
    }
    
    .grid__inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      position: relative;
    
      @include mq($from: m) {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
      }
    }
    
    .grid__column {
      flex-basis: 100%;
    
      @include mq($from: m) {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }
    
    .grid__element--hidden {
      border: 0;
      height: 0;
      margin: 0;
      padding: 0;
      visibility: hidden;
    }
    
    .grid__extend {
      background-image: linear-gradient(to bottom, rgba(#fff, 0) 0%, rgba(#fff, 0) 10%, rgba(#fff, 1) 50%);
      bottom: 0;
      height: 15rem;
      left: 0;
      position: absolute;
      text-align: center;
      width: 100%;
      z-index: 2;
    }
    
    .grid__extend-button {
      margin-top: 10rem;
    }
    
    .grid--50-50 {
      .grid__inner {
        @include mq($from: m) {
          flex-wrap: nowrap;
        }
      }
    
      .grid__column {
        @include mq($from: m) {
          flex-basis: 50%;
          max-width: 50%;
        }
      }
    }
    
    .grid--33-33-33 {
      .grid__inner {
        @include mq($from: 800px) {
          flex-wrap: nowrap;
        }
      }
    
      .grid__column {
        @include mq($from: 800px) {
          flex-basis: 33.33%;
          max-width: 33.33%;
        }
      }
    }
    
    .grid--25-25-25-25 {
      .grid__inner {
        @include mq($from: 950px) {
          flex-wrap: nowrap;
        }
      }
    
      .grid__column {
        @include mq($from: m) {
          flex-basis: 50%;
          max-width: 50%;
        }
    
        @include mq($from: 950px) {
          flex-basis: 25%;
          max-width: 25%;
        }
      }
    }
    
    .grid--50-25 {
      .grid__inner {
        @include mq($from: m) {
          flex-wrap: nowrap;
        }
      }
    
      .grid__column {
        @include mq($from: m) {
          flex-basis: 50%;
          max-width: 50%;
        }
      }
    
      .grid__column:nth-child(2) {
        @include mq($from: l) {
          flex-basis: 33%;
          max-width: 33%;
        }
    
        @include mq($from: xl) {
          flex-basis: 25%;
          max-width: 25%;
        }
      }
    }
    
    .grid--50-25-25,
    .grid--25-50-25 {
      .grid__inner {
        @include mq($from: l) {
          flex-wrap: nowrap;
        }
      }
    
      .grid__column {
        @include mq($from: m) {
          flex-basis: 50%;
          max-width: 50%;
        }
    
        @include mq($from: l) {
          flex-basis: 33.33%;
          max-width: 33.33%;
        }
    
        @include mq($from: xl) {
          flex-basis: 25%;
          max-width: 25%;
        }
      }
    }
    
    .grid--50-25-25 {
      .grid__column:nth-child(1) {
        @include mq($from: m) {
          flex-basis: 100%;
          max-width: 100%;
        }
    
        @include mq($from: l) {
          flex-basis: 33.33%;
          max-width: 33.33%;
        }
    
        @include mq($from: xl) {
          flex-basis: 50%;
          max-width: 50%;
        }
      }
    }
    
    .grid--25-50-25 {
      .grid__column:nth-child(2) {
        order: -1;
    
        @include mq($from: m) {
          flex-basis: 100%;
          max-width: 100%;
        }
    
        @include mq($from: l) {
          flex-basis: 33.33%;
          max-width: 33.33%;
          order: 0;
        }
    
        @include mq($from: xl) {
          flex-basis: 50%;
          max-width: 50%;
        }
      }
    }
    
  • URL: /components/raw/grid/grid.scss
  • Filesystem Path: src/components/organisms/grid/grid.scss
  • Size: 3.7 KB

There are no notes for this item.