<!-- Office List -->
<div class="office-list">
  <div class="office-list__inner">
    <ul class="office-list__items"><template class="js-office-list__item-template">
        <div class="office-item" data-zip-code="%ZIPCODE%" data-lon="%LON%" data-lat="%LAT%" data-uid="%UID%" data-distance-text="ca. %DIST% km">
          <details class="office-item__inner">
            <summary class="office-item__title"><span class="office-item__indicator"></span>%TITLE%</summary>
            <div class="office-item__content">
              <div class="office-item__content-item office-item__content-item--icon"><svg class="icon icon--place office-item__content-icon" viewBox="0 0 200 200" aria-hidden="true">
                  <use xlink:href="#icon-place"></use>
                </svg>
                <div class="office-item__content-title">Geschäftsstelle</div>
                <div class="office-item__content-text">
                  <div class="branch-office-street">%STREET%</div>
                  <div class="branch-office-city">%ZIPCODE% %CITY%</div>
                </div>
              </div>
              <div class="office-item__content-item office-item__content-item--icon"><svg class="icon icon--time office-item__content-icon" viewBox="0 0 200 200" aria-hidden="true">
                  <use xlink:href="#icon-time"></use>
                </svg>
                <div class="office-item__content-title">Öffnungszeiten</div>
                <div class="office-item__content-text">
                  <div class="personal-time">%TIMES% (persönlich)</div>
                  <div class="phone-time">%PHONETIME% (telefonisch)</div>
                </div>
              </div>
              <div class="office-item__content-item office-item__content-item--icon"><svg class="icon icon--phone office-item__content-icon" viewBox="0 0 200 200" aria-hidden="true">
                  <use xlink:href="#icon-phone"></use>
                </svg>
                <div class="office-item__content-title">Standort-Rufnummer</div>
                <div class="office-item__content-text"><a class="link phone-link" href="tel:%PHONE%">%PHONE%</a></div>
              </div>
              <div class="office-item__content-item office-item__content-item--icon"><svg class="icon icon--fax office-item__content-icon" viewBox="0 0 200 200" aria-hidden="true">
                  <use xlink:href="#icon-fax"></use>
                </svg>
                <div class="office-item__content-title">Fax-Nummer</div>
                <div class="office-item__content-text"><a class="link" href="fax:%FAX%">%FAX%</a></div>
              </div>
              <div class="office-item__content-item office-item__content-item--icon"><svg class="icon icon--letter office-item__content-icon" viewBox="0 0 200 200" aria-hidden="true">
                  <use xlink:href="#icon-letter"></use>
                </svg>
                <div class="office-item__content-title">E-Mail-Adresse</div>
                <div class="office-item__content-text"><a class="link" href="mailto:%EMAIL%">%EMAIL%</a></div>
              </div>
              <div class="office-item__content-item">
                <div class="office-item__content-title">Krankengeld</div>
                <div class="office-item__content-text"><a class="link" href="tel:%SICKPAY%">%SICKPAY%</a> <a class="link" href="mailto:krankengeld@vividabkk.de">krankengeld@vividabkk.de</a></div>
              </div>
              <div class="office-item__content-item">
                <div class="office-item__content-title">Pflegeversicherung</div>
                <div class="office-item__content-text"><a class="link" href="tel:%CARE%">%CARE%</a> <a class="link" href="mailto:pflege-service@vividabkk.de">pflege-service@vividabkk.de</a></div>
              </div>
              <div class="office-item__content-item">
                <div class="office-item__content-title">Zahn- und zahnärztliche Behandlung</div>
                <div class="office-item__content-text"><a class="link" href="tel:%TEETH%">%TEETH%</a> <a class="link" href="mailto:zahn@vividabkk.de">zahn@vividabkk.de</a></div>
              </div>
              <div class="office-item__content-item">
                <div class="office-item__content-title">Hilfsmittel</div>
                <div class="office-item__content-text"><a class="link" href="tel:%HELP%">%HELP%</a> <a class="link" href="mailto:hilfsmittel@vividabkk.de"> hilfsmittel@vividabkk.de</a></div>
              </div>
              <div class="office-item__content-item">
                <div class="office-item__content-title">Reha</div>
                <div class="office-item__content-text"><a class="link" href="tel:%REHA%">%REHA%</a> <a class="link" href="mailto:reha@vividabkk.de">reha@vividabkk.de</a></div>
              </div>
              <div class="office-item__content-item">
                <div class="office-item__content-title">Häusliche Krankenpflege</div>
                <div class="office-item__content-text"><a class="link" href="tel:%HOMECARE%">%HOMECARE%</a> <a class="link" href="mailto:haeusliche_krankenpflege@vividabkk.de">haeusliche_krankenpflege@vividabkk.de</a></div>
              </div>
              <div class="office-item__content-item">
                <div class="office-item__content-title">Firmenkunden</div>
                <div class="office-item__content-text"><a class="link" href="tel:%CORPCLIENTS%">%CORPCLIENTS%</a> <a class="link" href="mailto:firmenkunden@vividabkk.de">firmenkunden@vividabkk.de</a></div>
              </div>
            </div>
          </details>
        </div>
      </template></ul>
  </div>
