<!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="">Essen & Trinken</a>
<span class="c-breadcrumb__divider">/</span>
<a class="c-breadcrumb__item" href="">Restaurant</a>
<span class="c-breadcrumb__divider">/</span>
<a class="c-breadcrumb__item" href="">Winterhude</a>
</div>
</div>
</div>
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="c-page__heading">
<h1 class="text-neutral-black text-style-title">Restaurant in Hamburg</h1>
</div>
</div>
</div>
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
<div class="c-teaser-container" ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": 4, "large": 4}}'>
<div ui-carousel-item>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_1.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p><a href="/">Alternative Heilmethoden</a></p>
</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_7.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p><a href="/">Apotheke</a></p>
</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_12.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p><a href="/">Friseur</a></p>
</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_15.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p><a href="/">Dienstleistungen</a></p>
</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_12.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p><a href="/">Fitnessstudio</a></p>
</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><a href="/">Friseur</a></p>
</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_17.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p><a href="/">Fitnessstudio</a></p>
</div>
</div>
</div>
<div ui-carousel-item>
<div class="c-teaser">
<div class="c-teaser__image">
<a href="/" class="no-underline h-full w-full flex items-center justify-center bg-brand-hhnavy text-neutral-white hover:text-neutral-white">
<span>Alle Branchen anzeigen...</span>
</a>
</div>
</div>
</div>
</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-label-container small-only:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<div class="c-search-teaser__grid">
<div class="c-search-teaser__image">
<div ui-carousel data-config='{ "pageDots": false, "prevNextButtons": true, "prevNextButtonsInset": true, "slides": {"small": 1, "medium": 1, "large": 1}}'>
<div ui-carousel-item>
<img class="
c-image
" src="../../img/placeholder/500x300/image_8.jpg" alt="Lorem alt ipsum" />
</div>
<div ui-carousel-item>
<img class="
c-image
" src="../../img/placeholder/500x300/image_1.jpg" alt="Lorem alt ipsum" />
</div>
<div ui-carousel-item>
<img class="
c-image
" src="../../img/placeholder/500x300/image_6.jpg" alt="Lorem alt ipsum" />
</div>
<div ui-carousel-item>
<img class="
c-image
" src="../../img/placeholder/500x300/image_6.jpg" alt="Lorem alt ipsum" />
</div>
<div ui-carousel-item>
<img class="
c-image
" src="../../img/placeholder/500x300/image_9.jpg" alt="Lorem alt ipsum" />
</div>
</div>
</div>
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<div class="c-label-container medium:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<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>
<p class="text-neutral-grey-03"><span class="pipe-after"><strong>Ut enim ad minim</strong></span><span>Veniam eirmod</span></p>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker-b"></use>
</svg>
</span>
<span class="pipe-after shrink-0"><strong>1.2 Km</strong></span>
<span><a href="/">Krayenkamp 10, 20459 Hamburg</a></span>
</div>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-info-positive">
<use xlink:href="#time"></use>
</svg>
</span>
<span><a href="/">Jetzt geöffnet</a></span>
<span>, Mo. 11:30 - 00:00</span>
</div>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#promo-b"></use>
</svg>
</span>
<span>Aktionsangebot für 20€</span>
</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 class="c-search-teaser__buttons">
<button ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"} 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="#plus"></use>
</svg>
</span>
<span class="
c-button__label
">Kontakt</span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Mehr erfahren</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Gemerkt</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
<div class="c-search-teaser">
<div class="c-label-container small-only:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<div class="c-search-teaser__grid">
<div class="c-search-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_14.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<div class="c-label-container medium:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<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>
<p class="text-neutral-grey-03"><span class="pipe-after"><strong>Dolor sit amet</strong></span><span>Sagittis orci</span></p>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker-b"></use>
</svg>
</span>
<span class="pipe-after shrink-0"><strong>250 m</strong></span>
<span><a href="/">Rathausmarkt 1, 20095 Hamburg</a></span>
</div>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-info-positive">
<use xlink:href="#time"></use>
</svg>
</span>
<span><a href="/">Jetzt geöffnet</a></span>
<span>, Mo. 11:30 - 00:00</span>
</div>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#promo-b"></use>
</svg>
</span>
<span>Aktionsangebot für 20€</span>
</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 class="c-search-teaser__buttons">
<button ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"} 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="#plus"></use>
</svg>
</span>
<span class="
c-button__label
">Kontakt</span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Mehr erfahren</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-outline"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Merken</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
<div class="c-search-teaser">
<div class="c-label-container small-only:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<div class="c-search-teaser__grid">
<div class="c-search-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_12.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<div class="c-label-container medium:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<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>
<p class="text-neutral-grey-03"><span class="pipe-after"><strong>Dolor sit amet</strong></span><span>Sagittis orci</span></p>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker-b"></use>
</svg>
</span>
<span class="pipe-after shrink-0"><strong>250 m</strong></span>
<span><a href="/">Rathausmarkt 1, 20095 Hamburg</a></span>
</div>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<span>Mo. 11:30 - 00:00</span>
</div>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#promo-b"></use>
</svg>
</span>
<span>Aktionsangebot für 20€</span>
</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 class="c-search-teaser__buttons">
<button ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"} 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="#plus"></use>
</svg>
</span>
<span class="
c-button__label
">Kontakt</span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Mehr erfahren</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Gemerkt</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
<div class="c-search-teaser">
<div class="c-label-container small-only:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<div class="c-search-teaser__grid">
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<div class="c-label-container medium:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<h3 class="text-style-hit-id"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
</div>
<p class="text-neutral-grey-03"><span class="pipe-after"><strong>Eirmod tempor invidunt</strong></span><span>Tempor invidunt eirmod anamen</span></p>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker-b"></use>
</svg>
</span>
<span class="pipe-after shrink-0"><strong>2.5 Km</strong></span>
<span><a href="/">Speersort 1, 20095 Hamburg</a></span>
</div>
</div>
</div>
<div class="c-search-teaser__buttons">
<button ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"} 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="#plus"></use>
</svg>
</span>
<span class="
c-button__label
">Kontakt</span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Mehr erfahren</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-outline"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Merken</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
<div class="c-search-teaser">
<div class="c-label-container small-only:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<div class="c-search-teaser__grid">
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<div class="c-label-container medium:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<h3 class="text-style-hit-id"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
</div>
<p class="text-neutral-grey-03"><span class="pipe-after"><strong>Ut enim ad minim</strong></span><span>Veniam eirmod</span></p>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker-b"></use>
</svg>
</span>
<span class="pipe-after shrink-0"><strong>1.2 Km</strong></span>
<span><a href="/">Krayenkamp 10, 20459 Hamburg</a></span>
</div>
</div>
</div>
<div class="c-search-teaser__buttons">
<button ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"} 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="#plus"></use>
</svg>
</span>
<span class="
c-button__label
">Kontakt</span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Mehr erfahren</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-outline"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Merken</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
<div class="c-search-teaser">
<div class="c-label-container small-only:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<div class="c-search-teaser__grid">
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<div class="c-label-container medium:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<h3 class="text-style-hit-id"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
</div>
<p class="text-neutral-grey-03"><span class="pipe-after"><strong>Ut enim ad minim</strong></span><span>Veniam eirmod</span></p>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker-b"></use>
</svg>
</span>
<span class="pipe-after shrink-0"><strong>1.2 Km</strong></span>
<span><a href="/">Krayenkamp 10, 20459 Hamburg</a></span>
</div>
</div>
</div>
<div class="c-search-teaser__buttons">
<button ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"} 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="#plus"></use>
</svg>
</span>
<span class="
c-button__label
">Kontakt</span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Mehr erfahren</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-outline"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Merken</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
<div class="c-search-teaser">
<div class="c-label-container small-only:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<div class="c-search-teaser__grid">
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<div class="c-label-container medium:hidden">
<span class="
c-label
c-label--primary
">Premium-Partner</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
<span class="
c-label
c-label--secondary
">Kategorie</span>
</div>
<h3 class="text-style-hit-id"><a href="/">Lorem Ipsum-Dolorent & Lorem Sediam </a></h3>
</div>
<p class="text-neutral-grey-03"><span class="pipe-after"><strong>Lorem Sediam</strong></span><span>Volutpat ac tempor</span></p>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker-b"></use>
</svg>
</span>
<span class="pipe-after shrink-0"><strong>400 m</strong></span>
<span><a href="/">Jungfernstieg 54, 20354 Hamburg</a></span>
</div>
</div>
</div>
<div class="c-search-teaser__buttons">
<button ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"} 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="#plus"></use>
</svg>
</span>
<span class="
c-button__label
">Kontakt</span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Mehr erfahren</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-outline"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Merken</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="c-section__column">
<div class="
c-map-placeholder
has-border-radius
" style="background-image: url(../../img/placeholder/map.jpg)">
<div class="c-map-placeholder__inner">
<button ui-modal-open data-config={"id":"map658","title":"Karte","style":"large"} class="
c-button
c-button--primary
c-button--filled
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#enlarge"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Karte anzeigen</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
<hr class="mb-4">
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading">
<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">Jetzt geöffnet</span>
</label>
</div>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-fb5357cea515">
<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-fb5357cea515" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-cd2816634758">
<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-cd2816634758" 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-9fb0709f308c">
<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-9fb0709f308c" 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-c4fc0e6d8d56">
<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-c4fc0e6d8d56" 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-16e05f6a70cb">
<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-16e05f6a70cb" 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-9b5cbc658949">
<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-9b5cbc658949" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-38aad13b0ce9">
<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-38aad13b0ce9" 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-6f3930faa823">
<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-6f3930faa823" 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-e445ecf9f4f0">
<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-e445ecf9f4f0" 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-483be5f062ee">
<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-483be5f062ee" 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-8dcc2a3f09da">
<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-8dcc2a3f09da" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-275069d27123">
<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-275069d27123" 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-ae7cf096aca8">
<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-ae7cf096aca8" 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-e8939f1f39b7">
<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-e8939f1f39b7" 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-06b90becb112">
<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-06b90becb112" 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-2cdcc42b014e">
<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-2cdcc42b014e" ui-toggle-target aria-hidden>
<div class="flex" id="uid-2cdcc42b014e" 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-e8f1f9bcfd05" 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-e8f1f9bcfd05" ui-toggle-target id="uid-e8f1f9bcfd05" 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-e8f1f9bcfd05" id="uid-e8f1f9bcfd05" 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">
<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-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_15.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_10.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="/">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="/">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_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="/">Lorem ipsum dolor sit amet</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">Frequenz-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_15.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>
<p class="hidden medium:block"><a href="/">Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
</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="flex justify-end mb-2">
<span class="
c-label
c-label--tertiary
">GRUNDEINTRAG</span>
</div>
<div class="c-teaser-container">
<div class="c-search-teaser">
<div class="c-search-teaser__grid">
<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>
</div>
<p class="text-neutral-grey-03"><span class="pipe-after"><strong>Ut enim ad minim</strong></span><span>Veniam eirmod</span></p>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker-b"></use>
</svg>
</span>
<span class="pipe-after shrink-0"><strong>1.2 Km</strong></span>
<span><a href="/">Krayenkamp 10, 20459 Hamburg</a></span>
</div>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-info-positive">
<use xlink:href="#time"></use>
</svg>
</span>
<span><a href="/">Jetzt geöffnet</a></span>
<span>, Mo. 11:30 - 00:00</span>
</div>
</div>
</div>
<div class="c-search-teaser__buttons">
<button ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"} 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="#plus"></use>
</svg>
</span>
<span class="
c-button__label
">Kontakt</span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Mehr erfahren</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Gemerkt</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
<div class="c-search-teaser">
<div class="c-search-teaser__grid">
<div class="grid gap-[.8rem]">
<div class="grid gap-[.4rem]">
<h3 class="text-style-hit-id"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
</div>
<p class="text-neutral-grey-03"><span class="pipe-after"><strong>Eirmod tempor invidunt</strong></span><span>Tempor invidunt eirmod anamen</span></p>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker-b"></use>
</svg>
</span>
<span class="pipe-after shrink-0"><strong>2.5 Km</strong></span>
<span><a href="/">Speersort 1, 20095 Hamburg</a></span>
</div>
<div class="flex items-center">
<span class="c-search-teaser__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<span>Mo. 11:30 - 00:00</span>
</div>
</div>
</div>
<div class="c-search-teaser__buttons">
<button ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"} 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="#plus"></use>
</svg>
</span>
<span class="
c-button__label
">Kontakt</span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Mehr erfahren</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Gemerkt</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
<div class="c-search-teaser">
<div class="c-search-teaser__grid">
<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>
</div>
<p class="text-neutral-grey-03"><span class="pipe-after"><strong>Ut enim ad minim</strong></span><span>Veniam eirmod</span></p>
</div>
</div>
<div class="c-search-teaser__buttons">
<button ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"} 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="#plus"></use>
</svg>
</span>
<span class="
c-button__label
">Kontakt</span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Mehr erfahren</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Gemerkt</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width 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-max-width has-background">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="k-richtext">
<div class="k-component k-floated k-img-left ">
<span class="k-roofline k-roofline-h3">Unser Ladenlokal</span>
<h3 class="k-headline">WILLKOMMEN AM ALTEN WALL NO. 22!</h3>
<span class="k-subline k-subline-h3">Wir öffneten die Türen unserer neuen Heimat und freuen uns, Sie am Alten Wall - mitten im Herzen Hamburgs willkommen zu heißen.</span>
<div class="k-content">
<div class="k-text richtext">
<div class="k-image autosize-image">
<picture>
<img src="https://www.hamburg.de/iason/images/60bfe2f02b29d545fc04edba/DSCF2324-390x390.jpg" loading="lazy" alt="Graues Backsteingebäude des Ladenlokals von Ladage & Oelke" title="Außenansicht" data-copy="ewogICJsYWJlbGVkVVJJIiA6ICJodHRwczovL3d3dy5oYW1idXJnLmRlL2lhc29uL2ltYWdlcy82MGJmZTJmMDJiMjlkNTQ1ZmMwNGVkYmEvRFNDRjIzMjQtMzkweDM5MC5qcGciLAogICJjYXB0aW9uIiA6ICIiLAogICJhbHQiIDogIkdyYXVlcyBCYWNrc3RlaW5nZWLDpHVkZSBkZXMgTGFkZW5sb2thbHMgdm9uIExhZGFnZSAmIE9lbGtlIiwKICAiY29weXJpZ2h0T3duZXIiIDogIkxhZGFnZSAmIE9lbGtlIiwKICAidGl0bGUiIDogIkF1w59lbmFuc2ljaHQiLAogICJkZXNjcmlwdGlvbiIgOiAiIiwKICAiYXV0aG9yIiA6ICIiLAogICJtaW1lVHlwZSIgOiAiaW1hZ2UvanBlZyIKfQ==">
</picture>
<span class="k-image-copy">Ladage & Oelke</span>
</div>
<p>
<span style="text-align: left;">Entdecken Sie auf rund 600 Quadratmetern anglophile Gentlemenswear, exklusive Accessoires und rahmengenähtes Schuhwerk. Lassen Sie sich für Ihre individuelle Maßkonfektion oder Gala-Garderobe in privater Atmosphäre mit direktem Blick auf Hamburgs Rathaus fachkundig beraten und genießen Sie das einzigartige Ambiente inklusive historischer Stücke aus unserer 175jährigen Geschichte.</span><br>
</p>
<p>Zusätzlich freuen wir uns Ihnen im neuen ETONCorner eine erweiterte Auswahl der Hemden unseres langjährigen Partners ETON zu präsentieren und Ihnen im neuen Gentleman‘s Parlor in Kooperation mit dem Hamburger Herrenfriseur „Herr Brito“ Herrenhaarschnitt und eine fachkundige Rasur anbieten zu können. Mit direktem Blick auf den Fleet und für perfekten Stil von Kopf bis Fuß.</p>
<p>Egal ob nach Einkauf, Anprobe, Rasur oder Besuch des Bucerius Kunst Forums nebenan - tanken Sie abseits des Trubels der Hamburger Innenstadt frische Kraft und lassen Sie sich in unserem hauseigenen Café mit leckeren Kaffeespezialitäten und feinstem Hamburger Gebäck aus der Mutterland-Backstube verwöhnen.</p>
</div>
</div>
</div>
<div class="k-component ">
<h4 class="k-headline">IHR HERRENAUSSTATTER – AUS TRADITION MODERN</h4>
<span class="k-subline k-subline-h4">„Eleganz heisst nicht, ins Auge zu fallen, sondern im Gedächtnis zu bleiben." (Giorgio Armani)</span>
<div class="k-content">
<div class="k-text richtext">
<p>In unserem umfangreichen Herrenbekleidungs-Sortiment tummelt sich alles, was ein zeitlos orientierter und gleichzeitig modebewusster Herr schätzt: zähmungsbedürftige Tweed-Sakkos, breitgerippte Cordhosen, schwere Duffles und Pea-Coats, elegante Anzüge und Blazer sowie ein breites Spektrum an Gesellschaftskleidung. Unzählige Preziosen der klassischen Herrengarderobe warten in unseren Rollschränken auf Sie. Wollpullover aus Geelong Lambswool, Cashmere oder in schweren irischen Strickqualitäten türmen sich in unseren Eichenholzregalen. Eine große Auswahl an Bindern, Schleifen, Schals und Strümpfen füllen die Schubladen. All dies nur zu dem Zweck, aus unzähligen Kombinationsmöglichkeiten Ihren ganz persönlichen Stil diskret, aber wirkungsvoll zu unterstreichen. Bei der Auswahl stehen Ihnen unsere Stilberater mit ihrem ganzen Wissen, viel Herz und Ehrlichkeit zur Seite.<br></p>
</div>
</div>
</div>
<div class="k-component k-floated">
<h5 class="k-headline">MASSKONFEKTION</h5>
<span class="k-subline k-subline-h5">„Ich bin nie mit der Mode gegangen, ich habe sie gemacht."(Pierre Cardin)</span>
<div class="k-content">
<div class="k-text richtext">
<div class="k-image autosize-image">
<picture>
<img src="https://www.hamburg.de/iason/images/60bfe2202b29d545fc04edb8/8509487-800x770.jpg" loading="lazy" alt="Jemand misst die Armlänge eines Mannes aus." title="Masskonfektion" data-copy="ewogICJsYWJlbGVkVVJJIiA6ICJodHRwczovL3d3dy5oYW1idXJnLmRlL2lhc29uL2ltYWdlcy82MGJmZTIyMDJiMjlkNTQ1ZmMwNGVkYjgvODUwOTQ4Ny04MDB4NzcwLmpwZyIsCiAgImNhcHRpb24iIDogIiIsCiAgImFsdCIgOiAiSmVtYW5kIG1pc3N0IGRpZSBBcm1sw6RuZ2UgZWluZXMgTWFubmVzIGF1cy4iLAogICJjb3B5cmlnaHRPd25lciIgOiAiTGFkYWdlICYgT2Vsa2UiLAogICJ0aXRsZSIgOiAiTWFzc2tvbmZla3Rpb24iLAogICJkZXNjcmlwdGlvbiIgOiAiIiwKICAiYXV0aG9yIiA6ICIiLAogICJtaW1lVHlwZSIgOiAiaW1hZ2UvanBlZyIKfQ==">
</picture>
<span class="k-image-copy">Ladage & Oelke</span>
</div>
<p>Sie haben ganz konkrete Vorstellungen, wie Ihr nächster Anzug, Ihr neues Sakko oder die neuen Knickerbocker aussehen sollen? Ihnen fehlt noch das passende Hemd zu Ihrem Lieblingssakko oder ein Smoking fürs Tanzparkett? Dann gönnen Sie sich ein edles Stück, nur für Sie gefertigt. Ausgereifte, verschiedene Passformen und eine Vielzahl edler Tuche aus Europas traditionsreichsten Webereien von Loro Piana über Fox Brothers bis zu W. Bill, Holland & Sherry und vielen mehr, bringen Sie Ihrem Stoff-Traum näher. Wir können auf verschiedene, langjährig erprobte Maßkonfektionssysteme europäischer Manufakturen wie beispielsweise Scabal zurückgreifen. Außerdem auf eigene Passformen, in die unsere gesamte Erfahrung im Bereich der Herrenkonfektion eingeflossen sind und welche wir über die Jahre selbst entwickelt und stetig modernisiert haben.<br></p>
<p>Unterstützt werden Sie bei der Auswahl von unseren Fachberatern und Schneidermeistern, die dank geschultem Blick und großem Erfahrungsschatz zum Erfolg Ihres individuellen Projektes beitragen. Im Vordergrund steht dabei wie vor über 170 Jahren eine optimale Passform in hochwertiger Verarbeitung. Das Resultat: ein neues Lieblingsstück, das Sie lange begleiten wird.</p>
</div>
</div>
</div>
<div class="k-component ">
<h7 class="k-headline">
THESE BOOTS ARE MADE FOR WALKING
</h7>
<span class="k-subline k-subline-h7">„It´s totally impossible to be well dressed in cheap shoes" (Hardy Amies)</span>
<div class="k-content">
<div class="k-text richtext">
<p>Es gibt den berühmten Satz „Kleider machen Leute“, aber eigentlich ist dies nur die halbe Wahrheit. Denn ohne die passenden Schuhe wirkt selbst der edelste Maßanzug nicht vollkommen. Das Adjektiv „passend“ ist bezogen auf Schuhwerk nicht gerade unerheblich, sondern vielmehr unverzichtbar. Ein Schuh kann aus noch so hochwertigem Leder gefertigt, noch so gut verarbeitet, seine Markenname noch so klangvoll sein: Wenn die Passform nicht stimmt, wird sein Besitzer am Ende wenig Freude haben – und der Schuh ein kurzes Leben.<br></p>
<p>Deshalb steht Ihnen in unserer Schuhabteilung eine liebevolle Auswahl an rahmengenähtem Schuhwerk zur Verfügung. Gefertigt in traditionsreichen Schuhmanufakturen, aus hochwertigen Kalbs-, Cordovan oder Hirschlederqualitäten, begleiten unsere Schuhe ihre Träger viele Jahre.</p>
</div>
</div>
</div>
<div class="k-component ">
<h6 class="k-headline">HANS HUMMEL, ZITRONENJETTE – UND EIN ORIGINAL VON LADAGE</h6>
<span class="k-subline k-subline-h6">Ladage & Oelke und Hamburg - untrennbar verbunden</span>
<div class="k-content">
<div class="k-text richtext">
<p>Mit etwas Stolz können wir behaupten, dass wir mittlerweile ein echtes Stück Hamburg sind. Wir haben bereits Generationen von „Pfeffersäcken“ eingekleidet und sind ein lebendiges Zeugnis der berühmt-berüchtigten Hamburger Kaufmannstradition, abseits großer Filialisten. Hört sich gut an – aber wir sind kein Museum. Denn da sind noch unsere Kunden, viele von ihnen echte „Originale“ mit ganz eigenem Stil, die wiederum eine Leidenschaft für eben solche Produkte hegen. Sie sind es, die unseren Dufflecoat weit über Hamburgs Grenzen hinaus berühmt gemacht haben. Sie sind es, die auch im neuen Jahrtausend liebend gerne Knickerbocker als Beinkleid wählen oder mit stilistischer Verve schottischen Kilt tragen.<br></p>
<p>So sind dann inzwischen auch manche unserer Produkte unverwüstliche Originale geworden.</p>
<p>
<strong>Sie sind gespannt? Dann sind Sie herzlich eingeladen auf einen ersten Besuch!</strong>
</p>
<p>
<strong>Dürfen wir Sie auf dem Laufenden halten? </strong>Wir schicken Ihnen gerne unseren Newsletter mit Informationen zu besonderen Aktionen und speziellen Angeboten.
<a href="https://ladage-oelke.de/de/newsletter/" target="_blank" rel="nofollow" data-auto-event-observed="true">Jetzt Newsletter bestellen.</a>
</p>
<p></p>
</div>
</div>
</div>
<div class="k-component ">
<span class="k-roofline k-roofline-h7">Das ist ein Bild über die gesamte Breite</span>
<div class="k-content">
<div class="k-image autosize-image">
<picture>
<img src="https://www.hamburg.de/iason/images/6659fa0864be8f52add168a5/pixel-shot%40adoabestock.jpg" loading="lazy" alt="" title="" data-copy="ewogICJsYWJlbGVkVVJJIiA6ICJodHRwczovL3d3dy5oYW1idXJnLmRlL2lhc29uL2ltYWdlcy82NjU5ZmEwODY0YmU4ZjUyYWRkMTY4YTUvcGl4ZWwtc2hvdCU0MGFkb2FiZXN0b2NrLmpwZyIsCiAgImNhcHRpb24iIDogIiIsCiAgImFsdCIgOiAiIiwKICAiY29weXJpZ2h0T3duZXIiIDogIiIsCiAgInRpdGxlIiA6ICIiLAogICJkZXNjcmlwdGlvbiIgOiAiIiwKICAiYXV0aG9yIiA6ICIiLAogICJtaW1lVHlwZSIgOiAiaW1hZ2UvanBlZyIKfQ==">
</picture>
</div>
</div>
</div>
<div class="k-component k-columns">
<div class="k-content">
<div class="k-text richtext">
<p>Zweispaltig geht auch...</p>
</div>
<div class="k-text richtext">
<p>... wie man sieht</p>
</div>
</div>
</div>
</div>
</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-section__heading">
<h2 class="text-style-subheadline-2">Häufig gestellte Fragen</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</p>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-ededa4f2ab7c">
<h4 class="text-style-p-em">Ut enim ad minim veniam, quis nostrud</h4>
<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 id="uid-ededa4f2ab7c" ui-toggle-target aria-hidden>
<p>Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</p>
</div>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-1aedec364d56">
<h4 class="text-style-p-em">Lorem ipsum dolor sit amet</h4>
<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 id="uid-1aedec364d56" ui-toggle-target aria-hidden>
<p>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.</p>
</div>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-ed2a9cc965d4">
<h4 class="text-style-p-em">Ut enim ad minim veniam, quis nostrud</h4>
<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 id="uid-ed2a9cc965d4" ui-toggle-target aria-hidden>
<p>Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</p>
</div>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-1128143e7989">
<h4 class="text-style-p-em">Nonumy eirmod tempor invidunt ut anamen</h4>
<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 id="uid-1128143e7989" ui-toggle-target aria-hidden>
<p>Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</p>
</div>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-1794884a827b">
<h4 class="text-style-p-em">Duis aute irure dolor in reprehenderit in voluptate</h4>
<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 id="uid-1794884a827b" ui-toggle-target aria-hidden>
<p>Donec aliquet lacus vel nunc euismod dictum ornare quis augue. Aliquam vel laoreet ligula, nec vehicula justo. Morbi venenatis porttitor mauris, id iaculis risus rhoncus eget. Maecenas egestas ultricies ipsum nec tempus. Aliquam ultricies mauris at erat porttitor, et posuere orci egestas.</p>
</div>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-841c7ddea951">
<h4 class="text-style-p-em">Ut enim ad minim veniam, quis nostrud</h4>
<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 id="uid-841c7ddea951" ui-toggle-target aria-hidden>
<p>Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</p>
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="c-section__heading">
<h2 class="text-style-subheadline-2">Einfach Ihre beste Adresse in der Nähe entdecken</h2>
</div>
<div ui-carousel data-config='{ "pageDots": true, "prevNextButtons": false, "slides": {"small": 2, "medium": 3, "large": 5}}'>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_barbershop"></use>
</svg>
</div>
<p class="c-category-teaser__name">Eirmod ut anamen</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_beauty-wellness"></use>
</svg>
</div>
<p class="c-category-teaser__name">Anamen elitr</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_restaurant"></use>
</svg>
</div>
<p class="c-category-teaser__name">Dolor sitament lorem</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_cleaning-service"></use>
</svg>
</div>
<p class="c-category-teaser__name">Lorem ipsum</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_construction-company"></use>
</svg>
</div>
<p class="c-category-teaser__name">Elitr dolrem</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_barbershop"></use>
</svg>
</div>
<p class="c-category-teaser__name">Eirmod ut anamen</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_beauty-wellness"></use>
</svg>
</div>
<p class="c-category-teaser__name">Anamen elitr</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_beauty-wellness"></use>
</svg>
</div>
<p class="c-category-teaser__name">Anamen elitr</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_cafe"></use>
</svg>
</div>
<p class="c-category-teaser__name">Consetetur sadipscing</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_barbershop"></use>
</svg>
</div>
<p class="c-category-teaser__name">Eirmod ut anamen</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_cleaning-service"></use>
</svg>
</div>
<p class="c-category-teaser__name">Lorem ipsum</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_beauty-wellness"></use>
</svg>
</div>
<p class="c-category-teaser__name">Anamen elitr</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_barbershop"></use>
</svg>
</div>
<p class="c-category-teaser__name">Eirmod ut anamen</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_barbershop"></use>
</svg>
</div>
<p class="c-category-teaser__name">Eirmod ut anamen</p>
</a>
</div>
<div ui-carousel-item>
<a href="/" class="c-category-teaser">
<div class="c-category-teaser__symbol">
<svg class="text-neutral-grey-02">
<use xlink:href="#icon_da_barbershop"></use>
</svg>
</div>
<p class="c-category-teaser__name">Eirmod ut anamen</p>
</a>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="c-section__heading">
<h2 class="text-style-subheadline-2">Andere suchten auch</h2>
</div>
<div class="flex flex-wrap gap-4">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Biergarten</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Gastroverzeichnis</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Familienessen</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Erlebnisrestaurant</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Catering</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Eventlocation</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Kochkurs</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Aussengastronomie</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Weihnachtsfeier</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Gasthaus</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Gaststätte</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Konferenzraum</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Biergarten</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Gastroverzeichnis</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Familienessen</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Erlebnisrestaurant</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Catering</span>
</button>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="
c-big-action
c-big-action--dark
">
<div class="c-copy">
<h3 class="text-style-subheadline-3">Sie haben ein Unternehmen in Hamburg?<br>Bringen Sie es online.</h3>
</div>
<button class="
c-button
c-button--white
c-button--filled
c-button--large
">
<span class="
c-button__label
">Jetzt kostenlos registrieren</span>
</button>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="
c-big-action
c-big-action--light
">
<div class="c-copy">
<h3 class="text-style-subheadline-3">Kontakt</h3>
<p>Sie haben Fragen zu Branchen Online?<br>Wir sind montags bis freitags von 9:00 Uhr bis 17:00 Uhr für sie da.</p>
<p>hamburg.de GmbH & Co. KG, Verena Sievert</p>
</div>
<div class="flex small-only:flex-col justify-center items-center gap-6 mb-12">
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#phone"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
<a href="tel:+494055555555">+49 40 55555555</a>
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#email"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
<a href="mailto:xyz.hh@hamburg.de">xyz.hh@hamburg.de</a>
</p>
</div>
</div>
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Jetzt Termin vereinbaren</span>
</button>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="flex justify-end items-baseline mb-2">
<span class="
c-label
c-label--tertiary
">ANZEIGE</span>
</div>
<a href="https://www.meine-ferienimmobilie.de/" target="_blank">
<img class="
c-image
" src="../../img/placeholder/banner.jpg" alt="Lorem alt ipsum" />
</a>
</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-e285c7c77920" 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-e285c7c77920" ui-toggle-target id="uid-e285c7c77920" 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-e285c7c77920" id="uid-e285c7c77920" 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-hhnavy">
<use xlink:href="#heart-outline"></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_9.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="/">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_15.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_1.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_12.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_18.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>
<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_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="/">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_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="/">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_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 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-3d4e50604e46">
<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-3d4e50604e46" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-f1219f7ac775">
<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-f1219f7ac775" 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-892edcb4e491">
<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-892edcb4e491" 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-34861f540ddb">
<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-34861f540ddb" 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-62a694a1d91c">
<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-62a694a1d91c" 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-6ab4ce190087">
<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-6ab4ce190087" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-1dd6c2be7315">
<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-1dd6c2be7315" 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-1ef46de54136">
<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-1ef46de54136" 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-c231b1ef6e11">
<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-c231b1ef6e11" 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-fc62c3012901">
<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-fc62c3012901" 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-d412f343041f">
<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-d412f343041f" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-1462c07bca9b">
<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-1462c07bca9b" 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-3cfe78e96d63">
<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-3cfe78e96d63" 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-6120e6ebfeaf">
<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-6120e6ebfeaf" 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-1333c33bda16">
<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-1333c33bda16" 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-06b237e9ee3c">
<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-06b237e9ee3c" ui-toggle-target aria-hidden>
<div class="flex" id="uid-06b237e9ee3c" 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-afafd8cdab10" 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-afafd8cdab10" ui-toggle-target id="uid-afafd8cdab10" 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-afafd8cdab10" id="uid-afafd8cdab10" 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', 'Essen & Trinken', 'Restaurant', 'Winterhude'] } %}
</div>
</div>
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
{% render '@page-heading', { title: 'Restaurant in Hamburg' } %}
</div>
</div>
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
<div class="c-teaser-container" ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": 4, "large": 4}}'>
{% for index in [1, 2, 3, 4, 5, 6, 7] %}
<div ui-carousel-item>
{% render '@teaser', {
include: ['image', 'text'],
text: ['Alternative Heilmethoden', 'Apotheke', 'Friseur', 'Dienstleistungen', 'Fitnessstudio', 'Friseur', 'Fitnessstudio', 'Friseur'][index-1]
} %}
</div>
{% endfor %}
<div ui-carousel-item>
{% render '@teaser-text-link', {
label: 'Alle Branchen anzeigen...',
link: '/'
} %}
</div>
</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>
{% 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">
{% render '@search-teaser', {
include: ['labels', 'carousel', 'title', 'intro', 'tags', 'address', 'opening', 'offer', 'text', 'cta']
} %}
{% for index in [1, 2] %}
{% render '@search-teaser', {
include: ['labels', 'image', 'title', 'intro', 'tags', 'address', 'opening', 'offer', 'text', 'cta']
} %}
{% endfor %}
{% for index in [1, 2, 3, 4] %}
{% render '@search-teaser', {
include: ['labels', 'title', 'tags', 'address', 'cta']
} %}
{% endfor %}
</div>
</div>
<!-- column -->
<div class="c-section__column">
{% render '@map-placeholder', {
withBorderRadius: true,
attributes: 'ui-modal-open data-config={"id":"map658","title":"Karte","style":"large"}'
}%}
<hr class="mb-4">
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading">
{% render '@form-checkbox', { label: 'Jetzt geöffnet' } %}
</div>
</div>
{% render '@search-filter' %}
<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-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: 'Frequenz-Teaser' } %}
{% render '@teaser', {
include: ['image', 'kicker', 'title', 'text-long'],
on_all: { image_left: true }
} %}
</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="flex justify-end mb-2">
{% render '@label', { label: 'GRUNDEINTRAG', theme: 'tertiary' } %}
</div>
<div class="c-teaser-container">
{% for index in [1, 2] %}
{% render '@search-teaser', {
include: ['title', 'tags', 'address', 'opening', 'cta']
} %}
{% endfor %}
{% render '@search-teaser', {
include: ['title', 'tags', 'cta']
} %}
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width 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-max-width has-background">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
{% render '@kaptara-richtext-1' %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
{% render '@faq' %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', { title: 'Einfach Ihre beste Adresse in der Nähe entdecken'} %}
<div ui-carousel data-config='{ "pageDots": true, "prevNextButtons": false, "slides": {"small": 2, "medium": 3, "large": 5}}'>
{% for index in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] %}
<div ui-carousel-item>
{% render '@category-teaser' %}
</div>
{% endfor %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', { title: 'Andere suchten auch'} %}
<div class="flex flex-wrap gap-4">
{% for index in ['Biergarten', 'Gastroverzeichnis', 'Familienessen', 'Erlebnisrestaurant', 'Catering', 'Eventlocation', 'Kochkurs', 'Aussengastronomie', 'Weihnachtsfeier', 'Gasthaus', 'Gaststätte', 'Konferenzraum', 'Biergarten', 'Gastroverzeichnis', 'Familienessen', 'Erlebnisrestaurant', 'Catering'] %}
{% render '@button', {
label: { default: index },
theme: 'primary',
variant: 'outlined',
size: 'small'
} %}
{% endfor %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@big-action-registrieren' %}
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@big-action-kontakt' %}
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@ad' %}
</div>
</div>
{% endblock content %}
{% block footer %}{% render '@page-footer-portal' %}{% endblock footer %}
/* No context defined. */
No notes defined.