<!-- Grüner CTA -->
<header class="header js-header t-green">
  <div class="header__inner"><a class="header__logo" href="#" title="vivida bkk"><img class="header__logo-image" src="/images/logo.svg" alt="Logo der vivida bkk" /></a>
    <div class="header__navigation-container">
      <div class="header__navigation-inner">
        <div class="header__menu-header"><button class="header__menu-close"><span class="u-hidden">Schließen</span><svg class="icon icon--cross header__menu-close-icon" viewBox="0 0 200 200" aria-hidden="true">
              <use xlink:href="#icon-cross"></use>
            </svg></button></div>
        <ul class="header__service-list">
          <li class="header__service-item"><span><svg class="icon icon--phone header__service-icon" viewBox="0 0 200 200" aria-hidden="true">
  <use xlink:href="#icon-phone"></use>
</svg><span class="header__service-text">07720 9727-0</span></span></li>
          <li class="header__service-item"><a class="header__service-link" href="#"><span class="header__service-text">Karriere</span></a></li>
          <li class="header__service-item"><a class="header__service-link" href="#"><span class="header__service-text">Presse</span></a></li>
          <li class="header__service-item"><a class="header__service-link" href="#"><span class="header__service-text header__service-text--bold">Firmenkunden</span></a></li>
        </ul>
        <div class="header__navigation-wrapper">
          <nav class="header__navigation">
            <ul class="header__navigation-list">
              <li class="header__navigation-item"><a class="header__navigation-link" href="#">Leistungen<svg class="icon icon--chevron-right header__navigation-icon" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="#icon-chevron-right"></use>
                  </svg></a>
                <div class="header__flyout">
                  <div class="header__flyout-inner">
                    <ul class="header__flyout-list">
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#layers"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#layers-fill"></use>
</svg><span class="header__flyout-link-text">Leistung Übersicht</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#star"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#star-fill"></use>
</svg><span class="header__flyout-link-text">Top Leistungen</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#dentistry"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#dentistry-fill"></use>
</svg><span class="header__flyout-link-text">Zähne</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#accessible_forward"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#accessible_forward"></use>
</svg><span class="header__flyout-link-text">Menschen mit Behinderung</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#list"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#list"></use>
</svg><span class="header__flyout-link-text">Leistungen A – Z</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#sell"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#sell-fill"></use>
</svg><span class="header__flyout-link-text">Tarife</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#volunteer_activism"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#volunteer_activism-fill"></use>
</svg><span class="header__flyout-link-text">Pflege</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                    </ul>
                    <div class="header__flyout-footer">
                      <div class="header__flyout-footer-items">
                        <div class="header__flyout-footer-item"><svg class="icon icon--laptop-account header__flyout-footer-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-laptop-account"></use>
                          </svg>
                          <div class="header__flyout-footer-content">
                            <h4 class="header__flyout-footer-title">Video Beratung</h4>
                            <ul class="header__flyout-footer-list">
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="#">FAQ</a></li>
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="#">Termin vereinbaren</a></li>
                            </ul>
                          </div>
                        </div>
                        <div class="header__flyout-footer-item"><svg class="icon icon--phone header__flyout-footer-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-phone"></use>
                          </svg>
                          <div class="header__flyout-footer-content">
                            <h4 class="header__flyout-footer-title">Kontakt</h4>
                            <ul class="header__flyout-footer-list">
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="tel:+49772097270">07720 9727-0</a></li>
                              <li class="header__flyout-footer-list-item">Mo. bis Fr. von 8 - 18 Uhr</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="header__navigation-item"><a class="header__navigation-link" href="#">Vorsorge<svg class="icon icon--chevron-right header__navigation-icon" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="#icon-chevron-right"></use>
                  </svg></a>
                <div class="header__flyout">
                  <div class="header__flyout-inner">
                    <ul class="header__flyout-list">
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#accessible_forward"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#accessible_forward"></use>
</svg><span class="header__flyout-link-text">Menschen mit Behinderung</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#list"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#list"></use>
</svg><span class="header__flyout-link-text">Leistungen A – Z</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#sell"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#sell-fill"></use>
</svg><span class="header__flyout-link-text">Tarife</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#volunteer_activism"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#volunteer_activism-fill"></use>
</svg><span class="header__flyout-link-text">Pflege</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                    </ul>
                    <div class="header__flyout-footer">
                      <div class="header__flyout-footer-items">
                        <div class="header__flyout-footer-item"><svg class="icon icon--laptop-account header__flyout-footer-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-laptop-account"></use>
                          </svg>
                          <div class="header__flyout-footer-content">
                            <h4 class="header__flyout-footer-title">Video Beratung</h4>
                            <ul class="header__flyout-footer-list">
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="#">FAQ</a></li>
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="#">Termin vereinbaren</a></li>
                            </ul>
                          </div>
                        </div>
                        <div class="header__flyout-footer-item"><svg class="icon icon--phone header__flyout-footer-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-phone"></use>
                          </svg>
                          <div class="header__flyout-footer-content">
                            <h4 class="header__flyout-footer-title">Kontakt</h4>
                            <ul class="header__flyout-footer-list">
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="tel:+49772097270">07720 9727-0</a></li>
                              <li class="header__flyout-footer-list-item">Mo. bis Fr. von 8 - 18 Uhr</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="header__navigation-item"><a class="header__navigation-link" href="#">Service<svg class="icon icon--chevron-right header__navigation-icon" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="#icon-chevron-right"></use>
                  </svg></a>
                <div class="header__flyout">
                  <div class="header__flyout-inner">
                    <ul class="header__flyout-list">
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#stack"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#stack"></use>
</svg><span class="header__flyout-link-text">Leistung Übersicht</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#sell"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#sell-fill"></use>
</svg><span class="header__flyout-link-text">Tarife</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#volunteer_activism"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#volunteer_activism-fill"></use>
</svg><span class="header__flyout-link-text">Pflege</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                    </ul>
                    <div class="header__flyout-footer">
                      <div class="header__flyout-footer-items">
                        <div class="header__flyout-footer-item"><svg class="icon icon--laptop-account header__flyout-footer-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-laptop-account"></use>
                          </svg>
                          <div class="header__flyout-footer-content">
                            <h4 class="header__flyout-footer-title">Video Beratung</h4>
                            <ul class="header__flyout-footer-list">
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="#">FAQ</a></li>
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="#">Termin vereinbaren</a></li>
                            </ul>
                          </div>
                        </div>
                        <div class="header__flyout-footer-item"><svg class="icon icon--phone header__flyout-footer-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-phone"></use>
                          </svg>
                          <div class="header__flyout-footer-content">
                            <h4 class="header__flyout-footer-title">Kontakt</h4>
                            <ul class="header__flyout-footer-list">
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="tel:+49772097270">07720 9727-0</a></li>
                              <li class="header__flyout-footer-list-item">Mo. bis Fr. von 8 - 18 Uhr</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="header__navigation-item"><a class="header__navigation-link" href="#">Kontakt<svg class="icon icon--chevron-right header__navigation-icon" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="#icon-chevron-right"></use>
                  </svg></a>
                <div class="header__flyout">
                  <div class="header__flyout-inner">
                    <ul class="header__flyout-list">
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#accessible_forward"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#accessible_forward"></use>
</svg><span class="header__flyout-link-text">Menschen mit Behinderung</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#list"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#list"></use>
</svg><span class="header__flyout-link-text">Leistungen A – Z</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#sell"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#sell-fill"></use>
</svg><span class="header__flyout-link-text">Tarife</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                      <li class="header__flyout-list-item"><a class="header__flyout-link" href="#"><span class="header__flyout-link-inner"><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--default">
  <use xlink:href="/icons/material.svg#volunteer_activism"></use>
