/************************************************/
/* © by Werbeagentur Gössler & Sailer OG        */
/* www.goesslersailer.at                        */
/************************************************/
/* ==========================================================================
   NAVIGATION – MODERNES MEGA-MENÜ
   Helles Desktop-Dropdown, kompakt, dritte Ebene rechts als Liste
   \========================================================================== */

/* ==========================================================================
   BASIS & LAYOUT
   \========================================================================== */
.cbp-spmenu {
    background: var(--farbe-weiss);
    position: fixed;
    overflow: auto;
}
.cbp-spmenu h3 {
    font-size: 1.2rem;
    line-height: 1.35;
    padding: 20px;
    margin: 0;
    font-weight: 600;
}
.cbp-spmenu a {
    display: block;
    color: var(--farbe-weiss);
    font-size: 1.05rem;
    line-height: 1.4;
    font-weight: 700;
    width: auto;
}
.cbp-spmenu-vertical {
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 99;
}
.cbp-spmenu-right {
    right: -100%;
}
.cbp-header-left {
    right: 0%;
}
.cbp-spmenu-right.cbp-spmenu-open {
    right: 0;
}
.cbp-spmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}
.cbp-spmenu-push-toleft {
    left: -80%;
    overflow-y: hidden;
}
.cbp-header-toleft {
    width: 100%;
    left: auto;
    right: auto;
}
.cbp-header-top {
    left: 0;
    right: 0;
    top: 0;
    position: fixed;
    z-index: 1000;
    transition: transform 0.2s ease-in-out;
}
.cbp-header-top-push {
    left: auto;
    right: auto;
    width: 80%;
}
.header-height-dyn {
    background-color: var(--farbe-weiss);

}
.symb_last {
    right: 0;
    left: auto;
}
/* Transitions */
.cbp-spmenu,
.cbp-spmenu-push {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

/* 1. DESKTOP-NAVIGATION: über 992 px */
@media only screen and (width > 992px) {
    /* Desktop-Menü sichtbar, mobilen Menüschalter ausblenden. */
    #navicon { display: none !important; }

    .gs-navbar {
            /* Bezugspunkt für das Dropdown: Navigation innerhalb des Contents */
            position: relative;

        }
        .gs-navbar,
        .gs-navbar > ul {
            display: flex;
            align-items: stretch;
            justify-content: flex-end;
            gap: 0;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .gs-navbar *,
        .gs-navbar *::before,
        .gs-navbar *::after {
            box-sizing: border-box;
        }
        .gs-navbar li {
            position: relative;
            float: none;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* Die Hauptpunkte dürfen nicht der Bezugspunkt für das Dropdown sein. */
        .gs-navbar > li,
        .gs-navbar > ul > li,
        .gs-navbar > ul {
            position: static;
        }
        .gs-navbar a {
            text-decoration: none;
        }
        /* 1. Ebene – horizontale Shop-Navigation */
        .gs-navbar > li > a,
        .gs-navbar > ul > li > a {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: var(--nav-top-height);
            width: auto;
            padding: 0 clamp(0.55rem, calc(0.45rem + 0.45vw), 1rem);
            font-size: clamp(0.95rem, calc(0.88rem + 0.25vw), 1.05rem);
            line-height: 1.2;
            font-weight: 600;
            color: var(--farbe-schwarz);
            background-color: transparent;
            border-bottom: 2px solid transparent;
            transition: color 0.18s ease, border-color 0.18s ease;
        }
        .gs-navbar > li > a:hover,
        .gs-navbar > li > a:focus,
        .gs-navbar > li > a.aktuell,
        .gs-navbar > ul > li > a:hover,
        .gs-navbar > ul > li > a:focus,
        .gs-navbar > ul > li > a.aktuell {
            color: var(--farbe-gruen);
        }
        .gs-navbar a:focus-visible {
            outline: 3px solid var(--farbe-rot);
            outline-offset: -3px;
        }
        /* Alle Untermenüs werden ausschließlich durch .is-open eingeblendet. */
        .gs-navbar li ul {
            display: none;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* 2. Ebene – kompaktes Dropdown, kein breites Mega-Menü mehr */
        .gs-navbar > li > ul,
        .gs-navbar > ul > li > ul {
            /* JS richtet den Layer unter dem jeweiligen Hauptnavigationspunkt aus. */
            position: absolute;
            top: 100%;
            left: 0;
            right: auto;
            z-index: 1200;
            /* transform: translateX(-50%); */
            display: none;
            grid-template-columns: minmax(0, 1fr);
            grid-auto-rows: min-content;
            align-content: start;
            row-gap: 5px;
            width: calc(var(--shop-menu-sidebar) + var(--shop-menu-padding) * 2);
            min-height: 220px;
            max-height: min(90vh, 650px);
            padding: var(--shop-menu-padding);
            background-color: var(--farbe-weiss);
            border: 0;
            border-right: 1px solid var(--farbe-hell);
            border-radius: 0 0 0 var(--border-radius-mini);
            box-shadow: none;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin;
            scrollbar-color: var(--farbe-rahmen) var(--farbe-hell);
        }
        /* Eigener Scrollbalken: ausschließlich linke Kategorien (Desktop) */
        .gs-navbar > li > ul,
        .gs-navbar > ul > li > ul {
            scrollbar-width: thin;
            scrollbar-color: var(--farbe-rahmen) var(--farbe-hell);
            scrollbar-gutter: stable;
        }
        .gs-navbar > li > ul::-webkit-scrollbar,
        .gs-navbar > ul > li > ul::-webkit-scrollbar { width: 10px; }
        .gs-navbar > li > ul::-webkit-scrollbar-track,
        .gs-navbar > ul > li > ul::-webkit-scrollbar-track {
            background: var(--farbe-hell);
            border-radius: 10px;
        }
        .gs-navbar > li > ul::-webkit-scrollbar-thumb,
        .gs-navbar > ul > li > ul::-webkit-scrollbar-thumb {
            background: var(--farbe-rahmen);
            border-radius: 10px;
            border: 2px solid var(--farbe-hell);
        }
        .gs-navbar > li > ul::-webkit-scrollbar-thumb:hover,
        .gs-navbar > ul > li > ul::-webkit-scrollbar-thumb:hover { background: var(--farbe-gruen); }
        /* Kategorien links – LI nicht positionieren, damit Untermenüs
           (Ebene 3) am gesamten Dropdown ausgerichtet werden. */
        .gs-navbar > li > ul > li,
        .gs-navbar > ul > li > ul > li {
            position: static;
            grid-column: 1;
            min-width: 0;
        }
        .gs-navbar > li > ul > li > a,
        .gs-navbar > ul > li > ul > li > a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
            min-height: 41px;
            padding: 9px 11px;
            font-size: 0.91rem;
            line-height: 1.25;
            font-weight: 600;
            color: var(--farbe-schwarz);
            background-color: var(--farbe-hell);
            border: 0px solid var(--farbe-hell);
            border-radius: 5px;
            overflow-wrap: anywhere;
            transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
        }
        /* Pfeil nur wenn eine Unterkategorie vorhanden ist */
        .gs-navbar > li > ul > li:has(> ul) > a::after,
        .gs-navbar > ul > li > ul > li:has(> ul) > a::after {
            content: "›";
            flex: 0 0 auto;
            font-size: 1.2rem;
            line-height: 1;
            font-weight: 400;
        }
        .gs-navbar > li > ul > li > a:hover,
        .gs-navbar > li > ul > li > a:focus,
        .gs-navbar > ul > li > ul > li > a:hover,
        .gs-navbar > ul > li > ul > li > a:focus {
            color: var(--farbe-weiss);
            background-color: var(--farbe-violett);
            border-color: var(--farbe-violett);
        }
        .gs-navbar > li > ul > li > a.aktuell,
        .gs-navbar > ul > li > ul > li > a.aktuell {
            color: var(--farbe-weiss);
            background-color: var(--farbe-violett);
            border-color: var(--farbe-violett);
        }
        /* 3. Ebene – kompakte Linkliste rechts statt breiter Kachelansicht.
           Kein min-height oder bottom:0 – nur der tatsächlich benötigte Platz
           wird farblich hinterlegt. */
        .gs-navbar > li > ul > li > ul,
        .gs-navbar > ul > li > ul > li > ul {
            position: absolute;
            top: var(--shop-menu-padding);
            left: calc(var(--shop-menu-padding) + var(--shop-menu-sidebar) + var(--shop-menu-gap));
            right: var(--shop-menu-padding);
            bottom: auto;
            z-index: 2;
            width: auto;
            min-width: 0;
            max-height: min(65vh, 570px);
            display: none;
            flex-direction: column;
            gap: 0;
            padding: 46px 10px 10px;
            background-color: var(--farbe-hell);
            border: 0px solid var(--farbe-violett);
            border-radius: 8px;
            box-shadow: none;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .gs-navbar > li > ul > li > ul::before,
        .gs-navbar > ul > li > ul > li > ul::before {
            content: "Unterkategorien";
            position: absolute;
            top: 14px;
            left: 15px;
            right: 15px;
            padding-bottom: 9px;
            color: var(--farbe-schwarz);
            font-size: 0.98rem;
            line-height: 1.3;
            font-weight: 700;
            border-bottom: 1px solid var(--farbe-hell);
        }
        .gs-navbar > li > ul > li > ul > li,
        .gs-navbar > ul > li > ul > li > ul > li {
            position: static;
            flex: 0 0 auto;
            min-width: 0;
        }
        .gs-navbar > li > ul > li > ul > li > a,
        .gs-navbar > ul > li > ul > li > ul > li > a {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 36px;
            padding: 8px 9px;
            font-size: 0.9rem;
            line-height: 1.3;
            font-weight: 500;
            color: var(--farbe-schwarz);
            background-color: transparent;
            border: 0;
            border-radius: 4px;
            overflow-wrap: anywhere;
            transition: color 0.18s ease, background-color 0.18s ease;
        }
        .gs-navbar > li > ul > li > ul > li > a:hover,
        .gs-navbar > li > ul > li > ul > li > a:focus,
        .gs-navbar > ul > li > ul > li > ul > li > a:hover,
        .gs-navbar > ul > li > ul > li > ul > li > a:focus {
            color: var(--farbe-gruen);
            background-color: var(--farbe-hell);
        }
        .gs-navbar > li > ul > li > ul > li > a.aktuell,
        .gs-navbar > ul > li > ul > li > ul > li > a.aktuell {
            color: var(--farbe-gruen);
            background-color: var(--farbe-hell);
            font-weight: 700;
        }
        /* Bestehende Klicknavigation mit .is-open beibehalten */
        .gs-navbar > li.is-open > ul,
        .gs-navbar > ul > li.is-open > ul {
            display: grid !important;
        }
        .gs-navbar > li > ul > li.is-open > ul,
        .gs-navbar > ul > li > ul > li.is-open > ul {
            display: flex !important;
        }
        .gs-navbar > li.is-open > a,
        .gs-navbar > ul > li.is-open > a {
            color: var(--farbe-gruen);
            border-bottom-color: var(--farbe-gruen);
            /* font-weight: 700; */
        }
        .gs-navbar > li > ul > li.is-open > a,
        .gs-navbar > ul > li > ul > li.is-open > a {
            color: var(--farbe-weiss);
            background-color: var(--farbe-gruen);
            border-color: var(--farbe-gruen);
        }
        .gs-navbar > li > ul > li.is-open > a::after,
        .gs-navbar > ul > li > ul > li.is-open > a::after {
            transform: rotate(90deg);
        }
        /* Anfangszustand: erste Kategorie MIT Untermenü rechts anzeigen,
           auch wenn davor Kategorien ohne Untermenü stehen. */
        .gs-navbar > li.is-open > ul:not(:has(> li.is-open)) > li:nth-child(1 of li:has(> ul)) > ul,
        .gs-navbar > ul > li.is-open > ul:not(:has(> li.is-open)) > li:nth-child(1 of li:has(> ul)) > ul {
            display: flex !important;
        }
        .gs-navbar > li.is-open > ul:not(:has(> li.is-open)) > li:nth-child(1 of li:has(> ul)) > a,
        .gs-navbar > ul > li.is-open > ul:not(:has(> li.is-open)) > li:nth-child(1 of li:has(> ul)) > a {
            color: var(--farbe-weiss);
            background-color: var(--farbe-gruen);
            border-color: var(--farbe-gruen);
        }
        /* Desktop-Hover mit bestehenden Links; mobil unverändert */
        .gs-navbar.shop-main-hover-mode > li.is-open:not(.shop-main-hover-open) > ul,
        .gs-navbar.shop-main-hover-mode > ul > li.is-open:not(.shop-main-hover-open) > ul { display: none !important; }
        .gs-navbar > li.shop-main-hover-open > ul,
        .gs-navbar > ul > li.shop-main-hover-open > ul { display: grid !important; }
        .gs-navbar > li > ul.shop-hover-mode > li.is-open:not(.shop-hover-active) > a,
        .gs-navbar > ul > li > ul.shop-hover-mode > li.is-open:not(.shop-hover-active) > a {
            color: var(--farbe-schwarz);
            background: var(--farbe-hell);
            border-color: transparent;
        }
        .gs-navbar > li > ul > li.shop-hover-active > a,
        .gs-navbar > ul > li > ul > li.shop-hover-active > a {
            color: var(--farbe-weiss);
            background: var(--farbe-gruen);
        }
        /* Rechte Unterkategorien: eigenes Panel AUSSERHALB des scrollenden UL. */
        .gs-navbar.shop-submenu-enabled > li > ul > li > ul,
        .gs-navbar.shop-submenu-enabled > ul > li > ul > li > ul {
            display: none !important;
        }
        .gs-navbar .shop-submenu-panel {
            position: absolute;
            z-index: 1300;
            padding: 12px;
            color: var(--farbe-schwarz);
            background: var(--farbe-weiss);
            border-radius: 8px;
            box-sizing: border-box;
            overflow: visible;
            max-height: none;
        }
        /* Sehr lange Listen: zweite Scrollleiste nur als Notfall-Fallback. */
        .gs-navbar .shop-submenu-panel.shop-panel-overflow {
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior: contain;
        }
        .gs-navbar .shop-submenu-panel[hidden] { display: none !important; }
        .gs-navbar .shop-submenu-panel-title {
            padding: 2px 3px 10px;
            margin-bottom: 4px;
            font-size: 0.98rem;
            line-height: 1.3;
            font-weight: 700;
            border-bottom: 1px solid var(--farbe-hell);
        }
        .gs-navbar .shop-submenu-panel-content > ul {
            display: block;
            margin: 0;
            padding: 0;
            list-style: none;
            column-count: var(--shop-submenu-cols, 1);
            column-gap: var(--shop-submenu-column-gap, 18px);
            column-fill: balance;
        }
        .gs-navbar .shop-submenu-panel-content > ul > li { break-inside: avoid; }
        /* Weißer Gesamtlayer hinter dem unabhängig scrollenden linken Menü. */
        .gs-navbar .shop-dropdown-backdrop {
            position: absolute;
            z-index: 1190;
            background: var(--farbe-weiss);
            border-radius: 0 0 var(--border-radius-mini) var(--border-radius-mini);
            box-shadow: 0 16px 42px color-mix(in srgb, var(--farbe-schwarz) 14%, transparent);
            /* Mausbrücke zwischen Kategorien und Unterkategorien */
            pointer-events: auto;
        }
        .gs-navbar .shop-dropdown-backdrop[hidden] { display: none !important; }
        .gs-navbar .shop-submenu-panel-content li {
            display: block;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .gs-navbar .shop-submenu-panel-content a {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 36px;
            padding: 8px 9px;
            font-size: 0.9rem;
            line-height: 1.3;
            font-weight: 500;
            color: var(--farbe-schwarz);
            background: var(--farbe-hell);
            border-radius: 4px;
            box-sizing: border-box;
            overflow-wrap: anywhere;
            text-decoration: none;
            margin-bottom: 6px;
        }
        .gs-navbar .shop-submenu-panel-content a:hover,
        .gs-navbar .shop-submenu-panel-content a:focus {
            color: var(--farbe-weiss);
            background-color: var(--farbe-violett);
        }
        .gs-navbar .shop-submenu-panel-content a.aktuell {
            color: var(--farbe-weiss);
            background-color: var(--farbe-violett);
        }
    /* 4. Ebene unter dem jeweiligen Punkt der 3. Ebene anzeigen.
       Die vorhandene Öffnungslogik der Ebenen 1–3 bleibt bestehen. */
    .gs-navbar > li > ul > li > ul > li > ul,
    .gs-navbar > ul > li > ul > li > ul > li > ul,
    .gs-navbar .shop-submenu-panel-content > ul > li > ul {
        display: block;
        position: static;
        width: auto;
        min-width: 0;
        max-height: none;
        margin: 0 0 10px 10px;
        padding: 0 0 0 12px;
        border-left: 2px solid var(--farbe-rahmen);
        list-style: none;
        overflow: visible;
    }

    .gs-navbar > li > ul > li > ul > li > ul > li,
    .gs-navbar > ul > li > ul > li > ul > li > ul > li,
    .gs-navbar .shop-submenu-panel-content > ul > li > ul > li {
        float: none;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .gs-navbar > li > ul > li > ul > li > ul > li > a,
    .gs-navbar > ul > li > ul > li > ul > li > ul > li > a,
    .gs-navbar .shop-submenu-panel-content > ul > li > ul > li > a {
        display: block;
        width: 100%;
        min-height: 32px;
        padding: 7px 9px;
        font-size: 0.85rem;
        line-height: 1.35;
        font-weight: 400;
        color: var(--farbe-text);
        background: transparent;
        border: 0;
        border-radius: 4px;
        overflow-wrap: anywhere;
    }

    .gs-navbar > li > ul > li > ul > li > ul > li > a:is(:hover, :focus-visible, .aktuell),
    .gs-navbar > ul > li > ul > li > ul > li > ul > li > a:is(:hover, :focus-visible, .aktuell),
    .gs-navbar .shop-submenu-panel-content > ul > li > ul > li > a:is(:hover, :focus-visible, .aktuell) {
        color: var(--farbe-weiss);
        background: var(--farbe-violett);
    }
}

/* 2. MOBILE NAVIGATION: bis einschließlich 992 px */
@media only screen and (max-width: 992px) {
    /* Ein gemeinsamer Umschaltpunkt für Desktop-Menü und Menüschalter. */
    #navicon { display: block !important; }

    #navimobil,
        #navimobil ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #navimobil *,
        #navimobil *::before,
        #navimobil *::after {
            box-sizing: border-box;
        }
        #navimobil {
            background-color: var(--farbe-weiss);
        }
        #navimobil li {
            position: relative;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* ----------------------------------------------------------------------
           WICHTIG: alle Unterebenen standardmäßig schließen
           ---------------------------------------------------------------------- */
        #navimobil li ul {
            display: none;
            position: relative;
            margin: 0;
            padding: 0;
            background-color: transparent;
        }
        /*
           Geöffnete Zustände.
           Diese Klassen decken typische JS-Varianten ab.
           Falls dein JS beim Plus-Klick inline display:block setzt,
           funktioniert das ebenfalls.
        */
        #navimobil li.open > ul,
        #navimobil li.opened > ul,
        #navimobil li.active > ul,
        #navimobil li.aktiv > ul,
        #navimobil li.auf > ul,
        #navimobil li.is-open > ul,
        #navimobil li.current-menu-open > ul,
        #navimobil li > ul[style*="display: block"],
        #navimobil li > ul[style*="display:block"] {
            display: block;
        }
        /*
           Mobile Hover-Logik komplett neutralisieren.
           Hover darf mobil nichts öffnen oder schließen.
           Dadurch verschwindet das Wackeln.
        */
        #navimobil li:hover > ul {
            display: none;
        }
        #navimobil li.open:hover > ul,
        #navimobil li.opened:hover > ul,
        #navimobil li.active:hover > ul,
        #navimobil li.aktiv:hover > ul,
        #navimobil li.auf:hover > ul,
        #navimobil li.is-open:hover > ul,
        #navimobil li.current-menu-open:hover > ul,
        #navimobil li:hover > ul[style*="display: block"],
        #navimobil li:hover > ul[style*="display:block"] {
            display: block;
        }
        /* ----------------------------------------------------------------------
           Plus / Aufklapp-Symbol
           ---------------------------------------------------------------------- */
        #navimobil li div,
        #navimobil li ul div,
        #navimobil li ul li ul div {
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--nav-mobile-target);
            min-height: var(--nav-mobile-target);
            padding: 0;
            margin: 0;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 5;
            background-color: transparent;
            color: var(--farbe-gruen);
            text-align: center;
            cursor: pointer;
            font-size: 1.35rem;
            line-height: 1;
            font-weight: 600;
            border-left: 1px solid color-mix(in srgb, var(--farbe-schwarz) 8%, transparent);
            transition:
                color 0.15s ease,
                background-color 0.15s ease;
        }
        #navimobil li div:hover,
        #navimobil li div:focus,
        #navimobil li div:focus-visible {
            color: var(--farbe-weiss);
            background-color: var(--farbe-gruen);
        }
        #navimobil div:focus-visible {
            outline: 3px solid var(--farbe-rot);
            outline-offset: -3px;
        }
        /* ----------------------------------------------------------------------
           Mobile – alle Links Grundstil
           ---------------------------------------------------------------------- */
        #navimobil a {
            display: flex;
            align-items: center;
            min-height: var(--nav-mobile-target);
            padding: 0.95rem 3.6rem 0.95rem 1rem;
            font-size: var(--nav-font-mobile);
            line-height: var(--nav-line-height-mobile);
            font-weight: 850;
            text-decoration: none;
            text-transform: none;
            color: var(--farbe-gruen);
            background-color: var(--farbe-weiss);
            border-top: 1px solid color-mix(in srgb, var(--farbe-schwarz) 12%, transparent);
            width: auto;
            white-space: normal;
            overflow: visible;
            overflow-wrap: anywhere;
            transform: none;
            transition:
                color 0.15s ease,
                background-color 0.15s ease;
        }
        #navimobil a:hover,
        #navimobil a:focus,
        #navimobil a:focus-visible {
            color: var(--farbe-weiss);
            background-color: var(--farbe-gruen);
            transform: none;
        }
        #navimobil a:focus-visible {
            outline: 3px solid var(--farbe-rot);
            outline-offset: -3px;
        }
        #navimobil a.aktuell,
        #navimobil a.aktuell_symb2 {
            color: var(--farbe-weiss);
            font-weight: 600;
            background-color: var(--farbe-gruen);
        }
        /* ----------------------------------------------------------------------
           Mobile – 1. Ebene
           ---------------------------------------------------------------------- */
        #navimobil > li > a,
        #navimobil > ul > li > a {
            padding-left: 1rem;
            font-size: var(--nav-font-mobile);
            font-weight: 600;
            color: var(--farbe-schwarz);
            background-color: var(--farbe-weiss);
        }
    /* ----------------------------------------------------------------------
       Mobile – 2. Ebene
       ---------------------------------------------------------------------- */
        #navimobil li ul a {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            padding-left: 2rem;
            padding-right: 3.6rem;
            font-size: var(--nav-font-mobile-sub);
            font-weight: 600;
            color: var(--farbe-gruen);
            background-color: var(--farbe-hell);
            border-top: 1px solid var(--farbe-weiss);
        }
        /* Pfeil nur bei Punkten, die eine weitere Unterebene haben */
        #navimobil li ul li:has(> ul) > a::before {
            content: "\f105"; /* FontAwesome angle-right */
            font-family: "Font Awesome 6 Pro";
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.1em;
            min-width: 1.1em;
            font-size: 0.95em;
            line-height: 1;
            color: currentColor;
            transition: transform 0.18s ease;
        }
        /* Wenn der Punkt geöffnet ist: Pfeil nach unten drehen */
        #navimobil li ul li.open > a::before,
        #navimobil li ul li.opened > a::before,
        #navimobil li ul li.active > a::before,
        #navimobil li ul li.aktiv > a::before,
        #navimobil li ul li.auf > a::before,
        #navimobil li ul li.is-open > a::before,
        #navimobil li ul li.current-menu-open > a::before,
        #navimobil li ul li:has(> ul[style*="display: block"]) > a::before,
        #navimobil li ul li:has(> ul[style*="display:block"]) > a::before {
            transform: rotate(90deg);
        }
        /* ----------------------------------------------------------------------
           Mobile – 3. Ebene
           ---------------------------------------------------------------------- */
        #navimobil li ul li ul a {
            padding-left: 3rem;
            font-size: var(--nav-font-mobile-sub);
            font-weight: normal;
            color: var(--farbe-gruen);
            background-color: var(--farbe-hell);
            border-top: 1px solid var(--farbe-weiss);
        }
        /* ----------------------------------------------------------------------
           Mobile – 4. Ebene, falls vorhanden
           ---------------------------------------------------------------------- */
        #navimobil li ul li ul li ul a {
            padding-left: 2.5rem;
            background-color: var(--farbe-rahmen);
        }
        
        /* ----------------------------------------------------------------------
           Geöffnete Hauptpunkte optisch markieren
           ---------------------------------------------------------------------- */
        #navimobil li.open > a,
        #navimobil li.opened > a,
        #navimobil li.active > a,
        #navimobil li.aktiv > a,
        #navimobil li.auf > a,
        #navimobil li.is-open > a,
        #navimobil li.current-menu-open > a {
            color: var(--farbe-weiss);
            background-color: var(--farbe-gruen);
        }
        #navimobil li.open > div,
        #navimobil li.opened > div,
        #navimobil li.active > div,
        #navimobil li.aktiv > div,
        #navimobil li.auf > div,
        #navimobil li.is-open > div,
        #navimobil li.current-menu-open > div {
            color: var(--farbe-weiss);
            background-color: var(--farbe-gruen);
        }
        /* ----------------------------------------------------------------------
           Mobile Header
           ---------------------------------------------------------------------- */
        .gs-navbar {
            float: none;
        }
        .gs-navbar ul {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .gs-navbar li ul li ul {
            left: 0;
            top: 0;
        }
        .header-height-dyn {

        }
        .close-mn {
        display: inline-block!important;
        padding: 20px 0!important;
        text-align: center!important;
        background-color: var(--farbe-gruen)!important;
        color: var(--farbe-weiss)!important;
        border: 0px!important;
        font-size: 100%!important;
        width: 100%!important;
        }
        .close-mn a:hover {
            background-color: var(--farbe-weiss)!important;
            color: var(--farbe-violett)!important;
            border: 0px!important;
        }
    .nav-header-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 20px 0 50px 0;
        padding: 0 12px;
    }
    .nav-header-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 0;
        padding: 20px 10px!important;
        background-color: var(--farbe-violett)!important;
        color: var(--farbe-weiss)!important;
        border: none!important;
        border-radius: var(--border-radius-mini);
        text-align: center!important;
        text-decoration: none;
        text-transform: none;
        font-weight: normal!important;
        font-size: 90%!important;
        line-height: 1.4;
        box-sizing: border-box;
        transition: background-color 0.2s ease,
                    transform 0.2s ease;
    }
    .nav-header-box i {
        font-size: 170%!important;
        line-height: 1;
    }
    .nav-header-box span {
        display: block;
        overflow-wrap: anywhere;
    }
}

/* 3. BARRIEREFREIHEIT: reduzierte Bewegung (alle Bildschirmgrößen) */
@media only screen and (prefers-reduced-motion: reduce) {
    .cbp-spmenu,
        .cbp-spmenu-push,
        .cbp-header-top,
        .gs-navbar a,
        #navimobil a,
        #navimobil li div {
            transition: none;
        }
}