BBH
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>

    <div class="c-page">
        <div class="c-page__main">

            <header class="c-header">
                <div class="c-header__bug">

                    <img class="
    c-image

    
  " src="../../img/brand/bug.svg" alt="Lorem alt ipsum" />

                </div>
                <div class="c-header__inner">
                    <div class="c-header__logo">
                        <a href="/">

                            <img class="
    c-image

    
  " src="../../img/brand/hhdelogo.svg" alt="Lorem alt ipsum" />

                        </a>
                    </div>

                    <button class="c-header__hamburger" ui-modal-open data-config='{ "id": "mobile-menu-portal","title":"Menu","style":"menu"}'>

                        <svg class="text-neutral-grey-02">
                            <use xlink:href="#burger-heart-red"></use>
                        </svg>

                    </button>
                </div>

            </header>

            <div class="
  c-hero

  

  
">

            </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="">Kostenloser Grundeintrag</a>

                        </div>

                    </div>

                </div>
            </div>

            <div class="c-section has-max-width">
                <div class="c-section__inner">

                    <div class="c-page__heading">

                        <p class="large:text-style-intro">Branchen Online Hamburg - So werden Sie gefunden</p>

                        <h1 class="text-neutral-black text-style-title">Kostenlos Firma eintragen auf hamburg.de</h1>

                    </div>

                </div>
            </div>

            <div class="c-section has-max-width has-spacing-bottom">
                <div class="c-section__inner">

                    <!-- column -->
                    <div class="c-section__column">
                        <p>Unterstützen Sie Ihr Online-Marketing mit einem kostenlosen Grundeintrag im Branchenbuch auf hamburg.de.</p>
                    </div>

                </div>
            </div>

            <div class="c-section has-max-width has-spacing-bottom has-border-around">
                <div class="c-section__inner">

                    <!-- column -->
                    <div class="c-section__column">

                        <div class="c-form-group">
                            <label>Firmenname*</label>

                            <div class="
  c-form-input

  

  

  
">

                                <input class="c-form-input__field" type="text" placeholder="">
                            </div>
                        </div>

                        <div class="c-form-group">
                            <label>Straße* / Nr.*</label>
                            <div class="c-form-group__columns">

                                <div class="
  c-form-input

  
    basis-3/4
  

  

  
">

                                    <input class="c-form-input__field" type="text" placeholder="">
                                </div>

                                <div class="
  c-form-input

  
    basis-1/4
  

  

  
">

                                    <input class="c-form-input__field" type="text" placeholder="">
                                </div>
                            </div>
                        </div>

                        <div class="c-form-group">
                            <label>PLZ* / Ort*</label>
                            <div class="c-form-group__columns">

                                <div class="
  c-form-input

  
    basis-1/4
  

  

  
">

                                    <input class="c-form-input__field" type="text" placeholder="">
                                </div>

                                <div class="
  c-form-input

  
    basis-3/4
  

  

  
">

                                    <input class="c-form-input__field" type="text" placeholder="">
                                </div>
                            </div>
                        </div>

                        <div class="c-form-group">
                            <label>Telefon</label>

                            <div class="
  c-form-input

  

  

  
">

                                <input class="c-form-input__field" type="text" placeholder="">
                            </div>
                        </div>

                        <div class="c-form-group">
                            <label>Web</label>

                            <div class="
  c-form-input

  

  

  
">

                                <input class="c-form-input__field" type="text" placeholder="">
                            </div>
                        </div>

                        <div class="c-form-group">
                            <label>E-Mail</label>

                            <div class="
  c-form-input

  

  

  
">

                                <input class="c-form-input__field" type="text" placeholder="">
                            </div>
                        </div>

                        <div class="c-form-group">
                            <label>Branchen</label>

                            <div class="
  c-form-input

  

  
    is-disabled
  

  
