<!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>
</header>
<div class="
c-hero
c-hero--large
">
<div class="c-hero__cover">
<img class="
c-image
" src="../../img/placeholder/hero.jpg" alt="Lorem alt ipsum" />
</div>
<div class="c-hero__inner">
<div class="c-hero__wordo">
<img class="
c-image
" src="../../img/brand/wordo-branchen.svg" alt="Lorem alt ipsum" />
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="c-search-box-hero">
<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="Was oder wen suchen Sie?">
</div>
<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>
<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>
</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='{ "wrapAround": false, "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_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_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_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_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_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_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_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_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_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_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_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>
</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">Lorem ipsum dolor Sitament</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
</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="flex justify-between items-baseline">
<div class="c-section__heading">
<h2 class="text-style-subheadline-2">Häufig gesucht</h2>
</div>
<span class="
c-label
c-label--tertiary
">ANZEIGE</span>
</div>
<div class="c-teaser-container medium:grid-cols-3 large:grid-cols-3">
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_13.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<p><a href="/">In nulla posuere sollicitudin aliquam ultrices sagittis orci.</a></p>
<div class="c-icon-link-container">
<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>Dolor sitament lorem</span>
<span><strong>Sadipscing elitr</strong></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>Sadipscing elitr</span>
<span><strong>Sadipscing elitr</strong></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>Nonumy eirmod tempor</span>
<span><strong>Nonumy eirmod tempor</strong></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>Alle anzeigen</span>
</a>
</div>
</div>
</div>
</div>
<div class="
c-teaser
">
<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">
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<p><a href="/">Enim lobortis scelerisque fermentum dui faucibus in ornare adipiscing diam donec adipiscing tristique risus nec feugiat.</a></p>
<div class="c-icon-link-container">
<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>Sadipscing elitr</span>
<span><strong>Nonumy eirmod tempor</strong></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>Lorem ipsum</span>
<span><strong>Dolor sitament lorem</strong></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>Dolor sitament lorem</span>
<span><strong>Nonumy eirmod tempor</strong></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>Alle anzeigen</span>
</a>
</div>
</div>
</div>
</div>
<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">
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<p><a href="/">Enim lobortis scelerisque fermentum dui faucibus in ornare adipiscing diam donec adipiscing tristique risus nec feugiat.</a></p>
<div class="c-icon-link-container">
<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>Lorem ipsum</span>
<span><strong>Dolor sitament lorem</strong></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>Lorem ipsum</span>
<span><strong>Lorem ipsum</strong></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>Sadipscing elitr</span>
<span><strong>Lorem ipsum</strong></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>Alle anzeigen</span>
</a>
</div>
</div>
</div>
</div>
<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">
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<p><a href="/">Enim lobortis scelerisque fermentum dui faucibus in ornare adipiscing diam donec adipiscing tristique risus nec feugiat.</a></p>
<div class="c-icon-link-container">
<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>Nonumy eirmod tempor</span>
<span><strong>Nonumy eirmod tempor</strong></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>Dolor sitament lorem</span>
<span><strong>Dolor sitament lorem</strong></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>Sadipscing elitr</span>
<span><strong>Sadipscing elitr</strong></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>Alle anzeigen</span>
</a>
</div>
</div>
</div>
</div>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_3.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<p><a href="/">Enim lobortis scelerisque fermentum dui faucibus in ornare adipiscing diam donec adipiscing tristique risus nec feugiat.</a></p>
<div class="c-icon-link-container">
<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>Lorem ipsum</span>
<span><strong>Sadipscing elitr</strong></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>Sadipscing elitr</span>
<span><strong>Sadipscing elitr</strong></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>Nonumy eirmod tempor</span>
<span><strong>Dolor sitament lorem</strong></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>Alle anzeigen</span>
</a>
</div>
</div>
</div>
</div>
<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">
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
<p><a href="/">Leo in vitae turpis massa sed elementum. Facilisis gravida neque convallis in nisl nisi scelerisque.</a></p>
<div class="c-icon-link-container">
<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>Sadipscing elitr</span>
<span><strong>Sadipscing elitr</strong></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>Dolor sitament lorem</span>
<span><strong>Dolor sitament lorem</strong></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>Dolor sitament lorem</span>
<span><strong>Lorem ipsum</strong></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>Alle anzeigen</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom 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">Unternehmen stellen sich vor</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_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="/">Lorem ipsum dolor sit amet</a></h3>
</div>
</div>
</div>
<div ui-carousel-item>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_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="/">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_17.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_19.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_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>
</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">Neu auf hamburg.de</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-teaser-container medium:grid-cols-4 large:grid-cols-4" ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": "disabled", "large": "disabled"}}'>
<div ui-carousel-item>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_16.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">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_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="/">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_3.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
</div>
</div>
</div>
<div ui-carousel-item>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_3.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
</div>
</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">Stellenangebote in der Nähe</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-teaser-container medium:grid-cols-4 large:grid-cols-4">
<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="/">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="#job"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Consetetur sadipscing elitr
</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="/">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="#job"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Dolor sitament lorem
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_3.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">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="#job"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Dolor sitament lorem
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_2.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#job"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Dolor sitament lorem
</p>
</div>
</div>
</div>
</div>
<hr class="c-section__spacer">
<div class="c-section__buttons">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--large
">
<span class="
c-button__label
">Alle Jobs anzeigen</span>
</button>
</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">Events in der Nähe</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-teaser-container medium:grid-cols-4 large:grid-cols-4" ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": "disabled", "large": "disabled"}}'>
<div ui-carousel-item>
<div class="
c-teaser
">
<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="/">Lorem ipsum dolor sit amet</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Consetetur sadipscing elitr
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Dolor sitament lorem
</p>
</div>
</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 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="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Consetetur sadipscing elitr
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Consetetur sadipscing elitr
</p>
</div>
</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_2.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Lorem ipsum
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Consetetur sadipscing elitr
</p>
</div>
</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 class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Nonumy eirmod tempor
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Dolor sitament lorem
</p>
</div>
</div>
</div>
</div>
</div>
<hr class="c-section__spacer">
<div class="c-section__buttons">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--large
">
<span class="
c-button__label
">Mehr Events entdecken</span>
</button>
</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">Stadtteile in der Nähe</h2>
</div>
<div class="c-teaser-container medium:grid-cols-4 large:grid-cols-4" ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": "disabled", "large": "disabled"}}'>
<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">
<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_4.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<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_7.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
</div>
</div>
</div>
<div ui-carousel-item>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_12.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
</div>
</div>
</div>
</div>
<hr class="c-section__spacer">
<div class="c-section__buttons small-only:hidden">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--large
">
<span class="
c-button__label
">Alle Stadtteile anzeigen</span>
</button>
</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">Hamburg erkunden</h2>
</div>
<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>
</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">Service</h2>
</div>
<div class="c-teaser-container medium:grid-cols-3 large:grid-cols-3">
<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>
<p><a href="/">Enim lobortis scelerisque fermentum dui faucibus in ornare adipiscing diam donec adipiscing tristique risus nec feugiat.</a></p>
</div>
</div>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_6.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<p><a href="/">In nulla posuere sollicitudin aliquam ultrices sagittis orci.</a></p>
</div>
</div>
<div class="
c-teaser
">
<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>
<p><a href="/">Beque volutpat ac tincidunt vitae semper quis lectus nulla. Nullam vehicula ipsum a arcu.</a></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">Firmen in Hamburg von A-Z</h2>
</div>
<div class="c-index-container" ui-carousel data-config='{ "wrapAround": false, "pageDots": true, "prevNextButtons": false, "slides": {"small": 5, "medium": 8, "large": 13}}'>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
is-active
">
<span class="
c-button__label
">A</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">B</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">C</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">D</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">E</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">F</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">G</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">H</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">I</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">J</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">K</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">L</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">M</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">N</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">O</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">P</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">Q</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">R</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">S</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">T</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">U</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">V</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">W</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">X</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">Y</span>
</button>
</div>
<div ui-carousel-item>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="
c-button__label
">Z</span>
</button>
</div>
</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-dae010a32f5f" 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-dae010a32f5f" ui-toggle-target id="uid-dae010a32f5f" 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-dae010a32f5f" id="uid-dae010a32f5f" 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_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_16.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">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_13.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
</div>
<div class="c-teaser-container small:grid-cols-1 medium:grid-cols-3 large:grid-cols-3">
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_16.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
<div 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_7.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_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>
<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_6.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">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_16.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">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_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="/">Lorem ipsum dolor sit amet</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
</div>
</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-57a277579488">
<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-57a277579488" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-a49abb70c1a5">
<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-a49abb70c1a5" 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-cb1112e9f898">
<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-cb1112e9f898" 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-70d95d4d6083">
<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-70d95d4d6083" 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-dbe0e4522564">
<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-dbe0e4522564" 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-8b900dbeb045">
<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-8b900dbeb045" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-d17af535b693">
<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-d17af535b693" 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-33d955943022">
<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-33d955943022" 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-cd1a28a6b1b3">
<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-cd1a28a6b1b3" 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-1cdf39ae2eb7">
<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-1cdf39ae2eb7" 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-19923a183aad">
<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-19923a183aad" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-b09605731d11">
<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-b09605731d11" 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-09708ad56ead">
<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-09708ad56ead" 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-4c479a7b49db">
<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-4c479a7b49db" 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-5d430c40f5b6">
<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-5d430c40f5b6" 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-485f79dff6be">
<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-485f79dff6be" ui-toggle-target aria-hidden>
<div class="flex" id="uid-485f79dff6be" 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-6b9af980c3a0" 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-6b9af980c3a0" ui-toggle-target id="uid-6b9af980c3a0" 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-6b9af980c3a0" id="uid-6b9af980c3a0" 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', { hamburgerMenu: 'portal' } %}
{% render '@page-hero', {
size: 'large',
img: { src: '/img/placeholder/hero.jpg' },
wordo: { src: '/img/brand/wordo-branchen.svg' }
} %}
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@search-box-hero' %}
</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='{ "wrapAround": false, "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">
<!-- column -->
<div class="c-section__column">
{% render '@section-heading', {
title: 'Lorem ipsum dolor Sitament',
text: '<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>'
} %}
</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">
<div class="flex justify-between items-baseline">
{% render '@section-heading', { title: 'Häufig gesucht' } %}
{% render '@label', { label: 'ANZEIGE', theme: 'tertiary' } %}
</div>
<div class="c-teaser-container medium:grid-cols-3 large:grid-cols-3">
{% for index in [1, 2, 3, 4, 5, 6] %}
{% render '@teaser', {
include: ['image', 'title', 'text', 'iconlink']
} %}
{% endfor %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="flex justify-between items-baseline">
{% render '@section-heading', { title: 'Unternehmen stellen sich vor' } %}
{% 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-max-width">
<div class="c-section__inner">
{% render '@section-heading', {
title: 'Neu auf hamburg.de',
text: '<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>'
} %}
<div class="c-teaser-container medium:grid-cols-4 large:grid-cols-4" ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": "disabled", "large": "disabled"}}'>
{% for index in [1, 2, 3, 4] %}
<div ui-carousel-item>
{% render '@teaser', {
include: ['image', 'kicker', 'title']
} %}
</div>
{% endfor %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', {
title: 'Stellenangebote in der Nähe',
text: '<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>'
} %}
<div class="c-teaser-container medium:grid-cols-4 large:grid-cols-4">
{% for index in [1, 2, 3, 4] %}
{% render '@teaser', {
include: ['image', 'kicker', 'title', 'icontag-job'],
on_small: { image_left: true }
} %}
{% endfor %}
</div>
<hr class="c-section__spacer">
<div class="c-section__buttons">
{% render '@button', {
label: { default: 'Alle Jobs anzeigen' },
theme: 'primary',
variant: 'outlined'
} %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', {
title: 'Events in der Nähe',
text: '<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>'
} %}
<div class="c-teaser-container medium:grid-cols-4 large:grid-cols-4" ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": "disabled", "large": "disabled"}}'>
{% for index in [1, 2, 3, 4] %}
<div ui-carousel-item>
{% render '@teaser', {
include: ['image', 'kicker', 'title', 'icontag-event'],
on_small: { image_left: false }
} %}
</div>
{% endfor %}
</div>
<hr class="c-section__spacer">
<div class="c-section__buttons">
{% render '@button', {
label: { default: 'Mehr Events entdecken' },
theme: 'primary',
variant: 'outlined'
} %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', { title: 'Stadtteile in der Nähe' } %}
<div class="c-teaser-container medium:grid-cols-4 large:grid-cols-4" ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": "disabled", "large": "disabled"}}'>
{% for index in [1, 2, 3, 4] %}
<div ui-carousel-item>
{% render '@teaser', {
include: ['image', 'title', '']
} %}
</div>
{% endfor %}
</div>
<hr class="c-section__spacer">
<div class="c-section__buttons small-only:hidden">
{% render '@button', {
label: { default: 'Alle Stadtteile anzeigen' },
theme: 'primary',
variant: 'outlined'
} %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', { title: 'Hamburg erkunden' } %}
{% render '@map', { height: 'h-[236px] small-only:h-[45vw]' } %}
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', { title: 'Service' } %}
<div class="c-teaser-container medium:grid-cols-3 large:grid-cols-3">
{% for index in [1, 2, 3] %}
{% render '@teaser', {
include: ['image', 'kicker', 'title', 'text']
} %}
{% endfor %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', { title: 'Firmen in Hamburg von A-Z' } %}
{% render '@index-letters' %}
</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.