a{text-decoration-thickness:1px!important;text-underline-offset:.1em}:where(.wp-site-blocks :focus){outline-style:solid;outline-width:2px}.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child){margin-bottom:3px}.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content{outline-offset:4px}.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content{outline-offset:0}blockquote,caption,figcaption,h1,h2,h3,h4,h5,h6,p{text-wrap:pretty}.more-link{display:block}:where(pre){overflow-x:auto}


/* Bildgröße Header */
header img {
	width: 100px !important;
}

@media (max-width: 570px) {
    header img {
        width: 70px !important;
        height: auto;
    }
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: #25292f !important;
}



/*///////////////////////////////////// TABLET START /////////////////////////////////////*/

 /* Allgemeines Tablet
 * 571px bis 1024px
 */
@media (min-width: 571px) and (max-width: 1024px) {

    /* Horizontales Überlaufen verhindern */
    html,
    body {
        overflow-x: hidden;
    }

    /* Bilder grundsätzlich sauber skalieren */
    .wp-block-image img {
        max-width: 100%;
        height: auto;
    }

    /* Buttons sollen nicht unschön zweizeilig werden */
    .wp-block-button__link {
        white-space: nowrap;
    }

}


/*
 * Schmales Tablet
 * Hier wird das Desktop-Menü zu eng.
 */
@media (min-width: 571px) and (max-width: 900px) {

    /*
     * GLOBALER SEITENABSTAND
     * Twenty Twenty-Five arbeitet mit Global Padding.
     */
    body {
        --wp--style--root--padding-left: 28px;
        --wp--style--root--padding-right: 28px;
    }


    /* =========================
       HEADER
       ========================= */

    /* Logo etwas kompakter als Desktop */
    header .wp-image-357 {
        width: 85px !important;
        height: auto !important;
        flex-shrink: 0;
    }

    /* Navigation bekommt den verfügbaren Platz */
    header .wp-block-navigation {
        margin-left: auto;
    }


    /* =========================
       TABLET MENÜ
       ========================= */

    /*
     * Hamburger bereits auf Tablet anzeigen.
     * WordPress zeigt ihn standardmäßig erst später.
     */
    header .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /*
     * Normale Desktop-Navigation verstecken,
     * solange das Overlay nicht geöffnet ist.
     */
    header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }


    /* =========================
       GEÖFFNETES MENÜ
       ========================= */

    header .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;

        position: fixed !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100dvh !important;

        padding: 35px !important;

        background: #25292f !important;
        color: #ffffff !important;

        z-index: 999999 !important;
    }

    /*
     * Menüinhalt linksbündig statt
     * WordPress-Standardausrichtung.
     */
    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 100%;
    }

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        width: 100%;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 18px !important;
    }

    /*
     * Menülinks im Overlay
     */
    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        color: #ffffff !important;

        font-size: 1.15rem;
        line-height: 1.3;

        padding: 4px 0;
    }

    /*
     * Untermenü ebenfalls sauber darstellen
     */
    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        background: transparent !important;
        color: #ffffff !important;

        border: 0 !important;

        padding-left: 18px !important;
    }

    /*
     * Schließen-Button
     */
    header .wp-block-navigation__responsive-container-close {
        color: #ffffff !important;
    }


    /* =========================
       TYPOGRAFIE
       ========================= */

    /*
     * Verhindert unschöne Überläufe bei
     * längeren Überschriften/Texten.
     */
    h1,
    h2,
    h3,
    p {
        overflow-wrap: break-word;
    }


    /* =========================
       COLUMNS
       ========================= */

    /*
     * Etwas weniger Abstand zwischen
     * zweispaltigen Bereichen.
     */
    .wp-block-columns {
        gap: 30px !important;
    }

    .wp-block-column {
        min-width: 0;
    }

}

/* =========================================================
   TABLET OPTIMIERUNG
   571px - 900px
   ========================================================= */