">

                                <input class="c-form-input__field" type="text" placeholder="" disabled>
                            </div>
                        </div>

                        <div class="c-form-group">
                            <label class="c-slide-toggle" ui-slide-toggle="uid123">
                                <span>Ich möchte Öffnungszeiten angeben</span>
                                <div class="inline-flex items-center cursor-pointer">

                                    <input type="checkbox" class="sr-only peer">

                                    <div class="
      relative
      shrink-0
      w-16 h-9
      rounded-full
      
      bg-neutral-grey-01

      peer
      peer-focus:outline-none
      peer-focus:ring-2
      peer-focus:ring-neutral-grey-04
      
      peer-checked:after:translate-x-full
      peer-checked:after:border-white
      
      after:absolute
      after:content-['']
      after:top-[3px]
      after:start-[3px]
      after:border-gray-300
      after:border
      after:rounded-full
      after:h-[16px] after:w-[16px]
      
      after:bg-neutral-white
      after:transition-all
      
      peer-checked:bg-brand-hhnavy"></div>
                                </div>
                            </label>

                        </div>

                        <div id="uid123" ui-slide-toggle-target aria-hidden>

                            <!-- START Montag -->
                            <div class="c-form-group">
                                <label>Montag <button class="text-style-mini underline ml-4">Gilt an allen Tagen</button></label>
                                <div class="c-form-group__columns">

                                    <div class="
  c-form-input

  
    basis-1/2
  

  

  
">

                                        <input class="c-form-input__field" type="text" placeholder="">
                                    </div>

                                    <div class="
  c-form-input

  
    basis-1/2
  

  

  
">

                                        <input class="c-form-input__field" type="text" placeholder="">
                                    </div>

                                    <div class="w-[50px] shrink-0 grow-0">

                                        <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="#plus"></use>
                                                </svg>

                                            </span>

                                        </button>
                                    </div>

                                </div>
                            </div>

                            <div class="c-form-group">
                                <div><!-- layout placeholder --></div>
                                <div class="c-form-group__columns">

                                    <div class="
  c-form-input

  
    basis-full
  

  
    is-disabled
  

">
                                        <select class="c-form-input__field" disabled>

                                            <option value="Lorem Ipsum ament">Lorem Ipsum ament</option>

                                            <option value="Dolorsit ament">Dolorsit ament</option>

                                            <option value="consectetur adipisicing elit">consectetur adipisicing elit</option>

                                            <option value="Lorem Ipsum Dolorsit ament">Lorem Ipsum Dolorsit ament</option>

                                        </select>
                                    </div>
                                    <div class="w-[50px] shrink-0 grow-0"></div>
                                </div>
                            </div>
                            <!-- END Montag -->

                            <!-- START Dienstag -->
                            <div class="c-form-group">
                                <label>Dienstag</label>
                                <div class="c-form-group__columns">

                                    <div class="
  c-form-input

  
    basis-1/2
  

  

  
">

                                        <input class="c-form-input__field" type="text" placeholder="">
                                    </div>

                                    <div class="
  c-form-input

  
    basis-1/2
  

  

  
">

                                        <input class="c-form-input__field" type="text" placeholder="">
                                    </div>

                                    <div class="w-[50px] shrink-0 grow-0">

                                        <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="#plus"></use>
                                                </svg>

                                            </span>

                                        </button>
                                    </div>

                                </div>
                            </div>

                            <div class="c-form-group">
                                <div><!-- layout placeholder --></div>
                                <div class="c-form-group__columns">

                                    <div class="
  c-form-input

  
    basis-full
  

  

">
                                        <select class="c-form-input__field">

                                            <option value="Lorem Ipsum ament">Lorem Ipsum ament</option>

                                            <option value="Dolorsit ament">Dolorsit ament</option>

                                            <option value="consectetur adipisicing elit">consectetur adipisicing elit</option>

                                            <option value="Lorem Ipsum Dolorsit ament">Lorem Ipsum Dolorsit ament</option>

                                        </select>
                                    </div>
                                    <div class="w-[50px] shrink-0 grow-0"></div>
                                </div>
                            </div>
                            <!-- END Dienstag -->
                        </div>

                        <hr class="mb-12">

                        <div class="c-form-group" ui-toggle="uid456">
                            <label class="c-slide-toggle" ui-slide-toggle="uid456">
                                <span>Ich bin Inhaber oder Mitarbeiter des Unternehmens</span>
                                <div class="inline-flex items-center cursor-pointer">

                                    <input checked type="checkbox" class="sr-only peer">

                                    <div class="
      relative
      shrink-0
      w-16 h-9
      rounded-full
      
      bg-neutral-grey-01

      peer
      peer-focus:outline-none
      peer-focus:ring-2
      peer-focus:ring-neutral-grey-04
      
      peer-checked:after:translate-x-full
      peer-checked:after:border-white
      
      after:absolute
      after:content-['']
      after:top-[3px]
      after:start-[3px]
      after:border-gray-300
      after:border
      after:rounded-full
      after:h-[16px] after:w-[16px]
      
      after:bg-neutral-white
      after:transition-all
      
      peer-checked:bg-brand-hhnavy"></div>
                                </div>
                            </label>

                        </div>

                        <div id="uid456" ui-slide-toggle-target>

                            <p><strong>Hinweis:</strong> Die nachfolgenden Daten dienen lediglich dem Zweck der Kontakaufnahme bei evtl. Rückfragen. Ihre persönlichen Daten werden zu keinem Zeitpunkt von uns veröffentlicht!</p>

                            <hr class="mb-12">

                            <div class="c-form-group">
                                <label>Vorname*</label>

                                <div class="
  c-form-input

  

  

  