</svg><svg class="icon-material header__flyout-link-icon header__flyout-link-icon--hover">
  <use xlink:href="/icons/material.svg#volunteer_activism-fill"></use>
</svg><span class="header__flyout-link-text">Pflege</span></span><svg class="icon icon--chevron-right header__flyout-link-icon header__flyout-link-icon--hover" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-chevron-right"></use>
                          </svg></a></li>
                    </ul>
                    <div class="header__flyout-footer">
                      <div class="header__flyout-footer-items">
                        <div class="header__flyout-footer-item"><svg class="icon icon--laptop-account header__flyout-footer-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-laptop-account"></use>
                          </svg>
                          <div class="header__flyout-footer-content">
                            <h4 class="header__flyout-footer-title">Video Beratung</h4>
                            <ul class="header__flyout-footer-list">
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="#">FAQ</a></li>
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="#">Termin vereinbaren</a></li>
                            </ul>
                          </div>
                        </div>
                        <div class="header__flyout-footer-item"><svg class="icon icon--phone header__flyout-footer-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="#icon-phone"></use>
                          </svg>
                          <div class="header__flyout-footer-content">
                            <h4 class="header__flyout-footer-title">Kontakt</h4>
                            <ul class="header__flyout-footer-list">
                              <li class="header__flyout-footer-list-item"><a class="header__flyout-footer-link" href="tel:+49772097270">07720 9727-0</a></li>
                              <li class="header__flyout-footer-list-item">Mo. bis Fr. von 8 - 18 Uhr</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </nav>
          <ul class="header__meta-list">
            <li class="header__meta-item header__meta-item--search"><button class="header__meta-link"><span class="header__meta-text">Suche</span><svg class="icon icon--search header__meta-icon" viewBox="0 0 200 200" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg></button>
              <div class="header__flyout">
                <div class="header__flyout-inner">
                  <div class="header__search-bar">
                    <div class="search-bar" data-source="/data/search-bar.json">
                      <div class="search-bar__inner">
                        <form class="search-bar__form" autocomplete="off" method="get" action="/suchergebnisse" _lpchecked="1"><label class="search-bar__input-label" for="search-term">Suchbegriff</label>
                          <div class="search-bar__buttons-left"><button class="search-bar__close" value="Suche schließen"><svg width="19" height="14" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.716.589a.5.5 0 0 1 .638.057l.057.07a.5.5 0 0 1-.057.638L2.209 6.499 18 6.5a.5.5 0 0 1 .09.992L18 7.5 2.207 7.499l5.147 5.147.057.07a.5.5 0 0 1-.765.638L.293 7 6.646.646Z" fill="#15265a" fill-rule="nonzero" /></svg></button></div><input class="search-bar__input" autocomplete="off" type="text" placeholder="Suchbegriff" required="required" name="tx_solr[q]" />
                          <div class="search-bar__buttons-right"><button class="search-bar__reset" type="reset" value="Zurücksetzen" aria-hidden="true"></button><button class="search-bar__button" type="submit" value="Suchen"></button></div>
                        </form>
                        <div class="search-bar__suggestions" aria-hidden="true">
                          <div class="search-bar__suggestions-inner">
                            <div class="search-bar__list-title">Oft gesucht</div>
                            <div class="search-bar__list"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="header__meta-item header__meta-item--mobile"><a class="header__meta-link" href="#"><span class="header__meta-text">Karriere</span></a></li>
            <li class="header__meta-item header__meta-item--mobile"><a class="header__meta-link" href="#"><span class="header__meta-text">Presse</span></a></li>
            <li class="header__meta-item header__meta-item--mobile"><a class="header__meta-link" href="#"><span class="header__meta-text">Firmenkunden</span></a></li>
            <li class="header__meta-item"><a class="header__meta-link" href="#"><span class="header__meta-text">Meine vivida bkk</span></a></li>
            <li class="header__meta-item"><a class="header__meta-button" href="#"><span class="header__meta-text">Mitglied werden</span></a></li>
          </ul>
          <div class="header__navigation-footer">
            <div class="header__navigation-footer-items">
              <div class="header__navigation-footer-item"><svg class="icon icon--laptop-account header__navigation-footer-icon" viewBox="0 0 200 200" aria-hidden="true">
                  <use xlink:href="#icon-laptop-account"></use>
                </svg>
                <div class="header__navigation-footer-content">
                  <h4 class="header__navigation-footer-title">Video Beratung</h4>
                  <ul class="header__navigation-footer-list">
                    <li class="header__navigation-footer-list-item"><a class="header__navigation-footer-link" href="#">FAQ</a></li>
                    <li class="header__navigation-footer-list-item"><a class="header__navigation-footer-link" href="#">Termin vereinbaren</a></li>
                  </ul>
                </div>
              </div>
              <div class="header__navigation-footer-item"><svg class="icon icon--phone header__navigation-footer-icon" viewBox="0 0 200 200" aria-hidden="true">
                  <use xlink:href="#icon-phone"></use>
                </svg>
                <div class="header__navigation-footer-content">
                  <h4 class="header__navigation-footer-title">Kontakt</h4>
                  <ul class="header__navigation-footer-list">
                    <li class="header__navigation-footer-list-item"><a class="header__navigation-footer-link" href="tel:+49772097270">07720 9727-0</a></li>
                    <li class="header__navigation-footer-list-item">Mo. bis Fr. von 8 - 18 Uhr</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header__menu"><button class="header__menu-search"><span class="u-hidden">Suche</span><svg class="icon icon--search header__menu-search-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-search"></use>
        </svg></button><button class="header__menu-open"><span class="u-hidden">Menü</span><svg class="icon icon--menu header__menu-open-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-menu"></use>
        </svg></button>
      <div class="header__menu-search-bar">
        <div class="search-bar" data-source="/data/search-bar.json">
          <div class="search-bar__inner">
            <form class="search-bar__form" autocomplete="off" method="get" action="/suchergebnisse" _lpchecked="1"><label class="search-bar__input-label" for="search-term">Suchbegriff</label>
              <div class="search-bar__buttons-left"><button class="search-bar__close" value="Suche schließen"><svg width="19" height="14" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.716.589a.5.5 0 0 1 .638.057l.057.07a.5.5 0 0 1-.057.638L2.209 6.499 18 6.5a.5.5 0 0 1 .09.992L18 7.5 2.207 7.499l5.147 5.147.057.07a.5.5 0 0 1-.765.638L.293 7 6.646.646Z" fill="#15265a" fill-rule="nonzero" /></svg></button></div><input class="search-bar__input" autocomplete="off" type="text" placeholder="Suchbegriff" required="required" name="tx_solr[q]" />
              <div class="search-bar__buttons-right"><button class="search-bar__reset" type="reset" value="Zurücksetzen" aria-hidden="true"></button><button class="search-bar__button" type="submit" value="Suchen"></button></div>
            </form>
            <div class="search-bar__suggestions" aria-hidden="true">
              <div class="search-bar__suggestions-inner">
                <div class="search-bar__list-title">Oft gesucht</div>
                <div class="search-bar__list"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