@media (min-width: 571px) and (max-width: 900px) {


    /* =====================================================
       ALLGEMEIN
       ===================================================== */

    html,
    body {
        overflow-x: hidden;
    }

    body {
        --wp--style--root--padding-left: 28px;
        --wp--style--root--padding-right: 28px;
    }

    .wp-block-image img {
        max-width: 100%;
        height: auto;
    }

    .wp-block-column {
        min-width: 0;
    }


    /* =====================================================
       1. HEADER / LOGO / TABLET MENÜ
       ===================================================== */

    header .wp-image-357 {
        width: 85px !important;
        height: auto !important;
        flex-shrink: 0;
    }

    header .wp-block-navigation {
        margin-left: auto;
    }


    /* Hamburger anzeigen */

    header .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }


    /* Desktop Navigation auf Tablet verstecken */

    header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }


    /* Geöffnetes Menü */

    header .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;

        position: fixed !important;
        top: 84px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: calc(100dvh - 84px) !important;

        padding: 35px 48px 45px 48px !important;

        background: #25292f !important;
        color: #ffffff !important;

        overflow-y: auto !important;

        z-index: 999999 !important;
    }


    /* Menüinhalt links ausrichten */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        width: 100% !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        text-align: left !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        width: 100% !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 20px !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
        width: 100% !important;

        align-items: flex-start !important;
        text-align: left !important;
    }


    /* Hauptlinks */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        color: #ffffff !important;

        font-size: 1.15rem !important;
        line-height: 1.3 !important;

        padding: 4px 0 !important;

        text-align: left !important;
    }


    /* Leistungen Untermenü */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        position: static !important;

        width: 100% !important;

        margin: 10px 0 0 0 !important;
        padding: 0 0 0 24px !important;

        background: transparent !important;
        color: #ffffff !important;

        border: 0 !important;

        align-items: flex-start !important;

        text-align: left !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
        padding: 7px 0 !important;

        text-align: left !important;
    }


    /* Schließen Button */

    header .wp-block-navigation__responsive-container-close {
        color: #ffffff !important;
    }


    /* =====================================================
       2. KENNZAHLEN / VERTIKALE TRENNSTRICHE
       ===================================================== */

    .wp-block-column[style*="border-right"] {
        border-right: 0 !important;
    }

    .wp-block-column[style*="border-right-width"] {
        border-right-width: 0 !important;
        border-right-style: none !important;
    }


    /* =====================================================
       3. KUNDENSTIMMEN / GOOGLE BEWERTUNGEN
       ===================================================== */

    .kundenstimmen a[href*="google"] {
        display: inline-flex !important;
        align-items: center !important;

        gap: 8px !important;

        color: #d19a4c !important;
        opacity: 1 !important;

        white-space: nowrap !important;
        text-decoration: none !important;
    }


    .kundenstimmen a[href*="google"] * {
        color: inherit !important;
        fill: currentColor !important;
        opacity: 1 !important;
    }


    /* =====================================================
       4 + 5 + 6
       WEITERE LEISTUNGEN
       ===================================================== */


    /* Drei Karten nebeneinander */

    .weitere-leistungen .wp-block-columns {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 24px !important;
    }


    .weitere-leistungen .wp-block-column {
        width: auto !important;
        min-width: 0 !important;
        flex-basis: auto !important;

        margin: 0 !important;
    }


    /* Kartenbild */

    .weitere-leistungen .wp-block-image {
        width: 100% !important;

        margin: 0 !important;

        overflow: hidden !important;
    }


    .weitere-leistungen .wp-block-image img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        aspect-ratio: 4 / 3;

        object-fit: cover !important;
    }


    /* Überschrift */

    .weitere-leistungen h2,
    .weitere-leistungen h3,
    .weitere-leistungen h4 {
        width: 100% !important;

        margin-bottom: 16px !important;

        font-size: 17px !important;
        line-height: 1.25 !important;

        overflow-wrap: anywhere;
    }


    /* Button Container */

    .weitere-leistungen .wp-block-buttons {
        display: flex !important;

        width: 100% !important;

        margin-top: 12px !important;
    }


    .weitere-leistungen .wp-block-button {
        width: 100% !important;
    }


    /* Button */

    .weitere-leistungen .wp-block-button__link {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        padding: 11px 10px !important;

        background-color: #d19a4c !important;
        color: #111111 !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: .04em !important;

        white-space: normal !important;

        text-align: center !important;

        overflow: visible !important;
    }


    .weitere-leistungen .wp-block-button__link * {
        color: #111111 !important;
        opacity: 1 !important;
    }


    /* Falls "Mehr erfahren" kein Button,
       sondern ein normaler Link ist */

    .weitere-leistungen a {
        max-width: 100%;

        box-sizing: border-box;

        overflow-wrap: break-word;
    }

}


/* =========================================================
   TABLET BREIT
   901px - 1024px
   Nur kleine Sicherheitskorrekturen
   ========================================================= */

@media (min-width: 901px) and (max-width: 1024px) {

    html,
    body {
        overflow-x: hidden;
    }

    .wp-block-image img {
        max-width: 100%;
        height: auto;
    }

    .wp-block-column {
        min-width: 0;
    }

}

/* =========================================================
   TABLET PATCH 02
   Ergänzungen / Korrekturen
   ========================================================= */


/* =========================================================
   AKTUELLE SEITE IM MENÜ GOLD MARKIEREN
   Gilt Desktop + Tablet + Mobile
   ========================================================= */

