<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="c-page">
<div class="c-page__main">
<header class="c-header">
<div class="c-header__bug">
<img class="
c-image
" src="../../img/brand/bug.svg" alt="Lorem alt ipsum" />
</div>
<div class="c-header__inner">
<div class="c-header__logo">
<a href="/">
<img class="
c-image
" src="../../img/brand/hhdelogo.svg" alt="Lorem alt ipsum" />
</a>
</div>
<button class="c-header__hamburger" ui-modal-open data-config='{ "id": "mobile-menu-portal","title":"Menu","style":"menu"}'>
<svg class="text-neutral-grey-02">
<use xlink:href="#burger-heart-red"></use>
</svg>
</button>
</div>
<div class="c-header__search" ui-search-toggle>
<div class="
c-form-input
has-icon
">
<span class="
c-form-input__icon
">
<svg class="text-neutral-grey-02">
<use xlink:href="#glas"></use>
</svg>
</span>
<input class="c-form-input__field" type="text" placeholder="Restaurant">
</div>
<div ui-search-toggle-target aria-hidden>
<div class="
c-form-input
has-icon
">
<span class="
c-form-input__icon
is-clickable
">
<svg class="currentColor">
<use xlink:href="#locate-a"></use>
</svg>
</span>
<input class="c-form-input__field" type="text" placeholder="Hamburg">
</div>
</div>
<div ui-search-toggle-target aria-hidden>
<button class="
c-button
c-button--primary
c-button--pill
c-button--large
has-full-width
">
<span class="
c-button__label
">Suchen</span>
</button>
</div>
</div>
</header>
<div class="
c-hero
">
</div>
<div class="c-section has-max-width">
<div class="c-section__inner">
<div class="c-breadcrumb-container">
<div class="c-breadcrumb">
<a class="c-breadcrumb__home" href="">
<svg class="text-neutral-grey-02">
<use xlink:href="#home"></use>
</svg>
</a>
<span class="c-breadcrumb__divider">/</span>
<a class="c-breadcrumb__item" href="">Branchenbuch</a>
<span class="c-breadcrumb__divider">/</span>
<a class="c-breadcrumb__item" href="">Essen & Trinken</a>
<span class="c-breadcrumb__divider">/</span>
<a class="c-breadcrumb__item" href="">Restaurant</a>
<span class="c-breadcrumb__divider">/</span>
<a class="c-breadcrumb__item" href="">Winterhude</a>
</div>
</div>
</div>
</div>
<div class="c-section has-max-width has-spacing-bottom has-centered-column">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="c-page__heading">
<h1 class="text-neutral-black text-style-title">Lorem Fisch-Restaurant & Bar</h1>
</div>
<div class="text-neutral-grey-02 text-style-p-x">
<a class="no-underline" href="/">Fischrestaurant</a>, <a class="no-underline" href="/">Restaurant</a>, <a class="no-underline" href="/">Weihnachtsfeier</a>, <a class="no-underline" href="/">Betriebsfeier</a>, <a class="no-underline" href="/">Bar</a>, <a class="no-underline" href="/">Eventlocation</a> und <a class="no-underline" href="/">Premium Partner Essen & Trinken</a>
</div>
<hr class="mb-4">
<div class="flex items-center justify-between gap-8">
<a class="no-underline" href="#timetable">
<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 ">
Jetzt geöffnet
</p>
</div>
</a>
<div>
<button ui-modal-open data-config={"id":"share56","title":"Teilen","style":"small"} class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#share"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Teilen</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-outline"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Merken</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-max-width has-spacing-bottom has-centered-column small-only:hidden">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="flex flex-wrap items-center justify-center gap-8">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#phone"></use>
</svg>
</span>
<span class="
c-button__label
">Anrufen</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal-time"></use>
</svg>
</span>
<span class="
c-button__label
">Buchen</span>
</button>
</div>
</div>
</div>
</div>
<div class="c-section has-max-width has-indent-bottom">
<div class="c-section__inner">
<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-max-width has-spacing-bottom has-centered-column has-border-around">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading">
<h4 class="flex items-center text-neutral-black">
<span class="w-20">
<svg class="text-neutral-grey-02">
<use xlink:href="#pinmarker"></use>
</svg>
</span>
<span class="text-style-big">Adresse</span>
</h4>
</div>
<div class="flex" ui-toggle-target>
<span class="w-20 shrink-0"></span>
<div class="w-full">
<div class="c-copy">
<span class="pipe-after">Mühlenkamp 16, 22303 Hamburg (Winterhude)</span><span><strong>400 m</strong></span><br>
<span class="pipe-after">(Obergeschoss)</span><span>Lorem Ipsum Center</span>
</div>
<hr class="mb-4">
<div class="flex gap-2 -mb-6">
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#publictransport"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Anfahrt</span>
<span class="c-button__label medium:hidden large:hidden">Anfahrt</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#ical"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Speichern</span>
<span class="c-button__label medium:hidden large:hidden">Speichern</span>
</button>
</div>
</div>
</div>
</div>
<hr class="c-anchor-target" id="timetable">
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-76fe9ae37775">
<h4 class="flex items-center text-neutral-black">
<span class="w-20">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<span class="text-style-big">Öffnungszeiten</span>
</h4>
<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 class="flex" id="uid-76fe9ae37775" ui-toggle-target>
<span class="w-20 shrink-0"></span>
<div class="w-full">
<div class="c-time-table">
<span>Di.</span>
<span>10:00 – 20:00 Uhr</span>
<span></span>
<span class="c-time-table__info"></span>
</div>
</div>
</div>
<div class="flex" id="uid-76fe9ae37775" ui-toggle-target aria-hidden>
<span class="w-20 shrink-0"></span>
<div class="w-full">
<div class="c-time-table">
<span>Mo.</span>
<span>10:00 – 20:00 Uhr</span>
<span></span>
<span class="c-time-table__info">Lorem ipsum dolor sit amet</span>
<span><strong>Di.</strong></span>
<span><strong>10:00 – 20:00 Uhr</strong></span>
<span></span>
<span class="c-time-table__info">Lorem ipsum dolor sit amet</span>
<span>Mi.</span>
<span>10:00 – 20:00 Uhr</span>
<span></span>
<span class="c-time-table__info">Lorem ipsum dolor sit amet</span>
<span>Do.</span>
<span>10:00 – 20:00 Uhr</span>
<span></span>
<span class="c-time-table__info">Lorem ipsum dolor sit amet</span>
<span>Fr.</span>
<span>10:00 – 20:00 Uhr</span>
<span></span>
<span class="c-time-table__info">Lorem ipsum dolor sit amet</span>
</div>
<hr class="mb-6">
<div class="c-copy">
<p>Lorem ipsum dolor sit amet elitrsed Diam nonumy eirmod.</p>
</div>
</div>
</div>
</div>
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-5af6fec0063b">
<h4 class="flex items-center text-neutral-black">
<span class="w-20">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<span class="text-style-big">Merkmale & Besonderheiten</span>
</h4>
<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 class="flex" id="uid-5af6fec0063b" ui-toggle-target>
<span class="w-20 shrink-0"></span>
<div class="w-full">
<p>Lorem, ipsum, dolorem, ...</p>
</div>
</div>
<div class="flex" id="uid-5af6fec0063b" ui-toggle-target aria-hidden>
<span class="w-20 shrink-0"></span>
<div class="w-full">
<div class="grid grid-cols-1 gap-4">
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#acc-entry"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
Barrierefreier Zugang
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#foodmenu"></use>
</svg>
</span>
<p class="c-icon-tag__label ">
Speisen zum mitnehmen
</p>
</div>
</div>
</div>
</div>
</div>
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading">
<h4 class="flex items-center text-neutral-black">
<span class="w-20">
<svg class="text-neutral-grey-02">
<use xlink:href="#phone"></use>
</svg>
</span>
<span class="text-style-big">Telefon</span>
</h4>
</div>
<div class="flex" ui-toggle-target>
<span class="w-20 shrink-0"></span>
<div class="w-full">
<div class="grid grid-cols-[auto_1fr] gap-4">
<span><a class="no-underline" href="tel:+4940123123456">+49 40 123 123 456</a></span>
<span>Büro</span>
<span><a class="no-underline" href="tel:+4940123123456">+49 40 123 123 456</a></span>
<span>Café</span>
<span><a class="no-underline" href="tel:+4940123123456">+49 40 123 123 456</a></span>
<span>Mobil</span>
</div>
<hr class="mb-6">
<div class="c-copy">
<p>Lorem ipsum dolor sit amet elitrsed Diam nonumy eirmod.</p>
<p>Consetetur Sadipscing elitrsed Diam nonumy eirmod.</p>
</div>
</div>
</div>
</div>
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading">
<h4 class="flex items-center text-neutral-black">
<span class="w-20">
<svg class="text-neutral-grey-02">
<use xlink:href="#fax"></use>
</svg>
</span>
<span class="text-style-big">Telefax</span>
</h4>
</div>
<div class="flex" ui-toggle-target>
<span class="w-20 shrink-0"></span>
<div class="w-full">
<div class="grid grid-cols-[auto_1fr] gap-4">
<span><a class="no-underline" href="tel:+4940123123456">+49 40 123 123 456</a></span>
<span>Empfang</span>
</div>
</div>
</div>
</div>
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading">
<h4 class="flex items-center text-neutral-black">
<span class="w-20">
<svg class="text-neutral-grey-02">
<use xlink:href="#email"></use>
</svg>
</span>
<span class="text-style-big">E-Mail</span>
</h4>
</div>
<div class="flex" ui-toggle-target>
<span class="w-20 shrink-0"></span>
<div class="w-full">
<div class="grid grid-cols-[auto_1fr] gap-4">
<span><a href="mailto:kontakt@website.de">kontakt@website.de</a></span>
</div>
</div>
</div>
</div>
<hr class="mb-12">
<div class="grid justify-center gap-6">
<span>Sie haben einen Fehler entdeckt?</span>
<div class="flex flex-wrap items-center justify-center gap-8">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#edit"></use>
</svg>
</span>
<span class="
c-button__label
">Angaben ändern</span>
</button>
</div>
</div>
<hr class="mb-20">
<div class="
c-big-action
c-big-action--dark
c-big-action--narrow
">
<div class="c-copy">
<h3 class="text-style-p-em">Sie sind Eigentümer?</h3>
<p class="text-balance">Als Eigentümer haben Sie die Möglichkeit Ihre Kunden für Produkte und Services hier zu begeistern. <a href="/">Mehr erfahren</a></p>
</div>
</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-max-width has-spacing-bottom has-centered-column has-border-around">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading">
<h4 class="flex items-center text-neutral-black">
<span class="text-style-big">Besuchen Sie uns auch auf</span>
</h4>
</div>
<div class="flex" ui-toggle-target>
<div class="w-full">
<div class="flex gap-8">
<button class="
c-button
c-button--primary
c-button--square
c-button--medium
">
<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--medium
">
<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--medium
">
<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--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#youtube"></use>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading" ui-toggle="uid-6b49191bf92f">
<h4 class="flex items-center text-neutral-black">
<span class="text-style-big">Barrierefreiheit & Erreichbarkeit</span>
</h4>
<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 class="flex" ui-toggle-target id="uid-6b49191bf92f" aria-hidden>
<div class="w-full">
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
</div>
</div>
</div>
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading" ui-toggle="uid-f1093de55de7">
<h4 class="flex items-center text-neutral-black">
<span class="text-style-big">Weitere Büros</span>
</h4>
<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 class="flex" ui-toggle-target id="uid-f1093de55de7" aria-hidden>
<div class="w-full">
<div class="grid large:grid-cols-2 gap-[1.6rem]">
<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 Dolorsit ament</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 Dolorsit ament</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 Dolorsit ament</span>
</a>
</div>
</div>
<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 Dolorsit ament</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 Dolorsit ament</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 Dolorsit ament</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading" ui-toggle="uid-60560fb8fc0f">
<h4 class="flex items-center text-neutral-black">
<span class="text-style-big">Preise</span>
</h4>
<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 class="flex" ui-toggle-target id="uid-60560fb8fc0f" aria-hidden>
<div class="w-full">
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
</div>
</div>
</div>
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading" ui-toggle="uid-c6832a9c8c08">
<h4 class="flex items-center text-neutral-black">
<span class="text-style-big">Gesprochene Sprachen</span>
</h4>
<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 class="flex" ui-toggle-target id="uid-c6832a9c8c08" aria-hidden>
<div class="w-full">
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
</div>
</div>
</div>
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading" ui-toggle="uid-bf459e164889">
<h4 class="flex items-center text-neutral-black">
<span class="text-style-big">Bezahlmöglichkeiten</span>
</h4>
<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 class="flex" ui-toggle-target id="uid-bf459e164889" aria-hidden>
<div class="w-full">
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
</div>
</div>
</div>
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading" ui-toggle="uid-52b6adc1699b">
<h4 class="flex items-center text-neutral-black">
<span class="text-style-big">Produkte &Leistungen</span>
</h4>
<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 class="flex" ui-toggle-target id="uid-52b6adc1699b" aria-hidden>
<div class="w-full">
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
</div>
</div>
</div>
<div class="
c-accordion
has-border-bottom
">
<div class="c-accordion__heading" ui-toggle="uid-ff662531b6d6">
<h4 class="flex items-center text-neutral-black">
<span class="text-style-big">Gut zu wissen</span>
</h4>
<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 class="flex" ui-toggle-target id="uid-ff662531b6d6" aria-hidden>
<div class="w-full">
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
</div>
</div>
</div>
<div class="
c-accordion
">
<div class="c-accordion__heading" ui-toggle="uid-30f2a8007522">
<h4 class="flex items-center text-neutral-black">
<span class="text-style-big">Downloads</span>
</h4>
<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 class="flex" ui-toggle-target id="uid-30f2a8007522" aria-hidden>
<div class="w-full">
<div class="grid justify-items-start">
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#download"></use>
</svg>
</span>
<span class="
c-button__label
">Studie “Gewalt im Gefängnis” [PDF, 170 Kb]</span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#download"></use>
</svg>
</span>
<span class="
c-button__label
">Justizvollzugsfrieden” [PDF, 134 Kb]</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-border-bottom has-border-top has-max-width">
<div class="c-section__inner">
<div class="flex flex-wrap gap-x-4 justify-between items-center mb-4">
<span class="text-style-mini">Eintragsnummer: 10954891</span>
<span class="text-style-mini">Letzte Aktualisierung: 02.01.2024</span>
</div>
<div class="flex flex-wrap gap-x-4 justify-between items-center text-style-mini">
<span class="text-style-mini">Alle Angaben ohne Gewähr</span>
<div data-tooltip="Ein Mitarbeiter dieses Unternehmens verwaltet diesen Eintrag">
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#promo-b"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-p">
Beansprucht
</p>
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width has-centered-column has-centered-content">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="grid gap-8">
<div class="flex items-center justify-center small:gap-2 medium:gap-8 large:gap-12">
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#chev-left"></use>
</svg>
</span>
</button>
<span class="w-full medium:w-auto mx-4">Eintrag 9 von 32</span>
<button class="
c-button
c-button--primary
c-button--square
c-button--large
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#chev-right"></use>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="c-section__heading">
<h2 class="text-style-subheadline-2">Weitere Informationen</h2>
</div>
<div class="grid large:grid-cols-3 gap-[1.6rem]">
<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 Dolorsit ament</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 Dolorsit ament</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 Dolorsit ament</span>
</a>
</div>
</div>
<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 Dolorsit ament</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 Dolorsit ament</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 Dolorsit ament</span>
</a>
</div>
</div>
<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 Dolorsit ament</span>
</a>
</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">Ähnliche Angebote</h2>
</div>
<div class="
c-teaser
c-teaser--on-all:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_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>
<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_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>
<p class="hidden medium:block"><a href="/">Donec aliquet lacus vel nunc euismod dictum ornare quis augue. Aliquam vel laoreet ligula, nec vehicula justo. Morbi venenatis porttitor mauris, id iaculis risus rhoncus eget. Maecenas egestas ultricies ipsum nec tempus. Aliquam ultricies mauris at erat porttitor, et posuere orci egestas.</a></p>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Donec aliquet lacus vel nunc euismod dictum ornare quis augue. Aliquam vel laoreet ligula, nec vehicula justo. Morbi venenatis porttitor mauris, id iaculis risus rhoncus eget. Maecenas egestas ultricies ipsum nec tempus. Aliquam ultricies mauris at erat porttitor, et posuere orci egestas.</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_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="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<p class="hidden medium:block"><a href="/">Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="c-section__heading">
<h2 class="text-style-subheadline-2">Andere suchten auch</h2>
</div>
<div class="flex flex-wrap gap-4">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Biergarten</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Gastroverzeichnis</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Familienessen</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Erlebnisrestaurant</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Catering</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Eventlocation</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Kochkurs</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Aussengastronomie</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Weihnachtsfeier</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Gasthaus</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Gaststätte</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Konferenzraum</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Biergarten</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Gastroverzeichnis</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Familienessen</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Erlebnisrestaurant</span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
">Catering</span>
</button>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="
c-big-action
c-big-action--dark
">
<div class="c-copy">
<h3 class="text-style-subheadline-3">Sie haben ein Unternehmen in Hamburg?<br>Bringen Sie es online.</h3>
</div>
<button class="
c-button
c-button--white
c-button--filled
c-button--large
">
<span class="
c-button__label
">Jetzt kostenlos registrieren</span>
</button>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
<div class="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 class="c-mobile-nav">
<button class="c-mobile-nav__item">
<svg class="colors.brand.hhnavy">
<use xlink:href="#phone"></use>
</svg>
<span>Anrufen</span>
</button>
<button class="c-mobile-nav__item">
<svg class="colors.brand.hhnavy">
<use xlink:href="#servicebell"></use>
</svg>
<span>Buchen</span>
</button>
</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-c43324ba8807" 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-c43324ba8807" ui-toggle-target id="uid-c43324ba8807" 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-c43324ba8807" id="uid-c43324ba8807" 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_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="/">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_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="/">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_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="/">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_6.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<div 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="/">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_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="/">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_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="/">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_12.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">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_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="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart-out"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Entfernen
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-modal-dialog" id="xyz123456">
<div class="grid grid-cols-[1fr] gap-4">
<p class="text-style-mini">Telefon-Nr. (kostenpflichtig)</p>
<div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#phone"></use>
</svg>
<a class="no-underline" href="tel:+4940123123456">+49 40 123 456</a>
<span>Büro</span>
<svg class="text-brand-hhnavy">
<use xlink:href="#phone"></use>
</svg>
<a class="no-underline" href="tel:+4940123123456">+49 40 123 456</a>
<span>Empfang</span>
</div>
<p class="text-style-mini">Lorem ipsum dolor sit (15ct/Minute)</p>
<hr class="has-border my-4">
<div class="grid grid-cols-[1fr] gap-4">
<p class="text-style-mini">Web-Adresse</p>
<div class="grid grid-cols-[auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#link"></use>
</svg>
<a href="/">http://meinefirma.de</a>
</div>
</div>
<hr class="has-border my-4">
<div class="grid grid-cols-[1fr] gap-4">
<p class="text-style-mini">E-Mail</p>
<div class="grid grid-cols-[auto_1fr] gap-x-2 items-center">
<svg class="text-brand-hhnavy">
<use xlink:href="#email"></use>
</svg>
<a href="/">kontakt@meinefirma.de</a>
</div>
</div>
</div>
</div>
<div class="c-modal-image" ui-modal-image>
<span class="c-modal-image__close" ui-modal-image-close>
<svg class="text-neutral-grey-02">
<use xlink:href="#x"></use>
</svg>
</span>
<img class="c-modal-image__image" ui-modal-image-image>
<p class="c-modal-image__caption" ui-modal-image-caption></p>
</div>
<div class="c-modal-dialog" id="map658">
<div class="h-[80vh]">
<div class="bg-neutral-grey-01 grid justify-center items-center h-full">
<p>Kartenanwendung</p>
</div>
</div>
</div>
<div class="c-modal-dialog" id="filter654">
<div class="c-accordion has-border-bottom">
<div class="c-accordion__heading" ui-toggle="uid-253bd32477aa">
<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-253bd32477aa" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-0fda398e7a5b">
<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-0fda398e7a5b" 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-6fe07af511b1">
<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-6fe07af511b1" 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-8f4048c896e9">
<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-8f4048c896e9" 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-36944d97710d">
<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-36944d97710d" 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-c8ca0c7fbd2c">
<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-c8ca0c7fbd2c" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-8a9f9dafbe40">
<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-8a9f9dafbe40" 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-66705fe09142">
<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-66705fe09142" 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-71f655e68196">
<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-71f655e68196" 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-51783a8bc2df">
<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-51783a8bc2df" 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-7160b54b5ef7">
<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-7160b54b5ef7" ui-toggle-target aria-hidden>
<div class="ml-12">
<!-- nested toggles -->
<div class="c-accordion">
<div class="c-accordion__heading" ui-toggle="uid-9193e5b6d26d">
<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-9193e5b6d26d" 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-e31fd97dc02b">
<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-e31fd97dc02b" 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-c16d649b80f3">
<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-c16d649b80f3" 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-e6ff41919daf">
<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-e6ff41919daf" 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-d12d392e2a0d">
<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-d12d392e2a0d" ui-toggle-target aria-hidden>
<div class="flex" id="uid-d12d392e2a0d" 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-6a7ed559e2b4" 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-6a7ed559e2b4" ui-toggle-target id="uid-6a7ed559e2b4" 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-6a7ed559e2b4" id="uid-6a7ed559e2b4" 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' %}
<div class="c-section has-max-width">
<div class="c-section__inner">
<div class="c-breadcrumb-container">
{% render '@breadcrumb', { path: ['Branchenbuch', 'Essen & Trinken', 'Restaurant', 'Winterhude'] } %}
</div>
</div>
</div>
<div class="c-section has-max-width has-spacing-bottom has-centered-column">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
{% render '@page-heading', { title: 'Lorem Fisch-Restaurant & Bar' } %}
<div class="text-neutral-grey-02 text-style-p-x">
<a class="no-underline" href="/">Fischrestaurant</a>, <a class="no-underline" href="/">Restaurant</a>, <a class="no-underline" href="/">Weihnachtsfeier</a>, <a class="no-underline" href="/">Betriebsfeier</a>, <a class="no-underline" href="/">Bar</a>, <a class="no-underline" href="/">Eventlocation</a> und <a class="no-underline" href="/">Premium Partner Essen & Trinken</a>
</div>
<hr class="mb-4">
<div class="flex items-center justify-between gap-8">
<a class="no-underline" href="#timetable">
{% render '@icon-tag', { icon: 'time', label: 'Jetzt geöffnet'} %}
</a>
<div>
{% render '@button', {
label: {
default: 'Teilen',
mobile: ''
},
icon: 'share',
theme: 'primary',
variant: 'basic',
attributes: 'ui-modal-open data-config={"id":"share56","title":"Teilen","style":"small"}'
} %}
{% if ([0,1] | random) %}
{% render '@button', {
label: {
default: 'Merken',
mobile: ''
},
icon: 'heart-outline',
theme: 'primary',
variant: 'basic'
} %}
{% else %}
{% render '@button', {
label: {
default: 'Gemerkt',
mobile: ''
},
icon: 'heart',
theme: 'primary',
variant: 'basic'
} %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="c-section has-max-width has-spacing-bottom has-centered-column small-only:hidden">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
<div class="flex flex-wrap items-center justify-center gap-8">
{% render '@button', {
label: { default: 'Anrufen' },
icon: 'phone',
theme: 'primary',
variant: 'outlined'
} %}
{% render '@button', {
label: { default: 'Buchen' },
icon: 'cal-time',
theme: 'primary',
variant: 'outlined'
} %}
</div>
</div>
</div>
</div>
<div class="c-section has-max-width has-indent-bottom">
<div class="c-section__inner">
{% render '@map', { height: 'h-[236px] small-only:h-[45vw]' } %}
</div>
</div>
<div class="c-section has-max-width has-spacing-bottom has-centered-column has-border-around">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
{# START adresse #}
{% render '@grundeintrag-meta-top', {
title: 'Adresse',
titleIcon: 'pinmarker',
withBorderBottom: true
} %}
<div class="c-copy">
<span class="pipe-after">Mühlenkamp 16, 22303 Hamburg (Winterhude)</span><span><strong>400 m</strong></span><br>
<span class="pipe-after">(Obergeschoss)</span><span>Lorem Ipsum Center</span>
</div>
<hr class="mb-4">
<div class="flex gap-2 -mb-6">
{% render '@button', {
label: {
default: 'Anfahrt',
mobile: 'Anfahrt'
},
icon: 'publictransport',
theme: 'primary',
variant: 'basic'
} %}
{% render '@button', {
label: {
default: 'Speichern',
mobile: 'Speichern'
},
icon: 'ical',
theme: 'primary',
variant: 'basic'
} %}
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END adresse #}
<hr class="c-anchor-target" id="timetable">
{# START Öffnungszeiten #}
{% render '@oeffnungszeiten-toggle' %}
{# END Öffnungszeiten #}
{# START Merkmale #}
{% render '@merkmale-toggle' %}
{# END Merkmale #}
{# START Telefon #}
{% render '@grundeintrag-meta-top', {
title: 'Telefon',
titleIcon: 'phone',
withBorderBottom: true
} %}
<div class="grid grid-cols-[auto_1fr] gap-4">
<span><a class="no-underline" href="tel:+4940123123456">+49 40 123 123 456</a></span>
<span>Büro</span>
<span><a class="no-underline" href="tel:+4940123123456">+49 40 123 123 456</a></span>
<span>Café</span>
<span><a class="no-underline" href="tel:+4940123123456">+49 40 123 123 456</a></span>
<span>Mobil</span>
</div>
<hr class="mb-6">
<div class="c-copy">
<p>Lorem ipsum dolor sit amet elitrsed Diam nonumy eirmod.</p>
<p>Consetetur Sadipscing elitrsed Diam nonumy eirmod.</p>
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END Telefon #}
{# START Telefax #}
{% render '@grundeintrag-meta-top', {
title: 'Telefax',
titleIcon: 'fax',
withBorderBottom: true
} %}
<div class="grid grid-cols-[auto_1fr] gap-4">
<span><a class="no-underline" href="tel:+4940123123456">+49 40 123 123 456</a></span>
<span>Empfang</span>
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END Telefax #}
{# START Email #}
{% render '@grundeintrag-meta-top', {
title: 'E-Mail',
titleIcon: 'email',
withBorderBottom: true
} %}
<div class="grid grid-cols-[auto_1fr] gap-4">
<span><a href="mailto:kontakt@website.de">kontakt@website.de</a></span>
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END Email #}
<hr class="mb-12">
<div class="grid justify-center gap-6">
<span>Sie haben einen Fehler entdeckt?</span>
<div class="flex flex-wrap items-center justify-center gap-8">
{% render '@button', {
label: { default: 'Angaben ändern' },
icon: 'edit',
theme: 'primary',
variant: 'outlined'
} %}
</div>
</div>
<hr class="mb-20">
{% render '@big-action-eigentuemer' %}
</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-max-width has-spacing-bottom has-centered-column has-border-around">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
{# START social media #}
{% render '@grundeintrag-meta-top', {
title: 'Besuchen Sie uns auch auf',
withBorderBottom: true
} %}
<div class="flex gap-8">
{% render '@button', {icon: 'facebook', variant: 'square', size: 'medium'} %}
{% render '@button', {icon: 'twitterx', variant: 'square', size: 'medium'} %}
{% render '@button', {icon: 'instagram', variant: 'square', size: 'medium'} %}
{% render '@button', {icon: 'youtube', variant: 'square', size: 'medium'} %}
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END social media #}
{# START text #}
{% render '@grundeintrag-meta-top', {
title: 'Barrierefreiheit & Erreichbarkeit',
toggle: true,
withBorderBottom: true
} %}
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END text #}
{# START link list #}
{% render '@grundeintrag-meta-top', {
title: 'Weitere Büros',
toggle: true,
withBorderBottom: true
} %}
<div class="grid large:grid-cols-2 gap-[1.6rem]">
<div class="c-icon-link-container">
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
</div>
<div class="c-icon-link-container">
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
</div>
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END link list #}
{# START text #}
{% render '@grundeintrag-meta-top', {
title: 'Preise',
toggle: true,
withBorderBottom: true
} %}
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END text #}
{# START text #}
{% render '@grundeintrag-meta-top', {
title: 'Gesprochene Sprachen',
toggle: true,
withBorderBottom: true
} %}
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END text #}
{# START text #}
{% render '@grundeintrag-meta-top', {
title: 'Bezahlmöglichkeiten',
toggle: true,
withBorderBottom: true
} %}
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END text #}
{# START text #}
{% render '@grundeintrag-meta-top', {
title: 'Produkte &Leistungen',
toggle: true,
withBorderBottom: true
} %}
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END text #}
{# START text #}
{% render '@grundeintrag-meta-top', {
title: 'Gut zu wissen',
toggle: true,
withBorderBottom: true
} %}
<div class="c-copy">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maxime velit aperiam tenetur vero eius mollitia voluptas quod? Libero odit saepe deleniti! Delectus corrupti fuga culpa, deserunt placeat rerum excepturi!
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END text #}
{# START downloads #}
{% render '@grundeintrag-meta-top', {
title: 'Downloads',
toggle: true
} %}
<div class="grid justify-items-start">
{% render '@button', {
label: { default: 'Studie “Gewalt im Gefängnis” [PDF, 170 Kb]' },
icon: 'download',
theme: 'primary',
variant: 'basic'
} %}
{% render '@button', {
label: { default: 'Justizvollzugsfrieden” [PDF, 134 Kb]' },
icon: 'download',
theme: 'primary',
variant: 'basic'
} %}
</div>
{% render '@grundeintrag-meta-bottom'%}
{# END downloads #}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-border-bottom has-border-top has-max-width">
<div class="c-section__inner">
<div class="flex flex-wrap gap-x-4 justify-between items-center mb-4">
<span class="text-style-mini">Eintragsnummer: 10954891</span>
<span class="text-style-mini">Letzte Aktualisierung: 02.01.2024</span>
</div>
<div class="flex flex-wrap gap-x-4 justify-between items-center text-style-mini">
<span class="text-style-mini">Alle Angaben ohne Gewähr</span>
<div data-tooltip="Ein Mitarbeiter dieses Unternehmens verwaltet diesen Eintrag">
{% render '@icon-tag', { icon: 'promo-b', label: 'Beansprucht', labelClass: 'text-style-p' } %}
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width has-centered-column has-centered-content">
<div class="c-section__inner">
<!-- column -->
<div class="c-section__column">
{% render '@pagination', {
prev: true,
next: true,
itemOf: true
} %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', { title: 'Weitere Informationen'} %}
<div class="grid large:grid-cols-3 gap-[1.6rem]">
<div class="c-icon-link-container">
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
</div>
<div class="c-icon-link-container">
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
</div>
<div class="c-icon-link-container">
{% render '@icon-link', { line1: 'Lorem Ipsum Dolorsit ament'} %}
</div>
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', { title: 'Ähnliche Angebote'} %}
{% for index in [1, 2, 3] %}
{% render '@teaser', {
include: ['image', 'kicker', 'title', 'text-long'],
on_all: { image_left: true }
} %}
{% endfor %}
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@section-heading', { title: 'Andere suchten auch'} %}
<div class="flex flex-wrap gap-4">
{% for index in ['Biergarten', 'Gastroverzeichnis', 'Familienessen', 'Erlebnisrestaurant', 'Catering', 'Eventlocation', 'Kochkurs', 'Aussengastronomie', 'Weihnachtsfeier', 'Gasthaus', 'Gaststätte', 'Konferenzraum', 'Biergarten', 'Gastroverzeichnis', 'Familienessen', 'Erlebnisrestaurant', 'Catering'] %}
{% render '@button', {
label: { default: index },
theme: 'primary',
variant: 'outlined',
size: 'small'
} %}
{% endfor %}
</div>
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@big-action-registrieren' %}
</div>
</div>
<div class="c-section has-spacing-bottom has-max-width">
<div class="c-section__inner">
{% render '@ad' %}
</div>
</div>
{% render '@mobile-nav', {
items: [
{
icon: 'phone',
label: 'Anrufen',
color: 'colors.brand.hhnavy'
},
{
icon: 'servicebell',
label: 'Buchen',
color: 'colors.brand.hhnavy'
}
]
} %}
{% endblock content %}
{% block footer %}{% render '@page-footer-portal' %}{% endblock footer %}
/* No context defined. */
No notes defined.