{
  "navigation": [
    {
      "text": "Leistungen",
      "sub": {
        "items": [
          {
            "text": "Leistung Übersicht",
            "icon": {
              "default": "layers",
              "hover": "layers-fill"
            }
          },
          {
            "text": "Top Leistungen",
            "icon": {
              "default": "star",
              "hover": "star-fill"
            }
          },
          {
            "text": "Zähne",
            "icon": {
              "default": "dentistry",
              "hover": "dentistry-fill"
            }
          },
          {
            "text": "Menschen mit Behinderung",
            "icon": {
              "default": "accessible_forward"
            }
          },
          {
            "text": "Leistungen A – Z",
            "icon": {
              "default": "list"
            }
          },
          {
            "text": "Tarife",
            "icon": {
              "default": "sell",
              "hover": "sell-fill"
            }
          },
          {
            "text": "Pflege",
            "icon": {
              "default": "volunteer_activism",
              "hover": "volunteer_activism-fill"
            }
          }
        ]
      }
    },
    {
      "text": "Vorsorge",
      "sub": {
        "items": [
          {
            "text": "Menschen mit Behinderung",
            "icon": {
              "default": "accessible_forward"
            }
          },
          {
            "text": "Leistungen A – Z",
            "icon": {
              "default": "list"
            }
          },
          {
            "text": "Tarife",
            "icon": {
              "default": "sell",
              "hover": "sell-fill"
            }
          },
          {
            "text": "Pflege",
            "icon": {
              "default": "volunteer_activism",
              "hover": "volunteer_activism-fill"
            }
          }
        ]
      }
    },
    {
      "text": "Service",
      "sub": {
        "items": [
          {
            "text": "Leistung Übersicht",
            "icon": {
              "default": "stack"
            }
          },
          {
            "text": "Tarife",
            "icon": {
              "default": "sell",
              "hover": "sell-fill"
            }
          },
          {
            "text": "Pflege",
            "icon": {
              "default": "volunteer_activism",
              "hover": "volunteer_activism-fill"
            }
          }
        ]
      }
    },
    {
      "text": "Kontakt",
      "sub": {
        "items": [
          {
            "text": "Menschen mit Behinderung",
            "icon": {
              "default": "accessible_forward"
            }
          },
          {
            "text": "Leistungen A – Z",
            "icon": {
              "default": "list"
            }
          },
          {
            "text": "Tarife",
            "icon": {
              "default": "sell",
              "hover": "sell-fill"
            }
          },
          {
            "text": "Pflege",
            "icon": {
              "default": "volunteer_activism",
              "hover": "volunteer_activism-fill"
            }
          }
        ]
      }
    }
  ],
  "metaNavigation": [
    {
      "icon": "search",
      "text": "Suche",
      "sub": {
        "type": "search"
      }
    },
    {
      "text": "Karriere",
      "link": "#",
      "style": "mobile"
    },
    {
      "text": "Presse",
      "link": "#",
      "style": "mobile"
    },
    {
      "text": "Firmenkunden",
      "link": "#",
      "style": "mobile"
    },
    {
      "text": "Meine vivida bkk",
      "link": "#"
    },
    {
      "text": "Mitglied werden",
      "type": "button",
      "link": "#"
    }
  ],
  "serviceNavigation": [
    {
      "icon": "phone",
      "text": "07720 9727-0"
    },
    {
      "text": "Karriere",
      "link": "#"
    },
    {
      "text": "Presse",
      "link": "#"
    },
    {
      "text": "Firmenkunden",
      "textModifier": "bold",
      "link": "#"
    }
  ],
  "theme": "green"
}