header .wp-block-navigation-item__content[aria-current="page"],
header .current-menu-item > .wp-block-navigation-item__content {
    color: #d19a4c !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 571px) and (max-width: 900px) {


    /* =====================================================
       GLOBALEN TABLET ABSTAND WIEDER AUF THEME WERT SETZEN
       Unser vorheriger 28px-Wert war etwas knapp.
       ===================================================== */

    body {
        --wp--style--root--padding-left:
            var(--wp--preset--spacing--50) !important;

        --wp--style--root--padding-right:
            var(--wp--preset--spacing--50) !important;
    }


    /* =====================================================
       KUNDENSTIMMEN
       Google-Link nicht mehr rechts schweben lassen
       ===================================================== */

    .kundenstimmen .bewertungen-link {
        width: 100% !important;

        margin-top: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;

        align-self: flex-start !important;
    }

    .kundenstimmen .bewertungen-link a {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 8px !important;

        width: auto !important;

        color: #d19a4c !important;

        opacity: 1 !important;

        white-space: nowrap !important;

        text-decoration: none !important;
    }

    .kundenstimmen .bewertungen-link a * {
        color: inherit !important;

        fill: currentColor !important;

        opacity: 1 !important;
    }


    /* Falls der übergeordnete Kopfbereich als Flex läuft */

    .kundenstimmen .wp-block-group:has(> .bewertungen-link) {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 8px !important;
    }


    /* =====================================================
       UNSER ABLAUF
       ===================================================== */

    .ablauf {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }


    /* Überschrift etwas mehr Luft */

    .ablauf > .wp-block-heading,
    .ablauf > h2 {
        margin-top: 0 !important;
        margin-bottom: 32px !important;
    }


    /*
     * Drei schmale Karten verursachen Wörter wie
     * "Untergrundvorbereitung" + einzelnes "g".
     *
     * Auf schmalem Tablet deshalb 2 Spalten.
     */

    .ablauf .wp-block-columns {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 24px !important;
    }


    .ablauf .wp-block-column {
        width: auto !important;
        min-width: 0 !important;

        flex-basis: auto !important;
    }


    /* Wörter niemals mitten im Wort zerlegen */

    .ablauf h2,
    .ablauf h3,
    .ablauf h4 {
        overflow-wrap: normal !important;
        word-break: normal !important;

        hyphens: none !important;
    }


    /* Ablauf-Karten nicht künstlich weiß darstellen */

    .ablauf .wp-block-column {
        background-color: transparent !important;
    }


    /* =====================================================
       WEITERE LEISTUNGEN
       Einheitlich auf ALLEN Leistungsseiten
       ===================================================== */

    .weitere-leistungen .wp-block-columns {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 24px !important;
    }


    .weitere-leistungen .wp-block-column {
        width: auto !important;
        min-width: 0 !important;
        flex-basis: auto !important;

        margin: 0 !important;
    }


    /*
     * Wichtig für Bodenbeläge:
     * Bilder dürfen nicht mehr auf volle
     * Tabletbreite springen.
     */

    .weitere-leistungen .wp-block-image {
        width: 100% !important;

        margin: 0 !important;

        overflow: hidden !important;
    }


    .weitere-leistungen .wp-block-image img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        aspect-ratio: 4 / 3 !important;

        object-fit: cover !important;
    }


    /* Kartentitel */

    .weitere-leistungen h2,
    .weitere-leistungen h3,
    .weitere-leistungen h4 {
        font-size: 17px !important;
        line-height: 1.25 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;

        hyphens: none !important;
    }


    /* =====================================================
       WEITERE LEISTUNGEN BUTTONS
       Besonders Innenputz
       ===================================================== */

    .weitere-leistungen .wp-block-buttons {
        display: flex !important;

        width: 100% !important;
    }


    .weitere-leistungen .wp-block-button {
        display: block !important;

        width: 100% !important;
    }


    .weitere-leistungen .wp-block-button__link {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 46px !important;

        box-sizing: border-box !important;

        padding: 11px 8px !important;

        background: #d19a4c !important;
        background-color: #d19a4c !important;

        color: #111111 !important;

        font-size: 11px !important;
        font-weight: 700 !important;

        line-height: 1.2 !important;
        letter-spacing: .08em !important;

        text-align: center !important;

        white-space: nowrap !important;

        opacity: 1 !important;

        overflow: visible !important;
    }


    /* Text innerhalb des Buttons ebenfalls erzwingen */

    .weitere-leistungen .wp-block-button__link *,
    .weitere-leistungen .wp-block-button__link span {
        color: #111111 !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    /*
     * Falls die KI die CTAs teilweise als normalen Link
     * statt als WordPress Button gebaut hat.
     */

    .weitere-leistungen a:not(.wp-block-button__link) {
        color: #111111;

        opacity: 1 !important;
    }

}

/* =========================================================
   TABLET FINAL FIXES
   571px - 900px
   ========================================================= */

