<!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"></use>
</svg>
</button>
</div>
<div class="c-header__search" ui-search-toggle>
<div class="
c-form-input
has-icon
">
<span class="
c-form-input__icon
">
<svg class="text-neutral-grey-02">
<use xlink:href="#glas"></use>
</svg>
</span>
<input class="c-form-input__field" type="text" placeholder="Restaurant">
</div>
<div ui-search-toggle-target aria-hidden>
<div class="
c-form-input
has-icon
">
<span class="
c-form-input__icon
is-clickable
">
<svg class="currentColor">
<use xlink:href="#locate-a"></use>
</svg>
</span>
<input class="c-form-input__field" type="text" placeholder="Hamburg">
</div>
</div>
<div ui-search-toggle-target aria-hidden>
<button class="
c-button
c-button--primary
c-button--pill
c-button--large
has-full-width
">
<span class="
c-button__label
">Suchen</span>
</button>
</div>
</div>
</header>
<div class="
c-hero
c-hero--small
">
<div class="c-hero__cover">
<img class="
c-image
" src="../../img/placeholder/hero.jpg" alt="Lorem alt ipsum" />
</div>
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
<div class="c-breadcrumb-container">
<div class="c-breadcrumb">
<a class="c-breadcrumb__home" href="">
<svg class="text-neutral-grey-02">
<use xlink:href="#home"></use>
</svg>
</a>
<span class="c-breadcrumb__divider">/</span>
<a class="c-breadcrumb__item" href="">Branchenbuch</a>
<span class="c-breadcrumb__divider">/</span>
<a class="c-breadcrumb__item" href="">Lorem Ipsum</a>
</div>
</div>
</div>
</div>
<div class="c-section has-max-width has-centered-column">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="c-page__heading">
<p class="large:text-style-intro">Ihre Suche nach</p>
<h1 class="text-neutral-black text-style-title">Bars mit Livemusik in Hamburg</h1>
</div>
</div>
</div>
</div>
<div class="c-section has-max-width has-spacing-bottom has-centered-column">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="k-richtext">
<div class="k-component k-floated k-img-left ">
<span class="k-roofline k-roofline-h3">Unser Ladenlokal</span>
<h3 class="k-headline">WILLKOMMEN AM ALTEN WALL NO. 22!</h3>
<span class="k-subline k-subline-h3">Wir öffneten die Türen unserer neuen Heimat und freuen uns, Sie am Alten Wall - mitten im Herzen Hamburgs willkommen zu heißen.</span>
<div class="k-content">
<div class="k-text richtext">
<div class="k-image autosize-image">
<picture>
<img src="https://www.hamburg.de/iason/images/60bfe2f02b29d545fc04edba/DSCF2324-390x390.jpg" loading="lazy" alt="Graues Backsteingebäude des Ladenlokals von Ladage & Oelke" title="Außenansicht" data-copy="ewogICJsYWJlbGVkVVJJIiA6ICJodHRwczovL3d3dy5oYW1idXJnLmRlL2lhc29uL2ltYWdlcy82MGJmZTJmMDJiMjlkNTQ1ZmMwNGVkYmEvRFNDRjIzMjQtMzkweDM5MC5qcGciLAogICJjYXB0aW9uIiA6ICIiLAogICJhbHQiIDogIkdyYXVlcyBCYWNrc3RlaW5nZWLDpHVkZSBkZXMgTGFkZW5sb2thbHMgdm9uIExhZGFnZSAmIE9lbGtlIiwKICAiY29weXJpZ2h0T3duZXIiIDogIkxhZGFnZSAmIE9lbGtlIiwKICAidGl0bGUiIDogIkF1w59lbmFuc2ljaHQiLAogICJkZXNjcmlwdGlvbiIgOiAiIiwKICAiYXV0aG9yIiA6ICIiLAogICJtaW1lVHlwZSIgOiAiaW1hZ2UvanBlZyIKfQ==">
</picture>
<span class="k-image-copy">Ladage & Oelke</span>
</div>
<p>
<span style="text-align: left;">Entdecken Sie auf rund 600 Quadratmetern anglophile Gentlemenswear, exklusive Accessoires und rahmengenähtes Schuhwerk. Lassen Sie sich für Ihre individuelle Maßkonfektion oder Gala-Garderobe in privater Atmosphäre mit direktem Blick auf Hamburgs Rathaus fachkundig beraten und genießen Sie das einzigartige Ambiente inklusive historischer Stücke aus unserer 175jährigen Geschichte.</span><br>
</p>
<p>Zusätzlich freuen wir uns Ihnen im neuen ETONCorner eine erweiterte Auswahl der Hemden unseres langjährigen Partners ETON zu präsentieren und Ihnen im neuen Gentleman‘s Parlor in Kooperation mit dem Hamburger Herrenfriseur „Herr Brito“ Herrenhaarschnitt und eine fachkundige Rasur anbieten zu können. Mit direktem Blick auf den Fleet und für perfekten Stil von Kopf bis Fuß.</p>
<p>Egal ob nach Einkauf, Anprobe, Rasur oder Besuch des Bucerius Kunst Forums nebenan - tanken Sie abseits des Trubels der Hamburger Innenstadt frische Kraft und lassen Sie sich in unserem hauseigenen Café mit leckeren Kaffeespezialitäten und feinstem Hamburger Gebäck aus der Mutterland-Backstube verwöhnen.</p>
</div>
</div>
</div>
<div class="k-component ">
<h4 class="k-headline">IHR HERRENAUSSTATTER – AUS TRADITION MODERN</h4>
<span class="k-subline k-subline-h4">„Eleganz heisst nicht, ins Auge zu fallen, sondern im Gedächtnis zu bleiben." (Giorgio Armani)</span>
<div class="k-content">
<div class="k-text richtext">
<p>In unserem umfangreichen Herrenbekleidungs-Sortiment tummelt sich alles, was ein zeitlos orientierter und gleichzeitig modebewusster Herr schätzt: zähmungsbedürftige Tweed-Sakkos, breitgerippte Cordhosen, schwere Duffles und Pea-Coats, elegante Anzüge und Blazer sowie ein breites Spektrum an Gesellschaftskleidung. Unzählige Preziosen der klassischen Herrengarderobe warten in unseren Rollschränken auf Sie. Wollpullover aus Geelong Lambswool, Cashmere oder in schweren irischen Strickqualitäten türmen sich in unseren Eichenholzregalen. Eine große Auswahl an Bindern, Schleifen, Schals und Strümpfen füllen die Schubladen. All dies nur zu dem Zweck, aus unzähligen Kombinationsmöglichkeiten Ihren ganz persönlichen Stil diskret, aber wirkungsvoll zu unterstreichen. Bei der Auswahl stehen Ihnen unsere Stilberater mit ihrem ganzen Wissen, viel Herz und Ehrlichkeit zur Seite.<br></p>
</div>
</div>
</div>
<div class="k-component k-floated">
<h5 class="k-headline">MASSKONFEKTION</h5>
<span class="k-subline k-subline-h5">„Ich bin nie mit der Mode gegangen, ich habe sie gemacht."(Pierre Cardin)</span>
<div class="k-content">
<div class="k-text richtext">
<div class="k-image autosize-image">
<picture>
<img src="https://www.hamburg.de/iason/images/60bfe2202b29d545fc04edb8/8509487-800x770.jpg" loading="lazy" alt="Jemand misst die Armlänge eines Mannes aus." title="Masskonfektion" data-copy="ewogICJsYWJlbGVkVVJJIiA6ICJodHRwczovL3d3dy5oYW1idXJnLmRlL2lhc29uL2ltYWdlcy82MGJmZTIyMDJiMjlkNTQ1ZmMwNGVkYjgvODUwOTQ4Ny04MDB4NzcwLmpwZyIsCiAgImNhcHRpb24iIDogIiIsCiAgImFsdCIgOiAiSmVtYW5kIG1pc3N0IGRpZSBBcm1sw6RuZ2UgZWluZXMgTWFubmVzIGF1cy4iLAogICJjb3B5cmlnaHRPd25lciIgOiAiTGFkYWdlICYgT2Vsa2UiLAogICJ0aXRsZSIgOiAiTWFzc2tvbmZla3Rpb24iLAogICJkZXNjcmlwdGlvbiIgOiAiIiwKICAiYXV0aG9yIiA6ICIiLAogICJtaW1lVHlwZSIgOiAiaW1hZ2UvanBlZyIKfQ==">
</picture>
<span class="k-image-copy">Ladage & Oelke</span>
</div>
<p>Sie haben ganz konkrete Vorstellungen, wie Ihr nächster Anzug, Ihr neues Sakko oder die neuen Knickerbocker aussehen sollen? Ihnen fehlt noch das passende Hemd zu Ihrem Lieblingssakko oder ein Smoking fürs Tanzparkett? Dann gönnen Sie sich ein edles Stück, nur für Sie gefertigt. Ausgereifte, verschiedene Passformen und eine Vielzahl edler Tuche aus Europas traditionsreichsten Webereien von Loro Piana über Fox Brothers bis zu W. Bill, Holland & Sherry und vielen mehr, bringen Sie Ihrem Stoff-Traum näher. Wir können auf verschiedene, langjährig erprobte Maßkonfektionssysteme europäischer Manufakturen wie beispielsweise Scabal zurückgreifen. Außerdem auf eigene Passformen, in die unsere gesamte Erfahrung im Bereich der Herrenkonfektion eingeflossen sind und welche wir über die Jahre selbst entwickelt und stetig modernisiert haben.<br></p>
<p>Unterstützt werden Sie bei der Auswahl von unseren Fachberatern und Schneidermeistern, die dank geschultem Blick und großem Erfahrungsschatz zum Erfolg Ihres individuellen Projektes beitragen. Im Vordergrund steht dabei wie vor über 170 Jahren eine optimale Passform in hochwertiger Verarbeitung. Das Resultat: ein neues Lieblingsstück, das Sie lange begleiten wird.</p>
</div>
</div>
</div>
<div class="k-component ">
<h7 class="k-headline">
THESE BOOTS ARE MADE FOR WALKING
</h7>
<span class="k-subline k-subline-h7">„It´s totally impossible to be well dressed in cheap shoes" (Hardy Amies)</span>
<div class="k-content">
<div class="k-text richtext">
<p>Es gibt den berühmten Satz „Kleider machen Leute“, aber eigentlich ist dies nur die halbe Wahrheit. Denn ohne die passenden Schuhe wirkt selbst der edelste Maßanzug nicht vollkommen. Das Adjektiv „passend“ ist bezogen auf Schuhwerk nicht gerade unerheblich, sondern vielmehr unverzichtbar. Ein Schuh kann aus noch so hochwertigem Leder gefertigt, noch so gut verarbeitet, seine Markenname noch so klangvoll sein: Wenn die Passform nicht stimmt, wird sein Besitzer am Ende wenig Freude haben – und der Schuh ein kurzes Leben.<br></p>
<p>Deshalb steht Ihnen in unserer Schuhabteilung eine liebevolle Auswahl an rahmengenähtem Schuhwerk zur Verfügung. Gefertigt in traditionsreichen Schuhmanufakturen, aus hochwertigen Kalbs-, Cordovan oder Hirschlederqualitäten, begleiten unsere Schuhe ihre Träger viele Jahre.</p>
</div>
</div>
</div>
<div class="k-component ">
<h6 class="k-headline">HANS HUMMEL, ZITRONENJETTE – UND EIN ORIGINAL VON LADAGE</h6>
<span class="k-subline k-subline-h6">Ladage & Oelke und Hamburg - untrennbar verbunden</span>
<div class="k-content">
<div class="k-text richtext">
<p>Mit etwas Stolz können wir behaupten, dass wir mittlerweile ein echtes Stück Hamburg sind. Wir haben bereits Generationen von „Pfeffersäcken“ eingekleidet und sind ein lebendiges Zeugnis der berühmt-berüchtigten Hamburger Kaufmannstradition, abseits großer Filialisten. Hört sich gut an – aber wir sind kein Museum. Denn da sind noch unsere Kunden, viele von ihnen echte „Originale“ mit ganz eigenem Stil, die wiederum eine Leidenschaft für eben solche Produkte hegen. Sie sind es, die unseren Dufflecoat weit über Hamburgs Grenzen hinaus berühmt gemacht haben. Sie sind es, die auch im neuen Jahrtausend liebend gerne Knickerbocker als Beinkleid wählen oder mit stilistischer Verve schottischen Kilt tragen.<br></p>
<p>So sind dann inzwischen auch manche unserer Produkte unverwüstliche Originale geworden.</p>
<p>
<strong>Sie sind gespannt? Dann sind Sie herzlich eingeladen auf einen ersten Besuch!</strong>
</p>
<p>
<strong>Dürfen wir Sie auf dem Laufenden halten? </strong>Wir schicken Ihnen gerne unseren Newsletter mit Informationen zu besonderen Aktionen und speziellen Angeboten.
<a href="https://ladage-oelke.de/de/newsletter/" target="_blank" rel="nofollow" data-auto-event-observed="true">Jetzt Newsletter bestellen.</a>
</p>
<p></p>
</div>
</div>
</div>
<div class="k-component ">
<span class="k-roofline k-roofline-h7">Das ist ein Bild über die gesamte Breite</span>
<div class="k-content">
<div class="k-image autosize-image">
<picture>
<img src="https://www.hamburg.de/iason/images/6659fa0864be8f52add168a5/pixel-shot%40adoabestock.jpg" loading="lazy" alt="" title="" data-copy="ewogICJsYWJlbGVkVVJJIiA6ICJodHRwczovL3d3dy5oYW1idXJnLmRlL2lhc29uL2ltYWdlcy82NjU5ZmEwODY0YmU4ZjUyYWRkMTY4YTUvcGl4ZWwtc2hvdCU0MGFkb2FiZXN0b2NrLmpwZyIsCiAgImNhcHRpb24iIDogIiIsCiAgImFsdCIgOiAiIiwKICAiY29weXJpZ2h0T3duZXIiIDogIiIsCiAgInRpdGxlIiA6ICIiLAogICJkZXNjcmlwdGlvbiIgOiAiIiwKICAiYXV0aG9yIiA6ICIiLAogICJtaW1lVHlwZSIgOiAiaW1hZ2UvanBlZyIKfQ==">
</picture>
</div>
</div>
</div>
<div class="k-component k-columns">
<div class="k-content">
<div class="k-text richtext">
<p>Zweispaltig geht auch...</p>
</div>
<div class="k-text richtext">
<p>... wie man sieht</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="flex justify-between items-baseline">
<div class="c-section__heading">
<h2 class="text-style-subheadline-2">Wie wäre es mit...</h2>
</div>
<span class="
c-label
c-label--tertiary
">ANZEIGE</span>
</div>
<div class="c-teaser-container">
<div class="
c-teaser
c-teaser--on-all:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_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 class="hidden medium:block"><a href="/">Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
</div>
<div class="
c-teaser
c-teaser--on-all:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_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="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<p class="hidden medium:block"><a href="/">Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
</div>
<div class="
c-teaser
c-teaser--on-all:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_15.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<p class="hidden medium:block"><a href="/">Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
</div>
</div>
<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 Bars 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">Das könnte Ihnen auch gefallen</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_10.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">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_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>
<p><a href="/">Leo in vitae turpis massa sed elementum. Facilisis gravida neque convallis in nisl nisi scelerisque.</a></p>
</div>
</div>
<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>
<p><a href="/">In nulla posuere sollicitudin aliquam ultrices sagittis orci.</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="c-footer">
<hr class="c-footer__spacer">
<div class="text-light-50 text-style-mini">
<h5 class="mb-6"><strong>Urheber der Bilder</strong></h5>
<div class="grid gap-1">
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/stegmann-bild.jpg" data-caption="Caption 1 ipsum amet">Linktext 1 ipsum amet</a>
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/sparda-bank.jpg" data-caption="Caption 2 ipsum dolor sit amet">Linktext 2 ipsum dolor sit amet</a>
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/koegler-treppenlifte.jpg" data-caption="Caption 3">Linktext 3</a>
<a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/677bc3f5f383bb2a91166825/consultatio-strafverteidiger-logo.jpg" data-caption="Caption 4 ipsum amet">Linktext 4 ipsum amet</a>
</div>
<div class="grid gap-1" id="uid-3d04e559a38a" 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-3d04e559a38a" ui-toggle-target id="uid-3d04e559a38a" 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-3d04e559a38a" id="uid-3d04e559a38a" 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_3.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_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 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_10.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">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 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_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="#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="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_5.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
</div>
<div class="c-teaser-container small:grid-cols-1 medium:grid-cols-3 large:grid-cols-3">
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_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 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_14.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_2.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
</div>
</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-81554e4c8bf4">
<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-81554e4c8bf4" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-ed4ce41768e8">
<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-ed4ce41768e8" 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-bba16ef84e67">
<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-bba16ef84e67" 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-b0aa96ececc0">
<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-b0aa96ececc0" 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-0a3434ceafee">
<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-0a3434ceafee" 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-18beace3e117">
<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-18beace3e117" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-81443f33b852">
<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-81443f33b852" 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-5642756b8b04">
<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-5642756b8b04" 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-0f3670c6fe10">
<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-0f3670c6fe10" 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-14cc61daa43f">
<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-14cc61daa43f" 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-8feb1c4ea1a0">
<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-8feb1c4ea1a0" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-4f33e7a5dc1f">
<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-4f33e7a5dc1f" 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-7f76b8a2e847">
<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-7f76b8a2e847" 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-0b0c968d9ee7">
<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-0b0c968d9ee7" 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-b58c96cbba80">
<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-b58c96cbba80" 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-574e63f9bb41">
<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-574e63f9bb41" ui-toggle-target aria-hidden>
<div class="flex" id="uid-574e63f9bb41" 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-356d250b9694" 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-356d250b9694" ui-toggle-target id="uid-356d250b9694" 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-356d250b9694" id="uid-356d250b9694" ui-toggle-target aria-hidden class="
c-toggle
c-toggle--primary
">
<span class="c-toggle__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#circle-minus"></use>
</svg>
</span>
<span class="c-toggle__label">Weniger anzeigen</span>
</button>
</div>
</div>
</div>
</div>
<hr class="mb-8">
<footer class="c-header__filter-buttons">
<button class="
c-button
c-button--primary
c-button--filled
c-button--large
">
<span class="
c-button__label
">Filter anwenden</span>
</button>
<button ui-filter-reset class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="
c-button__label
">Zurücksetzen</span>
</button>
</footer>
</div>
<div class="c-modal-dialog" id="share56">
<div class="grid grid-cols-[1fr] gap-4">
<p class="text-style-mini">Teilen auf:</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#twitterx"></use>
</svg>
<a class="no-underline" hhref="/">X</a>
</div>
<hr class="has-border my-4">
<p class="text-style-mini">Teilen auf:</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#facebook"></use>
</svg>
<a class="no-underline" hhref="/">Facebook</a>
</div>
<hr class="has-border my-4">
<p class="text-style-mini">Merken:</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#pinterest"></use>
</svg>
<a class="no-underline" hhref="/">Pinterest</a>
</div>
<hr class="has-border my-4">
<p class="text-style-mini">Link kopieren:</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#link"></use>
</svg>
<a class="no-underline" hhref="/">http://www.abc.de/1234565abc</a>
</div>
<hr class="has-border my-4">
<p class="text-style-mini">Herunterladen:</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#ical"></use>
</svg>
<a class="no-underline" hhref="/">Kontakt speichern</a>
</div>
</div>
</div>
</body>
</html>
{% extends '@page' %}
{% block content %}
{% render '@page-header', { withSearch: true, hamburgerMenu: 'portal' } %}
{% render '@page-hero', {
size: 'small',
img: { src: '/img/placeholder/hero.jpg' }
} %}
<div class="c-section has-max-width">
<div class="c-section__inner">
<div class="c-breadcrumb-container">
{% render '@breadcrumb', { path: ['Branchenbuch', 'Lorem Ipsum'] } %}
</div>
</div>
</div>
<div class="c-section has-max-width has-centered-column">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
{% render '@page-heading', {
kicker: 'Ihre Suche nach',
title: 'Bars mit Livemusik in Hamburg'
} %}
</div>
</div>
</div>
<div class="c-section has-max-width has-spacing-bottom has-centered-column">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
{% render '@kaptara-richtext-1' %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="flex justify-between items-baseline">
{% render '@section-heading', { title: 'Wie wäre es mit...' } %}
{% render '@label', { label: 'ANZEIGE', theme: 'tertiary' } %}
</div>
<div class="c-teaser-container">
{% for index in [1, 2, 3] %}
{% render '@teaser', {
include: ['image', 'kicker', 'title', 'text-long'],
on_all: { image_left: true }
} %}
{% endfor %}
</div>
<hr class="c-section__spacer">
<div class="c-section__buttons">
{% render '@button', {
label: { default: 'Alle Bars 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: 'Das könnte Ihnen auch gefallen' } %}
<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>
{% endblock content %}
{% block footer %}{% render '@page-footer-portal' %}{% endblock footer %}
/* No context defined. */
No notes defined.