<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="c-page">
<div class="c-page__main">
<header class="c-header">
<div class="c-header__bug">
<img class="
c-image
" src="../../img/brand/bug.svg" alt="Lorem alt ipsum" />
</div>
<div class="c-header__inner">
<div class="c-header__logo">
<a href="/">
<img class="
c-image
" src="../../img/brand/hhdelogo.svg" alt="Lorem alt ipsum" />
</a>
</div>
<button class="c-header__hamburger" ui-modal-open data-config='{ "id": "mobile-menu-portal","title":"Menu","style":"menu"}'>
<svg class="text-neutral-grey-02">
<use xlink:href="#burger-heart-red"></use>
</svg>
</button>
</div>
<div class="c-header__search" ui-search-toggle>
<div class="
c-form-input
has-icon
">
<span class="
c-form-input__icon
">
<svg class="text-neutral-grey-02">
<use xlink:href="#glas"></use>
</svg>
</span>
<input class="c-form-input__field" type="text" placeholder="Restaurant">
</div>
<div ui-search-toggle-target aria-hidden>
<div class="
c-form-input
has-icon
">
<span class="
c-form-input__icon
is-clickable
">
<svg class="currentColor">
<use xlink:href="#locate-a"></use>
</svg>
</span>
<input class="c-form-input__field" type="text" placeholder="Hamburg">
</div>
</div>
<div ui-search-toggle-target aria-hidden>
<button class="
c-button
c-button--primary
c-button--pill
c-button--large
has-full-width
">
<span class="
c-button__label
">Suchen</span>
</button>
</div>
<div class="hidden medium:flex large:hidden gap-6">
<button ui-modal-open data-config='{"id":"filter654","title":"Suchergebnisse filtern","style":"small"}' class="
c-button
c-button--primary
c-button--outlined
c-button--pill
c-button--large
">
<svg class="text-neutral-grey-02">
<use xlink:href="#filter"></use>
</svg>
<span class="c-badge">99</span>
</button>
<button ui-modal-open data-config='{"id":"map658","title":"Karte","style":"large"}' class="
c-button
c-button--primary
c-button--outlined
c-button--pill
c-button--large
">
<svg class="text-neutral-grey-02">
<use xlink:href="#map"></use>
</svg>
</button>
</div>
</div>
</header>
<div class="
c-hero
c-hero--small
">
<div class="c-hero__cover">
<img class="
c-image
" src="../../img/placeholder/hero.jpg" alt="Lorem alt ipsum" />
</div>
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
<div class="c-breadcrumb-container">
<div class="c-breadcrumb">
<a class="c-breadcrumb__home" href="">
<svg class="text-neutral-grey-02">
<use xlink:href="#home"></use>
</svg>
</a>
<span class="c-breadcrumb__divider">/</span>
<a class="c-breadcrumb__item" href="">Branchenbuch</a>
<span class="c-breadcrumb__divider">/</span>
<a class="c-breadcrumb__item" href="">Events</a>
</div>
</div>
</div>
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
<div class="c-page__heading">
<h1 class="text-neutral-black text-style-title">Veranstaltungen in der Nähe</h1>
</div>
</div>
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="flex justify-between items-baseline mb-4">
<p class="text-neutral-grey-02">150 Treffer in der Nähe</p>
<span class="
c-label
c-label--tertiary
">ANZEIGE</span>
</div>
</div>
<!-- column -->
<div class="c-section__column">
<!-- placeholder -->
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="c-teaser-container">
<div class="c-search-teaser">
<div class="c-search-teaser__grid">
<div class="c-search-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_5.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<h3 class="text-style-hit-id"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<h3 class="text-style-big"><a href="/">Sollicitudin aliquam ultrices sagittis orci minim veniam, quis nostrud</a></h3>
</div>
<div class="flex gap-4 flex-wrap">
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
10.01.2024
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
10:00 - 17:00 Uhr
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
Niendorf
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#tag"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
Märkte & Messen
</p>
</div>
</div>
<div class="text-neutral-grey-03 pb-2">
<p>Beque volutpat ac tincidunt vitae semper quis lectus nulla. Nullam vehicula ipsum a arcu.</p>
</div>
</div>
</div>
</div>
<div class="c-search-teaser">
<div class="c-search-teaser__grid">
<div class="c-search-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_4.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<h3 class="text-style-hit-id"><a href="/">Lorem Ipsum-Dolorent & Lorem Sediam </a></h3>
<h3 class="text-style-big"><a href="/">Nullam vehicula ipsum a arcu & Lorem Sediam </a></h3>
</div>
<div class="flex gap-4 flex-wrap">
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
10.01.2024
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
10:00 - 17:00 Uhr
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
Niendorf
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#tag"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
Märkte & Messen
</p>
</div>
</div>
<div class="text-neutral-grey-03 pb-2">
<p>Enim lobortis scelerisque fermentum dui faucibus in ornare adipiscing diam donec adipiscing tristique risus nec feugiat.</p>
</div>
</div>
</div>
</div>
<div class="c-search-teaser">
<div class="c-search-teaser__grid">
<div class="c-search-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_18.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<h3 class="text-style-hit-id"><a href="/">Lorem ipsum dolor sit amet</a></h3>
<h3 class="text-style-big"><a href="/">Facilisis gravida neque convallis in nisl nisi</a></h3>
</div>
<div class="flex gap-4 flex-wrap">
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
10.01.2024
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
10:00 - 17:00 Uhr
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
Niendorf
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#tag"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
Märkte & Messen
</p>
</div>
</div>
<div class="text-neutral-grey-03 pb-2">
<p>Leo in vitae turpis massa sed elementum. Facilisis gravida neque convallis in nisl nisi scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="c-section__column">
<div class="
c-form-input
has-icon
">
<span class="
c-form-input__icon
">
<svg class="text-neutral-grey-02">
<use xlink:href="#glas"></use>
</svg>
</span>
<input class="c-form-input__field" type="text" placeholder="Event-Stichwort">
</div>
<hr class="mb-8">
<div class="flex gap-4">
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Übernehmen</span>
</button>
<button ui-filter-reset class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="
c-button__label
">Zurücksetzen</span>
</button>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width has-centered-column has-centered-content">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#circle-plus"></use>
</svg>
</span>
<span class="
c-button__label
">Mehr Einträge anzeigen</span>
</button>
<hr class="c-section__spacer">
<div class="grid gap-8">
<div class="flex items-center justify-center small:gap-2 medium:gap-8 large:gap-12">
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#chev-left"></use>
</svg>
</span>
</button>
<div class="flex items-center small:gap-0 medium:gap-4 large:gap-8">
<button class="
c-button
c-button--primary
c-button--square
c-button--large
is-active
">
<span class="
c-button__label
">1</span>
</button>
<span class="text-shade-50 text-style-mini hidden small:block">•</span>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">21</span>
</button>
<span class="text-shade-50 text-style-mini hidden small:block">•</span>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">47</span>
</button>
<span class="text-shade-50 text-style-mini hidden small:block">•</span>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">71</span>
</button>
<span class="text-shade-50 text-style-mini hidden small:block">•</span>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">97</span>
</button>
</div>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#chev-right"></use>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-background has-max-width">
<div class="c-section__inner">
<div class="flex justify-between items-baseline">
<div class="c-section__heading">
<h2 class="text-style-subheadline-2">hamburg.de-Tipp</h2>
</div>
<span class="
c-label
c-label--tertiary
">ANZEIGE</span>
</div>
<div class="c-teaser-container" ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": 3, "large": 3}}'>
<div ui-carousel-item>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_14.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
</div>
</div>
</div>
<div ui-carousel-item>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_8.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
</div>
</div>
</div>
<div ui-carousel-item>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_11.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
</div>
</div>
</div>
<div ui-carousel-item>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_16.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
</div>
</div>
</div>
<div ui-carousel-item>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_6.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-background has-max-width">
<div class="c-section__inner">
<div class="c-section__heading">
<h2 class="text-style-subheadline-2">Teaser</h2>
</div>
<div class="
c-teaser
c-teaser--on-all:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_5.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
<p class="hidden medium:block"><a href="/">Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament. Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament.</a></p>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament. Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament.</a></p>
</div>
</div>
</div>
</div>
</div>
<footer class="c-footer">
<hr class="c-footer__spacer">
<div class="text-light-50 text-style-mini">
<h5 class="mb-6"><strong>Urheber der Bilder</strong></h5>
<div class="grid gap-1">
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/stegmann-bild.jpg" data-caption="Caption 1 ipsum amet">Linktext 1 ipsum amet</a>
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/sparda-bank.jpg" data-caption="Caption 2 ipsum dolor sit amet">Linktext 2 ipsum dolor sit amet</a>
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/koegler-treppenlifte.jpg" data-caption="Caption 3">Linktext 3</a>
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/677bc3f5f383bb2a91166825/consultatio-strafverteidiger-logo.jpg" data-caption="Caption 4 ipsum amet">Linktext 4 ipsum amet</a>
</div>
<div class="grid gap-1" id="uid-086276eda89b" ui-toggle-target aria-hidden>
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/665990db64be8f52add1689d/frisierbar-ottensen-logo.jpg" data-caption="Caption 5 dolor sit amet">Linktext 5 dolor sit amet</a>
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/6360f7e8e4273a3be4aa59c4/mhc-mobility_logo.jpg" data-caption="Caption 6 ipsum sit amet">Linktext 6 ipsum sit amet</a>
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/605e78c6e24ae01e9cc373f8/kaleido-dp+auf+Pixabay.jpg" data-caption="Caption 7 ipsum dolor">Linktext 7 ipsum dolor</a>
</div>
<div class="mt-4">
<button ui-toggle="uid-086276eda89b" ui-toggle-target id="uid-086276eda89b" class="
c-toggle
c-toggle--light
">
<span class="c-toggle__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#circle-plus"></use>
</svg>
</span>
<span class="c-toggle__label">Alle Quellen anzeigen</span>
</button>
<button ui-toggle="uid-086276eda89b" id="uid-086276eda89b" ui-toggle-target aria-hidden class="
c-toggle
c-toggle--light
">
<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 Quellen anzeigen</span>
</button>
</div>
</div>
<hr class="c-footer__spacer has-border-bottom">
<div class="grid gap-6 justify-around max-w-[1200px] mx-auto large:flex large:gap-10">
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Branchenbuch</span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Behördenfinder</span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Veranstaltungen</span>
</a>
</div>
</div>
<hr class="c-footer__spacer has-border-bottom">
<ul class="grid gap-6 place-content-center large:flex large:gap-10">
<li><a href="/">Bürgerservice & Politik</a></li>
<li><a href="/">Hotel & Tourismus</a></li>
<li><a href="/">Erlebnis & Freizeit</a></li>
<li><a href="/">Kultur & Tickets</a></li>
<li><a href="/">Jobs & Wohnen</a></li>
<li><a href="/">Verkehr</a></li>
</ul>
<hr class="c-footer__spacer has-border-bottom has-indent-left-right">
<ul class="grid gap-6 place-content-center large:flex large:gap-10">
<li><a href="/">Stadtplan</a></li>
<li><a href="/">Bus & Bahn</a></li>
<li><a href="/">Mail</a></li>
<li><a href="/">Presse</a></li>
<li><a href="/">Mediendaten</a></li>
<li><a href="/">Jobs</a></li>
</ul>
<hr class="c-footer__spacer has-border-bottom has-indent-left-right">
<h4 class="text-style-p mb-4">Soziale Medien</h4>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#facebook"></use>
</svg>
</span>
</button>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#twitterx"></use>
</svg>
</span>
</button>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#instagram"></use>
</svg>
</span>
</button>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#youtube"></use>
</svg>
</span>
</button>
<hr class="mb-20">
<div class="bg-misc-blue-03 py-16 text-style-mini">
<ul class="grid gap-6 place-content-center large:flex large:gap-10">
<li><a href="/">hamburg.de 2024</a></li>
<li><a href="/">Impressum</a></li>
<li><a href="/">Datenschutz</a></li>
<li><a href="/">Barrierefreiheit</a></li>
<li><a href="/">Cookie-Richtlinien</a></li>
<li><a href="/">Nutzungsbedingungen</a></li>
</ul>
</div>
</footer>
</div>
<div class="c-modal-dialog" id="mobile-menu-portal">
<nav class="grid gap-10 text-style-p " role="navigation">
<a href="/" class="underline-on-hocus">Startseite Branchen Online</a>
<div class="flex justify-between items-center">
<button class="underline-on-hocus" ui-modal-open data-config='{ "id": "merkliste","title":"Merkliste","style":"large"}'>Merkliste (2)</button>
<svg class="text-brand-hhred">
<use xlink:href="#heart"></use>
</svg>
</div>
<a href="/" class="underline-on-hocus">Firma kostenlos eintragen</a>
<a href="/" class="underline-on-hocus">Werben im Branchenbuch</a>
<a href="/" class="underline-on-hocus">Stadtteilbranchenbücher</a>
<a href="/" class="underline-on-hocus">Themenspecials</a>
<a href="/" class="underline-on-hocus">Branchen A–Z</a>
<a href="/" class="underline-on-hocus">Firmen A–Z</a>
<hr class="has-border">
<p class="grid gap-4 grid-cols-[auto_1fr] items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#glas"></use>
</svg>
<a href="/" class="underline-on-hocus">Suche auf hamburg.de</a>
</p>
<p class="grid gap-4 grid-cols-[auto_1fr] items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#home"></use>
</svg>
<a href="/" class="underline-on-hocus">Startseite hamburg.de</a>
</p>
<a href="/" class="underline-on-hocus">Ukraine</a>
<a href="/" class="underline-on-hocus">Politik & Verwaltung</a>
<a href="/" class="underline-on-hocus">Hotels & Toursimus</a>
<a href="/" class="underline-on-hocus">Erlebnis & Freizeit</a>
<a href="/" class="underline-on-hocus">Kultur & Tickets</a>
<a href="/" class="underline-on-hocus">Jobs & Wohnen</a>
<a href="/" class="underline-on-hocus">Verkehr</a>
<a href="/" class="underline-on-hocus">Barrierefreiheit</a>
</nav>
</div>
<div class="c-modal-dialog" id="merkliste">
<div class="h-[236px] small-only:h-[45vw]">
<div class="bg-neutral-grey-01 grid justify-center items-center h-full">
<p>Kartenanwendung</p>
</div>
</div>
<hr class="my-8 has-border">
<div class="grid gap-8">
<div class="c-teaser-container small:grid-cols-1 medium:grid-cols-3 large:grid-cols-3">
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_5.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_5.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_3.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
</div>
<div class="c-teaser-container small:grid-cols-1 medium:grid-cols-3 large:grid-cols-3">
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_4.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_2.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_3.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
</div>
<div class="c-teaser-container small:grid-cols-1 medium:grid-cols-3 large:grid-cols-3">
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_16.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_3.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_2.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-modal-dialog" id="xyz123456">
<div class="grid grid-cols-[1fr] gap-4">
<p class="text-style-mini">Telefon-Nr. (kostenpflichtig)</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#phone"></use>
</svg>
<a class="no-underline" href="tel:+4940123123456">+49 40 123 456</a>
<span>Büro</span>
<svg class="text-brand-hhnavy">
<use xlink:href="#phone"></use>
</svg>
<a class="no-underline" href="tel:+4940123123456">+49 40 123 456</a>
<span>Empfang</span>
</div>
<p class="text-style-mini">Lorem ipsum dolor sit (15ct/Minute)</p>
<hr class="has-border my-4">
<div class="grid grid-cols-[1fr] gap-4">
<p class="text-style-mini">Web-Adresse</p>
<div class="grid grid-cols-[auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#link"></use>
</svg>
<a href="/">http://meinefirma.de</a>
</div>
</div>
<hr class="has-border my-4">
<div class="grid grid-cols-[1fr] gap-4">
<p class="text-style-mini">E-Mail</p>
<div class="grid grid-cols-[auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#email"></use>
</svg>
<a href="/">kontakt@meinefirma.de</a>
</div>
</div>
</div>
</div>
<div class="c-modal-image" ui-modal-image>
<span class="c-modal-image__close" ui-modal-image-close>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
<img class="c-modal-image__image" ui-modal-image-image>
<p class="c-modal-image__caption" ui-modal-image-caption></p>
</div>
<div class="c-modal-dialog" id="map658">
<div class="h-[80vh]">
<div class="bg-neutral-grey-01 grid justify-center items-center h-full">
<p>Kartenanwendung</p>
</div>
</div>
</div>
<div class="c-modal-dialog" id="filter654">
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-4dd62ff6fa0d">
<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-4dd62ff6fa0d" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-8675c5e3b2b8">
<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-8675c5e3b2b8" 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-fc6973cf852d">
<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-fc6973cf852d" 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-8c259b99f2df">
<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-8c259b99f2df" 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-1f2053ce8ac9">
<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-1f2053ce8ac9" 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-6c9636499c22">
<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-6c9636499c22" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-c8d3e05dddea">
<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-c8d3e05dddea" 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-113cea0e6c97">
<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-113cea0e6c97" 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-ee00139fc27f">
<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-ee00139fc27f" 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-4b4c7611e157">
<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-4b4c7611e157" 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-26127fd79876">
<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-26127fd79876" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-8ae2e65ea2fc">
<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-8ae2e65ea2fc" 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-cee1ec817da2">
<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-cee1ec817da2" 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-87dea7d0115c">
<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-87dea7d0115c" 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-7b2f44c71a39">
<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-7b2f44c71a39" 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-8aed858f2b43">
<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-8aed858f2b43" ui-toggle-target aria-hidden>
<div class="flex" id="uid-8aed858f2b43" 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-88ee4414a00a" 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-88ee4414a00a" ui-toggle-target id="uid-88ee4414a00a" 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-88ee4414a00a" id="uid-88ee4414a00a" 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>
<hr class="mb-8">
<footer class="c-header__filter-buttons">
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Filter anwenden</span>
</button>
<button ui-filter-reset class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="
c-button__label
">Zurücksetzen</span>
</button>
</footer>
</div>
<div class="c-modal-dialog" id="share56">
<div class="grid grid-cols-[1fr] gap-4">
<p class="text-style-mini">Teilen auf:</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#twitterx"></use>
</svg>
<a class="no-underline" hhref="/">X</a>
</div>
<hr class="has-border my-4">
<p class="text-style-mini">Teilen auf:</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#facebook"></use>
</svg>
<a class="no-underline" hhref="/">Facebook</a>
</div>
<hr class="has-border my-4">
<p class="text-style-mini">Merken:</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#pinterest"></use>
</svg>
<a class="no-underline" hhref="/">Pinterest</a>
</div>
<hr class="has-border my-4">
<p class="text-style-mini">Link kopieren:</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#link"></use>
</svg>
<a class="no-underline" hhref="/">http://www.abc.de/1234565abc</a>
</div>
<hr class="has-border my-4">
<p class="text-style-mini">Herunterladen:</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#ical"></use>
</svg>
<a class="no-underline" hhref="/">Kontakt speichern</a>
</div>
</div>
</div>
</body>
</html>
{% extends '@page' %}
{% block content %}
{% render '@page-header', { withSearch: true, withFilterAndMap: true, hamburgerMenu: 'portal' } %}
{% render '@page-hero', {
size: 'small',
img: { src: '/img/placeholder/hero.jpg' }
} %}
<div class="c-section has-max-width">
<div class="c-section__inner">
<div class="c-breadcrumb-container">
{% render '@breadcrumb', { path: ['Branchenbuch', 'Events'] } %}
</div>
</div>
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
{% render '@page-heading', { title: 'Veranstaltungen in der Nähe' } %}
</div>
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="flex justify-between items-baseline mb-4">
<p class="text-neutral-grey-02">150 Treffer in der Nähe</p>
{% render '@label', { label: 'ANZEIGE', theme: 'tertiary' } %}
</div>
</div>
<!-- column -->
<div class="c-section__column">
<!-- placeholder -->
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="c-teaser-container">
{% for index in [1, 2, 3] %}
{% render '@search-teaser', {
include: ['image', 'title', 'intro', 'icontags-event', 'text']
} %}
{% endfor %}
</div>
</div>
<!-- column -->
<div class="c-section__column">
{% render '@form-input', {
icon: { svg: 'glas' },
placeholder: 'Event-Stichwort'
} %}
<hr class="mb-8">
<div class="flex gap-4">
{% render '@button', {
label: { default: 'Übernehmen' },
theme: 'primary',
variant: 'filled'
} %}
{% render '@button', {
label: { default: 'Zurücksetzen' },
theme: 'primary',
variant: 'basic',
attributes: 'ui-filter-reset'
} %}
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width has-centered-column has-centered-content">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
{% render '@button', {
label: { default: 'Mehr Einträge anzeigen' },
icon: 'circle-plus',
theme: 'primary',
variant: 'outlined'
} %}
<hr class="c-section__spacer">
{% render '@pagination', {
prev: true,
next: true,
pagination: [1, 21, 47, 71, 97],
dots: true
} %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-background has-max-width">
<div class="c-section__inner">
<div class="flex justify-between items-baseline">
{% render '@section-heading', { title: 'hamburg.de-Tipp' } %}
{% render '@label', { label: 'ANZEIGE', theme: 'tertiary' } %}
</div>
<div class="c-teaser-container" ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": 3, "large": 3}}'>
{% for index in [1, 2, 3, 4, 5] %}
<div ui-carousel-item>
{% render '@teaser', {
include: ['image', 'kicker', 'title']
} %}
</div>
{% endfor %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-background has-max-width">
<div class="c-section__inner">
{% render '@section-heading', { title: 'Teaser' } %}
{% render '@teaser', {
include: ['image', 'kicker', 'title', 'text-long'],
on_all: { image_left: true }
} %}
</div>
</div>
{% endblock content %}
{% block footer %}{% render '@page-footer-portal' %}{% endblock footer %}
/* No context defined. */
No notes defined.