">

                                    <input class="c-form-input__field" type="text" placeholder="">
                                </div>
                            </div>

                            <div class="c-form-group">
                                <label>Name*</label>

                                <div class="
  c-form-input

  

  

  
">

                                    <input class="c-form-input__field" type="text" placeholder="">
                                </div>
                            </div>

                            <div class="c-form-group">
                                <label>E-Mail*</label>

                                <div class="
  c-form-input

  

  

  
">

                                    <input class="c-form-input__field" type="text" placeholder="">
                                </div>
                            </div>

                        </div>

                        <hr class="mb-12">

                        <label class="
    c-form-checkbox
  ">
                            <span class="c-form-checkbox__checkbox">

                                <input type="checkbox">

                                <svg class="text-neutral-grey-02">
                                    <use xlink:href="#form-checkbox-unchecked"></use>
                                </svg>

                                <svg class="text-neutral-grey-02">
                                    <use xlink:href="#form-checkbox-checked"></use>
                                </svg>

                            </span>

                            <span class="c-form-checkbox__label">Ja, ich akzeptiere die Datenverwendung. hamburg.de wird Ihre Daten vertraulich behandeln. Lesen Sie bitte auch die Teilnahmebedingungen.</span>

                        </label>

                        <hr class="mb-12">

                        <button class="
    c-button
    c-button--primary
    c-button--filled
    c-button--large

    

    
  ">

                            <span class="
        c-button__label

        

      ">Absenden</span>

                        </button>

                    </div>

                </div>
            </div>

            <div class="c-section has-max-width has-spacing-bottom has-background">
                <div class="c-section__inner">

                    <!-- column -->
                    <div class="c-section__column">

                        <div class="c-section__heading">

                            <h2 class="text-style-subheadline-2">Wichtiger Hinweis</h2>

                        </div>

                        <div class="grid gap-8">
                            <p>Der Leistungsumfang eines kostenlosen Grundeintrages auf hamburg.de beinhaltet Basisinfos wie Firmenname, Adresse, Telefonnummer, Öffnungszeiten und Branche.</p>
                            <p>​​​​​​​Sie möchten mehr? Sie wollen in den Suchergebnissen oben stehen, sich von Ihren Mitbewerbern abheben und mehr Informationen liefern?</p>
                            <ul>
                                <li>Eine ausführliche Unternehmensbeschreibung, </li>
                                <li>ein Link zu Ihrer Homepage und zu Social-Media-Kanälen,</li>
                                <li>Platz für Logo, Bilder und Videos,</li>
                            </ul>
                            <p>Wir entwickeln mit Ihnen zusammen einen maßgeschneiderten Eintrag, der auf die für Ihr Unternehmen relevanten Kategorien abzielt und das zu einem Budget, das zu Ihnen passt.  Vereinbaren Sie jetzt einen <a href="/">unverbindlichen Beratungstermin</a>.</p>
                        </div>

                    </div>
                </div>
            </div>

        </div>

        <footer class="c-footer">

            <hr class="c-footer__spacer">

            <div class="text-light-50 text-style-mini">
                <h5 class="mb-6"><strong>Urheber der Bilder</strong></h5>
                <div class="grid gap-1">
                    <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/stegmann-bild.jpg" data-caption="Caption 1 ipsum amet">Linktext 1 ipsum amet</a>
                    <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/sparda-bank.jpg" data-caption="Caption 2 ipsum dolor sit amet">Linktext 2 ipsum dolor sit amet</a>
                    <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/koegler-treppenlifte.jpg" data-caption="Caption 3">Linktext 3</a>
                    <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/677bc3f5f383bb2a91166825/consultatio-strafverteidiger-logo.jpg" data-caption="Caption 4 ipsum amet">Linktext 4 ipsum amet</a>
                </div>
                <div class="grid gap-1" id="uid-8487bc1d5b09" 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-8487bc1d5b09" ui-toggle-target id="uid-8487bc1d5b09" 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-8487bc1d5b09" id="uid-8487bc1d5b09" ui-toggle-target aria-hidden class="
    c-toggle
    c-toggle--light
  ">
                        <span class="c-toggle__icon">

                            <svg class="text-neutral-grey-02">
                                <use xlink:href="#circle-minus"></use>
                            </svg>

                        </span>
                        <span class="c-toggle__label">Weniger Quellen anzeigen</span>
                    </button>

                </div>
            </div>

            <hr class="c-footer__spacer has-border-bottom">

            <div class="grid gap-6 justify-around max-w-[1200px] mx-auto large:flex large:gap-10">

                <div class="c-icon-link">
                    <span class="c-icon-link__icon">

                        <svg class="text-neutral-grey-02">
                            <use xlink:href="#arw-right"></use>
                        </svg>

                    </span>
                    <a href="/" class="c-icon-link__label">

                        <span>Branchenbuch</span>

                    </a>
                </div>

                <div class="c-icon-link">
                    <span class="c-icon-link__icon">

                        <svg class="text-neutral-grey-02">
                            <use xlink:href="#arw-right"></use>
                        </svg>

                    </span>
                    <a href="/" class="c-icon-link__label">

                        <span>Behördenfinder</span>

                    </a>
                </div>

                <div class="c-icon-link">
                    <span class="c-icon-link__icon">

                        <svg class="text-neutral-grey-02">
                            <use xlink:href="#arw-right"></use>
                        </svg>

                    </span>
                    <a href="/" class="c-icon-link__label">

                        <span>Veranstaltungen</span>

                    </a>
                </div>
            </div>

            <hr class="c-footer__spacer has-border-bottom">

            <ul class="grid gap-6 place-content-center large:flex large:gap-10">
                <li><a href="/">Bürgerservice & Politik</a></li>
                <li><a href="/">Hotel & Tourismus</a></li>
                <li><a href="/">Erlebnis & Freizeit</a></li>
                <li><a href="/">Kultur & Tickets</a></li>
                <li><a href="/">Jobs & Wohnen</a></li>
                <li><a href="/">Verkehr</a></li>
            </ul>

            <hr class="c-footer__spacer has-border-bottom has-indent-left-right">

            <ul class="grid gap-6 place-content-center large:flex large:gap-10">
                <li><a href="/">Stadtplan</a></li>
                <li><a href="/">Bus & Bahn</a></li>
                <li><a href="/">Mail</a></li>
                <li><a href="/">Presse</a></li>
                <li><a href="/">Mediendaten</a></li>
                <li><a href="/">Jobs</a></li>
            </ul>

            <hr class="c-footer__spacer has-border-bottom has-indent-left-right">

            <h4 class="text-style-p mb-4">Soziale Medien</h4>

            <button class="
    c-button
    c-button--primary
    c-button--square
    c-button--large

    

    
  ">

                <span class="c-button__icon">

                    <svg class="text-neutral-grey-02">
                        <use xlink:href="#facebook"></use>
                    </svg>

                </span>

            </button>

            <button class="
    c-button
    c-button--primary
    c-button--square
    c-button--large

    

    
  ">

                <span class="c-button__icon">

                    <svg class="text-neutral-grey-02">
                        <use xlink:href="#twitterx"></use>
                    </svg>

                </span>

            </button>

            <button class="
    c-button
    c-button--primary
    c-button--square
    c-button--large

    

    
  ">

                <span class="c-button__icon">

                    <svg class="text-neutral-grey-02">
                        <use xlink:href="#instagram"></use>
                    </svg>

                </span>

            </button>

            <button class="
    c-button
    c-button--primary
    c-button--square
    c-button--large

    

    
  ">

                <span class="c-button__icon">

                    <svg class="text-neutral-grey-02">
                        <use xlink:href="#youtube"></use>
                    </svg>

                </span>

            </button>

            <hr class="mb-20">

            <div class="bg-misc-blue-03 py-16 text-style-mini">
                <ul class="grid gap-6 place-content-center large:flex large:gap-10">
                    <li><a href="/">hamburg.de 2024</a></li>
                    <li><a href="/">Impressum</a></li>
                    <li><a href="/">Datenschutz</a></li>
                    <li><a href="/">Barrierefreiheit</a></li>
                    <li><a href="/">Cookie-Richtlinien</a></li>
                    <li><a href="/">Nutzungsbedingungen</a></li>
                </ul>
            </div>
        </footer>
    </div>

    <div class="c-modal-dialog" id="mobile-menu-portal">
        <nav class="grid gap-10 text-style-p " role="navigation">

            <a href="/" class="underline-on-hocus">Startseite Branchen Online</a>

            <div class="flex justify-between items-center">
                <button class="underline-on-hocus" ui-modal-open data-config='{ "id": "merkliste","title":"Merkliste","style":"large"}'>Merkliste (2)</button>

                <svg class="text-brand-hhnavy">
                    <use xlink:href="#heart-outline"></use>
                </svg>

            </div>

            <a href="/" class="underline-on-hocus">Firma kostenlos eintragen</a>
            <a href="/" class="underline-on-hocus">Werben im Branchenbuch</a>
            <a href="/" class="underline-on-hocus">Stadtteilbranchenbücher</a>
            <a href="/" class="underline-on-hocus">Themenspecials</a>
            <a href="/" class="underline-on-hocus">Branchen A–Z</a>
            <a href="/" class="underline-on-hocus">Firmen A–Z</a>

            <hr class="has-border">

            <p class="grid gap-4 grid-cols-[auto_1fr] items-center">

                <svg class="text-brand-hhnavy">
                    <use xlink:href="#glas"></use>
                </svg>

                <a href="/" class="underline-on-hocus">Suche auf hamburg.de</a>
            </p>

            <p class="grid gap-4 grid-cols-[auto_1fr] items-center">

                <svg class="text-brand-hhnavy">
                    <use xlink:href="#home"></use>
                </svg>

                <a href="/" class="underline-on-hocus">Startseite hamburg.de</a>
            </p>

            <a href="/" class="underline-on-hocus">Ukraine</a>
            <a href="/" class="underline-on-hocus">Politik & Verwaltung</a>
            <a href="/" class="underline-on-hocus">Hotels & Toursimus</a>
            <a href="/" class="underline-on-hocus">Erlebnis & Freizeit</a>
            <a href="/" class="underline-on-hocus">Kultur & Tickets</a>
            <a href="/" class="underline-on-hocus">Jobs & Wohnen</a>
            <a href="/" class="underline-on-hocus">Verkehr</a>
            <a href="/" class="underline-on-hocus">Barrierefreiheit</a>

        </nav>
    </div>
    <div class="c-modal-dialog" id="merkliste">

        <div class="h-[236px] small-only:h-[45vw]">
            <div class="bg-neutral-grey-01 grid justify-center items-center h-full">
                <p>Kartenanwendung</p>
            </div>
        </div>

        <hr class="my-8 has-border">

        <div class="grid gap-8">

            <div class="c-teaser-container small:grid-cols-1 medium:grid-cols-3 large:grid-cols-3">

                <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

                    <div class="c-teaser__image">
                        <a href="/">

                            <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_2.jpg" alt="Lorem alt ipsum" />

                        </a>
                    </div>

                    <div class="c-teaser__compact">

                        <p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>

                        <h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>

                        <div class="c-icon-tag">
                            <span class="c-icon-tag__icon">

                                <svg class="text-neutral-grey-02">
                                    <use xlink:href="#heart-out"></use>
                                </svg>

                            </span>
                            <p class="c-icon-tag__label text-style-mini">
                                Entfernen
                            </p>
                        </div>

                    </div>

                </div>

                <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

                    <div class="c-teaser__image">
                        <a href="/">

                            <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_14.jpg" alt="Lorem alt ipsum" />

                        </a>
                    </div>

                    <div class="c-teaser__compact">

                        <p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>

                        <h3 class="text-style-subheadline-4"><a href="/">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_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="/">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_15.jpg" alt="Lorem alt ipsum" />

                        </a>
                    </div>

                    <div class="c-teaser__compact">

                        <p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>

                        <h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>

                        <div class="c-icon-tag">
                            <span class="c-icon-tag__icon">

                                <svg class="text-neutral-grey-02">
                                    <use xlink:href="#heart-out"></use>
                                </svg>

                            </span>
                            <p class="c-icon-tag__label text-style-mini">
                                Entfernen
                            </p>
                        </div>

                    </div>

                </div>

                <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

                    <div class="c-teaser__image">
                        <a href="/">

                            <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_14.jpg" alt="Lorem alt ipsum" />

                        </a>
                    </div>

                    <div class="c-teaser__compact">

                        <p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>

                        <h3 class="text-style-subheadline-4"><a href="/">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_1.jpg" alt="Lorem alt ipsum" />

                        </a>
                    </div>

                    <div class="c-teaser__compact">

                        <p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>

                        <h3 class="text-style-subheadline-4"><a href="/">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_5.jpg" alt="Lorem alt ipsum" />

                        </a>
                    </div>

                    <div class="c-teaser__compact">

                        <p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>

                        <h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>

                        <div class="c-icon-tag">
                            <span class="c-icon-tag__icon">

                                <svg class="text-neutral-grey-02">
                                    <use xlink:href="#heart-out"></use>
                                </svg>

                            </span>
                            <p class="c-icon-tag__label text-style-mini">
                                Entfernen
                            </p>
                        </div>

                    </div>

                </div>

                <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

                    <div class="c-teaser__image">
                        <a href="/">

                            <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_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="/">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>

        </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-d0e44903f552">

                <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-d0e44903f552" ui-toggle-target aria-hidden>
                <div class="ml-12">

                    <!-- nested toggles -->

                    <div class="c-accordion">
                        <div class="c-accordion__heading" ui-toggle="uid-9cbc574a9823">

                            <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-9cbc574a9823" 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-1971e9300b93">

                            <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-1971e9300b93" 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-d6c5a3d9095c">

                            <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-d6c5a3d9095c" 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-df0eb6e9fe32">

                            <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-df0eb6e9fe32" 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-3d2fb0e0b85f">

                <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-3d2fb0e0b85f" ui-toggle-target aria-hidden>
                <div class="ml-12">

                    <!-- nested toggles -->

                    <div class="c-accordion">
                        <div class="c-accordion__heading" ui-toggle="uid-047f4a2a7cc6">

                            <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-047f4a2a7cc6" 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-b0b8e7457df5">

                            <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-b0b8e7457df5" 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-633680db74c6">

                            <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-633680db74c6" 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-2483ff099125">

                            <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-2483ff099125" 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-2fae2ffe64b3">

                <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-2fae2ffe64b3" ui-toggle-target aria-hidden>
                <div class="ml-12">

                    <!-- nested toggles -->

                    <div class="c-accordion">
                        <div class="c-accordion__heading" ui-toggle="uid-26509b53aca7">

                            <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-26509b53aca7" 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-95cff2003fab">

                            <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-95cff2003fab" 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-3213d2047700">

                            <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-3213d2047700" 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-042c09846d65">

                            <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-042c09846d65" 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-fea7b3692930">

                <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-fea7b3692930" ui-toggle-target aria-hidden>
                <div class="flex" id="uid-fea7b3692930" 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-e4ed455601f5" 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-e4ed455601f5" ui-toggle-target id="uid-e4ed455601f5" 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-e4ed455601f5" id="uid-e4ed455601f5" ui-toggle-target aria-hidden class="
    c-toggle
    c-toggle--primary
  ">
                            <span class="c-toggle__icon">

                                <svg class="text-neutral-grey-02">
                                    <use xlink:href="#circle-minus"></use>
                                </svg>

                            </span>
                            <span class="c-toggle__label">Weniger anzeigen</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <hr class="mb-8">

        <footer class="c-header__filter-buttons">

            <button class="
    c-button
    c-button--primary
    c-button--filled
    c-button--large

    

    
  ">

                <span class="
        c-button__label

        

      ">Filter anwenden</span>

            </button>

            <button ui-filter-reset class="
    c-button
    c-button--primary
    c-button--basic
    c-button--large

    

    
  ">

                <span class="
        c-button__label

        

      ">Zurücksetzen</span>

            </button>
        </footer>

    </div>
    <div class="c-modal-dialog" id="share56">
        <div class="grid grid-cols-[1fr] gap-4">

            <p class="text-style-mini">Teilen auf:</p>
            <div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">

                <svg class="text-brand-hhnavy">
                    <use xlink:href="#twitterx"></use>
                </svg>

                <a class="no-underline" hhref="/">X</a>

            </div>

            <hr class="has-border my-4">

            <p class="text-style-mini">Teilen auf:</p>
            <div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">

                <svg class="text-brand-hhnavy">
                    <use xlink:href="#facebook"></use>
                </svg>

                <a class="no-underline" hhref="/">Facebook</a>

            </div>

            <hr class="has-border my-4">

            <p class="text-style-mini">Merken:</p>
            <div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">

                <svg class="text-brand-hhnavy">
                    <use xlink:href="#pinterest"></use>
                </svg>

                <a class="no-underline" hhref="/">Pinterest</a>

            </div>

            <hr class="has-border my-4">

            <p class="text-style-mini">Link kopieren:</p>
            <div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">

                <svg class="text-brand-hhnavy">
                    <use xlink:href="#link"></use>
                </svg>

                <a class="no-underline" hhref="/">http://www.abc.de/1234565abc</a>

            </div>

            <hr class="has-border my-4">

            <p class="text-style-mini">Herunterladen:</p>
            <div class="grid grid-cols-[auto_auto_1fr] gap-x-2 items-center">

                <svg class="text-brand-hhnavy">
                    <use xlink:href="#ical"></use>
                </svg>

                <a class="no-underline" hhref="/">Kontakt speichern</a>

            </div>

        </div>
    </div>

