Filter @filter

<div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Ort</button>
  <div class="filter__items">
    <div class="filter__item"><label class="checkbox" for="checkbox-91b8"><input class="checkbox__input" type="checkbox" id="checkbox-91b8" name="checkbox-91b8" /><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ürtingen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-ca92"><input class="checkbox__input" type="checkbox" id="checkbox-ca92" name="checkbox-ca92" /><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">Ludwigsburg</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-52e6"><input class="checkbox__input" type="checkbox" id="checkbox-52e6" name="checkbox-52e6" /><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">Tübingen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-acbd"><input class="checkbox__input" type="checkbox" id="checkbox-acbd" name="checkbox-acbd" /><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">Ehingen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-6b8d"><input class="checkbox__input" type="checkbox" id="checkbox-6b8d" name="checkbox-6b8d" /><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">Bretten</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-567e"><input class="checkbox__input" type="checkbox" id="checkbox-567e" name="checkbox-567e" /><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">Esslingen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-9d24"><input class="checkbox__input" type="checkbox" id="checkbox-9d24" name="checkbox-9d24" /><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">Marbach am Neckar</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-46d2"><input class="checkbox__input" type="checkbox" id="checkbox-46d2" name="checkbox-46d2" /><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">Stuttgart</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-d194"><input class="checkbox__input" type="checkbox" id="checkbox-d194" name="checkbox-d194" /><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">Friedrichshafen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-c45e"><input class="checkbox__input" type="checkbox" id="checkbox-c45e" name="checkbox-c45e" /><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">Karlsruge</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-9214"><input class="checkbox__input" type="checkbox" id="checkbox-9214" name="checkbox-9214" /><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">Kenzingen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-f7e4"><input class="checkbox__input" type="checkbox" id="checkbox-f7e4" name="checkbox-f7e4" /><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">Mannheim</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-c779"><input class="checkbox__input" type="checkbox" id="checkbox-c779" name="checkbox-c779" /><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">Bad Säckingen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-a2ec"><input class="checkbox__input" type="checkbox" id="checkbox-a2ec" name="checkbox-a2ec" /><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">Konstanz</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-3cca"><input class="checkbox__input" type="checkbox" id="checkbox-3cca" name="checkbox-3cca" /><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">Riedlingen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-b1dc"><input class="checkbox__input" type="checkbox" id="checkbox-b1dc" name="checkbox-b1dc" /><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">Biberach</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-7f1e"><input class="checkbox__input" type="checkbox" id="checkbox-7f1e" name="checkbox-7f1e" /><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">Freiburg</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-b6f8"><input class="checkbox__input" type="checkbox" id="checkbox-b6f8" name="checkbox-b6f8" /><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">Rottenburg a. N.</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-e7cf"><input class="checkbox__input" type="checkbox" id="checkbox-e7cf" name="checkbox-e7cf" /><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">Bruchsal</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-463d"><input class="checkbox__input" type="checkbox" id="checkbox-463d" name="checkbox-463d" /><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">Böblingen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-3d6d"><input class="checkbox__input" type="checkbox" id="checkbox-3d6d" name="checkbox-3d6d" /><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">Dettingen an der Erms</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-d4a6"><input class="checkbox__input" type="checkbox" id="checkbox-d4a6" name="checkbox-d4a6" /><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">Hausach</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-ac2d"><input class="checkbox__input" type="checkbox" id="checkbox-ac2d" name="checkbox-ac2d" /><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">Heidelberg</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-0868"><input class="checkbox__input" type="checkbox" id="checkbox-0868" name="checkbox-0868" /><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">Lörrach</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-52f8"><input class="checkbox__input" type="checkbox" id="checkbox-52f8" name="checkbox-52f8" /><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">Blaustein</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-ee67"><input class="checkbox__input" type="checkbox" id="checkbox-ee67" name="checkbox-ee67" /><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">Fellbach</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-554c"><input class="checkbox__input" type="checkbox" id="checkbox-554c" name="checkbox-554c" /><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">Heidenheim</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-6168"><input class="checkbox__input" type="checkbox" id="checkbox-6168" name="checkbox-6168" /><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">Herrlingen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-339d"><input class="checkbox__input" type="checkbox" id="checkbox-339d" name="checkbox-339d" /><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">Kornwestheim</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-ab99"><input class="checkbox__input" type="checkbox" id="checkbox-ab99" name="checkbox-ab99" /><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">Kressberg</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-24b5"><input class="checkbox__input" type="checkbox" id="checkbox-24b5" name="checkbox-24b5" /><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">Ladenburg</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-7973"><input class="checkbox__input" type="checkbox" id="checkbox-7973" name="checkbox-7973" /><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">Lauffen am Neckar</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-c70f"><input class="checkbox__input" type="checkbox" id="checkbox-c70f" name="checkbox-c70f" /><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">Ramseck am Neckar</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-0023"><input class="checkbox__input" type="checkbox" id="checkbox-0023" name="checkbox-0023" /><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">Reutlingen</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-94a5"><input class="checkbox__input" type="checkbox" id="checkbox-94a5" name="checkbox-94a5" /><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">Rottweil</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-3cce"><input class="checkbox__input" type="checkbox" id="checkbox-3cce" name="checkbox-3cce" /><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">Schorndorf</span></label></div>
    <div class="filter__item"><label class="checkbox" for="checkbox-85ac"><input class="checkbox__input" type="checkbox" id="checkbox-85ac" name="checkbox-85ac" /><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">Waldenburg</span></label></div>
  </div>
</div>

Filter Icons @filter--icons

<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-4fd3"><input class="checkbox__input" type="checkbox" id="checkbox-4fd3" name="checkbox-4fd3" /><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-16ef"><input class="checkbox__input" type="checkbox" id="checkbox-16ef" name="checkbox-16ef" /><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-3a3a"><input class="checkbox__input" type="checkbox" id="checkbox-3a3a" name="checkbox-3a3a" /><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-5ed6"><input class="checkbox__input" type="checkbox" id="checkbox-5ed6" name="checkbox-5ed6" /><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-ccfb"><input class="checkbox__input" type="checkbox" id="checkbox-ccfb" name="checkbox-ccfb" /><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-efd8"><input class="checkbox__input" type="checkbox" id="checkbox-efd8" name="checkbox-efd8" /><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-e3b2"><input class="checkbox__input" type="checkbox" id="checkbox-e3b2" name="checkbox-e3b2" /><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>

Filter Date @filter--date

<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-d54b"><input class="checkbox__input" type="checkbox" id="checkbox-d54b" name="checkbox-d54b" /><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-0eab"><input class="checkbox__input" type="checkbox" id="checkbox-0eab" name="checkbox-0eab" /><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-b589"><input class="checkbox__input" type="checkbox" id="checkbox-b589" name="checkbox-b589" /><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>

Filter Date Redux @filter--date-redux

<div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Datum</button>
  <div class="filter__items">
    <div class="filter__item">
      <div class="filter__item__period">
        <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>
      </div>
    </div>
  </div>
</div>