@media (min-width: 571px) and (max-width: 900px) {


    /* =====================================================
       1. MOBILE/TABLET MENÜ
       Overlay wieder sauber über gesamten Viewport
       ===================================================== */

    header .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100dvh !important;

        padding: 90px 48px 50px !important;

        background: #25292f !important;
        color: #ffffff !important;

        overflow-y: auto !important;

        z-index: 999999 !important;
    }


    /* Close Button unbedingt sichtbar */

    header .wp-block-navigation__responsive-container-close {
        display: flex !important;

        position: absolute !important;

        top: 28px !important;
        right: 32px !important;

        width: 40px !important;
        height: 40px !important;

        align-items: center !important;
        justify-content: center !important;

        color: #ffffff !important;

        z-index: 1000001 !important;

        cursor: pointer !important;
    }

    header .wp-block-navigation__responsive-container-close svg {
        display: block !important;

        width: 28px !important;
        height: 28px !important;

        fill: currentColor !important;
    }



    /* =====================================================
       2. AKTUELLE SEITE GOLD MARKIEREN
       Höhere Spezifität als unsere weiße Menüfarbe
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content[aria-current="page"],

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .current-menu-item
    > .wp-block-navigation-item__content {
        color: #d19a4c !important;
    }


    /*
     * Bei einer Leistungs-Unterseite zusätzlich
     * "Leistungen" gold markieren.
     */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:has(
        .wp-block-navigation-item__content[aria-current="page"]
    )
    > .wp-block-navigation-item__content {
        color: #d19a4c !important;
    }



    /* =====================================================
       3. GOOGLE BEWERTUNGEN
       Link sauber unter den Titel
       ===================================================== */

    main
    .wp-block-group:has(> .wp-block-heading):has(
        a[href*="search.google.com"]
    ) {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 12px !important;
    }


    main a[href*="search.google.com"] {
        display: inline-flex !important;

        position: static !important;

        align-items: center !important;
        justify-content: flex-start !important;

        width: auto !important;

        margin: 0 !important;

        gap: 8px !important;

        color: #d19a4c !important;

        opacity: 1 !important;

        transform: none !important;

        white-space: nowrap !important;
        text-decoration: none !important;
    }


    main a[href*="search.google.com"] * {
        color: inherit !important;

        fill: currentColor !important;

        opacity: 1 !important;
    }



    /* =====================================================
       4. WEITERE LEISTUNGEN
       Einheitliche 3er Darstellung
       ===================================================== */

    .weitere-leistungen .wp-block-columns {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 24px !important;
    }


    .weitere-leistungen .wp-block-column {
        display: flex !important;

        flex-direction: column !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;

        background: transparent !important;
    }


    /* Weiße Kartenflächen entfernen */

    .weitere-leistungen .wp-block-column > .wp-block-group {
        background: transparent !important;
    }


    /* Bilder immer gleich groß */

    .weitere-leistungen .wp-block-image {
        width: 100% !important;

        margin: 0 !important;

        overflow: hidden !important;
    }


    .weitere-leistungen .wp-block-image img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        aspect-ratio: 4 / 3 !important;

        object-fit: cover !important;
    }



    /* =====================================================
       5. KARTENTITEL
       ===================================================== */

    .weitere-leistungen h2,
    .weitere-leistungen h3,
    .weitere-leistungen h4 {
        width: 100% !important;

        margin: 18px 0 14px !important;

        font-size: 16px !important;
        line-height: 1.3 !important;

        word-break: normal !important;
        overflow-wrap: break-word !important;

        hyphens: none !important;
    }



    /* =====================================================
       6. NORMALE WORDPRESS BUTTONS
       Gestaltungstechniken / Trockenbau / Innenputz
       ===================================================== */

    .weitere-leistungen .wp-block-buttons {
        display: flex !important;

        width: 100% !important;

        margin-top: auto !important;
    }


    .weitere-leistungen .wp-block-button {
        display: block !important;

        width: 100% !important;
    }


    .weitere-leistungen .wp-block-button__link {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 46px !important;

        box-sizing: border-box !important;

        padding: 12px 8px !important;

        background: #d19a4c !important;
        color: #111111 !important;

        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        letter-spacing: .08em !important;

        opacity: 1 !important;

        white-space: nowrap !important;

        text-align: center !important;
    }


    .weitere-leistungen .wp-block-button__link * {
        color: #111111 !important;

        opacity: 1 !important;

        visibility: visible !important;
    }



    /* =====================================================
       7. MALERARBEITEN
       Dort ist der CTA anders aufgebaut.
       Gruppen dürfen nicht mehr horizontal überlaufen.
       ===================================================== */

    .weitere-leistungen
    .wp-block-column
    > .wp-block-group:last-child {
        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;

        gap: 14px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* CTA-Link am Ende der Karte */

    .weitere-leistungen
    .wp-block-column
    > .wp-block-group:last-child
    > a:last-child {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 12px 8px !important;

        background: #d19a4c !important;
        color: #111111 !important;

        font-size: 11px !important;
        font-weight: 700 !important;

        letter-spacing: .08em !important;

        text-align: center !important;

        white-space: nowrap !important;

        overflow: visible !important;

        opacity: 1 !important;
    }



    /* =====================================================
       8. ABLAUF ALLGEMEIN
       Mehr Luft für Überschrift
       ===================================================== */

    .ablauf {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }


    .ablauf > p:first-child {
        margin-top: 0 !important;
    }


    .ablauf > .wp-block-heading,
    .ablauf > h2 {
        margin-top: 0 !important;
        margin-bottom: 34px !important;
    }


    .ablauf h3,
    .ablauf h4 {
        word-break: normal !important;

        overflow-wrap: normal !important;

        hyphens: none !important;
    }


    /* Kartenfläche nicht weiß */

    .ablauf .wp-block-column {
        background: #f7f3ee !important;
    }



    /* =====================================================
       9. INNENPUTZ ABLAUF
       Nur anwenden, wenn du dem Bereich zusätzlich
       die Klasse "ablauf-innenputz" gibst.
       ===================================================== */

    .ablauf-innenputz {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 24px !important;
    }


    /* Label und Überschrift über komplette Breite */

    .ablauf-innenputz > p,
    .ablauf-innenputz > h2,
    .ablauf-innenputz > .wp-block-heading {
        grid-column: 1 / -1 !important;
    }


    /*
     * Bestehende WordPress-Zeilengruppen auflösen.
     * Dadurch entsteht aus 2 / 1 / 2 eine echte
     * fortlaufende Grid-Aufteilung.
     */

    .ablauf-innenputz > .wp-block-columns {
        display: contents !important;
    }


    .ablauf-innenputz
    > .wp-block-columns
    > .wp-block-column {
        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
    }


    /*
     * Bei 5 Karten letzte Karte mittig.
     */

    .ablauf-innenputz
    > .wp-block-columns:last-of-type
    > .wp-block-column:last-child {
        grid-column: 1 / -1 !important;

        width: calc(50% - 12px) !important;

        justify-self: center !important;
    }
	

}

/* =========================================================
   WEITERE LEISTUNGEN – Kartenhintergrund entfernen
   ========================================================= */

.weitere-leistungen
.wp-block-group.is-layout-grid
> .wp-block-group {
    background: transparent !important;
    background-color: transparent !important;
}

/* =========================================================
   WEITERE LEISTUNGEN – CUSTOM HTML VARIANTE
   Tablet
   ========================================================= */

