<div class="calendar calendar--list">
  <div class="calendar__filter">
    <div class="calendar__filter__inner"><button class="calendar__filter__close" type="button"><svg class="icon icon--close" viewBox="0 0 200 200">
          <use xlink:href="#icon-close"></use>
        </svg></button>
      <form class="form-list-filter">
        <div class="form-list-filter__fields">
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Kategorie</button>
                  <div class="filter__items">
                    <div class="filter__item"><svg class="icon icon--performance" viewBox="0 0 200 200">
                        <use xlink:href="#icon-performance"></use>
                      </svg><label class="checkbox" for="checkbox-ae86"><input class="checkbox__input" type="checkbox" id="checkbox-ae86" name="checkbox-ae86" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Performance</span></label></div>
                    <div class="filter__item"><svg class="icon icon--reading" viewBox="0 0 200 200">
                        <use xlink:href="#icon-reading"></use>
                      </svg><label class="checkbox" for="checkbox-d29b"><input class="checkbox__input" type="checkbox" id="checkbox-d29b" name="checkbox-d29b" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lesung</span></label></div>
                    <div class="filter__item"><svg class="icon icon--workshop" viewBox="0 0 200 200">
                        <use xlink:href="#icon-workshop"></use>
                      </svg><label class="checkbox" for="checkbox-64e3"><input class="checkbox__input" type="checkbox" id="checkbox-64e3" name="checkbox-64e3" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Workshop</span></label></div>
                    <div class="filter__item"><svg class="icon icon--chat" viewBox="0 0 200 200">
                        <use xlink:href="#icon-chat"></use>
                      </svg><label class="checkbox" for="checkbox-55ef"><input class="checkbox__input" type="checkbox" id="checkbox-55ef" name="checkbox-55ef" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Gespräch</span></label></div>
                    <div class="filter__item"><svg class="icon icon--theatre" viewBox="0 0 200 200">
                        <use xlink:href="#icon-theatre"></use>
                      </svg><label class="checkbox" for="checkbox-ec2a"><input class="checkbox__input" type="checkbox" id="checkbox-ec2a" name="checkbox-ec2a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Theater</span></label></div>
                    <div class="filter__item"><svg class="icon icon--speech" viewBox="0 0 200 200">
                        <use xlink:href="#icon-speech"></use>
                      </svg><label class="checkbox" for="checkbox-a86f"><input class="checkbox__input" type="checkbox" id="checkbox-a86f" name="checkbox-a86f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Vortrag</span></label></div>
                    <div class="filter__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                        <use xlink:href="#icon-exhibition"></use>
                      </svg><label class="checkbox" for="checkbox-b3d9"><input class="checkbox__input" type="checkbox" id="checkbox-b3d9" name="checkbox-b3d9" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ausstellung</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Zielgruppe</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-8c73"><input class="checkbox__input" type="checkbox" id="checkbox-8c73" name="checkbox-8c73" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 1</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-4d38"><input class="checkbox__input" type="checkbox" id="checkbox-4d38" name="checkbox-4d38" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 2</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-953d"><input class="checkbox__input" type="checkbox" id="checkbox-953d" name="checkbox-953d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 3</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Datum</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-4b76"><input class="checkbox__input" type="checkbox" id="checkbox-4b76" name="checkbox-4b76" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Diese Woche</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-92bd"><input class="checkbox__input" type="checkbox" id="checkbox-92bd" name="checkbox-92bd" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Nächste Woche</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-2ef1"><input class="checkbox__input" type="checkbox" id="checkbox-2ef1" name="checkbox-2ef1" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label"><div class="period">
  <div class="period__row">
    <div class="period__label">Von:</div>
    <div class="period__input"><input class="input" id="start_date_created" type="date" /></div>
  </div>
  <div class="period__row">
    <div class="period__label">Bis:</div>
    <div class="period__input"><input class="input" id="end_date_created" type="date" /></div>
  </div>
