<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-b5c82867ff8c">
<p class="text-style-p flex items-center gap-2">Stadtteile <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#minus"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#plus"></use>
</svg>
</span>
</span>
</div>
<div id="uid-b5c82867ff8c" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-70a3fc5a14bf">
<p class="text-style-p-em flex items-center"><span class="pr-2">Lorem</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-70a3fc5a14bf" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-2389003e1422">
<p class="text-style-p-em flex items-center"><span class="pr-2">Ipsum</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-2389003e1422" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-c3dd53e69fdb">
<p class="text-style-p-em flex items-center"><span class="pr-2">Dolores</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-c3dd53e69fdb" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-64e9450fa68a">
<p class="text-style-p-em flex items-center"><span class="pr-2">Imperum</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-64e9450fa68a" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-c643f3790535">
<p class="text-style-p flex items-center gap-2">Kategorien <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#minus"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#plus"></use>
</svg>
</span>
</span>
</div>
<div id="uid-c643f3790535" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-b9c65bb46df7">
<p class="text-style-p-em flex items-center"><span class="pr-2">Lorem</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-b9c65bb46df7" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-1b0371fd4a60">
<p class="text-style-p-em flex items-center"><span class="pr-2">Ipsum</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-1b0371fd4a60" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-71a61e4f22c4">
<p class="text-style-p-em flex items-center"><span class="pr-2">Dolores</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-71a61e4f22c4" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-b86fc479f6a8">
<p class="text-style-p-em flex items-center"><span class="pr-2">Imperum</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-b86fc479f6a8" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-145279023489">
<p class="text-style-p flex items-center gap-2">Besonderheiten <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#minus"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#plus"></use>
</svg>
</span>
</span>
</div>
<div id="uid-145279023489" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-cca2232aa780">
<p class="text-style-p-em flex items-center"><span class="pr-2">Lorem</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-cca2232aa780" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-e59d5d22254f">
<p class="text-style-p-em flex items-center"><span class="pr-2">Ipsum</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-e59d5d22254f" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-e459a0857045">
<p class="text-style-p-em flex items-center"><span class="pr-2">Dolores</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-e459a0857045" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-2ffc537dc5cb">
<p class="text-style-p-em flex items-center"><span class="pr-2">Imperum</span> <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-up"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#tri-down"></use>
</svg>
</span>
</span>
</div>
<div class="flex" id="uid-2ffc537dc5cb" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-6e3293a15a83">
<p class="text-style-p flex items-center gap-2">Preis <span class="c-filter-counter" ui-filter-counter>
<span class="c-filter-counter__value" ui-value></span>
<span class="c-filter-counter__delete" ui-action>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
</span></p>
<span ui-toggle-icon>
<span aria-hidden>
<svg class="text-neutral-grey-02">
<use xlink:href="#minus"></use>
</svg>
</span>
<span>
<svg class="text-neutral-grey-02">
<use xlink:href="#plus"></use>
</svg>
</span>
</span>
</div>
<div id="uid-6e3293a15a83" ui-toggle-target aria-hidden>
<div class="flex" id="uid-6e3293a15a83" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Imperum</span>
</label>
<div class="grid" id="uid-ee5f387cead0" ui-toggle-target aria-hidden>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Lorem toggle</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Ipsum toggle</span>
</label>
<label class="
c-form-checkbox
">
<span class="c-form-checkbox__checkbox">
<input type="checkbox">
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-unchecked"></use>
</svg>
<svg class="text-neutral-grey-02">
<use xlink:href="#form-checkbox-checked"></use>
</svg>
</span>
<span class="c-form-checkbox__label">Dolores toggle</span>
</label>
</div>
<hr class="mb-2">
<button ui-toggle="uid-ee5f387cead0" ui-toggle-target id="uid-ee5f387cead0" class="
c-toggle
c-toggle--primary
">
<span class="c-toggle__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#circle-plus"></use>
</svg>
</span>
<span class="c-toggle__label">Mehr anzeigen</span>
</button>
<button ui-toggle="uid-ee5f387cead0" id="uid-ee5f387cead0" ui-toggle-target aria-hidden class="
c-toggle
c-toggle--primary
">
<span class="c-toggle__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#circle-minus"></use>
</svg>
</span>
<span class="c-toggle__label">Weniger anzeigen</span>
</button>
</div>
</div>
</div>
</div>
{% for category in ['Stadtteile', 'Kategorien', 'Besonderheiten'] %}
{% set uid = getUID() %}
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="{{ uid }}">
<p class="text-style-p flex items-center gap-2">{{ category }} {% render '@search-filter-counter' %}</p>
<span ui-toggle-icon>
<span aria-hidden>{% render '@svg', { name: 'minus' } %}</span>
<span>{% render '@svg', { name: 'plus' } %}</span>
</span>
</div>
<div id="{{ uid }}" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
{% for subcategory in ['Lorem', 'Ipsum', 'Dolores', 'Imperum'] %}
{% set uid = getUID() %}
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="{{ uid }}">
<p class="text-style-p-em flex items-center"><span class="pr-2">{{ subcategory }}</span> {% render '@search-filter-counter' %}</p>
<span ui-toggle-icon>
<span aria-hidden>{% render '@svg', { name: 'tri-up' } %}</span>
<span>{% render '@svg', { name: 'tri-down' } %}</span>
</span>
</div>
<div class="flex" id="{{ uid }}" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
{% for label in ['Lorem', 'Ipsum', 'Dolores', 'Imperum'] %}
{% render '@form-checkbox', { label: label } %}
{% endfor %}
<hr class="mb-4">
<div class="flex flex-wrap text-style-mini">
<button class="underline cursor-pointer pr-4" ui-checkbox-group-select>Alle auswählen</button>
<button class="underline cursor-pointer" ui-checkbox-group-unselect>Auswahl löschen</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
{# Preis ohne Verschachtelung #}
{% set uid = getUID() %}
{% set uid2 = getUID() %}
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="{{ uid }}">
<p class="text-style-p flex items-center gap-2">Preis {% render '@search-filter-counter' %}</p>
<span ui-toggle-icon>
<span aria-hidden>{% render '@svg', { name: 'minus' } %}</span>
<span>{% render '@svg', { name: 'plus' } %}</span>
</span>
</div>
<div id="{{ uid }}" ui-toggle-target aria-hidden>
<div class="flex" id="{{ uid }}" ui-toggle-target aria-hidden>
<div class="grid ml-12" ui-checkbox-group>
{% for label in ['Lorem', 'Ipsum', 'Dolores', 'Imperum'] %}
{% render '@form-checkbox', { label: label } %}
{% endfor %}
<div class="grid" id="{{ uid2 }}" ui-toggle-target aria-hidden>
{% for label in ['Lorem toggle', 'Ipsum toggle', 'Dolores toggle'] %}
{% render '@form-checkbox', { label: label } %}
{% endfor %}
</div>
<hr class="mb-2">
{% render '@toggle', {
theme: 'primary',
uid: uid2,
label: {
show: "Mehr anzeigen",
hide: "Weniger anzeigen"
}
} %}
</div>
</div>
</div>
</div>
/* No context defined. */
No notes defined.