@media (min-width: 571px) and (max-width: 900px) {

    /* Grid darf durch lange Inhalte nicht aufgedrückt werden */
    .weitere-leistungen .leistungen-grid-hover {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Weißer Hintergrund unter den Bildern entfernen */
    .weitere-leistungen
    .leistungen-grid-hover
    > div:last-child {
        background: transparent !important;
        background-color: transparent !important;

        /* Titel und CTA nicht mehr nebeneinander quetschen */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 10px !important;

        /* Keine unnötige weiße Kartenfläche */
        padding: 16px 0 0 0 !important;

        width: 100% !important;
        box-sizing: border-box !important;

        min-width: 0 !important;
    }

    /* Titel darf nicht den CTA aus der Karte schieben */
    .weitere-leistungen
    .leistungen-grid-hover
    > div:last-child
    > h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 15px !important;
        line-height: 1.3 !important;

        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    /* "Mehr erfahren" sauber unter dem Titel */
    .weitere-leistungen
    .leistungen-grid-hover
    > div:last-child
    > span {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        color: #c99b5a !important;

        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        letter-spacing: .08em !important;

        white-space: normal !important;

        overflow: visible !important;
        text-overflow: clip !important;

        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* =========================================================
   ABLAUF – Tablet wieder als 2er Grid
   ========================================================= */


@media (min-width: 571px) and (max-width: 900px) {

    .ablauf .wp-block-columns {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }

    .ablauf .wp-block-column {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Falls mehrere Reihen als einzelne Columns-Blöcke gebaut sind */
    .ablauf .wp-block-columns + .wp-block-columns {
        margin-top: 24px !important;
    }
}

/* =========================================================
   ABLAUF – TABLET 3ER GRID
   Fix für unterschiedliche Gutenberg-Strukturen
   ========================================================= */

@media (min-width: 571px) and (max-width: 900px) {

    /* Das eigentliche 3er Grid */
    .ablauf > .wp-block-columns {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
        align-items: stretch !important;
    }

    /*
     * Die zwei Gutenberg-Spalten auflösen.
     * Dadurch werden 01–06 direkt zu Grid-Elementen.
     */
    .ablauf > .wp-block-columns > .wp-block-column {
        display: contents !important;
    }

    /* Die einzelnen Ablauf-Karten */
    .ablauf
    > .wp-block-columns
    > .wp-block-column
    > .wp-block-group {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding: 1.5rem !important;

        box-sizing: border-box !important;

        background-color: #f8f4ef !important;
    }

    /* Überschriften sauber umbrechen */
    .ablauf
    > .wp-block-columns
    > .wp-block-column
    > .wp-block-group
    h3 {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: auto !important;

        line-height: 1.3 !important;
    }

    /* Text etwas kompakter für die 3er-Darstellung */
    .ablauf
    > .wp-block-columns
    > .wp-block-column
    > .wp-block-group
    p {
        overflow-wrap: break-word !important;
    }
}

/* =========================================================
   TABLET HEADER + NAVIGATION
   571px - 900px
   ========================================================= */

@media (min-width: 571px) and (max-width: 900px) {

    /* =====================================================
       HEADER
       ===================================================== */

    header .mobile-icon-header {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    header .wp-image-357 {
        width: 85px !important;
        height: auto !important;
        flex-shrink: 0 !important;
    }


    /* =====================================================
       HAMBURGER
       ===================================================== */

    header .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* Geschlossenes Desktop-Menü ausblenden */

    header
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }


    /* =====================================================
       GEÖFFNETES OVERLAY
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open {
        display: block !important;

        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        max-width: none !important;

        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #25292f !important;
        color: #ffffff !important;

        overflow-y: auto !important;

        z-index: 999999 !important;
    }


    /* =====================================================
       DIE ZWEI WORDPRESS-WRAPPER
       Entscheidend für das X
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-close {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       SCHLIESSEN X
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
        display: flex !important;

        position: absolute !important;

        top: 28px !important;
        right: 32px !important;
        left: auto !important;

        width: 40px !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;
        border: 0 !important;

        color: #ffffff !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 10 !important;

        cursor: pointer !important;
    }


    /* Originales WordPress-X */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close svg {
        display: block !important;

        width: 28px !important;
        height: 28px !important;

        margin: 0 !important;

        fill: currentColor !important;
        color: #ffffff !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close svg path {
        fill: #ffffff !important;
    }


    /* Falls von einem alten Versuch noch ::before existiert */

    header
    .wp-block-navigation__responsive-container-close::before,
    header
    .wp-block-navigation__responsive-container-close::after {
        content: none !important;
        display: none !important;
    }


    /* =====================================================
       MENÜINHALT
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        /*
         * Oben Platz für X,
         * links/rechts sauberer Tablet-Abstand
         */
        padding: 105px 48px 60px !important;

        box-sizing: border-box !important;

        text-align: left !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 20px !important;
    }


    /* =====================================================
       HAUPTMENÜPUNKTE
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        color: #ffffff !important;

        font-size: 1rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;

        text-decoration: none !important;

        text-align: left !important;
    }


    /* =====================================================
       LEISTUNGEN SUBMENU
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Pfeil auf Tablet brauchen wir nicht */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-icon {
        display: none !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        display: flex !important;

        position: static !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 12px 0 0 !important;
        padding: 0 0 0 24px !important;

        gap: 14px !important;

        background: transparent !important;
        border: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 1rem !important;

        text-align: left !important;
    }


    /* =====================================================
       AKTIVE SEITE
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content[aria-current="page"] {
        color: #d19a4c !important;
    }

}



/*///////////////////////////////////// TABLET ENDE /////////////////////////////////////*/


/*///////////////////////////////////// MOBILE START /////////////////////////////////////*/

/* =========================================================
   MOBILE BASIS
   bis 570px
   ========================================================= */

@media (max-width: 570px) {

    /* =====================================================
       GLOBAL
       ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    main,
    .wp-site-blocks {
        max-width: 100%;
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
        height: auto;
    }


    /* =====================================================
       WORDPRESS COLUMNS
       Auf Mobile grundsätzlich untereinander
       ===================================================== */

    main .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;

        width: 100% !important;

        gap: 24px !important;
    }

    main .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: 0 0 100% !important;
        flex-basis: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       GRUPPEN / CONTENT
       ===================================================== */

    main .wp-block-group {
        max-width: 100%;
        box-sizing: border-box;
    }


    /* =====================================================
       WEITERE LEISTUNGEN
       Auf Mobile immer eine Karte pro Reihe
       ===================================================== */

    .weitere-leistungen {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Gutenberg Grid Variante */

    .weitere-leistungen .is-layout-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 24px !important;
    }


    /* Custom HTML Variante */

    .weitere-leistungen
    > div
    > div[style*="grid-template-columns"] {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 24px !important;
    }


    /* Karten */

    .weitere-leistungen .leistungen-grid-hover {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* Bild */

    .weitere-leistungen .leistungen-grid-hover img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
    }


    /* Bereich unter Bild */

    .weitere-leistungen
    .leistungen-grid-hover
    > div:last-child {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 100% !important;

        padding: 16px 0 0 !important;

        gap: 8px !important;

        background: transparent !important;
        background-color: transparent !important;

        box-sizing: border-box !important;
    }


    /* Titel */

    .weitere-leistungen
    .leistungen-grid-hover
    > div:last-child
    h3 {
        width: 100% !important;

        margin: 0 !important;

        font-size: 17px !important;
        line-height: 1.3 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* Mehr erfahren */

    .weitere-leistungen
    .leistungen-grid-hover
    > div:last-child
    span {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        color: #c99b5a !important;

        font-size: 12px !important;
        line-height: 1.3 !important;

        white-space: normal !important;

        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* Gutenberg Karten ebenfalls ohne weiße Fläche */

    .weitere-leistungen
    .wp-block-group.is-layout-grid
    > .wp-block-group {
        background: transparent !important;
        background-color: transparent !important;
    }


    /* =====================================================
       BUTTONS
       ===================================================== */

    main .wp-block-buttons {
        max-width: 100% !important;
    }

    main .wp-block-button {
        max-width: 100% !important;
    }

    main .wp-block-button__link {
        box-sizing: border-box !important;

        max-width: 100% !important;

        white-space: normal !important;
    }


    /* =====================================================
       ABLAUF
       Mobile bewusst einspaltig
       ===================================================== */

    .ablauf .wp-block-columns {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px !important;
    }

    .ablauf .wp-block-column {
        display: contents !important;
    }

    .ablauf
    .wp-block-column
    > .wp-block-group {
        width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 !important;
    }

}

/* =========================================================
   MOBILE FINAL
   bis 570px
   ========================================================= */

@media (max-width: 570px) {


    /* =====================================================
       0. GLOBAL / OVERFLOW / ABSTÄNDE
       ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .wp-site-blocks,
    main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    main * {
        box-sizing: border-box;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /*
     * Globale Seitenränder auf Mobile.
     * Nicht zu eng, aber deutlich kompakter als Desktop.
     */
    body {
        --wp--style--root--padding-left: 20px !important;
        --wp--style--root--padding-right: 20px !important;
    }


    /* =====================================================
       1. HEADER
       ===================================================== */

    header .mobile-icon-header {
        width: 100% !important;

        padding: 12px 16px !important;

        gap: 10px !important;

        box-sizing: border-box !important;
    }


    /* Linker Branding-Bereich */

    header
    .mobile-icon-header
    > .wp-block-group:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;

        gap: 9px !important;
    }


    /* Siegel */

    header .wp-image-357 {
        width: 58px !important;
        min-width: 58px !important;

        height: auto !important;

        flex-shrink: 0 !important;
    }


    /* Malermeister Heuer */

    header
    .mobile-icon-header
    > .wp-block-group:first-child
    > .wp-block-group
    p:first-child {
        font-size: 14px !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    /* GmbH Kalenborn */

    header
    .mobile-icon-header
    > .wp-block-group:first-child
    > .wp-block-group
    p:last-child {
        font-size: 9px !important;
        line-height: 1.2 !important;

        letter-spacing: .12em !important;

        white-space: nowrap !important;
    }


    /* Telefonbutton */

    header
    .mobile-icon-header
    > .wp-block-group:last-child
    .wp-block-button__link {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;

        padding: 0 !important;

        overflow: hidden !important;

        font-size: 0 !important;
    }


    /*
     * Telefonnummer ausblenden,
     * Phone-Icon / vorhandene Darstellung bleibt bestehen.
     */
    header
    .mobile-icon-header
    > .wp-block-group:last-child {
        flex-shrink: 0 !important;
    }


    /* Hamburger */

    header .wp-block-navigation {
        flex-shrink: 0 !important;
        margin-left: 4px !important;
    }

    header .wp-block-navigation__responsive-container-open {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 36px !important;
        height: 44px !important;

        padding: 0 !important;
    }


    /* =====================================================
       2. MOBILE MENÜ
       ===================================================== */

    header
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open {
        display: block !important;

        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        max-width: none !important;

        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #25292f !important;
        color: #ffffff !important;

        overflow-y: auto !important;

        z-index: 999999 !important;
    }


    /*
     * WordPress Wrapper sauber zurücksetzen.
     */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-close {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* X */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
        display: flex !important;

        position: absolute !important;

        top: 22px !important;
        right: 22px !important;

        width: 38px !important;
        height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;
        border: 0 !important;

        color: #ffffff !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 20 !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close svg {
        display: block !important;

        width: 26px !important;
        height: 26px !important;

        fill: currentColor !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close svg path {
        fill: #ffffff !important;
    }


    /* Menüinhalt */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 85px 28px 50px !important;

        text-align: left !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 18px !important;
    }


    /* Hauptpunkte */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        color: #ffffff !important;

        font-size: 17px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;

        text-align: left !important;
        text-decoration: none !important;
    }


    /* Leistungen */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu {
        display: block !important;

        width: 100% !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-icon {
        display: none !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        display: flex !important;

        position: static !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 12px 0 0 !important;
        padding: 0 0 0 18px !important;

        gap: 12px !important;

        background: transparent !important;
        border: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
        padding: 0 !important;

        font-size: 16px !important;

        color: #ffffff !important;
    }


    /* =====================================================
       3. KENNZAHLEN
       Vertikale Streifen weg
       ===================================================== */

    main
    .wp-block-column[style*="border-right"] {
        border-right: 0 !important;
        border-right-width: 0 !important;
        border-right-style: none !important;
    }

    main
    [style*="border-right-color"] {
        border-right: 0 !important;
        border-right-width: 0 !important;
    }


    /* =====================================================
       4. GENERELLE COLUMNS
       Mobil grundsätzlich einspaltig
       ===================================================== */

    main .wp-block-columns {
        display: flex !important;

        flex-direction: column !important;
        flex-wrap: nowrap !important;

        width: 100% !important;

        gap: 24px !important;
    }


    main .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: 0 0 100% !important;
        flex-basis: 100% !important;

        margin: 0 !important;
    }


    /*
     * Gutenberg Grids ebenfalls einspaltig.
     * Dadurch werden u.a. Vorteils-Kacheln sauber.
     */

    main .wp-block-group.is-layout-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px !important;
    }


    /* =====================================================
       5. REFERENZEN / GALERIE
       eine Spalte
       ===================================================== */

    main .wp-block-gallery {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 16px !important;
    }


    main
    .wp-block-gallery.has-nested-images
    figure.wp-block-image {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
    }


    main
    .wp-block-gallery
    figure.wp-block-image
    img {
        display: block !important;

        width: 100% !important;

        aspect-ratio: 4 / 3 !important;

        object-fit: cover !important;
    }


    /* =====================================================
       6. KUNDENSTIMMEN
       eine Karte pro Reihe
       ===================================================== */

    .kundenstimmen .wp-block-columns,
    .kundenstimmen .is-layout-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px !important;
    }


    .kundenstimmen .wp-block-column,
    .kundenstimmen .wp-block-group {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /*
     * Bewertungs-Link sauber unter Überschrift
     */

    .kundenstimmen a[href*="google"],
    main a[href*="search.google.com"] {
        display: inline-flex !important;

        position: static !important;

        align-items: center !important;
        justify-content: flex-start !important;

        width: auto !important;

        margin: 12px 0 24px !important;

        gap: 8px !important;

        color: #d19a4c !important;

        white-space: normal !important;

        opacity: 1 !important;

        transform: none !important;
    }


    .kundenstimmen a[href*="google"] *,
    main a[href*="search.google.com"] * {
        color: inherit !important;
        fill: currentColor !important;

        opacity: 1 !important;
    }


    /* =====================================================
       7. KONTAKTFORMULAR
       Padding deutlich reduzieren
       ===================================================== */

    main form {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 22px 16px !important;

        box-sizing: border-box !important;
    }


    main form input,
    main form textarea,
    main form select {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /*
     * Direkter Formular-Wrapper
     */

    main .wp-block-group:has(> form),
    main .wp-block-html:has(> form) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    /* =====================================================
       8. MALERARBEITEN / LEISTUNGSSEITEN
       Einspaltig
       ===================================================== */

    /*
     * Zwei Columns mit Text + Leistungsumfang
     */

    main .wp-block-columns > .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
    }


    /*
     * Falls KI Custom-Grids verwendet:
     * auf Mobile ebenfalls eine Spalte.
     */

    main div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }


    /*
     * Keine feste Mindestbreite aus Custom HTML.
     */

    main [style*="min-width"] {
        min-width: 0 !important;
    }


    /* =====================================================
       9. ABLAUF
       01 - 06 sauber untereinander
       ===================================================== */

    .ablauf {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }


    .ablauf > .wp-block-columns,
    .ablauf .wp-block-columns {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 18px !important;

        width: 100% !important;
    }


    /*
     * Wichtig bei den Seiten, bei denen
     * 01-03 und 04-06 jeweils in einer
     * eigenen Gutenberg-Spalte liegen.
     */

    .ablauf
    > .wp-block-columns
    > .wp-block-column {
        display: contents !important;
    }


    .ablauf
    > .wp-block-columns
    > .wp-block-column
    > .wp-block-group {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 24px !important;

        box-sizing: border-box !important;

        background-color: #f8f4ef !important;
    }


    .ablauf h3 {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: auto !important;
    }


    /*
     * Falls Ablauf aus mehreren separaten
     * Columns-Blöcken besteht.
     */

    .ablauf .wp-block-columns + .wp-block-columns {
        margin-top: 18px !important;
    }


    /* =====================================================
       10. VORTEILE / KACHELBEREICHE
       Saubere Abstände + eine Spalte
       ===================================================== */

    main
    .wp-block-group.is-layout-grid
    > .wp-block-group {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
    }


    /*
     * Mehr Abstand zwischen Karten,
     * wenn sie innerhalb einer Column gestapelt sind.
     */

    main
    .wp-block-column
    > .wp-block-group
    + .wp-block-group {
        margin-top: 20px !important;
    }


    /*
     * Karten-Innenpadding nicht unnötig riesig.
     */

    main
    .wp-block-group.is-layout-grid
    > .wp-block-group[style*="padding"] {
        padding: 24px !important;
    }


    /* =====================================================
       11. WEITERE LEISTUNGEN
       Auf Mobile immer einspaltig
       ===================================================== */

    .weitere-leistungen {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Gutenberg Variante */

    .weitere-leistungen
    .wp-block-group.is-layout-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 24px !important;
    }


    .weitere-leistungen
    .wp-block-group.is-layout-grid
    > .wp-block-group {
        width: 100% !important;

        background: transparent !important;
        background-color: transparent !important;
    }


    /* Custom HTML Variante */

    .weitere-leistungen
    div[style*="grid-template-columns"] {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 24px !important;
    }


    .weitere-leistungen
    .leistungen-grid-hover {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    .weitere-leistungen
    .leistungen-grid-hover
    > div:first-child {
        width: 100% !important;
    }


    .weitere-leistungen
    .leistungen-grid-hover
    img {
        display: block !important;

        width: 100% !important;

        aspect-ratio: 4 / 3 !important;

        object-fit: cover !important;
    }


    .weitere-leistungen
    .leistungen-grid-hover
    > div:last-child {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        width: 100% !important;

        padding: 16px 0 0 !important;

        gap: 8px !important;

        background: transparent !important;
        background-color: transparent !important;
    }


    .weitere-leistungen
    .leistungen-grid-hover
    > div:last-child
    span {
        display: block !important;

        width: auto !important;

        color: #c99b5a !important;

        white-space: normal !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* Gutenberg Buttons */

    .weitere-leistungen .wp-block-buttons,
    .weitere-leistungen .wp-block-button {
        width: 100% !important;
    }


    .weitere-leistungen .wp-block-button__link {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        padding: 12px 16px !important;

        background: #d19a4c !important;

        color: #111111 !important;

        white-space: normal !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =====================================================
       12. GENERELLE SECTION ABSTÄNDE
       ===================================================== */

    main > .wp-block-group {
        box-sizing: border-box;
    }


    /*
     * Sehr große Desktop-Paddings wie 5rem
     * auf Mobile begrenzen.
     */

    main
    .wp-block-group[style*="padding-top:5rem"] {
        padding-top: 48px !important;
    }


    main
    .wp-block-group[style*="padding-bottom:5rem"] {
        padding-bottom: 48px !important;
    }


    /*
     * Überschriften nicht am Rand kleben lassen.
     */

    main h1,
    main h2 {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: auto;
    }

}

/* =========================================================
   MOBILE – FINAL PATCH
   bis 570px
   ========================================================= */

@media (max-width: 570px) {


    /* =====================================================
       1. MOBILE MENÜ KOMPLETT MITTIG
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        align-items: center !important;
        justify-content: flex-start !important;

        text-align: center !important;
    }

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        text-align: center !important;
    }


    /* Hauptlinks */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* Leistungen Button */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu__toggle {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* Untermenü ebenfalls mittig */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        align-items: center !important;

        width: 100% !important;

        margin: 12px 0 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        text-align: center !important;
    }


    /* =====================================================
       2. AKTIVE SEITE GOLD
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content.is-current-page,

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content[aria-current="page"],

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .current-menu-item
    > .wp-block-navigation-item__content {
        color: #d19a4c !important;
    }


    /* =====================================================
       3. GESTALTUNGSTECHNIKEN HERO
       Langes Wort nicht mehr trennen
       ===================================================== */

    .mobile-long-title {
        font-size: clamp(1.75rem, 7.5vw, 2rem) !important;

        line-height: 1.08 !important;

        hyphens: none !important;
        -webkit-hyphens: none !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* =====================================================
       4. KONTAKTFORMULAR KOMPAKTER
       ===================================================== */

    .kontaktformular {
        padding: 16px !important;

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* Falls im weißen Kasten noch ein Wrapper sitzt */

    .kontaktformular
    > .wp-block-group {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* Formular selbst */

    .kontaktformular form {
        width: 100% !important;

        margin: 0 !important;
        padding: 12px !important;

        box-sizing: border-box !important;
    }


    /* Felder etwas breiter nutzen */

    .kontaktformular input,
    .kontaktformular textarea,
    .kontaktformular select {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }

}

/* =========================================================
   MOBILE – FINAL PATCH
   bis 570px
   ========================================================= */

@media (max-width: 570px) {


    /* =====================================================
       1. MOBILE MENÜ KOMPLETT MITTIG
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        align-items: center !important;
        justify-content: flex-start !important;

        text-align: center !important;
    }

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        text-align: center !important;
    }


    /* Hauptlinks */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* Leistungen Button */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu__toggle {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* Untermenü ebenfalls mittig */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        align-items: center !important;

        width: 100% !important;

        margin: 12px 0 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        text-align: center !important;
    }


    /* =====================================================
       2. AKTIVE SEITE GOLD
       ===================================================== */

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content.is-current-page,

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content[aria-current="page"],

    header
    .wp-block-navigation__responsive-container.is-menu-open
    .current-menu-item
    > .wp-block-navigation-item__content {
        color: #d19a4c !important;
    }


    /* =====================================================
       3. GESTALTUNGSTECHNIKEN HERO
       Langes Wort nicht mehr trennen
       ===================================================== */

    .mobile-long-title {
        font-size: clamp(1.75rem, 7.5vw, 2rem) !important;

        line-height: 1.08 !important;

        hyphens: none !important;
        -webkit-hyphens: none !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* =====================================================
       4. KONTAKTFORMULAR KOMPAKTER
       ===================================================== */

    .kontaktformular {
        padding: 16px !important;

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* Falls im weißen Kasten noch ein Wrapper sitzt */

    .kontaktformular
    > .wp-block-group {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* Formular selbst */

    .kontaktformular form {
        width: 100% !important;

        margin: 0 !important;
        padding: 12px !important;

        box-sizing: border-box !important;
    }


    /* Felder etwas breiter nutzen */

    .kontaktformular input,
    .kontaktformular textarea,
    .kontaktformular select {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }

}

/* =========================================================
   MOBILE – LONG HEADLINES FIX
   ========================================================= */

@media (max-width: 570px) {

    main h1 {
        hyphens: none !important;
        -webkit-hyphens: none !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Hero-H1 etwas kleiner, damit lange Wörter reinpassen */
    main h1 {
        font-size: clamp(1.75rem, 8vw, 2.15rem) !important;
        line-height: 1.08 !important;
    }
}