</div></span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
              <use xlink:href="#icon-search"></use>
            </svg><span class="button__text">Filter anwenden</span></button></div>
      </form>
      <div class="calendar__filter-tag-group">
        <div class="filter-tag-group">
          <ul class="filter-tag-group__items" aria-labelledby="filter-tag-group-b2e7">
            <li class="filter-tag-group__item"><a class="filter-tag" href="#"><span class="filter-tag__text">Lesung<span class="u-hidden-visually">- Filter löschen</span></span><svg class="icon icon--close filter-tag__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></a></li>
            <li class="filter-tag-group__item"><a class="filter-tag" href="#"><span class="filter-tag__text">Theater<span class="u-hidden-visually">- Filter löschen</span></span><svg class="icon icon--close filter-tag__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <nav class="calendar__nav"><button class="calendar__open-filter" type="button"><svg class="icon icon--filter" viewBox="0 0 200 200">
        <use xlink:href="#icon-filter"></use>
      </svg><span class="calendar__open-filter__badge">2</span></button></nav>
  <div class="calendar__days">
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Mi</span><span class="calendar__day__meta__text__date">28.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">12:00 - 14:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-de1b-title">
                      <title id="icon-de1b-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 - 19:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Freiburg</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Kindergarten Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5c03-title">
                      <title id="icon-5c03-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">D0</span><span class="calendar__day__meta__text__date">29.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">13:00 - 15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Grundschule Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-11ef-title">
                      <title id="icon-11ef-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">FR</span><span class="calendar__day__meta__text__date">30.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                        <use xlink:href="#icon-exhibition"></use>
                      </svg><span class="calendar-banner__info__text">15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">U3 Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d813-title">
                      <title id="icon-d813-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Mi</span><span class="calendar__day__meta__text__date">28.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">12:00 - 14:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-0c3a-title">
                      <title id="icon-0c3a-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 - 19:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Freiburg</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Kindergarten Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7922-title">
                      <title id="icon-7922-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">D0</span><span class="calendar__day__meta__text__date">29.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">13:00 - 15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Grundschule Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7962-title">
                      <title id="icon-7962-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">FR</span><span class="calendar__day__meta__text__date">30.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                        <use xlink:href="#icon-exhibition"></use>
                      </svg><span class="calendar-banner__info__text">15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">U3 Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-52e7-title">
                      <title id="icon-52e7-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__year">
        <h2 class="headline headline--2">2023</h2>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Mi</span><span class="calendar__day__meta__text__date">03.01</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">12:00 - 14:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7091-title">
                      <title id="icon-7091-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 - 19:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Freiburg</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Kindergarten Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5d87-title">
                      <title id="icon-5d87-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">D0</span><span class="calendar__day__meta__text__date">28.01</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">13:00 - 15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Grundschule Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-43a2-title">
                      <title id="icon-43a2-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">FR</span><span class="calendar__day__meta__text__date">05.02</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                        <use xlink:href="#icon-exhibition"></use>
                      </svg><span class="calendar-banner__info__text">15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">U3 Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-eafb-title">
                      <title id="icon-eafb-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__days__loadmore-button"><button class="button button--primary" type="button"><span class="button__text">Mehr laden</span></button></div>
  </div>
</div>

{
  "filterCloseIcon": "close",
  "filterOpenIcon": "filter",
  "filterOpenBadge": "2",
  "loadmoreButton": {
    "text": "Mehr laden",
    "link": null
  },
  "tabs": null,
  "filterTag": {
    "items": [
      {
        "link": "#",
        "text": "Lesung"
      },
      {
        "link": "#",
        "text": "Theater"
      }
    ]
  },
  "list": true,
  "formListFilter": {
    "fields": [
      {
        "name": "Kategorie",
        "use": "filter--icons"
      },
      {
        "name": "Zielgruppe",
        "use": "filter",
        "settings": {
          "title": "Zielgruppe",
          "items": [
            {
              "checkbox": {
                "text": "Zielgruppe 1"
              }
            },
            {
              "checkbox": {
                "text": "Zielgruppe 2"
              }
            },
            {
              "checkbox": {
                "text": "Zielgruppe 3"
              }
            }
          ]
        }
      },
      {
        "name": "Datum",
        "use": "filter--date"
      }
    ]
  },
  "views": null,
  "items": [
    {
      "meta": {
        "day": "Mi",
        "date": "28.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "chat",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "12:00 - 14:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "performance",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Kindergarten Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "17:00 - 19:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Freiburg"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "D0",
        "date": "29.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Grundschule Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "13:00 - 15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "FR",
        "date": "30.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "U3 Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "exhibition",
                "text": "15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "Mi",
        "date": "28.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "chat",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "12:00 - 14:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "performance",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Kindergarten Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "17:00 - 19:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Freiburg"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "D0",
        "date": "29.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Grundschule Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "13:00 - 15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "FR",
        "date": "30.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "U3 Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "exhibition",
                "text": "15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    },
    {
      "year": 2023
    },
    {
      "meta": {
        "day": "Mi",
        "date": "03.01"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "chat",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "12:00 - 14:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "performance",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Kindergarten Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "17:00 - 19:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Freiburg"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "D0",
        "date": "28.01"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Grundschule Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "13:00 - 15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "FR",
        "date": "05.02"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "U3 Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "exhibition",
                "text": "15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    }
  ]
}