</div>

{
  "zipField": {
    "placeholder": "01234",
    "label": "Ihre Postleitzahl",
    "type": "search",
    "pattern": "[0-9]{5}",
    "minLength": 5,
    "maxLength": 5,
    "autocomplete": "zip",
    "errormessage": "Bitte geben Sie fünf Ziffern an."
  },
  "tabBar": true,
  "template": {
    "uid": "%UID%",
    "title": "%TITLE%",
    "zipCode": "%ZIPCODE%",
    "lon": "%LON%",
    "lat": "%LAT%",
    "contentItems": [
      {
        "icon": "place",
        "title": "Geschäftsstelle",
        "text": "#[div.branch-office-street %STREET%] #[div.branch-office-city %ZIPCODE% %CITY%]\n"
      },
      {
        "icon": "time",
        "title": "Öffnungszeiten",
        "text": "#[div.personal-time %TIMES% (persönlich)]#[div.phone-time %PHONETIME% (telefonisch)]"
      },
      {
        "icon": "phone",
        "title": "Standort-Rufnummer",
        "text": "#[a.link.phone-link(href='tel:%PHONE%') %PHONE%]\n"
      },
      {
        "icon": "fax",
        "title": "Fax-Nummer",
        "text": "#[a.link(href='fax:%FAX%') %FAX%]\n"
      },
      {
        "icon": "letter",
        "title": "E-Mail-Adresse",
        "text": "#[a.link(href='mailto:%EMAIL%') %EMAIL%]\n"
      },
      {
        "title": "Krankengeld",
        "text": "#[a.link(href='tel:%SICKPAY%') %SICKPAY%] #[a.link(href='mailto:krankengeld@vividabkk.de') krankengeld@vividabkk.de]\n"
      },
      {
        "title": "Pflegeversicherung",
        "text": "#[a.link(href='tel:%CARE%') %CARE%] #[a.link(href='mailto:pflege-service@vividabkk.de') pflege-service@vividabkk.de]\n"
      },
      {
        "title": "Zahn- und zahnärztliche Behandlung",
        "text": "#[a.link(href='tel:%TEETH%') %TEETH%] #[a.link(href='mailto:zahn@vividabkk.de') zahn@vividabkk.de]\n"
      },
      {
        "title": "Hilfsmittel",
        "text": "#[a.link(href='tel:%HELP%') %HELP%] #[a.link(href='mailto:hilfsmittel@vividabkk.de')  hilfsmittel@vividabkk.de]\n"
      },
      {
        "title": "Reha",
        "text": "#[a.link(href='tel:%REHA%') %REHA%] #[a.link(href='mailto:reha@vividabkk.de') reha@vividabkk.de]\n"
      },
      {
        "title": "Häusliche Krankenpflege",
        "text": "#[a.link(href='tel:%HOMECARE%') %HOMECARE%] #[a.link(href='mailto:haeusliche_krankenpflege@vividabkk.de') haeusliche_krankenpflege@vividabkk.de]\n"
      },
      {
        "title": "Firmenkunden",
        "text": "#[a.link(href='tel:%CORPCLIENTS%') %CORPCLIENTS%] #[a.link(href='mailto:firmenkunden@vividabkk.de') firmenkunden@vividabkk.de]\n"
      }
    ]
  }
}