<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-2309"><input class="checkbox__input" type="checkbox" id="checkbox-2309" name="checkbox-2309" /><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-5da3"><input class="checkbox__input" type="checkbox" id="checkbox-5da3" name="checkbox-5da3" /><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-5d71"><input class="checkbox__input" type="checkbox" id="checkbox-5d71" name="checkbox-5d71" /><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-5962"><input class="checkbox__input" type="checkbox" id="checkbox-5962" name="checkbox-5962" /><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-4398"><input class="checkbox__input" type="checkbox" id="checkbox-4398" name="checkbox-4398" /><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-b404"><input class="checkbox__input" type="checkbox" id="checkbox-b404" name="checkbox-b404" /><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-3328"><input class="checkbox__input" type="checkbox" id="checkbox-3328" name="checkbox-3328" /><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-edbe"><input class="checkbox__input" type="checkbox" id="checkbox-edbe" name="checkbox-edbe" /><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-08a7"><input class="checkbox__input" type="checkbox" id="checkbox-08a7" name="checkbox-08a7" /><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-b19d"><input class="checkbox__input" type="checkbox" id="checkbox-b19d" name="checkbox-b19d" /><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-fa53"><input class="checkbox__input" type="checkbox" id="checkbox-fa53" name="checkbox-fa53" /><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-a25a"><input class="checkbox__input" type="checkbox" id="checkbox-a25a" name="checkbox-a25a" /><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-94d8"><input class="checkbox__input" type="checkbox" id="checkbox-94d8" name="checkbox-94d8" /><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-c3cd"><input class="checkbox__input" type="checkbox" id="checkbox-c3cd" name="checkbox-c3cd" /><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-ea4f"><input class="checkbox__input" type="checkbox" id="checkbox-ea4f" name="checkbox-ea4f" /><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-113b"><input class="checkbox__input" type="checkbox" id="checkbox-113b" name="checkbox-113b" /><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-45a1"><input class="checkbox__input" type="checkbox" id="checkbox-45a1" name="checkbox-45a1" /><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-d4c8"><input class="checkbox__input" type="checkbox" id="checkbox-d4c8" name="checkbox-d4c8" /><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-1967"><input class="checkbox__input" type="checkbox" id="checkbox-1967" name="checkbox-1967" /><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-efea"><input class="checkbox__input" type="checkbox" id="checkbox-efea" name="checkbox-efea" /><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-1863"><input class="checkbox__input" type="checkbox" id="checkbox-1863" name="checkbox-1863" /><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-e23e"><input class="checkbox__input" type="checkbox" id="checkbox-e23e" name="checkbox-e23e" /><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-0def"><input class="checkbox__input" type="checkbox" id="checkbox-0def" name="checkbox-0def" /><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-2888"><input class="checkbox__input" type="checkbox" id="checkbox-2888" name="checkbox-2888" /><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-1c72"><input class="checkbox__input" type="checkbox" id="checkbox-1c72" name="checkbox-1c72" /><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-47d8"><input class="checkbox__input" type="checkbox" id="checkbox-47d8" name="checkbox-47d8" /><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-5488"><input class="checkbox__input" type="checkbox" id="checkbox-5488" name="checkbox-5488" /><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-642f"><input class="checkbox__input" type="checkbox" id="checkbox-642f" name="checkbox-642f" /><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-506b"><input class="checkbox__input" type="checkbox" id="checkbox-506b" name="checkbox-506b" /><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-716f"><input class="checkbox__input" type="checkbox" id="checkbox-716f" name="checkbox-716f" /><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-7981"><input class="checkbox__input" type="checkbox" id="checkbox-7981" name="checkbox-7981" /><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-f013"><input class="checkbox__input" type="checkbox" id="checkbox-f013" name="checkbox-f013" /><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-1d16"><input class="checkbox__input" type="checkbox" id="checkbox-1d16" name="checkbox-1d16" /><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-84e8"><input class="checkbox__input" type="checkbox" id="checkbox-84e8" name="checkbox-84e8" /><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-48a6"><input class="checkbox__input" type="checkbox" id="checkbox-48a6" name="checkbox-48a6" /><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-83b4"><input class="checkbox__input" type="checkbox" id="checkbox-83b4" name="checkbox-83b4" /><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-ffe9"><input class="checkbox__input" type="checkbox" id="checkbox-ffe9" name="checkbox-ffe9" /><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>

