/*
 * RealLeaf — Header / Navigation (S1-05, v1 konservativ)
 *
 * Zweck: Tokenbasierte Abloesung des fragilen Inline-Blocks
 * #realleaf-header-responsive-polish (functions.php:102-482) und Portierung
 * des Prototyp-Looks (design/prototype/assets/styles.css Header-Block,
 * shop-ui.css Header-Refinements) auf die LIVE-Selektoren des
 * Elementor-Headers 26902. Der Elementor-Header bleibt strukturell bestehen,
 * es wird ausschliesslich gestylt (Selektoren-Whitelist beachtet, Markup tabu).
 *
 * Mapping ID-Regel (Polish-Block) -> neue stabile Regel:
 *   plans/s1-design/evidenz/s1-05-id-mapping.md
 * Live-Markup verifiziert am 2026-06-10 (curl realleaf.de, Template 26902,
 * uploads/elementor/css/post-26902.css).
 *
 * Stabile Selektor-Anker statt generierter Elementor-IDs:
 *   - Desktop-Container:  .e-con.e-parent.elementor-hidden-mobile   (sichtbar >=768)
 *   - Mobil-Container:    .e-con.e-parent.elementor-hidden-desktop  (sichtbar <=767,
 *                         traegt zusaetzlich .elementor-hidden-tablet)
 *   - Bauteile via Widget-Typ-Klassen + :has()-Anker (Whitelist-Klassen
 *     .wc-ai-search-*, .cart-toggle-button-wrapper, #cart-toggle-button,
 *     .cart-total-badge werden NUR gestylt, nie umbenannt).
 *
 * !important nur dort, wo Elementor-/Plugin-CSS nachweislich nur so
 * ueberstimmt wird (jeder Fall im Mapping-Dokument begruendet):
 *   (a) Header-Hintergrund bei Sticky: Elementor-Custom-CSS setzt
 *       ".elementor-26902 .elementor-element.elementor-element-7772262
 *       .elementor-sticky--effects { background:#fff !important }"
 *       (post-26902.css, identisch fuer 5148f7b) = (0,4,0)+!important und
 *       laedt NACH header.css. Gleiche Spezifitaet + beidseitig !important
 *       => Quellreihenfolge gewinnt, d. h. !important allein reicht NICHT.
 *       Der Gewinn kommt aus der Sticky-Regel mit (0,5,0) (Sektion 1),
 *       die !important-UND-hoehere-Spezifitaet kombiniert.
 *   (b) transition-property: Sticky-Custom-CSS setzt eine transition-Shorthand
 *       mit hoeherer Spezifitaet (0,4,0)
 *   (c) .wc-ai-search-input width/padding: Plugin-Inline-<style> (Body, laedt
 *       nach header.css) setzt width/padding mit !important
 *   (d) .wc-ai-search-panel transform/animation: Plugin-Keyframes + Inline-Style
 *       im Body (Lade-Reihenfolge), identisch zum bisherigen Polish-Block
 *
 * Theme-Faehigkeit: ausschliesslich semantische Tokens aus tokens.css;
 * [data-theme="dark"] wird NICHT nachgebaut (Tokens schalten automatisch).
 * Einzige dark-gescopte Ausnahmen: Bitmap-/SVG-<img>-Icons des Live-Markups
 * (Logo, Popup-Icon), die nicht ueber currentColor themebar sind -> filter,
 * siehe Sektion 10 und Mapping-Dokument.
 */

/* ============================================================
   1. HEADER-GRUNDFLAECHE
   ersetzt Polish: z-index-Block (FN:108-111), transition-property
   (FN:118-121), Desktop-min-height (FN:174-177), Tap-Highlight (FN:113-116)
   ============================================================ */

.elementor-location-header {
    position: relative;
    z-index: 110;
}

/* Nur Flaechen-Eigenschaften animieren - verhindert Layout-/Transform-
   Transitions aus Elementor-Sticky-Custom-CSS (Begruendung b im Kopf) */
.elementor-location-header,
.elementor-location-header .elementor-element {
    transition-property: background, border, box-shadow !important;
}

/* Header-Flaeche: Prototyp styles.css:89 (.header) - leicht transparente
   Surface + Blur, Token-Border unten. Dieser Selektor hat (0,4,0) und
   deckt nur den Nicht-Sticky-Zustand zuverlaessig ab; den Sticky-Fall
   gewinnt erst die (0,5,0)-Regel darunter (Begruendung a im Kopf). */