</body>

</html>
{% extends '@page' %}

{% block content %}

  {% render '@page-header', { hamburgerMenu: 'portal' } %}

  {% render '@page-hero' %}

  <div class="c-section has-max-width">
    <div class="c-section__inner">

      <div class="c-breadcrumb-container">
        {% render '@breadcrumb', { path: ['Branchenbuch', 'Kostenloser Grundeintrag'] } %}
      </div>

    </div>
  </div>

  <div class="c-section has-max-width">
    <div class="c-section__inner">

      {% render '@page-heading', {
        kicker: 'Branchen Online Hamburg - So werden Sie gefunden',
        title: 'Kostenlos Firma eintragen auf hamburg.de'
      } %}

    </div>
  </div>

  <div class="c-section has-max-width has-spacing-bottom">
    <div class="c-section__inner">

      <!-- column -->
      <div class="c-section__column">
        <p>Unterstützen Sie Ihr Online-Marketing mit einem kostenlosen Grundeintrag im Branchenbuch auf hamburg.de.</p>
      </div>

    </div>
  </div>

  <div class="c-section has-max-width has-spacing-bottom has-border-around">
    <div class="c-section__inner">

      <!-- column -->
      <div class="c-section__column">

        <div class="c-form-group">
          <label>Firmenname*</label>
          {% render '@form-input' %}
        </div>

        <div class="c-form-group">
          <label>Straße* / Nr.*</label>
          <div class="c-form-group__columns">
            {% render '@form-input', { basis: '3/4' } %}
            {% render '@form-input', { basis: '1/4' } %}
          </div>
        </div>

        <div class="c-form-group">
          <label>PLZ* / Ort*</label>
          <div class="c-form-group__columns">
            {% render '@form-input', { basis: '1/4' } %}
            {% render '@form-input', { basis: '3/4' } %}
          </div>
        </div>

        <div class="c-form-group">
          <label>Telefon</label>
          {% render '@form-input' %}
        </div>

        <div class="c-form-group">
          <label>Web</label>
          {% render '@form-input' %}
        </div>

        <div class="c-form-group">
          <label>E-Mail</label>
          {% render '@form-input' %}
        </div>

        <div class="c-form-group">
          <label>Branchen</label>
          {% render '@form-input', { disabled: true } %}
        </div>

        <div class="c-form-group">
          {% render '@slide-toggle', {
            label: 'Ich möchte Öffnungszeiten angeben',
            target: 'uid123'
          } %}
        </div>

        <div id="uid123" ui-slide-toggle-target aria-hidden>

          <!-- START Montag -->
          <div class="c-form-group">
            <label>Montag <button class="text-style-mini underline ml-4">Gilt an allen Tagen</button></label>
            <div class="c-form-group__columns">

              {% render '@form-input', { basis: '1/2', placeholder: '' } %}
              {% render '@form-input', { basis: '1/2', placeholder: '' } %}

              <div class="w-[50px] shrink-0 grow-0">
                {% render '@button', {
                  icon: 'plus',
                  theme: 'primary',
                  variant: 'outlined'
                } %}
              </div>

            </div>
          </div>

          <div class="c-form-group">
            <div><!-- layout placeholder --></div>
            <div class="c-form-group__columns">
              {% render '@form-select', { basis: 'full', disabled: true } %}
              <div class="w-[50px] shrink-0 grow-0"></div>
            </div>
          </div>
          <!-- END Montag -->


          <!-- START Dienstag -->
          <div class="c-form-group">
            <label>Dienstag</label>
            <div class="c-form-group__columns">

              {% render '@form-input', { basis: '1/2', placeholder: '' } %}
              {% render '@form-input', { basis: '1/2', placeholder: '' } %}

              <div class="w-[50px] shrink-0 grow-0">
                {% render '@button', {
                  icon: 'plus',
                  theme: 'primary',
                  variant: 'outlined'
                } %}
              </div>

            </div>
          </div>

          <div class="c-form-group">
            <div><!-- layout placeholder --></div>
            <div class="c-form-group__columns">
              {% render '@form-select', { basis: 'full' } %}
              <div class="w-[50px] shrink-0 grow-0"></div>
            </div>
          </div>
          <!-- END Dienstag -->
        </div>

        <hr class="mb-12">

        <div class="c-form-group" ui-toggle="uid456">
          {% render '@slide-toggle', {
            label: 'Ich bin Inhaber oder Mitarbeiter des Unternehmens',
            target: 'uid456',
            enabled: true
          } %}
        </div>

        <div id="uid456" ui-slide-toggle-target>

          <p><strong>Hinweis:</strong> Die nachfolgenden Daten dienen lediglich dem Zweck der Kontakaufnahme bei evtl. Rückfragen. Ihre persönlichen Daten werden zu keinem Zeitpunkt von uns veröffentlicht!</p>

          <hr class="mb-12">

          <div class="c-form-group">
            <label>Vorname*</label>
            {% render '@form-input' %}
          </div>

          <div class="c-form-group">
            <label>Name*</label>
            {% render '@form-input' %}
          </div>

          <div class="c-form-group">
            <label>E-Mail*</label>
            {% render '@form-input' %}
          </div>

        </div>

        <hr class="mb-12">

        {% render '@form-checkbox', { label: 'Ja, ich akzeptiere die Datenverwendung. hamburg.de wird Ihre Daten vertraulich behandeln. Lesen Sie bitte auch die Teilnahmebedingungen.'} %}

        <hr class="mb-12">

        {% render '@button', {
          label: {
            default: 'Absenden'
          },
          theme: 'primary',
          variant: 'filled',
          size: 'large'
        } %}

      </div>

    </div>
  </div>

  <div class="c-section has-max-width has-spacing-bottom has-background">
    <div class="c-section__inner">


      <!-- column -->
      <div class="c-section__column">

        {% render '@section-heading', { title: 'Wichtiger Hinweis' } %}

        <div class="grid gap-8">
          <p>Der Leistungsumfang eines kostenlosen Grundeintrages auf hamburg.de beinhaltet Basisinfos wie Firmenname, Adresse, Telefonnummer, Öffnungszeiten und Branche.</p>
          <p>​​​​​​​Sie möchten mehr? Sie wollen in den Suchergebnissen oben stehen, sich von Ihren Mitbewerbern abheben und mehr Informationen liefern?</p>
          <ul>
            <li>Eine ausführliche Unternehmensbeschreibung, </li>
            <li>ein Link zu Ihrer Homepage und zu Social-Media-Kanälen,</li>
            <li>Platz für Logo, Bilder und Videos,</li>
          </ul>
          <p>Wir entwickeln mit Ihnen zusammen einen maßgeschneiderten Eintrag, der auf die für Ihr Unternehmen relevanten Kategorien abzielt und das zu einem Budget, das zu Ihnen passt.  Vereinbaren Sie jetzt einen <a href="/">unverbindlichen Beratungstermin</a>.</p>
        </div>

      </div>
    </div>
  </div>

{% endblock content %}

{% block footer %}{% render '@page-footer-portal' %}{% endblock footer %}
/* No context defined. */

No notes defined.