{
  "title": "Ort",
  "items": [
    {
      "checkbox": {
        "text": "Nürtingen"
      }
    },
    {
      "checkbox": {
        "text": "Ludwigsburg"
      }
    },
    {
      "checkbox": {
        "text": "Tübingen"
      }
    },
    {
      "checkbox": {
        "text": "Ehingen"
      }
    },
    {
      "checkbox": {
        "text": "Bretten"
      }
    },
    {
      "checkbox": {
        "text": "Esslingen"
      }
    },
    {
      "checkbox": {
        "text": "Marbach am Neckar"
      }
    },
    {
      "checkbox": {
        "text": "Stuttgart"
      }
    },
    {
      "checkbox": {
        "text": "Friedrichshafen"
      }
    },
    {
      "checkbox": {
        "text": "Karlsruge"
      }
    },
    {
      "checkbox": {
        "text": "Kenzingen"
      }
    },
    {
      "checkbox": {
        "text": "Mannheim"
      }
    },
    {
      "checkbox": {
        "text": "Bad Säckingen"
      }
    },
    {
      "checkbox": {
        "text": "Konstanz"
      }
    },
    {
      "checkbox": {
        "text": "Riedlingen"
      }
    },
    {
      "checkbox": {
        "text": "Biberach"
      }
    },
    {
      "checkbox": {
        "text": "Freiburg"
      }
    },
    {
      "checkbox": {
        "text": "Rottenburg a. N."
      }
    },
    {
      "checkbox": {
        "text": "Bruchsal"
      }
    },
    {
      "checkbox": {
        "text": "Böblingen"
      }
    },
    {
      "checkbox": {
        "text": "Dettingen an der Erms"
      }
    },
    {
      "checkbox": {
        "text": "Hausach"
      }
    },
    {
      "checkbox": {
        "text": "Heidelberg"
      }
    },
    {
      "checkbox": {
        "text": "Lörrach"
      }
    },
    {
      "checkbox": {
        "text": "Blaustein"
      }
    },
    {
      "checkbox": {
        "text": "Fellbach"
      }
    },
    {
      "checkbox": {
        "text": "Heidenheim"
      }
    },
    {
      "checkbox": {
        "text": "Herrlingen"
      }
    },
    {
      "checkbox": {
        "text": "Kornwestheim"
      }
    },
    {
      "checkbox": {
        "text": "Kressberg"
      }
    },
    {
      "checkbox": {
        "text": "Ladenburg"
      }
    },
    {
      "checkbox": {
        "text": "Lauffen am Neckar"
      }
    },
    {
      "checkbox": {
        "text": "Ramseck am Neckar"
      }
    },
    {
      "checkbox": {
        "text": "Reutlingen"
      }
    },
    {
      "checkbox": {
        "text": "Rottweil"
      }
    },
    {
      "checkbox": {
        "text": "Schorndorf"
      }
    },
    {
      "checkbox": {
        "text": "Waldenburg"
      }
    }
  ]
}

<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-d0ce"><input class="checkbox__input" type="checkbox" id="checkbox-d0ce" name="checkbox-d0ce" /><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-e007"><input class="checkbox__input" type="checkbox" id="checkbox-e007" name="checkbox-e007" /><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-d2fb"><input class="checkbox__input" type="checkbox" id="checkbox-d2fb" name="checkbox-d2fb" /><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-6ab5"><input class="checkbox__input" type="checkbox" id="checkbox-6ab5" name="checkbox-6ab5" /><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-fdc6"><input class="checkbox__input" type="checkbox" id="checkbox-fdc6" name="checkbox-fdc6" /><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-ac01"><input class="checkbox__input" type="checkbox" id="checkbox-ac01" name="checkbox-ac01" /><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-9f08"><input class="checkbox__input" type="checkbox" id="checkbox-9f08" name="checkbox-9f08" /><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>

{
  "title": "Kategorie",
  "items": [
    {
      "checkbox": {
        "text": "Performance"
      },
      "icon": "performance"
    },
    {
      "checkbox": {
        "text": "Lesung"
      },
      "icon": "reading"
    },
    {
      "checkbox": {
        "text": "Workshop"
      },
      "icon": "workshop"
    },
    {
      "checkbox": {
        "text": "Gespräch"
      },
      "icon": "chat"
    },
    {
      "checkbox": {
        "text": "Theater"
      },
      "icon": "theatre"
    },
    {
      "checkbox": {
        "text": "Vortrag"
      },
      "icon": "speech"
    },
    {
      "checkbox": {
        "text": "Ausstellung"
      },
      "icon": "exhibition"
    }
  ]
}

<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-639d"><input class="checkbox__input" type="checkbox" id="checkbox-639d" name="checkbox-639d" /><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-c99c"><input class="checkbox__input" type="checkbox" id="checkbox-c99c" name="checkbox-c99c" /><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-9438"><input class="checkbox__input" type="checkbox" id="checkbox-9438" name="checkbox-9438" /><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>

{
  "title": "Datum",
  "items": [
    {
      "checkbox": {
        "text": "Diese Woche"
      }
    },
    {
      "checkbox": {
        "text": "Nächste Woche"
      }
    },
    {
      "checkbox": {
        "period": true
      }
    }
  ]
}