.elementor-location-header .e-con-full.e-con.e-parent {
    background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    transition: background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

/* Sticky aktiv: dezenter Schatten wie Prototyp .header.is-compact
   (shop-ui.css:10) UND der eigentliche Sticky-Background-Override:
   Elementor-Custom-CSS "…elementor-sticky--effects{background:#fff !important}"
   (post-26902.css, (0,4,0)+!important) laedt live NACH header.css - bei
   gleicher Spezifitaet wuerde es per Quellreihenfolge gewinnen. Dieser
   Selektor hat (0,5,0) und schlaegt es daher unabhaengig von der
   Ladereihenfolge (Begruendung a im Kopf). */
.elementor-location-header .e-con-full.e-con.e-parent.elementor-sticky--effects {
    background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
    box-shadow: var(--shadow);
}

.elementor-location-header .wc-ai-search-open,
.elementor-location-header .wc-ai-search-submit {
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
    .elementor-location-header {
        min-height: 86px;
    }
}

/* ============================================================
   2. DESKTOP-LAYOUT >=768px
   ersetzt Polish: Grid 7772262 (FN:179-189, 287-292), Logo-Spalte 90d1f72
   (FN:191-195), Mittelbereich a708877 (FN:197-202), Cluster 55826c1
   (FN:212-221, 293-297) inkl. Order-Regeln e3bfe66/8468e89/5ad0e94/8b14cd6
   (FN:230-244) und Such-Spalte 43e5da7 (FN:223-228, 299-302).
   BUGFIX 768-1200px: alle Spalten via minmax(0,...) shrinkbar, Suche
   flexibel - kein horizontaler Overflow des Cart-Toggles mehr (Polish
   forderte minimal ~886px und lief 768-885px aus dem Viewport).
   ============================================================ */

@media (min-width: 768px) {

    /* 3-Spalten-Grid: Logo | Nav | Aktions-Cluster.
       Elementor-Padding (--padding-left/right 30px <=1024 bzw. 50px >1024,
       post-26902.css) bleibt erhalten. */
    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        column-gap: 22px;
        width: 100%;
        max-width: 100vw;
        height: 86px;
        min-height: 86px;
        align-items: center;
    }

    /* Logo-Spalte (einzige Spalte mit direktem Image-Widget) */
    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile > .e-con.e-child:has(> .elementor-widget-image) {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        justify-self: start;
    }

    /* Mittelbereich mit Nav-Menue-Widget */
    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile > .e-con.e-child:has(.elementor-widget-nav-menu) {
        grid-column: 2;
        width: auto;
        min-width: 0;
        --content-width: 100%;
        justify-self: start;
        align-self: center;
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .elementor-widget-nav-menu {
        min-width: 0;
    }

    /* Rechter Aktions-Cluster (Anker: Cart-Toggle).
       Flex statt Grid: display:none-Elemente (B2B-Button fuer eingeloggte,
       Account-Widget fuer Gaeste, post-26902.css Custom-CSS) erzeugen so
       keine leeren Tracks/Doppel-Gaps. */
    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile > .e-con.e-child:has(.cart-toggle-button-wrapper) {
        grid-column: 3;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        column-gap: 12px;
        width: auto;
        max-width: 100%;
        min-width: 0;
    }

    /* Visuelle Reihenfolge wie bisher: Suche | Sprache | B2B/Account | Cart.
       Default-Regel bewusst via :where() auf (0,4,0) ent-spezifiziert:
       die Overrides darunter (Suche (0,6,0), Sprache (0,6,1), Cart (0,6,0),
       1200px-flex-basis (0,6,0)) muessen sie per Spezifitaet schlagen -
       ohne :where laege sie bei (0,8,0) und wuerde ALLE Overrides
       ueberstimmen (alle Kinder order:3, Suche ohne flex-grow).
       (0,4,0) reicht gegen die externen Konkurrenten: Elementor-Core
       konsumiert order/flex-* auf .elementor-element (0,1,0), post-26902.css
       setzt nur Custom-Props/width per ID-Klasse (0,1,0)-(0,3,0)
       [frontend.min.css + post-26902.css live verifiziert 2026-06-10]. */
    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile > :where(.e-con.e-child:has(.cart-toggle-button-wrapper)) > :where(.elementor-element) {
        order: 3;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Suche: zentriert im freien Raum zwischen Nav (links) und DE/EN-Cluster
       (rechts). margin-inline:auto absorbiert den Freiraum beidseitig. */
    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .elementor-widget-shortcode:has(.wc-ai-search-widget) {
        order: 1;
        flex: 0 1 auto;
        min-width: 160px;
        max-width: 420px;
        width: 100%;
        margin-inline: auto;
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .elementor-widget-shortcode:has(.elementor-shortcode > strong) {
        order: 2;
    }

    /* Cart-Widget: Elementor-Breite 22.559% (post-26902.css) auf
       Inhaltsbreite normalisieren, damit die Spalte shrinken kann */
    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .elementor-widget-shortcode:has(.cart-toggle-button-wrapper) {
        order: 4;
        width: auto;
        max-width: none;
    }

    /* Zwischen-Breakpoint: ab 1025px ist die Haupt-Nav sichtbar
       (Elementor nav-menu--dropdown-tablet schaltet <=1024 auf Burger) */
    @media (min-width: 1025px) {
        .elementor-location-header .e-con.e-parent.elementor-hidden-mobile {
            grid-template-columns: auto auto minmax(0, 1fr);
        }
    }

    /* Volle Desktop-Breite */
    @media (min-width: 1200px) {
        .elementor-location-header .e-con.e-parent.elementor-hidden-mobile {
            grid-template-columns: auto auto minmax(0, 1fr);
        }

        .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .elementor-widget-shortcode:has(.wc-ai-search-widget) {
            max-width: 480px;
        }
    }
}

/* ============================================================
   3. NAVIGATION
   ersetzt Polish: 45bcf4a nowrap (FN:204-210); zusaetzlich Prototyp-Look
   (styles.css:92-94 Unterstrich-Hover) statt Elementor-Grow-Pointer.
   Dropdown-/Sub-Menu-Optik nach .megamenu/.mega-tile-Referenz
   (shop-ui.css:51-58). Live-Menue hat aktuell KEINE Sub-Items
   (curl 2026-06-10) - Regeln sind vorwaertskompatibel fuer Menue-Inhalte.
   ============================================================ */

.elementor-location-header .elementor-widget-nav-menu ul.elementor-nav-menu {
    flex-wrap: nowrap;
}

/* Hauptnav-Items: Tokens + Unterstrich-Hover (Prototyp .nav a) -
   Selektor-Tiefe noetig, um post-26902.css (Lato 18px, #7E7E7E) zu schlagen */
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.elementor-nav-menu a.elementor-item {
    position: relative;
    color: var(--text);
    fill: var(--text);
    font-family: var(--body);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.elementor-nav-menu a.elementor-item::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 100%;
    bottom: 2px;
    height: 2px;
    background: var(--accent);
    transition: right 0.22s var(--ease);
}

.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.elementor-nav-menu a.elementor-item:hover,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.elementor-nav-menu a.elementor-item:focus,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.elementor-nav-menu a.elementor-item.elementor-item-active,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.elementor-nav-menu a.elementor-item.highlighted {
    color: var(--accent-hover);
    fill: var(--accent-hover);
    transform: none;
}

.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.elementor-nav-menu a.elementor-item:hover::after,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.elementor-nav-menu a.elementor-item.elementor-item-active::after {
    right: 11px;
}

/* Sub-Menue-Flaeche (Dropdown im Hauptmenue) im Megamenu-Referenz-Look */
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.sub-menu {
    background: var(--surface-3);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    overflow: hidden;
}

.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.sub-menu a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item {
    color: var(--text);
    fill: var(--text);
    font-family: var(--body);
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 9px;
    background: transparent;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.sub-menu a.elementor-item:hover,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:hover,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.sub-menu a.elementor-item-active {
    background: var(--accent-soft);
    color: var(--accent-hover);
}

/* Sub-Menu-Items brauchen keinen Unterstrich-Effekt */
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main ul.sub-menu a.elementor-item::after {
    content: none;
}

/* Burger-Dropdown (Tablet 768-1024): gleiche Flaechen-Optik.
   Selektor schlaegt post-26902.css Hintergrund (0,4,0) */
.elementor-location-header .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background: var(--surface-3);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.elementor-location-header .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown ul.elementor-nav-menu a.elementor-item {
    color: var(--text);
    fill: var(--text);
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
}

.elementor-location-header .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown ul.elementor-nav-menu a.elementor-item:hover,
.elementor-location-header .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown ul.elementor-nav-menu a.elementor-item:focus,
.elementor-location-header .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown ul.elementor-nav-menu a.elementor-item.elementor-item-active {
    color: var(--accent-hover);
    background-color: var(--accent-soft);
}

/* Burger-Toggle als icon-btn (Prototyp .burger, shop-ui.css:15-17) */
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: var(--text);
    background: transparent;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

/* Hover-Farbe: (0,5,1) noetig gegen post-26902.css
   ".elementor-26902 .elementor-element.elementor-element-45bcf4a
    .elementor-menu-toggle:hover" (0,5,0) */
.elementor-location-header .e-con .elementor-widget-nav-menu div.elementor-menu-toggle:hover,
.elementor-location-header .e-con .elementor-widget-nav-menu div.elementor-menu-toggle:focus {
    background: var(--surface-3);
    color: var(--accent-hover);
    fill: var(--accent-hover);
}

/* ============================================================
   4. KI-SUCHE (NUR Styling - Plugin-Markup/-JS tabu)
   ersetzt Polish: Desktop-Such-Overrides in 43e5da7 (FN:246-285).
   Statisches, immer offenes Panel als Pill (Prototyp .wc-ai-search-form,
   shop-ui.css:25-29), Hartwerte #fff/#e2e8df -> Tokens.
   ============================================================ */

@media (min-width: 768px) {

    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .wc-ai-search-widget,
    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .wc-ai-search-form {
        display: block;
        width: 100%;
        position: static;
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .wc-ai-search-open {
        display: none;
    }

    /* Panel statisch + Pill-Form; transform/animation-!important:
       Begruendung d im Kopf (Plugin-Inline-Style im Body + Keyframes) */
    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .wc-ai-search-panel {
        position: static;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        height: 38px;
        transform: none !important;
        animation: none !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 8px;
        border: 1.5px solid var(--border);
        border-radius: var(--r-pill);
        background: var(--surface-3);
        box-shadow: none;
        transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .wc-ai-search-panel:focus-within {
        border-color: var(--accent);
        box-shadow: var(--focus-ring);
    }

    /* width/padding-!important: Plugin-Inline-Style setzt beides mit
       !important (Begruendung c im Kopf) */
    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .wc-ai-search-input {
        width: 100% !important;
        min-width: 0;
        height: 30px;
        padding: 4px 6px !important;
        font-family: var(--body);
        font-size: 15px;
        font-weight: 500;
        color: var(--text);
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-mobile .wc-ai-search-submit {
        flex: 0 0 34px;
        width: 34px;
        height: 28px;
    }
}

/* Gemeinsame Such-Optik (Desktop + Mobile-Header) */
.elementor-location-header .wc-ai-search-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.elementor-location-header .wc-ai-search-submit {
    position: relative;
    color: var(--text-muted);
    border-radius: var(--r-pill);
    transition: color var(--dur-fast) var(--ease);
}

.elementor-location-header .wc-ai-search-submit:hover,
.elementor-location-header .wc-ai-search-submit:focus {
    color: var(--accent-hover);
}

/* Lupe themefaehig: Plugin-<img> visuell durch currentColor-Mask ersetzen
   (Markup bleibt unangetastet; ohne mask-Support bleibt das Original-<img>) */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {

    .elementor-location-header .wc-ai-search-submit img {
        opacity: 0;
    }

    .elementor-location-header .wc-ai-search-submit::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 18px;
        height: 18px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
        pointer-events: none;
    }
}

/* ============================================================
   5. CART-TOGGLE (#cart-toggle-button, .cart-total-badge: nur stylen,
   JS bindet die ID - mini-cart.js:1229)
   ersetzt Polish: FN:123-172. Masse identisch zum Polish-Block uebernommen
   (Badge zeigt die EUR-SUMME, Breite daher inhaltsgetrieben + nowrap).
   Farben/Radius kommen tokenbasiert aus mini-cart.css (S1-04).
   KEIN floatender FAB.
   ============================================================ */

.elementor-location-header .cart-toggle-button-wrapper {
    box-sizing: border-box;
    display: inline-flex;
    width: 44px;
    height: 40px;
    min-width: 44px;
    align-items: center;
    justify-content: flex-end;
    vertical-align: middle;
}

.elementor-location-header .cart-toggle-button {
    box-sizing: border-box;
    display: flex;
    width: 44px;
    height: 40px;
    min-width: 44px;
    align-items: center;
    justify-content: flex-end;
    transform: none;
    transition: none;
}

.elementor-location-header .cart-total-badge {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 21px;
    height: 13px;
    line-height: 13px;
    padding: 0 5px;
    margin-right: -7px;
    white-space: nowrap;
}

.elementor-location-header .cart-icon-wrapper {
    box-sizing: border-box;
    display: flex;
    width: 30px;
    height: 40px;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.elementor-location-header .cart-icon-wrapper svg {
    display: block;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

/* ============================================================
   6. SPRACHUMSCHALTER
   Live-Markup (curl 2026-06-10): "<a href=…/en/>EN</a> | <strong>DE</strong>"
   (EN invertiert) - KEIN wpml-ls-*. Anker = direktes <strong>-Kind (DE+EN),
   NICHT a[href]: eingeloggt rendert [user_greeting] ein direktes <a>-Kind
   und bekaeme sonst die Pill-Optik (S5-08, plans/s5-qa/BACKLOG.md).
   Prototyp-Look (shop-ui.css:62-64); "|"-Trenner via font-size:0 versteckt.
   ============================================================ */

.elementor-location-header .elementor-widget-shortcode .elementor-shortcode:has(> strong) {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--surface-3);
    border: 1.5px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 0;
    line-height: 1;
}

.elementor-location-header .elementor-widget-shortcode .elementor-shortcode:has(> strong) > a,
.elementor-location-header .elementor-widget-shortcode .elementor-shortcode:has(> strong) > strong {
    display: inline-block;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 9px;
    border-radius: var(--r-pill);
    text-decoration: none;
}

.elementor-location-header .elementor-widget-shortcode .elementor-shortcode:has(> strong) > a {
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.elementor-location-header .elementor-widget-shortcode .elementor-shortcode:has(> strong) > a:hover,
.elementor-location-header .elementor-widget-shortcode .elementor-shortcode:has(> strong) > a:focus {
    color: var(--text);
    background: var(--accent-soft);
}

.elementor-location-header .elementor-widget-shortcode .elementor-shortcode:has(> strong) > strong {
    background: var(--accent);
    color: var(--accent-contrast);
}

/* ============================================================
   7. B2B-BUTTON (Elementor-Button-Widget im Header)
   Kein Polish-Pendant; Tokenisierung der hartkodierten Button-Farben
   aus post-26902.css (#709D2F). Sichtbarkeitslogik (eingeloggt/Gast)
   bleibt im Elementor-Custom-CSS und wird nicht angefasst.
   ============================================================ */

/* --- Task #24: Header-"B2B Partner"-Button ausgeblendet ---
   Der B2B-Wegweiser lebt jetzt als Side-Tab + Slide-out-Panel
   (functions.php realleaf_b2b_slideout, assets/css/b2b-slideout.css,
   assets/js/b2b-slideout.js). Das Elementor-Button-Widget bleibt in der
   DB (Header 26902: Desktop-Widget 8468e89, Mobil-Widget 3483327) und
   wird hier NUR versteckt - so kann die Hauptschleife es spaeter sauber
   aus dem Widget-Baum loeschen, ohne dass sich am Frontend etwas aendert.
   display:none deckt Desktop + Mobil ab (es ist das einzige Button-Widget
   in der Header-Location). !important, weil Elementors Responsive-Display-
   Utilities (inline / .elementor-hidden-*) sonst gleich-/hoeher-spezifisch
   gewinnen wuerden. Die Token-/Farbregeln unten bleiben als Rollback-
   Sicherheit stehen (greifen erst wieder, wenn diese Regel entfaellt). */
.elementor-location-header .elementor-widget-button {
    display: none !important;
}

/* Selektor-Tiefe (0,4,1) schlaegt post-26902.css (0,4,0):
   .elementor-26902 .elementor-element.elementor-element-8468e89 .elementor-button */
.elementor-location-header .elementor-widget-button .elementor-button-wrapper a.elementor-button {
    background-color: var(--accent);
    color: var(--accent-contrast);
    fill: var(--accent-contrast);
    font-family: var(--body);
    font-weight: 700;
    border-radius: var(--r-md);
    transition: background var(--dur-fast) var(--ease);
}

.elementor-location-header .elementor-widget-button .elementor-button-wrapper a.elementor-button:hover,
.elementor-location-header .elementor-widget-button .elementor-button-wrapper a.elementor-button:focus {
    background-color: var(--accent-hover);
    color: var(--accent-contrast);
}

/* ============================================================
   8. THEME-TOGGLE (Markup-Vertrag der functions.php-Zelle:
   <button type="button" class="rl-theme-toggle" data-rl-theme-toggle
     aria-label="…"><span class="rl-theme-toggle__icon" aria-hidden="true">
   </span></button>, via wp_body_open als direktes body-Kind.
   theme-switch.js bedient [data-rl-theme-toggle] bereits per Delegation.)
   Optik: Prototyp .icon-btn (styles.css:97-98). Position fixed am
   Header-Aktionsbereich, kollisionsfrei 360-1920px (unterhalb der
   Header-Kante, rechts). z-index 112 > Header (110), < Mini-Cart-Drawer
   (99998/99999) und < Elementor-Popups.
   ============================================================ */

/* "button."-Praefix noetig: Parent-Theme style.min.css setzt
   "button { color:#c36 }" (0,1,0) und laedt NACH header.css -
   gleiche Spezifitaet wuerde per Quellreihenfolge verlieren. */
button.rl-theme-toggle {
    position: fixed;
    z-index: 112;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface-3);
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

button.rl-theme-toggle:hover,
button.rl-theme-toggle:focus-visible {
    border-color: var(--outline);
    background: var(--surface-3);
    color: var(--accent-hover);
}

button.rl-theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (min-width: 768px) {
    .rl-theme-toggle {
        top: calc(86px + 14px);
        right: 16px;
    }
}

@media (max-width: 767px) {
    /* Mobil uebernimmt der Dark-Toggle im Mobile-Menue
       (button.rl-mm__moon[data-rl-theme-toggle], rl-mobile-menu.php:198).
       Der fixe Button ist redundant und ueberlagerte den Seiteninhalt
       (H2-Kollision). theme-switch.js delegiert an [data-rl-theme-toggle]
       und bleibt unveraendert.
       Selektor MIT Typ (button.): die Basisregel button.rl-theme-toggle
       (header.css:631) setzt display:grid mit (0,1,1); ein blosses
       .rl-theme-toggle (0,1,0) wuerde display NICHT ueberschreiben. */
    button.rl-theme-toggle {
        display: none;
    }
}

/* Icon Sonne/Mond via CSS-Mask (data-URI-SVG), Farbe = currentColor:
   :root (Light) zeigt MOND (= wechselt zu dunkel),
   [data-theme="dark"] zeigt SONNE (= wechselt zu hell). Keine Texte. */
.rl-theme-toggle__icon {
    --rl-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z'/%3E%3C/svg%3E");
    --rl-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='black'/%3E%3Cg stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1'/%3E%3C/g%3E%3C/svg%3E");
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--rl-icon-moon) center / contain no-repeat;
    mask: var(--rl-icon-moon) center / contain no-repeat;
}

[data-theme="dark"] .rl-theme-toggle__icon {
    -webkit-mask-image: var(--rl-icon-sun);
    mask-image: var(--rl-icon-sun);
}

/* ============================================================
   9. MOBILE-HEADER <=767px
   ersetzt Polish: Hoehen (FN:306-310), Container 5148f7b (FN:312-327),
   Zeilen 47f6050/cba1241 (FN:329-353), Zellen bbde9d3/3bd5eeb/333021d/
   3483327/9b0701e/823c3b8/1bc6e76 (FN:355-392), mobile Suche (FN:394-442).
   Live-Zuordnung (curl 2026-06-10):
   Zeile 1 = Popup-Icon (oeffnet 27843) | Logo | B2B/Account,
   Zeile 2 = Sprache | Suche | Cart.
   ============================================================ */

@media (max-width: 767px) {

    .elementor-location-header {
        height: 116px;
        min-height: 116px;
    }

    /* Mobil-Container (sichtbar nur <=767): Elementor-Negativ-Margin -5%
       neutralisieren, kompakte Paddings wie Polish */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop {
        box-sizing: border-box;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        height: 116px;
        min-height: 116px;
        overflow: visible;
        --width: 100%;
        --margin-bottom: 0px;
        --padding-top: 5px;
        --padding-right: 10px;
        --padding-bottom: 5px;
        --padding-left: 10px;
    }

    /* Zeile 1 (Anker: Image-Widgets) + Zeile 2 (Anker: Suche) */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop > .e-con.e-child {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: grid;
        align-items: center;
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop > .e-con.e-child:has(.elementor-widget-image) {
        grid-template-columns: 48px minmax(128px, 1fr) minmax(72px, auto);
        column-gap: 8px;
        min-height: 52px;
        --padding-top: 0px;
        --padding-right: 10px;
        --padding-bottom: 0px;
        --padding-left: 10px;
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop > .e-con.e-child:has(.wc-ai-search-widget) {
        grid-template-columns: auto minmax(0, 1fr) 44px;
        column-gap: 8px;
        min-height: 44px;
    }

    /* Zeile 1, Zelle 1: Icon-Link (oeffnet Elementor-Popup 27843) */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .elementor-widget-image:has(a[href*="elementor-action"]) {
        grid-column: 1;
        justify-self: start;
        width: 32px;
        height: 32px;
    }

    /* Zeile 1, Zelle 2: Logo */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .elementor-widget-image:not(:has(a[href*="elementor-action"])) {
        grid-column: 2;
        justify-self: center;
        width: min(170px, 42vw);
        max-width: min(170px, 42vw);
    }

    /* Logo-Bild darf unter 170px shrinken (post-26902.css fixiert 170px) */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .elementor-widget-image:not(:has(a[href*="elementor-action"])) img {
        width: 100%;
        max-width: 170px;
        height: auto;
    }

    /* Zeile 1, Zelle 3: B2B-Button (Gast) bzw. Account-Shortcode (eingeloggt,
       Sichtbarkeit via Elementor-Custom-CSS) */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop > .e-con.e-child:has(.elementor-widget-image) .elementor-widget-shortcode,
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop > .e-con.e-child:has(.elementor-widget-image) .elementor-widget-button {
        grid-column: 3;
        justify-self: end;
        width: auto;
        max-width: 100%;
    }

    /* Zeile 2, Zelle 1: Sprachumschalter */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .elementor-widget-shortcode:has(.elementor-shortcode > strong) {
        grid-column: 1;
        justify-self: start;
    }

    /* Zeile 2, Zelle 2: Suche (volle Restbreite) */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .elementor-widget-shortcode:has(.wc-ai-search-widget) {
        grid-column: 2;
        justify-self: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Zeile 2, Zelle 3: Cart-Toggle */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .elementor-widget-shortcode:has(.cart-toggle-button-wrapper) {
        grid-column: 3;
        justify-self: end;
        width: auto;
        max-width: none;
    }

    /* Elementor-Post-CSS (post-26902.css) setzt im selben Breakpoint
           .elementor-26902 .elementor-element-823c3b8 > .elementor-widget-container
           { margin: 0 0 0 calc(100vw - 200px) }
       - ein Altlast-Hack, der das Such-Icon nach rechts schob. Bei 390px sind
       das 190px linker Rand; der Auto-Breiten-Container blieb dadurch
       214 - 190 = 24px breit, das Eingabefeld 12px, und der 34px-Submit lief
       aus dem Panel auf den Cart-Pill (elementsFromPoint lieferte dort das
       Cart-Badge -> ein Tap auf "Suchen" oeffnete den Warenkorb).
       Wir neutralisieren NUR den Rand; die Breite ergibt sich dann von selbst
       aus der Grid-Zelle (214px). KEIN width erzwingen - das wuerde den Rand
       stehen lassen und die Zelle ueber den Viewport schieben (Horizontal-
       Scroll, live verifiziert). Spezifitaet (0,7,0) schlaegt die
       Elementor-Regel (0,4,0), daher kein !important noetig.
       :has()-Anker + `>` halten die Regel exakt auf der Such-Zelle -
       Sprachumschalter (Zelle 1) und Cart-Toggle (Zelle 3) liegen in
       derselben Grid-Zeile und duerfen NICHT verschoben werden. */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop
        .elementor-widget-shortcode:has(.wc-ai-search-widget) > .elementor-widget-container {
        margin-left: 0;
    }

    /* Mobile Suche: statisches, offenes Pill-Panel (Polish FN:394-442,
       Hartwerte #fff/#e2e8df -> Tokens; !important-Begruendungen c+d) */
    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .wc-ai-search-widget {
        position: static;
        display: block;
        width: 100%;
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .wc-ai-search-open {
        display: none;
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .wc-ai-search-form {
        display: block;
        width: 100%;
        height: auto;
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .wc-ai-search-panel {
        position: static;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        max-width: none;
        height: 36px;
        transform: none !important;
        animation: none !important;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        z-index: auto;
        padding: 4px 8px;
        border: 1.5px solid var(--border);
        border-radius: var(--r-pill);
        background: var(--surface-3);
        box-shadow: none;
        transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .wc-ai-search-panel:focus-within {
        border-color: var(--accent);
        box-shadow: var(--focus-ring);
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .wc-ai-search-input {
        width: 100% !important;
        min-width: 0;
        height: 28px;
        font-size: 14px;
        padding: 4px 6px !important;
        font-family: var(--body);
        color: var(--text);
    }

    .elementor-location-header .e-con.e-parent.elementor-hidden-desktop .wc-ai-search-submit {
        flex: 0 0 34px;
        width: 34px;
        height: 28px;
    }
}

/* ============================================================
   10. DARK-THEME-KORREKTUREN fuer nicht-tokenisierbare <img>-Assets
   (Live-Markup liefert farbige SVG-<img>: Logo LOGO2.svg, Popup-Icon
   Icon-3.svg). CSS-only-Fallback bis zum echten Logo-Swap
   (rl:theme-Event, separater Schritt). Bewusste, dokumentierte Ausnahme
   von der "nur Tokens"-Regel - siehe Mapping-Dokument.
   ============================================================ */

[data-theme="dark"] .elementor-location-header .elementor-widget-image img {
    filter: brightness(0) invert(1);
}

/* ============================================================
   ANHANG (gehoert thematisch zu Sektion 4, KI-Suche):
   Ergebnis-Dropdown (.wc-ai-search-results/.wc-ai-search-result,
   Prototyp shop-ui.css:31-42) existiert live NICHT - am 2026-06-10 im
   Headless-Browser verifiziert (Zelle ai-search-results-styling):
   Plugin wc-ai-search-expander 2.0.0 (live byte-identisch zum Snapshot)
   expandiert per AJAX wc_ai_expand nur den Suchbegriff (String) und
   navigiert dann via form.submit() zur Suchergebnis-SEITE
   /?s=...&post_type=product (custom-archive-Template, li.product-card,
   bereits gestylt durch product-cards.css/S1-03). MutationObserver beim
   Live-Suchlauf ("tabak"): 0 Ergebnis-Knoten im Header-DOM. Es gibt
   KEINE Live-Klassen zum Mappen -> bewusst kein totes CSS aufgenommen
   (waere Wirkbeleg-loses CSS). Beleg + Methode:
   plans/s1-design/evidenz/s1-05-id-mapping.md, Abschnitt 6.
   ============================================================ */

/* ============================================================
   11. LAUFBAND / TICKER (Prototyp styles.css .ticker) - 2026-06-15
   Markup via functions.php realleaf_ticker_bar() auf wp_body_open,
   steht VOR dem Elementor-Header (scrollt weg, Header bleibt sticky).
   Dark-Anchor (rl-black), Loop ueber 2x-Inhalt + translateX(-50%).
   ============================================================ */
.rl-ticker { background: var(--rl-black); color: var(--on-dark); overflow: hidden; }
.rl-ticker__track {
    display: flex; width: max-content; padding: 8px 0;
    animation: rl-ticker 34s linear infinite;
    font-family: var(--display); font-weight: 700; font-size: 13px;
    letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.rl-ticker__track span { display: inline-flex; align-items: center; padding: 0 18px; }
/* WP3: Trenner ist jetzt das Blatt-Glyph (rl_icon_leaf_glyph) statt 🌿-Emoji. */
.rl-ticker__track i { font-style: normal; padding: 0; color: var(--accent-bright); display: inline-flex; align-items: center; }
.rl-ticker__track i svg { width: 13px; height: 13px; }
@keyframes rl-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rl-ticker__track { animation: none; } }

/* ============================================================
   12. SEITENBREITE: Header-Inhalt auf --maxw zentrieren (2026-06-15,
   Content-Breiten-System 2026-07-07)
   Der Header-Bar bleibt full-width (Hintergrund/Blur/Border auf dem
   e-con-full-Element), aber der Inhalt (Logo|Nav|Aktionen) richtet sich
   an der Body-Breite (.rl-wrap = var(--maxw) = min(85vw, 2000px)) aus:
   gleiche linke/rechte Kante. Padding = (100vw - maxw)/2 + --rl-gutter,
   min --rl-gutter. Faellt automatisch auf Full-Bleed zurueck, sobald
   maxw >= 100vw (< 1280px vw).
   ============================================================ */
@media (min-width: 768px) {
    .elementor-location-header .e-con-full.e-con.e-parent.elementor-hidden-mobile {
        padding-left: max(var(--rl-gutter), calc((100vw - var(--maxw)) / 2 + var(--rl-gutter)));
        padding-right: max(var(--rl-gutter), calc((100vw - var(--maxw)) / 2 + var(--rl-gutter)));
    }
}

/* ============================================================
   13. SHOP-MEGAMENUE (Desktop, JS-getriggert via assets/js/megamenu.js)
   Panel-Markup aus functions.php realleaf_shop_megamenu(); full-width
   Dropdown unter der Header-Bar (top via JS gesetzt). Auf Desktop ersetzt
   es das Elementor-Shop-Submenu (unten ausgeblendet); mobil = Burger-Subitems.
   ============================================================ */
.rl-megamenu {
    position: fixed; left: 0; right: 0; z-index: 105;
    background: var(--surface-3); border-bottom: 1.5px solid var(--outline);
    box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rl-megamenu.is-open { opacity: 1; transform: none; }
.rl-megamenu__inner { padding: 26px 30px 30px; max-width: var(--maxw); margin-inline: auto; box-sizing: border-box; }
.rl-megamenu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 28px; }
.rl-mm-tile { display: flex; gap: 14px; align-items: center; padding: 13px 16px; border-radius: var(--r-md); transition: background var(--dur-fast) var(--ease); }
.rl-mm-tile:hover { background: var(--accent-soft); }
/* WP3: Kacheln tragen jetzt das kuratierte Marken-Icon je Kategorie.
   Der frueher hier gezeichnete Kreis (border + background) entfaellt -
   die Marken-Icons bringen ihren eigenen Ring mit, sonst Ring-im-Ring. */
.rl-mm-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--accent); }
.rl-mm-ico .rl-ico { --rl-ico-size: 40px; }
/* Dark: gleicher Override wie .rl-value__ico (home.css) - bei 40px ist der
   ~2%-Strich 0,8 CSS-px, --accent waere auf dunklem Grund ausgewaschen. */
[data-theme="dark"] .rl-mm-ico { color: var(--accent-bright); }
.rl-mm-txt b { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.rl-mm-txt i { font-style: normal; font-size: 13px; color: var(--text-muted); }
.rl-mm-neu { font-family: var(--body); font-weight: 800; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; background: var(--accent-bright); color: var(--rl-black); border-radius: var(--r-pill); padding: 2px 8px; }
.rl-megamenu__all { display: inline-block; margin-top: 16px; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--accent); }
.rl-megamenu__all:hover { color: var(--accent-hover); }
@media (max-width: 1024px) { .rl-megamenu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .rl-megamenu { transition: none; } }

/* ============================================================
   13. MOBILE-MEGAMENUE (Burger): Shop-Kategorien standardmaessig
   ausgeklappt (2026-06-15). Das Desktop-Panel #rl-megamenu ist <=1024
   aus (Sektion 12); mobil rendert das Elementor-Burger-Dropdown die
   Shop-Submenu-Items - die zeigen wir dauerhaft offen statt hinter dem
   Toggle-Pfeil. display per CSS (kein Inline-Style am Submenu).
   ============================================================ */
/* Das mobile Burger-Menue ist Elementor-Popup 27843 (Nav-Widget auf
   main-nav-de). Dort die Shop-Kategorien dauerhaft ausklappen + Toggle-Pfeil
   aus. Der .elementor-location-header-Zweig deckt zusaetzlich das (unbenutzte)
   inline-Dropdown ab - harmlos. */
.elementor-popup-modal ul.sub-menu,
.elementor-location-header nav.elementor-nav-menu--dropdown ul.sub-menu {
    display: block !important;
}

.elementor-popup-modal .elementor-nav-menu .sub-arrow,
.elementor-location-header nav.elementor-nav-menu--dropdown .sub-arrow {
    display: none !important;
}

.elementor-popup-modal ul.sub-menu a.elementor-sub-item,
.elementor-location-header nav.elementor-nav-menu--dropdown ul.sub-menu a.elementor-sub-item {
    padding-left: 28px;
    font-size: 14px;
    opacity: 0.92;
}

/* ============================================================
   14. BURGER-POPUP 27843 als VOLLBILD-MENUE (mobil/tablet).
   Die Elementor-Konfig (314x616 oben rechts) wird per Modal-ID auf
   Vollbild ueberschrieben (!important noetig gegen post-27843.css-Masse).
   Token-Hintergrund + grosse, tap-freundliche Items.
   ============================================================ */
@media (max-width: 1024px) {
    #elementor-popup-modal-27843 .dialog-widget-content {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        background: var(--surface) !important;
    }

    /* Inneres Elementor-Dokument: komfortables Padding, Inhalt oben */
    #elementor-popup-modal-27843 .elementor,
    #elementor-popup-modal-27843 .elementor > .e-con,
    #elementor-popup-modal-27843 .elementor .elementor-section-wrap {
        padding-left: 22px;
        padding-right: 22px;
    }

    /* Top-Level-Items gross + tap-freundlich, Token-Trennlinien */
    #elementor-popup-modal-27843 nav ul.elementor-nav-menu > li > a.elementor-item {
        font-size: 21px !important;
        font-family: var(--display);
        font-weight: 700;
        padding-top: 17px !important;
        padding-bottom: 17px !important;
        color: var(--text) !important;
        border-bottom: 1px solid var(--border);
    }

    /* Kategorien (Sub-Items): Leaf-Icon (wie Desktop-Panel) + eingerueckt */
    #elementor-popup-modal-27843 ul.sub-menu a.elementor-sub-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px !important;
        padding: 10px 0 10px 14px !important;
        color: var(--text) !important;
        border-bottom: 0 !important;
        opacity: 0.92;
    }

    #elementor-popup-modal-27843 ul.sub-menu a.elementor-sub-item::before {
        content: "";
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23709c2f' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M51 11C30 16 15 31 15 50c19-2 36-17 36-39Z'/%3E%3C/svg%3E");
    }

    /* Nav + Listen volle Breite (statt 186px-Flyout-Box) */
    #elementor-popup-modal-27843 nav.elementor-nav-menu--main,
    #elementor-popup-modal-27843 nav.elementor-nav-menu--main > ul.elementor-nav-menu {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Kategorien IN DEN FLUSS statt Flyout (position:absolute) -> kein Overlap,
       Sub-Items stehen unter "Shop" und schieben die folgenden Punkte nach unten */
    #elementor-popup-modal-27843 ul.sub-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* (Sicherheits-)Ausblenden der sekundaeren Dropdown-Nav im Popup */
    #elementor-popup-modal-27843 nav.elementor-nav-menu--dropdown {
        display: none !important;
    }
}

/* Shop-Nav: Dropdown-Caret; Elementor-eigenes Shop-Submenu auf Desktop aus
   (custom Panel ersetzt es - Mobil/Burger zeigt die Subitems weiter). */
.elementor-location-header .elementor-nav-menu a.elementor-item[href$="/shop/"]::after { content: " \25BE"; font-size: .7em; opacity: .7; }
@media (min-width: 1025px) {
    .elementor-location-header .elementor-nav-menu .sub-menu { display: none !important; }
}

/* ---------------------------------------------------------------------------
 * Doppel-Header-Fix (2026-07-01)
 * Eine generische Header-Regel
 *   .elementor-location-header .e-con.e-parent.elementor-hidden-mobile{display:grid}
 * (Spezifizitaet 0,4,0) zwingt JEDE hidden-mobile-Container-Reihe im Header am
 * Desktop/Tablet auf display:grid und ueberschreibt damit deren
 * .elementor-hidden-desktop/-tablet. Folge: die Alt-/Leftover-Kopfzeile
 * (elementor-element-df37d45, in den Elementor-Daten auf hidden-desktop+tablet
 * +mobile geflaggt) rendert am Desktop -> zweite, gestapelte Kopfzeile.
 *
 * Fix: hidden-desktop/-tablet fuer Header-Container an der passenden Breite
 * re-assertieren, mit Spezifizitaet > 0,4,0 (fuehrendes body), damit es die
 * Grid-Regel sicher schlaegt. Nicht auf df37d45 hartkodiert -> robust. Die echte
 * Mobile-Kopfzeile (hidden-desktop+tablet, OHNE hidden-mobile) bleibt auf Mobil
 * unberuehrt, da diese Regeln dort nicht greifen.
*/

/* Roast R3: Elementor-Blog-Templates bleiben bis zum Redesign bestehen,
   nutzen aber wieder die Marken-Headline und einen robust opaken Mobile-Header. */
body.blog :is(h1, h2, h3, .elementor-heading-title),
body.single-post :is(h1, h2, h3, .elementor-heading-title) {
    font-family: var(--display) !important;
    font-weight: 800 !important;
}

body.blog h1,
body.single-post h1 {
    font-weight: 900 !important;
}

/* W12: Dark-Umschalter bis zum geplanten Blog-Template-Redesign ausblenden. */
body.blog button[data-rl-theme-toggle],
body.single-post button[data-rl-theme-toggle] {
    display: none !important;
}

@media (max-width: 767px) {
    body.blog .elementor-location-header .e-con-full.e-con.e-parent.elementor-element-5148f7b,
    body.single-post .elementor-location-header .e-con-full.e-con.e-parent.elementor-element-5148f7b,
    body.blog .elementor-location-header .e-con-full.e-con.e-parent.elementor-element-5148f7b.elementor-sticky--effects,
    body.single-post .elementor-location-header .e-con-full.e-con.e-parent.elementor-element-5148f7b.elementor-sticky--effects {
        background: var(--surface) !important;
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        body.blog .elementor-location-header .e-con-full.e-con.e-parent.elementor-element-5148f7b,
        body.single-post .elementor-location-header .e-con-full.e-con.e-parent.elementor-element-5148f7b {
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }
    }
}
@media (min-width: 1025px) {
    body .elementor-location-header .e-con.e-parent.elementor-hidden-desktop {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    body .elementor-location-header .e-con.e-parent.elementor-hidden-tablet {
        display: none !important;
    }
}

/* =====================================================================
   15. POPUP-BRANDING (Finalisierung 2026-07-20, Audit agents/10 §2.3+§3)
   a) Elementor-Default-Close (Pink/Magenta) des Burger-Popups 27843 auf
      Markenfarben - einzige Fremdfarbe im gesamten Auftritt.
   b) Age-Gate 16690: erster Kontaktpunkt JEDER Session wirkte wie ein
      generisches Consent-Modal - Karte bekommt Blattschatten-Textur
      (Asset 30183, wie Ueber-uns-CTA), Brand-Radius und gruen gefuehrte
      Buttons. NUR Optik; Logik/Verhalten des Popups unveraendert.
   ===================================================================== */
#elementor-popup-modal-27843 .dialog-close-button,
#elementor-popup-modal-27843 .dialog-close-button:hover,
#elementor-popup-modal-27843 .dialog-close-button:focus {
    color: var(--text) !important;
    background: var(--surface-3) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}
#elementor-popup-modal-27843 .dialog-close-button svg,
#elementor-popup-modal-27843 .dialog-close-button i {
    fill: var(--text) !important;
    color: var(--text) !important;
}

#elementor-popup-modal-16690 .dialog-widget-content {
    background-color: var(--surface) !important;
    background-image: url('https://realleaf.de/wp-content/uploads/2026/07/real-leaf-hintergrund-blattschatten-beige.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1.5px solid var(--outline) !important;
    border-radius: var(--r-lg, 22px) !important;
    box-shadow: var(--shadow-md) !important;
}
/* Buttons im Age-Gate: JA fuehrt gruen, NEIN als ruhige Outline -
   Browser-Default-Focusring (orange) durch Token-Focusring ersetzt. */
#elementor-popup-modal-16690 .elementor-button:focus,
#elementor-popup-modal-16690 .elementor-button:focus-visible {
    outline: none !important;
    box-shadow: var(--focus-ring) !important;
}
[data-theme="dark"] #elementor-popup-modal-16690 .dialog-widget-content {
    background-color: var(--surface) !important;
    background-blend-mode: multiply;
}