/* FARBAUDIT 21.08.2026 (Sitzung FARBEN, Auftrag Yunus "farbliche Uebereinstimmung"): verbotene Flaechentoene auf die Systemflaeche #f6f5f3 gezogen. Aenderungen unten je Datei benannt; Rueckbau ueber .bak-farbaudit-20260821. Struktur/Selektoren unberuehrt. */
/* Geaendert:
   #fbfafc -> #f6f5f3  (nav-mobile-footer) — HINFAELLIG: HEADER hat die Deklaration am
     21.08. ganz entfernt, weil sie wirkungslos war (custom.css:1573 setzt
     #0b0b0c !important). Hier nur noch als Historie, nicht mehr suchen.
   #f4f2f5 -> #f6f5f3  (Footer-Vollbreitbaender (Newsletter + Trust))
   #faf9fb -> #f6f5f3  (Geschmacksfinder-CTA inaktiv)
*/
/* ============================================================================
   FS-REDESIGN — Menü + Landingpage (Handoff 19.08.2026)
   ----------------------------------------------------------------------------
   EINZIGE Datei für das neue Design. Alles Neue steht hier, nichts in
   custom.css. Damit ist "was gehört zum Redesign" jederzeit eine Datei.

   Ladereihenfolge (template.xml): myclean.css → custom.css → fs-redesign.css
   ACHTUNG: menuefilter.css wird von custom.js NACHTRÄGLICH geladen und
   gewinnt deshalb bei gleicher Spezifität. Ihre Selektoren sind einfache
   Klassen (0-1-0). Wir scopen unter .dropdown-menu (0-2-0) und gewinnen
   sauber — ohne !important.

   REGELN
   - Kein Link wird gesetzt, entfernt oder umgehängt.
   - Kein itemprop/itemtype geht verloren, keine Überschriftenebene ändert sich.
   - Aktive Zustände NIE nur über Farbe (Nutzer ist farbenblind):
     immer zusätzlich Unterstreichung, Haken, Form oder aria-*.
   - Eng scopen. Keine globalen Regeln auf h1-h6, a, button, img.
   - Spezifität statt !important.
   ============================================================================ */


/* ============================================================================
   A — DESKTOP-MEGA-MENÜ
   Referenz: 01_images/08_reference_desktop_mega_menu.png
   ----------------------------------------------------------------------------
   Ist-Zustand: menuefilter.css setzt ab "Dunkle Fassung" ein schwarzes Panel
   (#0b0b0c) mit Neonrahmen. Die freigegebene Richtung ist ein WEISSES,
   ruhiges Panel mit feinen Linien.

   Der Hebel: menuefilter.css definiert seine Farben als CSS-Variablen auf
   .mm-wrapper. Wir definieren dieselben Variablen mit höherer Spezifität neu —
   damit rethemet sich das gesamte Menü, ohne dass wir Dutzende Einzelregeln
   duplizieren müssen.
   ============================================================================ */

.dropdown-menu .mm-wrapper {
    /* Farbwelt: nahezu Schwarz + Weiß, Magenta nur als präziser Akzent */
    --mf-akzent:        #e5169f;   /* echte Shop-Magenta (= SALE-Farbe) */
    --mf-akzent-dunkel: var(--brand-ruhig);
    --mf-akzent-hell:   #fdf4fa;   /* Hover-Fläche, sehr zurückhaltend */
    --mf-akzent-hell2:  #f7e6f3;
    --mf-treffer:       var(--brand-ruhig);   /* Suchtreffer-Hervorhebung */
    --mf-text:          #111114;
    --mf-text-weich:    var(--brand-tinte-weich);
    --mf-grau:          var(--brand-grau);
    --mf-linie:         var(--brand-haar);   /* Hairlines */

    padding: 0 0 22px;
    background: #ffffff;
    background-image: none;
    border: 0;
    border-top: 1px solid var(--mf-linie);
    border-radius: 0;              /* kantig, keine Pillen, keine Rundungen */
    box-shadow: 0 18px 40px rgba(17, 17, 20, .13);
}

/* ---------- Kopfzeile: Kontext statt Dekoration ---------- */

.dropdown-menu .mm-header {
    align-items: center;
    padding: 20px 26px 16px;
    border-bottom: 1px solid var(--mf-linie);
    background: #ffffff;
}

/* Der Icon-Rahmen bleibt leer: das <img> darin steht durch bestehendes CSS
   auf display:none (alt="" — rein dekorativ). Ein leerer weisser Kasten neben
   dem Titel ist Rauschen. Die freigegebene Referenz zeigt im Kopf ebenfalls
   kein Icon, nur Titel und Kontextzeile. Deshalb: Rahmen aus.
   Kein Inhalt geht verloren, das Bild war bereits unsichtbar. */
.dropdown-menu .mm-header-icon { display: none; }

.dropdown-menu .mm-header-label {
    color: var(--mf-grau);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* Display-Schrift: Anton liegt im Theme als "FS Display" bereit.
   Keine neue Schrift installiert (Vorgabe 6.1). */
.dropdown-menu .mm-header-title {
    color: var(--mf-text);
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: 27px;
    font-weight: 400;
    letter-spacing: .012em;
    line-height: 1.05;
    text-transform: uppercase;
}

/* ---------- Suchfeld: leise, kantig ---------- */

.dropdown-menu .mm-search-wrap {
    margin: 0;
    padding: 16px 26px 6px;
}

.dropdown-menu .mm-search {
    height: 40px;
    border: 1px solid var(--mf-linie);
    border-radius: 0;
    background: #ffffff;
    color: var(--mf-text);
    font-size: 13.5px;
}
/* Platzhalter: menuefilter setzt #8a8292 (3,69:1) — hier auf 5,2:1 gehoben. */
.dropdown-menu .mm-search::placeholder { color: #6b6b70 !important; }
.dropdown-menu .mm-search:focus {
    border-color: var(--mf-akzent);
    box-shadow: 0 0 0 3px rgba(229, 22, 159, .14);
    outline: none;
}
/* Lupe im Suchfeld: menuefilter.css:684 blendet sie mit
   ".mm-search-icon { display:none !important }" (0-1-0) aus — dadurch stand das
   Feld ohne jedes Suchsymbol da (Befund Yunus 21.08.). Hier mit 0-2-0 plus
   important zurueckgeholt; Farbe auf 5,2:1 gesetzt. */
.dropdown-menu .mm-search-icon {
    display: inline-flex !important;
    align-items: center;
    color: #6b6b70 !important;
    /* menuefilter positioniert die Lupe mit left:16px im .mm-search-wrap —
       dessen linke Kante liegt aber 26px vor dem Eingabefeld, die Lupe stand
       dadurch neben dem Rahmen statt darin (gemessen: Lupe x=162, Feld x=172).
       Das Feld haelt mit padding-left:42px ohnehin Platz frei. */
    left: 40px !important;
}
.dropdown-menu .mm-search-icon svg { width: 17px; height: 17px; }

/* ---------- CTA "Zur Kategorie": kantig, nicht rund ---------- */

.dropdown-menu .mm-cta-btn {
    top: 22px;
    right: 26px;
    /* CTA-Magenta #c90f88 statt Deko-Magenta #e5169f: weisser Text auf e5169f
       ergibt nur 4,24:1 (unter 4,5), auf c90f88 dagegen 5,37:1 — derselbe Ton,
       den HEADER wegen F26 fuer den B2B-Knopf gewaehlt hat. Gemessen 21.08. */
    border: 1px solid #c90f88;
    border-radius: 0;
    background: #c90f88;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
/* menuefilter.css haengt sich per JS als LETZTES Stylesheet ein und traegt
   ".navbar-wrapper .navbar-collapse a.mm-cta-btn" (0-3-1, !important) — gegen
   diese Kombination verliert die Regel oben (0-2-1) trotz gleicher Farbe.
   Nur eine ID schlaegt das; MENUE hat denselben Weg fuer border-radius
   dokumentiert (fs-menu.css:320). Eng auf die zwei Farb-Eigenschaften
   begrenzt, damit nichts anderes mitwandert. */
#mainNavigation .mm-cta-btn,
.mm-wrapper .mm-cta-btn {
    background: #c90f88 !important;
    border-color: #c90f88 !important;
}
#mainNavigation .mm-cta-btn:hover,
#mainNavigation .mm-cta-btn:focus-visible,
.mm-wrapper .mm-cta-btn:hover,
.mm-wrapper .mm-cta-btn:focus-visible {
    background: #830779 !important;
    border-color: #830779 !important;
}

.dropdown-menu .mm-cta-btn:hover,
.dropdown-menu .mm-cta-btn:focus-visible {
    background: var(--mf-akzent-dunkel);
    border-color: var(--mf-akzent-dunkel);
    color: #ffffff;
    text-decoration: underline;      /* zweites, nicht-farbliches Signal */
    text-underline-offset: 3px;
}

/* ---------- A–Z-Sprungleiste ---------- */

.dropdown-menu .mm-alpha-nav {
    padding: 10px 26px 14px;
    border-bottom: 1px solid var(--mf-linie);
}
.dropdown-menu .mm-alpha-label {
    color: var(--mf-grau);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.dropdown-menu .mm-alpha-link {
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--mf-text-weich);
    font-weight: 600;
}
.dropdown-menu .mm-alpha-link:hover {
    background: var(--mf-akzent-hell);
    border-color: var(--mf-linie);
    color: var(--mf-text);
}
/* 21.08. (Befund Yunus "Sortier-Buchstaben nicht leserlich"): #c4c0ca ergab auf
   Weiss nur 1,79:1 — die inaktiven Buchstaben verschwanden praktisch. #8e8e95
   liefert 3,6:1: klar als "vorhanden, aber ohne Treffer" erkennbar und trotzdem
   deutlich leiser als die aktiven (11,8:1). Neutraler Ton ohne Lila-Stich. */
.dropdown-menu .mm-alpha-link.mm-alpha-inactive { color: #8e8e95; }

/* Aktiver Buchstabe: Farbe UND Fläche UND Unterstreichung.
   Nie allein über Magenta erkennbar (Nutzer ist farbenblind). */
.dropdown-menu .mm-alpha-link.mm-alpha-selected,
.dropdown-menu .mm-alpha-link.mm-alpha-selected:hover {
    background: var(--mf-akzent);
    border-color: var(--mf-akzent);
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Spalten ---------- */

.dropdown-menu .mm-columns {
    gap: 0;
    padding: 18px 26px 0;
}

/* Feine senkrechte Trennlinien statt Kartenrahmen */
.dropdown-menu .mm-col {
    padding: 0 22px;
    border-left: 1px solid var(--mf-linie);
}
.dropdown-menu .mm-col:first-child { padding-left: 0; border-left: 0; }
.dropdown-menu .mm-col:last-child  { padding-right: 0; }

/* Gruppenüberschrift (Buchstabe) — Magenta, klein, gesperrt */
.dropdown-menu .mm-letter-head {
    margin: 0 0 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--mf-linie);
    /* 11px-Text braucht 4,5:1 — Deko-Magenta liefert nur 4,24 (gemessen 21.08.) */
    color: #c90f88;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.dropdown-menu .mm-letter-block + .mm-letter-block .mm-letter-head { margin-top: 20px; }

/* ---------- Die Zeilen ---------- */

.dropdown-menu .mm-item-link {
    position: relative;
    display: block;
    padding: 9px 26px 9px 11px;
    border-bottom: 1px solid var(--mf-linie);
    color: var(--mf-text-weich);
    font-size: 13.5px;
    line-height: 1.35;
    text-decoration: none;
}

/* Linker Balken als Formsignal — im Ruhezustand unsichtbar, aber im Fluss */
.dropdown-menu .mm-item-link::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: transparent;
}

/* Pfeil rechts: dauerhaft als Affordanz, im Ruhezustand blass */
.dropdown-menu .mm-item-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 9px;
    width: 7px; height: 7px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .28;
}

/* Zustand: helle Fläche + linke Linie + kräftigerer Pfeil + Unterstreichung.
   Vier Signale, davon drei nicht-farblich. */
.dropdown-menu .mm-item-link:hover,
.dropdown-menu .mm-item-link:focus-visible {
    background: var(--mf-akzent-hell);
    color: var(--mf-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dropdown-menu .mm-item-link:hover::before,
.dropdown-menu .mm-item-link:focus-visible::before { background: var(--mf-akzent); }
.dropdown-menu .mm-item-link:hover::after,
.dropdown-menu .mm-item-link:focus-visible::after  { opacity: 1; color: var(--mf-akzent); }

/* Sichtbarer Fokus für Tastaturbedienung */
.dropdown-menu .mm-item-link:focus-visible,
.dropdown-menu .mm-alpha-link:focus-visible,
.dropdown-menu .mm-cta-btn:focus-visible {
    outline: 2px solid var(--mf-akzent);
    outline-offset: -2px;
}

/* Suchtreffer-Hervorhebung lesbar auf hellem Grund */
.dropdown-menu .mm-wrapper mark,
.dropdown-menu .mm-item-link mark {
    background: var(--mf-akzent-hell2);
    color: var(--mf-treffer);
    font-weight: 700;
}

.dropdown-menu .mm-empty { color: var(--mf-grau); }

/* Bewegung nur, wenn der Nutzer sie zulässt */
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu .mm-item-link,
    .dropdown-menu .mm-item-link::after,
    .dropdown-menu .mm-alpha-link,
    .dropdown-menu .mm-cta-btn { transition: none; }
}

/* ---------------------------------------------------------------------------
   AUSNAHME: !important beim CTA-Knopf
   menuefilter.css setzt hier selbst !important:
     .mm-search-wrap .mm-cta-btn,
     .navbar-wrapper .navbar-collapse a.mm-cta-btn {
        border-radius: 10px !important;
        font-size: clamp(14px, 4vw, 17px) !important;
     }
   Gegen !important hilft keine Spezifität — nur !important. Bewusst eng auf
   zwei Eigenschaften begrenzt, damit die Ausnahme nicht ausufert.
   Grund: Vorgabe 6.3 verbietet Pillen; der Knopf muss kantig sein.
   --------------------------------------------------------------------------- */
.dropdown-menu .mm-search-wrap .mm-cta-btn,
.navbar-wrapper .navbar-collapse a.mm-cta-btn {
    border-radius: 0 !important;
    font-size: 11px !important;
}


/* ============================================================================
   B — MOBILES HAUPT-/UNTERMENÜ
   Referenz: 01_images/10_final_mobile_menu_reference.png
   ----------------------------------------------------------------------------
   Ist-Zustand: schwarzes, nur 319 px breites Panel; Zeilen in Anton-Versalien.
   Freigegebene Richtung: weisses Panel über die volle Breite, ruhige Zeilen in
   Lesetypografie, SALE/OUTLET als zwei Kacheln, Trust-Leiste unten.

   Inhalte bleiben unangetastet: gleiche Links, gleiche Reihenfolge, gleiche
   Texte. Nur Darstellung.
   ============================================================================ */

@media (max-width: 991.98px) {

    /* ---------- Panel: weiss, volle Breite ---------- */
    #mainNavigation.navbar-collapse {
        width: 100%;
        max-width: 100%;
        background: #ffffff;
        color: #111114;
        /* Ein kontrollierter Scrollcontainer, moderne Viewport-Einheit mit
           Fallback, plus Safe-Area für Geräte mit Notch. */
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        -webkit-overflow-scrolling: touch;
    }

    /* ---------- Titel "MENÜ": schwarz mit Magenta-Unterstrich ---------- */
    #mainNavigation .snippets-filter-mobile-heading {
        display: inline-block;
        margin: 4px 18px 10px;
        padding-bottom: 7px;
        border-bottom: 3px solid #e5169f;
        color: #111114;
        font-family: "FS Display", "FS Text", sans-serif;
        font-size: 24px;
        letter-spacing: .01em;
        text-transform: uppercase;
    }

    /* ---------- Die Zeilen: Lesetypografie statt Versalien ---------- */
    /* Die Liste steht auf flex-direction:column — dadurch stapelt alles.
       Auf row+wrap umstellen: normale Punkte bleiben durch width:100% je eine
       Zeile, nur SALE und OUTLET teilen sich mit je 50 % eine Reihe.
       Reihenfolge und Inhalt bleiben unverändert. */
    #mainNavigation .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #mainNavigation .navbar-nav > li { width: 100%; }
    #mainNavigation .navbar-nav > li.nav-item { width: 100%; }

    #mainNavigation .navbar-nav > li.nav-item > a.nav-link {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 52px;                  /* Touchziel deutlich über 44 px */
        padding: 12px 42px 12px 18px;
        border-bottom: 1px solid #eceaef;
        color: #111114;
        font-family: "FS Text", sans-serif;
        font-size: 15.5px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;              /* keine Versalien mehr */
    }

    /* Linker Balken als Formsignal — im Ruhezustand unsichtbar */
    #mainNavigation .navbar-nav > li.nav-item > a.nav-link::before {
        content: "";
        position: absolute;
        top: 0; bottom: 0; left: 0;
        width: 3px;
        background: transparent;
    }

    /* 29.08.2026 — Ansage Yunus: KEINE Zustandsmarkierung mehr, die Zeilen
       bleiben schwarz auf Weiß. Vorher bekamen :hover / .show /
       aria-expanded="true" eine rosa Fläche (#faf2f8), einen Magenta-Balken
       (#e5169f) am ::before und text-decoration:underline.
       Der Grund für den Ausbau: Touch-Geräte lösen :hover erst beim nächsten
       Tippen woanders hin wieder aus — die zuletzt berührte Kategorie blieb
       dauerhaft rosa+unterstrichen stehen und sah aus wie ein Fehler.
       Sichtbaren Nutzen hatte die Markierung ohnehin nicht: beim Aufklappen
       springt der Drawer sofort in Ebene 2, der markierte Ebene-1-Eintrag ist
       dann gar nicht mehr im Bild.
       NICHT wieder einbauen. Der Tastatur-Fokusring unten bleibt bestehen —
       er ist :focus-visible und auf Touch nie sichtbar. */

    #mainNavigation .navbar-nav > li.nav-item > a.nav-link:focus-visible {
        outline: 2px solid #e5169f;
        outline-offset: -2px;
    }

    /* ---------- SALE und OUTLET: zwei getrennte Kacheln ---------- */
    /* Die beiden Einträge stehen im Markup direkt nebeneinander. Sie bleiben
       eigenständige Links mit eigenen Zielen (Vorgabe: getrennte Flächen). */
    #mainNavigation .navbar-nav > li.nav-item:has(> a[href$="/vape-sale-angebote"]),
    #mainNavigation .navbar-nav > li.nav-item:has(> a[href$="/OUTLET"]) {
        width: calc(50% - 22px);
        margin: 14px 0 14px 18px;
    }
    #mainNavigation .navbar-nav > li.nav-item:has(> a[href$="/OUTLET"]) {
        margin-left: 8px;
        margin-right: 18px;
    }

    #mainNavigation .navbar-nav > li.nav-item:has(> a[href$="/vape-sale-angebote"]) > a.nav-link,
    #mainNavigation .navbar-nav > li.nav-item:has(> a[href$="/OUTLET"]) > a.nav-link {
        justify-content: center;
        min-height: 64px;
        padding: 14px 12px;
        border-bottom: 0;
        border-radius: 0;                  /* kantig, keine Pillen */
        font-family: "FS Display", "FS Text", sans-serif;
        font-size: 19px;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    #mainNavigation .navbar-nav > li.nav-item:has(> a[href$="/vape-sale-angebote"]) > a.nav-link {
        background: #e5169f;
        color: #ffffff;
    }
    #mainNavigation .navbar-nav > li.nav-item:has(> a[href$="/OUTLET"]) > a.nav-link {
        background: #f5c518;               /* bestehende OUTLET-Farbe des Shops */
        color: #111114;
    }
    /* 29.08.2026 — derselbe Ausbau wie oben, gleiche Ansage Yunus: der
       :hover-Unterstrich auf den SALE-/OUTLET-Kacheln blieb auf dem Handy nach
       dem Antippen ebenfalls kleben. SALE und OUTLET bleiben an ihren eigenen
       Flaechenfarben erkennbar (Magenta bzw. Gelb) plus Chip-Beschriftung, das
       Signal haengt also weiterhin nicht allein an der Farbe.
       NICHT wieder einbauen. */

    /* ---------- Trust-Leiste unten ---------- */
    /* Inhalt bleibt wie er ist: die belegten Shop-Angaben (4,82/5, über 3.200
       Bewertungen, Trusted Shops, Versandkostenfrei ab 50 EUR). Keine Zahlen
       aus dem Mock-up übernommen — die sind dort Platzhalter. */
    .nav-mobile-footer {
        margin-top: 6px;
        border-top: 1px solid #eceaef;
        /* KEINE background-Angabe mehr (HEADER, 21.08.2026): Der mobile
           Menuefuss ist absichtlich SCHWARZ und wird von custom.css:1573
           (.navbar-wrapper .nav-mobile-footer, #0b0b0c !important) gesetzt.
           Live gemessen bei 375px: rgb(11,11,12). Ein heller Wert hier war
           wirkungslos und hat zwei Sitzungen in die Irre gefuehrt (zuletzt
           Farbaudit 21.08., Kopfkommentar oben nennt ihn noch). */
    }
    /* ACHTUNG (HEADER, 21.08.2026): Alles ab hier bis .nav-mobile-footer svg
       ist derzeit UNSICHTBAR — fs-menu-mobil.css:509 blendet .fs-mm-trust im
       Menuefuss aus (display:none !important, Besitz MENUE MOBIL). Die Regeln
       bleiben stehen, falls der Block wieder eingeblendet wird; wer hier Farben
       misst, misst nichts. */
    .nav-mobile-footer .fs-mm-trust { color: #35313d; }
    .nav-mobile-footer .fs-mm-trust-titel {
        color: var(--brand-grau);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    .nav-mobile-footer .fs-mm-trust-item { color: #35313d; }
    .nav-mobile-footer .fs-mm-trust-item strong { color: #111114; }
    .nav-mobile-footer .fs-mm-star { color: #e5169f; }
    .nav-mobile-footer svg { color: #e5169f; }

    /* ---------- Untermenü-Ebene ---------- */
    #mainNavigation .dropdown-menu {
        background: #ffffff;
        border: 0;
        border-radius: 0;
    }
    #mainNavigation .dropdown-menu .nav-link,
    #mainNavigation .dropdown-menu a {
        color: #111114;
        text-transform: none;
    }
    /* ACHTUNG: .nav-mobile-heading wird ZWEIFACH verwendet — einmal als
       Rücksprung-Überschrift im Untermenü und einmal als Textträger der
       Top-Level-Punkte, die ein Untermenü haben. Nur die erste Verwendung
       darf die Display-Schrift bekommen, sonst stehen die Hauptpunkte
       wieder in Versalien und passen nicht zu den übrigen Zeilen. */
    #mainNavigation .navbar-nav > li.nav-item > a.nav-link > .nav-mobile-heading {
        font-family: "FS Text", sans-serif;
        font-size: inherit;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }
    /* Rücksprung-Zeile im Untermenü bleibt Display-Schrift */
    #mainNavigation .dropdown-menu .nav-mobile-heading {
        color: #111114;
        font-family: "FS Display", "FS Text", sans-serif;
        text-transform: uppercase;
    }

    @media (prefers-reduced-motion: reduce) {
        #mainNavigation .navbar-nav > li.nav-item > a.nav-link { transition: none; }
    }
}


/* ----------------------------------------------------------------------------
   B2 — Gegen die !important-Regeln des bestehenden mobilen Blocks
   ----------------------------------------------------------------------------
   custom.css (Nick, 16.08.) baut das mobile Menü als DUNKLES Panel und
   erzwingt dafür weisse Schrift mit !important:

     .navbar-wrapper .navbar-collapse .nav-link            { color:#fff !important }
     .navbar-wrapper .navbar-collapse .dropdown-menu       { background:#0b0b0c !important }
     .navbar-wrapper .navbar-collapse .dropdown-menu a     { color:#fff !important }
     .navbar-wrapper .navbar-collapse li.flag-sale .nav-link   { color:#e5169f !important }
     .navbar-wrapper .navbar-collapse li.flag-outlet .nav-link { color:#f5c518 !important }

   Da das Panel jetzt WEISS ist, wäre weisse Schrift unsichtbar. Gegen
   !important hilft nur !important. Bewusst eng auf Farbe und Fläche begrenzt.
   ---------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    /* Lesbare Schrift auf hellem Grund */
    .navbar-wrapper #mainNavigation .navbar-nav > li.nav-item > a.nav-link {
        color: #111114 !important;
    }
    .navbar-wrapper #mainNavigation .navbar-nav > li.nav-item > a.nav-link:hover,
    .navbar-wrapper #mainNavigation .navbar-nav > li.nav-item > a.nav-link:focus-visible,
    .navbar-wrapper #mainNavigation .navbar-nav > li.nav-item.show > a.nav-link {
        color: #111114 !important;
    }

    /* Chevron: dezent statt grell */
    .navbar-wrapper #mainNavigation .nav-link .fas,
    .navbar-wrapper #mainNavigation .nav-link .fa-chevron-right { color: #9a94a3; }

    /* Zeilentrenner hell statt weiss-transparent */
    .navbar-wrapper #mainNavigation .navbar-nav > li { border-bottom-color: #eceaef; }

    /* Untermenü-Ebene ebenfalls hell */
    .navbar-wrapper #mainNavigation .dropdown-menu {
        background: #ffffff !important;
    }
    .navbar-wrapper #mainNavigation .dropdown-menu a,
    .navbar-wrapper #mainNavigation .dropdown-menu .dropdown-item,
    .navbar-wrapper #mainNavigation .dropdown-menu .dropdown-header {
        color: #111114 !important;
    }
    .navbar-wrapper #mainNavigation .dropdown-menu .dropdown-header { color: var(--brand-grau) !important; }

    /* Kopfzeile des Panels */
    .navbar-wrapper #mainNavigation .nav-mobile-header {
        border-bottom-color: #eceaef;
    }
    .navbar-wrapper #mainNavigation .nav-mobile-header .snippets-filter-mobile-heading,
    .navbar-wrapper #mainNavigation .nav-mobile-header .nav-offcanvas-title {
        color: #111114 !important;
    }

    /* ---------- SALE / OUTLET über die vorhandenen Klassen ---------- */
    /* Sauberer als :has() — die Klassen liegen bereits im Markup. */
    .navbar-wrapper #mainNavigation li.flag-sale,
    .navbar-wrapper #mainNavigation li.flag-outlet {
        width: calc(50% - 22px);
        margin: 14px 0 14px 18px;
        border-bottom: 0;
    }
    .navbar-wrapper #mainNavigation li.flag-outlet {
        margin-left: 8px;
        margin-right: 18px;
    }

    .navbar-wrapper #mainNavigation li.flag-sale > a.nav-link,
    .navbar-wrapper #mainNavigation li.flag-outlet > a.nav-link {
        justify-content: center;
        min-height: 64px;
        padding: 14px 12px;
        border-bottom: 0;
        font-family: "FS Display", "FS Text", sans-serif;
        font-size: 19px;
        letter-spacing: .03em;
        text-transform: uppercase;
    }
    .navbar-wrapper #mainNavigation .navbar-nav > li.nav-item.flag-sale > a.nav-link {
        background: #e5169f;
        color: #ffffff !important;       /* auf Magenta */
    }
    .navbar-wrapper #mainNavigation .navbar-nav > li.nav-item.flag-outlet > a.nav-link {
        background: #f5c518;
        color: #111114 !important;       /* auf Gelb */
    }
    /* Der linke Balken gehört hier nicht hin — die Kacheln sind selbst das Signal */
    .navbar-wrapper #mainNavigation li.flag-sale > a.nav-link::before,
    .navbar-wrapper #mainNavigation li.flag-outlet > a.nav-link::before {
        position: static;
        width: 1em;
        background: currentColor;
    }
}


/* ============================================================================
   D — PACKSHOT-KATEGORIENAVIGATION (ersetzt die Kreis-Badges)
   Referenz: 01_images/03_approved_category_rail_direction.png + Gesamtbild
   ----------------------------------------------------------------------------
   Ist-Zustand: "Insta Story Bar" — runde Ringe mit Magenta-Verlauf und Glow,
   Bilder auf 68x68 kreisrund BESCHNITTEN (object-fit: cover), Badges als Pillen.
   Gestylt wird das bisher komplett in /staging_custom_fix.css — einer Datei,
   die es auf Live NICHT gibt. Deshalb liegt die neue Fassung hier, in der
   Datei, die mitreist.

   Freigegebene Richtung: offene helle Reihe, keine Kreise, kein Neon, kein
   Glow. Freigestellte Wirkung durch object-fit: contain statt cover.

   Inhalt bleibt unangetastet: dieselben 14 Einträge, dieselben href, Labels,
   Badges und Alt-Texte. Nur Darstellung.
   ============================================================================ */

.ig-story-bar {
    gap: 0;
    padding: 18px 0 20px;
    /* Interner Scroll statt unruhigem Umbruch; die Seite selbst darf nicht
       horizontal überlaufen. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

/* Dezente Scrollleiste statt Magenta-Verlauf */
.ig-story-bar::-webkit-scrollbar { height: 4px; }
.ig-story-bar::-webkit-scrollbar-thumb { background: #d8d3dd; border-radius: 0; }
.ig-story-bar::-webkit-scrollbar-track { background: transparent; }

/* ---------- Der einzelne Eintrag ---------- */
.ig-story-bar .ig-story {
    justify-content: flex-start;
    min-width: 116px;
    /* Touchziel deutlich über 44 px */
    min-height: 132px;
    padding: 6px 14px 10px;
    /* Feine senkrechte Trennlinien statt Kartenrahmen */
    border-left: 1px solid #eceaef;
}
.ig-story-bar .ig-story:first-child { border-left: 0; }

.ig-story-bar .ig-story:focus-visible {
    outline: 2px solid #e5169f;
    outline-offset: -2px;
}

/* ---------- Kein Ring, kein Glow ---------- */
.ig-story-bar .ig-ring {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
}
.ig-story-bar .ig-story:hover .ig-ring {
    transform: none;
    box-shadow: none;
}

/* ---------- Medienfläche: fest, freigestellt, nicht beschnitten ---------- */
.ig-story-bar .ig-image {
    position: relative;
    width: 88px;
    height: 88px;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

/* contain statt cover: der ganze Packshot ist zu sehen, nichts wird
   kreisrund abgeschnitten. Das ist der Kern der freigegebenen Richtung. */
.ig-story-bar .ig-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

/* Dezenter ovaler Bodenschatten — rein per CSS, kein Bild */
.ig-story-bar .ig-image::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 58%;
    height: 7px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(17,17,20,.16) 0%, rgba(17,17,20,0) 72%);
    pointer-events: none;
}

/* ---------- Label ---------- */
.ig-story-bar .ig-story span {
    margin-top: 14px;
    max-width: 104px;
    color: #111114;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ig-story-bar .ig-story:hover span {
    color: #111114;
    text-decoration: underline;      /* nicht-farbliches Signal */
    text-underline-offset: 3px;
}

/* ---------- Badges: klein und kantig, keine Pillen ---------- */
.ig-story-bar .ig-badge {
    top: 0;
    left: 14px;
    transform: none;
    padding: 3px 7px;
    border: 0;
    border-radius: 0;               /* Vorgabe 6.3: keine Pillen */
    box-shadow: none;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ig-story-bar .ig-badge.bestseller { background: #e5169f; color: #ffffff; }
.ig-story-bar .ig-badge.neu        { background: #111114; color: #ffffff; }
.ig-story-bar .ig-badge.restock    { background: var(--brand-grau); color: #ffffff; }

@media (max-width: 768px) {
    .ig-story-bar .ig-story { min-width: 100px; padding: 6px 10px 10px; }
    .ig-story-bar .ig-image { width: 72px; height: 72px; }
    .ig-story-bar .ig-story span { font-size: 10.5px; max-width: 90px; margin-top: 11px; }
    .ig-story-bar .ig-badge { left: 10px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .ig-story-bar { scroll-behavior: auto; }
    .ig-story-bar .ig-ring { transition: none; }
}


/* ============================================================================
   G — FOOTER
   Vorlage: vom Auftraggeber am 19.08.2026 explizit übergeben
   ----------------------------------------------------------------------------
   Vorhandener Aufbau (Nick, 15./16.08.) — bleibt vollständig erhalten:
     .fs-f-topbar      Serviceleiste (Sendung verfolgen, Support, …)
     .fs-footer-grid   Marke + SHOP + HILFE
     .fs-f-top5        TOP-5-Spalten
     .fs-f-nlbar       Newsletter        << TOT, siehe Hinweis unten
     .fs-f-trust       Sicher einkaufen   << TOT, siehe Hinweis unten
   ----------------------------------------------------------------------------
   TOTER CODE (Befund Sitzung FARBEN + Gegenpruefung HEADER, 21.08.2026):
   Die Klassen .fs-f-nlbar und .fs-f-trust existieren in KEINEM Template, in
   KEINEM JS und in KEINER ausgelieferten Seite (geprueft: Startseite,
   Kategorie, Kontakt — jeweils 0 Treffer im HTML, nicht nur im Markup-Grep).
   Rueckstand des alten Footers, bevor Sitzung FOOTER ihn in fs-footer.css neu
   gebaut hat. Saemtliche Regeln, die auf diesen beiden Klassen haengen (rund
   290 Zeilen weiter unten), rendern nirgends. Loeschung ist mit FOOTER
   abzustimmen, weil der Footer inzwischen deren Bereich ist — bis dahin NICHT
   hier Farben oder Masse pflegen, das ist verlorene Arbeit.
     .fs-f-copyright   Rechtszeile

   Die Vorlage stellt den Newsletter NACH OBEN. Das löse ich über flex-order —
   kein DOM-Eingriff, kein Link verschoben, die Lesereihenfolge im Quelltext
   bleibt für Suchmaschinen unverändert.
   ============================================================================ */

footer {
    background: #111114;
}

/* Blöcke neu anordnen — nur visuell */
footer > .container-fluid {
    display: flex;
    flex-direction: column;
}
footer > .container-fluid > .fs-f-nlbar      { order: 1; }
footer > .container-fluid > .fs-f-topbar     { order: 2; }
footer > .container-fluid > .fs-footer-grid  { order: 3; }
footer > .container-fluid > .fs-f-top5       { order: 4; }
footer > .container-fluid > .fs-f-trust      { order: 5; }

/* ---------- 1. Newsletter-Band, hell, mit Diagonale ---------- */

/* Vollbreiter Hintergrund OHNE Layout-Eingriff: ein absolut positioniertes
   Pseudo-Element malt die Flaeche ueber die volle Fensterbreite. Der frueher
   verwendete Trick margin:-100vw / padding:100vw hat den Inhalt in eine
   schmale Spalte gequetscht und den Block auf 603 px aufgeblaeht. */
footer .fs-f-nlbar {
    position: relative;
    isolation: isolate;
}
footer .fs-f-nlbar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f6f5f3;
    z-index: -2;
    pointer-events: none;
}
footer .fs-f-nlbar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 38%;
    width: 180px;
    transform: skewX(-19deg);
    background: var(--brand-ruhig);
    z-index: -1;
    pointer-events: none;
}
footer .fs-f-nlbar-inner {
    position: relative;
    z-index: 1;
    padding: 26px 0;
}

/* Überschrift des Bandes — Display-Schrift, schwarz */
footer .fs-f-nlbar-inner :is(h2, h3, .h2, .h3, strong, b) {
    color: #111114;
    font-family: "FS Display", "FS Text", sans-serif;
    letter-spacing: .01em;
    text-transform: uppercase;
}
footer .fs-f-nlbar-inner p,
footer .fs-f-nlbar-inner small { color: var(--brand-ruhig); font-weight: 700; }

/* Eingabefeld kantig, Knopf schwarz mit Magenta-Pfeil */
footer .fs-f-nlbar input[type="email"],
footer .fs-f-nlbar input[type="text"] {
    height: 52px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: #111114;
}
footer .fs-f-nlbar button,
footer .fs-f-nlbar input[type="submit"],
footer .fs-f-nlbar .btn {
    height: 52px;
    border: 0;
    border-radius: 0;
    background: #111114;
    color: #ffffff;
    font-family: "FS Display", "FS Text", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
footer .fs-f-nlbar .btn:hover {
    background: var(--brand-ruhig);
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 2. Serviceleiste ---------- */

footer .fs-f-topbar {
    position: relative;
    isolation: isolate;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
footer .fs-f-topbar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #111114;
    z-index: -2;
    pointer-events: none;
}
/* Feine Magenta-Trenner zwischen den Servicepunkten */
footer .fs-f-topbar-inner > * + * { position: relative; }
footer .fs-f-topbar-inner > * + *::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    width: 1px;
    height: 30px;
    margin-top: -15px;
    background: rgba(229, 22, 159, .45);
}
footer .fs-f-topbar-inner { padding: 18px 0; }

/* Die Leiste war vorher hell und hatte dunklen Text. Auf schwarzem Grund
   waere er unlesbar — deshalb hier durchgehend helle Schrift. Betrifft auch
   die Unterzeilen (Telefonnummer, "Bestellstatus pruefen"), die weder <a>
   noch <strong> sind. */
footer .fs-f-topbar,
footer .fs-f-topbar-inner,
footer .fs-f-topbar-inner * {
    color: #ffffff;
}
footer .fs-f-topbar-inner small,
footer .fs-f-topbar-inner span:not(:first-child),
footer .fs-f-topbar-inner p { color: #c9c4d0; }
footer .fs-f-topbar svg { color: #ffffff; }

/* custom.css setzt .fs-f-top-item { color:#111 !important } — die Leiste war
   dort hell. Auf schwarzem Grund waere das unlesbar. Eng begrenzte Ausnahme. */
footer .fs-f-topbar .fs-f-top-item,
footer .fs-f-topbar .fs-f-top-item * {
    color: #ffffff !important;
}
footer .fs-f-topbar .fs-f-top-item small,
footer .fs-f-topbar .fs-f-top-item .fs-f-top-sub {
    color: #c9c4d0 !important;
}
footer .fs-f-topbar a,
footer .fs-f-topbar strong {
    color: #ffffff;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
footer .fs-f-topbar a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 3./4. Spalten ---------- */

footer .fs-footer-grid { padding: 34px 0 10px; }

/* Feine Magenta-Trennlinien zwischen den Spalten */
footer .fs-fcol { position: relative; padding-left: 26px; }
footer .fs-footer-grid > * + *::before,
footer .fs-fcol + .fs-fcol::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 1px;
    background: rgba(229, 22, 159, .38);
}
footer .fs-fcol-brand { padding-left: 0; }

/* Spaltenüberschriften */
footer .fs-fcol :is(h2, h3, h4, .h3, .h4, strong) {
    color: #ffffff;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: 17px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

footer .fs-fcol a {
    color: #d5d1da;
    font-size: 14px;
    line-height: 2;
}
footer .fs-fcol a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Markenspalte: Logo hell, darunter feine Linie und Social-Quadrate */
footer .fs-fcol-brand { position: relative; }
footer .fs-fcol-brand img { max-height: 58px; width: auto; }

/* ---------- 5. Trust-Band, hell ---------- */

footer .fs-f-trust {
    position: relative;
    isolation: isolate;
    margin-top: 24px;
    padding: 22px 0;
}
footer .fs-f-trust::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f6f5f3;
    z-index: -2;
    pointer-events: none;
}
footer .fs-f-trust :is(h3, h4, strong, .h4) {
    color: #111114;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
footer .fs-f-trust,
footer .fs-f-trust span,
footer .fs-f-trust small { color: #35313d; }

/* Senkrechte Trennlinie zwischen den beiden Trust-Blöcken */
footer .fs-f-trust-block + .fs-f-trust-block { position: relative; }
footer .fs-f-trust-block + .fs-f-trust-block::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: -18px;
    width: 1px;
    background: rgba(229, 22, 159, .40);
}

/* ---------- 6. Rechtszeile ---------- */

footer .fs-f-copyright {
    border-top: 0;
    background: #111114;
}
footer .fs-f-copyright-inner { padding: 16px 0; }
footer .fs-f-copyright a,
footer .fs-f-copyright .fs-f-copy {
    color: #b9b4c0;
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
footer .fs-f-copyright a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 991.98px) {
    footer .fs-fcol { padding-left: 0; }
    footer .fs-footer-grid > * + *::before,
footer .fs-fcol + .fs-fcol::before { display: none; }
    footer .fs-f-nlbar::before { left: 62%; }
}


/* ============================================================================
   E — GESCHMACKSFINDER (Optik v2, 20.08.2026)
   Referenz: Visual "FOGSMOKE GUIDE / 01" (kompakte Zwei-Spalten-Section)
   ----------------------------------------------------------------------------
   Links Editorial (~30 %): Eyebrow, grosse ruhige Display-Headline, dezente
   Umriss-01, Fortschritt 01/02/03. Volle Containerbreite, kompakter Anschluss
   an den Banner (Anweisung Yunus 20.08.: Dreieck entfernt, Headline groesser).
   Rechts Finder (~70 %): sechs Icon-Kacheln, Outline-Chips, dynamische
   Match-Anzeige + CTA. KEINE festen Hoehen — die Hoehe ergibt sich aus dem
   Inhalt (Desktop ca. 340–390 px).
   AUSDRUECKLICH NICHT: Bannerhintergrund, dunkle Vollflaeche, Dekofruechte,
   Neon/Glow, Pillenbuttons, Intensitaetsauswahl (Vorgaben 11.1 und 12.1).
   Die Logik lebt in fs-finder.js und ist gegenueber v1 unveraendert.
   ============================================================================ */

.fs-gf {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 3fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
    padding: 10px 0 36px;
    background: transparent;
    border: 0;
}

/* Kompakter Anschluss an das Kampagnen-Mosaik: die Rhythmus-Regel
   `#content:has(#fs-geschmacksfinder) > div { margin-top: var(--fs-luft) }`
   (Abschnitt Startseite) wird hier NUR fuer den Finder-Wrapper mit hoeherer
   Spezifitaet ueberstimmt — alle anderen Startseitenbloecke behalten ihre Luft. */
#content:has(#fs-geschmacksfinder) > .container.fs-gf-wrapper { margin-top: 16px; }

/* ---------- Linke Spalte: Editorial ---------- */

.fs-gf-intro {
    position: relative;
}

.fs-gf-eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: #e5169f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* Dekorative Umriss-Zahl, aria-hidden im Markup */
.fs-gf-zahl {
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 0;
    color: transparent;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: 128px;
    line-height: 1;
    -webkit-text-stroke: 1.5px rgba(229, 22, 159, .16);
    pointer-events: none;
    user-select: none;
}

.fs-gf-titel {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    color: #111114;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: 56px;
    line-height: 1.02;
    letter-spacing: .015em;
    text-transform: uppercase;
}

.fs-gf-sub {
    position: relative;
    z-index: 1;
    margin: 0 0 26px;
    max-width: 30ch;
    color: #5d5866;
    font-size: 14.5px;
    line-height: 1.5;
}

/* Fortschritt: 01 Richtung — 02 Geschmacksnote — 03 Matches */
.fs-gf-steps {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fs-gf-step {
    position: relative;
    padding-bottom: 6px;
    color: #9a94a3;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
/* Aktueller Schritt: Farbe UND Unterstrich — nicht nur Farbe */
.fs-gf[data-schritt="1"] .fs-gf-step[data-schritt="1"],
.fs-gf[data-schritt="2"] .fs-gf-step[data-schritt="2"],
.fs-gf[data-schritt="3"] .fs-gf-step[data-schritt="3"] {
    color: #e5169f;
    box-shadow: inset 0 -2px 0 0 #e5169f;
}

/* ---------- Rechte Fläche ---------- */

.fs-gf-frage {
    margin: 0 0 14px;
    color: #111114;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: 17px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.fs-gf-frage-2 { margin-top: 28px; }

/* ---------- Richtungen: sechs gleiche Icon-Kacheln ---------- */

.fs-gf-richtungen {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.fs-gf-richtung {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 108px;               /* Touchziel deutlich ueber 44 px */
    padding: 14px 6px 16px;
    background: #ffffff;
    border: 1px solid #111114;
    border-radius: 4px;              /* nahezu eckig */
    color: #111114;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease,
                background-color .15s ease, border-color .15s ease;
}

.fs-gf-icon { display: block; }
.fs-gf-icon svg { display: block; width: 30px; height: 30px; }

/* Haken-Badge oben rechts — das nicht-farbliche Signal der aktiven Kachel */
.fs-gf-richtung .fs-gf-haken {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e5169f;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}

.fs-gf-richtung:hover {
    transform: translateY(-2px);     /* maximal 2 px, kein Schatten */
    box-shadow: inset 0 -2px 0 0 #e5169f;
}

.fs-gf-richtung[aria-pressed="true"] {
    background: #111114;
    border-color: #111114;
    color: #ffffff;
    box-shadow: inset 0 -4px 0 0 #e5169f;   /* magentafarbene Unterkante */
}
.fs-gf-richtung[aria-pressed="true"] .fs-gf-haken {
    opacity: 1;
    transform: scale(1);
}

.fs-gf-richtung:focus-visible,
.fs-gf-note:focus-visible,
.fs-gf-cta:focus-visible {
    outline: 2px solid #e5169f;
    outline-offset: 2px;
}

/* ---------- Noten: kompakte Outline-Chips ---------- */

/* Vor der Richtungswahl: nur ein kompakter Hinweis, kein Leerraum */
.fs-gf-hinweis {
    margin: 0;
    padding: 4px 0 2px;
    color: var(--brand-grau);
    font-size: 13px;
}
.fs-gf-hinweis[hidden] { display: none; }

.fs-gf-noten {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;   /* weiches Einblenden */
}
.fs-gf-noten[hidden] { display: none; }
.fs-gf-noten--da { opacity: 1; transform: none; }

.fs-gf-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px;
    background: #ffffff;
    border: 1px solid #111114;
    border-radius: 4px;
    color: #111114;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .15s ease;
}
.fs-gf-note:hover {
    transform: translateY(-1px);
    border-color: #e5169f;
    box-shadow: inset 0 -2px 0 0 #e5169f;
}
.fs-gf-note[aria-pressed="true"] {
    background: #e5169f;
    border-color: #e5169f;
    color: #ffffff;
}
/* Chip-Haken: rechts vom Text, nur im aktiven Zustand sichtbar */
.fs-gf-note .fs-gf-haken {
    display: none;
    order: 2;
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
}
.fs-gf-note[aria-pressed="true"] .fs-gf-haken { display: inline; }

.fs-gf-leer { margin: 0; padding: 4px 0 2px; color: var(--brand-grau); font-size: 13px; }

/* ---------- Fuss: dynamische Match-Anzeige und CTA ---------- */

.fs-gf-fuss {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    margin-top: 24px;
}

.fs-gf-treffer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    margin: 0;
    color: #5d5866;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: right;
    text-transform: uppercase;
}
.fs-gf-treffer-zahl {
    display: none;
    color: #e5169f;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .05em;
}
.fs-gf-treffer--matches .fs-gf-treffer-zahl { display: block; }
.fs-gf-treffer--matches .fs-gf-treffer-text { color: #111114; }

.fs-gf-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 15px 26px;
    border-radius: 0;                /* kantig wie die Banner-CTAs */
    background: #111114;
    color: #ffffff;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .15s ease;
}
.fs-gf-cta-pfeil {
    color: #e5169f;
    font-size: 18px;
    line-height: 1;
    transition: transform .15s ease, color .15s ease;
}
.fs-gf-cta:hover,
.fs-gf-cta:focus-visible {
    background: #e5169f;
    color: #ffffff;
    text-decoration: none;
}
.fs-gf-cta:hover .fs-gf-cta-pfeil { color: #ffffff; transform: translateX(3px); }

/* Ohne Auswahl verstaendlich inaktiv — kompakt, hell, mit Kontur,
   kein grosser grauer Block */
.fs-gf-cta[aria-disabled="true"] {
    min-height: 44px;
    padding: 10px 18px;
    background: #f6f5f3;
    border: 1px solid #cfcad6;
    color: #8b8595;
    font-size: 12.5px;
    cursor: not-allowed;
    pointer-events: none;
}
.fs-gf-cta[aria-disabled="true"] .fs-gf-cta-pfeil { color: #b5aec0; }

/* ---------- Tablet (768–1199): Intro als schmaler Kopf, Finder vollbreit --- */

@media (max-width: 1199.98px) {
    .fs-gf { grid-template-columns: 1fr; gap: 26px; padding: 8px 0 30px; }
    .fs-gf-zahl { font-size: 84px; top: 0; right: 0; }
    .fs-gf-titel { font-size: 36px; }
    .fs-gf-sub { margin-bottom: 18px; }
}

/* ---------- Mobil (≤767): einspaltig, 3×2-Kacheln, vollbreiter CTA -------- */

@media (max-width: 767.98px) {
    .fs-gf { gap: 20px; padding: 6px 0 26px; }
    #content:has(#fs-geschmacksfinder) > .container.fs-gf-wrapper { margin-top: 12px; }
    .fs-gf-zahl { display: none; }
    .fs-gf-titel { font-size: 30px; margin-bottom: 10px; }
    .fs-gf-sub { display: none; }            /* Intro deutlich kuerzer */
    .fs-gf-steps { gap: 14px; }
    .fs-gf-frage { font-size: 15px; }
    .fs-gf-frage-2 { margin-top: 22px; }
    .fs-gf-richtungen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .fs-gf-richtung { min-height: 92px; padding: 10px 4px 12px; font-size: 10.5px; }
    .fs-gf-icon svg { width: 26px; height: 26px; }
    .fs-gf-steps { gap: 12px; }
    .fs-gf-step { font-size: 10px; }
    .fs-gf-noten { gap: 8px; }
    .fs-gf-note { min-height: 38px; padding: 8px 13px; font-size: 11px; }
    .fs-gf-fuss { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; }
    .fs-gf-treffer { align-items: center; text-align: center; }   /* Zahl ueber dem Button */
    .fs-gf-cta { justify-content: center; }                       /* vollbreiter CTA */
}

@media (prefers-reduced-motion: reduce) {
    .fs-gf-richtung, .fs-gf-note, .fs-gf-cta, .fs-gf-cta-pfeil,
    .fs-gf-richtung .fs-gf-haken, .fs-gf-noten { transition: none; }
    .fs-gf-richtung:hover, .fs-gf-note:hover { transform: none; }
}


/* ============================================================================
   ABSCHNITT H — STARTSEITE AUFGERAEUMT (Anweisung Yunus, 19.08.2026)
   ----------------------------------------------------------------------------
   Entfernt aus der Ansicht der Startseite:
     - die Leiste "Offizieller Al Fakher Distributor" (.fogsmoke-trustbar)
     - alle Pflicht-/Werbebanner (6 Motive) samt ELFA-GEHT-IMMER-Banner
     - "JETZT NEU BEI UNS!"        + Slider
     - "Unsere Bestseller"         + Slider
     - "Unsere beliebtesten Liquids" + Slider
     - "Unser Versprechen"         (.fsv-banner)
     - die Trust-Badges            (.fsv-banner--stats)

   WARUM CSS UND NICHT OPC:
   Die Bloecke liegen als Inhalt in der OPC-Seite kPage 345, nicht im Template.
   Ein OPC-Eingriff braucht Backend-Zugang (liegt nicht vor) und ist nicht
   rueckrollbar. display:none laesst das Markup unangetastet — damit bleibt die
   eingefrorene Linkmenge exakt gleich (Regel: kein Link faellt weg) und die
   Microdata bleiben erhalten. Rollback = diesen Abschnitt loeschen.

   SCOPE: #content:has(#fs-geschmacksfinder) trifft ausschliesslich die
   Startseite — der Finder-Container wird nur von page/index.tpl gerendert.
   Damit bleiben die uebrigen 368 OPC-Seiten unberuehrt.
   ============================================================================ */

/* --- 1. Leiste "Offizieller Al Fakher Distributor" --- */
#content:has(#fs-geschmacksfinder) .container-inner > div:has(> .fogsmoke-trustbar) {
    display: none;
}

/* --- 2. Bannerblock unter dem Header (6 Motive) --- */
#content:has(#fs-geschmacksfinder) > .opc-Container:has(> .container-inner > .row.mb-5.mt-3) {
    display: none;
}

/* --- 3. ELFA-GEHT-IMMER-Banner zwischen den Slidern --- */
#content:has(#fs-geschmacksfinder) .container-inner > .my-5:has(img) {
    display: none;
}

/* --- 4. Die drei Slider-Ueberschriften und ihre Slider --- */
#content:has(#fs-geschmacksfinder) .container-inner > .opc-product-slider {
    display: none;
}
/* Die Ueberschriften tragen Bootstraps .d-inline-block — das ist
   display:inline-block !important. Dagegen hilft keine Spezifitaet.
   Bewusste, eng begrenzte Ausnahme: eine Eigenschaft, ein Selektor. */
#content:has(#fs-geschmacksfinder) .container-inner > .h2 {
    display: none !important;
}

/* --- 5. "Unser Versprechen" --- */
#content:has(#fs-geschmacksfinder) > .opc-Container .container-inner > div:has(> .fsv-banner) {
    display: none;
}

/* --- 6. Trust-Badges (10.000+ Kunden / Trusted Shops / Lieferzeit / TPD) --- */
#content:has(#fs-geschmacksfinder) > div:has(> .fsv-banner--stats) {
    display: none;
}

/* --- 7. B2B-Vitrinen-Block im Blogbereich (Nachtrag Yunus, 19.08.2026) --- */
/* Liegt in .index-news-wrapper, nicht im OPC-Hauptteil. Getroffen wird nur der
   unmittelbare Wrapper des .fsv-banner — der Blog daneben (8 Beitraege, 13 Links)
   bleibt vollstaendig stehen. */
#content:has(#fs-geschmacksfinder) .index-news-wrapper div:has(> .fsv-banner) {
    display: none;
}


/* ============================================================================
   F — HEADER V6
   Vorlage: FOGSMOKE_HEADER_V6_CLAUDE_JTL, uebergeben 19.08.2026
   Referenz: assets/fogsmoke-header-v6-reference-1920x288.png
   ----------------------------------------------------------------------------
   Ersetzt vollstaendig die frueheren Abschnitte F, F2, F3 und F4. Die wurden
   entfernt statt ueberlagert — sie beschrieben eine andere Kopfzeile
   (108/128 px hohe weisse Zeile, Magenta-Diagonalband dahinter, Akzent
   #e5169f). V6 hat keins davon.

   Aufbau im Shop (bestaetigt am gerenderten Markup):
     #header-top-bar.topbar-wrapper  → Utility-Bar        48 px
     #jtl-nav-wrapper .hide-navbar   → weisse Hauptzeile 174 px
     #jtl-nav-wrapper .navbar-wrapper→ Kategorienavi      66 px
                                       Summe             288 px

   AUSDRUECKLICHE VORGABE (Yunus, 19.08.): An der Navigationsarchitektur wird
   NICHTS geaendert. Die Vorlage zeigt andere Kategoriebezeichnungen;
   massgeblich bleibt der Shop. Hier wird ausschliesslich gestaltet.
   ============================================================================ */

@font-face {
    font-family: "FS Body";
    src: url("/templates/MyRemake/themes/base/fonts/dmsans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "FS Body";
    src: url("/templates/MyRemake/themes/base/fonts/dmsans-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --fs-v6-purple: #830779;
    --fs-v6-black: #111114;
    --fs-v6-white: #ffffff;
    --fs-v6-utility-h: 48px;
    --fs-v6-main-h: 174px;
    --fs-v6-nav-h: 66px;
    /* "FS Display" ist bereits Anton (custom.css). Nicht neu deklarieren. */
    --fs-v6-title: "FS Display", "Arial Narrow", sans-serif;
    --fs-v6-body: "FS Body", "FS Text", Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   1 — UTILITY-BAR (48 px)
   --------------------------------------------------------------------------- */

#header-top-bar.topbar-wrapper {
    position: relative;
    background: var(--fs-v6-black);
}

/* Der Parent legt einen container-fluid mit flex-row-reverse dazwischen.
   Der wird hier flach gemacht, damit die Bar ueber die volle Breite laeuft. */
#header-top-bar.topbar-wrapper > .container,
#header-top-bar.topbar-wrapper > .container-fluid {
    max-width: none;
    padding: 0;
}

.fs-topbar.fs-v6-utility {
    width: 100%;
    border-bottom: 0;
    background: var(--fs-v6-black);
    color: var(--fs-v6-white);
}

.fs-v6-utility .fs-topbar-inner {
    max-width: none;
    min-height: var(--fs-v6-utility-h);
    height: var(--fs-v6-utility-h);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

/* Sternfeld links, 72 x 48 */
.fs-v6-utility .fs-v6-star {
    flex: 0 0 72px;
    width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fs-v6-purple);
    color: var(--fs-v6-white);
}
.fs-v6-utility .fs-v6-star svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}

.fs-v6-utility .fs-v6-utility-items {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
}

.fs-v6-utility .fs-tb-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 24px;
    border-left: 0;
    color: var(--fs-v6-white) !important;
    font-family: var(--fs-v6-title);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
}
.fs-v6-utility .fs-tb-gruppe .fs-tb-item:first-child { padding-left: 24px; }

/* Trennlinien: 2 px in Akzentfarbe, wie in der Vorlage */
.fs-v6-utility .fs-tb-item + .fs-tb-item {
    border-left: 2px solid var(--fs-v6-purple);
}

.fs-v6-utility .fs-tb-item svg {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: square;
    stroke-linejoin: miter;
    opacity: 1;
}

/* ALLES in Abschnitt 2 und 3 gilt NUR fuer den Desktop. Vorher leckten die
   Regeln ins Mobile: der 66px-Suchrahmen zerdrueckte das Suchsymbol, die
   64px-Trennlinien standen neben Konto/Warenkorb, und .navbar-wrapper malte
   ein leeres schwarzes Band unter den Kopf. Vorgabe des Pakets: der
   bestehende Mobile-Header bleibt unveraendert. */
@media (min-width: 992px) {

/* ---------------------------------------------------------------------------
   2 — WEISSE HAUPTZEILE (174 px)
   --------------------------------------------------------------------------- */

/* WICHTIG: hier KEIN overflow:hidden. Ein beschneidender Vorfahre wuerde das
   aufklappende Mega-Menue, die Suche und die Konto-/Warenkorb-Dropdowns
   abschneiden. (Am 19.08. schon einmal passiert.)
   V6 hat ausserdem KEIN Diagonalband im weissen Bereich — Vorgabe. */
#jtl-nav-wrapper .hide-navbar {
    position: relative;
    min-height: var(--fs-v6-main-h);
    max-width: none;
    padding: 0 80px;
    background: var(--fs-v6-white);
}

#jtl-nav-wrapper .hide-navbar > .navbar {
    min-height: var(--fs-v6-main-h);
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    align-items: center;
}

/* Logospalte nur so breit wie das Logo */
#jtl-nav-wrapper .hide-navbar .nav-logo-wrapper {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
#jtl-nav-wrapper .hide-navbar .toggler-logo-wrapper,
#jtl-nav-wrapper .hide-navbar .logo-wrapper,
#jtl-nav-wrapper .hide-navbar .navbar-brand {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Wortmarke. Das Critical-CSS im <head> setzt
     header .navbar-brand img { height: 1.5625rem }
   fest — max-width allein reicht nicht, die Hoehe muss mitgesetzt werden.
   Das Bild ist bereits schwarz; der frueher noetige Weiss-Filter entfaellt. */
#jtl-nav-wrapper .hide-navbar .navbar-brand img,
#jtl-nav-wrapper .hide-navbar #shop-logo {
    width: 490px;
    height: auto;
    max-width: 100%;
    max-height: 134px;
    object-fit: contain;
    object-position: left center;
    filter: none;
}

/* Rechte Haelfte: Suche, Aktionslinks, Symbole */
#jtl-nav-wrapper .hide-navbar .nav-icons-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
#jtl-nav-wrapper .hide-navbar .nav-icons-wrapper > #shop-nav {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

/* Anordnung der Vorlage ueber flex-order — im Quelltext wird nichts
   verschoben. Konto steht in der Vorlage VOR der Wunschliste, im Shop
   dahinter. */
#jtl-nav-wrapper .hide-navbar #shop-nav > *          { order: 50; }
#jtl-nav-wrapper .hide-navbar #shop-nav > #search    { order: 10; }
#jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-tracking  { order: 20; }
#jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-b2b-wrap  { order: 30; }
#jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown { order: 60; }
#jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish        { order: 70; }
#jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown   { order: 80; }

/* Der Freiraum der Vorlage sitzt zwischen B2B und den Symbolen */
#jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-b2b-wrap { margin-right: auto; }

/* Einheitliche Trennlinien zwischen allen sichtbaren Punkten */
#jtl-nav-wrapper .hide-navbar #shop-nav > #search,
#jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-item,
#jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown,
#jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish,
#jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 26px;
}
#jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-item::before,
#jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown::before,
#jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish::before,
#jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 64px;
    margin-top: -32px;
    background: var(--fs-v6-purple);
}
/* Vor dem Warenkorbpreis steht in der Vorlage keine zweite Linie direkt am
   Rand — die Linie gehoert vor das Symbol, das passt bereits. */

/* Aktionslinks "Sendung verfolgen" / "B2B Shop" */
#jtl-nav-wrapper .hide-navbar .fs-hd-link {
    display: flex;
    align-items: center;
    color: var(--fs-v6-black);
    font-family: var(--fs-v6-title);
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
/* Nicht-farbliches Signal beim Hovern — Unterstreichung, nicht nur Farbe */
#jtl-nav-wrapper .hide-navbar .fs-hd-link:hover,
#jtl-nav-wrapper .hide-navbar .fs-hd-link:focus-visible {
    color: var(--fs-v6-purple);
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* Symbolknoepfe: Konto, Wunschliste, Warenkorb */
#jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0;
    color: var(--fs-v6-black);
    font-family: var(--fs-v6-body);
    font-size: 16px;
    font-weight: 700;
}
#jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link:hover,
#jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link:focus-visible {
    color: var(--fs-v6-purple);
}
/* Die Textbeschriftungen neben den Symbolen zeigt die Vorlage nicht */
#jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link > .nav-label { display: none; }

/* Ein CORS-gesperrtes Fremd-Stylesheet (Doofinder) faerbt die Glyphen
   direkt am <i> weiss — auf der weissen Zeile unsichtbar. Ein direkter
   Treffer am <i> schlaegt jede Vererbung; deshalb steht die Farbe HIER
   und nicht nur am Link. (Dritte Wiederholung dieses Fehlers heute:
   Logo, Icons, jetzt die Glyphen — immer dieselbe Ursache.) */
#jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link i.fas,
#jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link i.far {
    color: var(--fs-v6-black);
}
#jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link:hover i.fas,
#jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link:focus-visible i.fas {
    color: var(--fs-v6-purple);
}

/* ⚠️ SEIT 20.08. ABGELOEST: Die mask-image-URLs unten werden von fs-icons.css
   (Sitzung ICONSET, Iconset "Blocksatz v4.1", von Yunus freigegeben)
   ueberschrieben — fs-icons.css laedt spaeter und gewinnt. Boxmasse/Layout
   hier bleiben aktiv. Die URLs hier NICHT mehr anfassen: Aenderungen waeren
   unsichtbar. Rueckbau der Masken-URLs bei Gelegenheit moeglich.

   Font-Awesome-Glyphen gegen die Symbole der Vorlage tauschen.
   Ersetzt wird NUR das ::before der Glyphe — der Zaehler <span class="fa-sup">
   liegt als echtes Kind im <i> und bleibt dadurch sichtbar. Kein Template
   angefasst, keine AJAX-Verdrahtung beruehrt. */
#jtl-nav-wrapper .hide-navbar #shop-nav i.fas,
#jtl-nav-wrapper .hide-navbar #shop-nav i.far {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
}
#jtl-nav-wrapper .hide-navbar #shop-nav i.fas::before,
#jtl-nav-wrapper .hide-navbar #shop-nav i.far::before {
    content: "";
    display: block;
    width: 31px;
    height: 31px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
#jtl-nav-wrapper .hide-navbar #shop-nav i.fa-search::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square'%3E%3Ccircle cx='20' cy='20' r='12.5'/%3E%3Cpath d='M29.5 29.5L42 42'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square'%3E%3Ccircle cx='20' cy='20' r='12.5'/%3E%3Cpath d='M29.5 29.5L42 42'/%3E%3C/svg%3E");
}
#jtl-nav-wrapper .hide-navbar #shop-nav i.fa-user::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='24' cy='15' r='8'/%3E%3Cpath d='M8 43v-4c0-10 6-16 16-16s16 6 16 16v4z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='24' cy='15' r='8'/%3E%3Cpath d='M8 43v-4c0-10 6-16 16-16s16 6 16 16v4z'/%3E%3C/svg%3E");
}
#jtl-nav-wrapper .hide-navbar #shop-nav i.fa-heart::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M24 42S5 31 5 17.5C5 9 15.5 5 24 14 32.5 5 43 9 43 17.5 43 31 24 42 24 42z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M24 42S5 31 5 17.5C5 9 15.5 5 24 14 32.5 5 43 9 43 17.5 43 31 24 42 24 42z'/%3E%3C/svg%3E");
}
#jtl-nav-wrapper .hide-navbar #shop-nav i.fa-shopping-cart::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8 17h32l-2 27H10zM16 17V12a8 8 0 0 1 16 0v5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8 17h32l-2 27H10zM16 17V12a8 8 0 0 1 16 0v5'/%3E%3C/svg%3E");
}

/* Zaehler an Wunschliste und Warenkorb: Akzentpille, weisse Schrift.
   Weiss auf #830779 ergibt 9,24:1 — deutlich ueber dem Mindestwert. */
#jtl-nav-wrapper .hide-navbar #shop-nav i .fa-sup {
    position: absolute;
    top: -8px;
    left: 20px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--fs-v6-purple);
    color: var(--fs-v6-white);
    font-family: var(--fs-v6-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Warenkorbpreis in DM Sans, direkt neben dem Symbol */
#jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .nav-link .cart-price,
#jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .nav-link .price {
    font-family: var(--fs-v6-body);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Die Suche als quadratischer Knopf, 66 x 66 --- */
#jtl-nav-wrapper .hide-navbar #search.fs-v6-search > a.nav-link,
#jtl-nav-wrapper .hide-navbar #search.fs-v6-search > .nav-link {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid var(--fs-v6-black);
    color: var(--fs-v6-black);
    background: transparent;
}
#jtl-nav-wrapper .hide-navbar #search.fs-v6-search > .nav-link:hover,
#jtl-nav-wrapper .hide-navbar #search.fs-v6-search > .nav-link:focus-visible,
#jtl-nav-wrapper .hide-navbar #search.fs-v6-search.show > .nav-link {
    border-color: var(--fs-v6-purple);
    color: var(--fs-v6-purple);
}
/* Das aufklappende Formular: kantig, mit Akzentschatten */
#jtl-nav-wrapper .hide-navbar #search.fs-v6-search .dropdown-menu {
    min-width: 520px;
    padding: 0;
    border: 2px solid var(--fs-v6-black);
    border-radius: 0;
    box-shadow: 8px 8px 0 var(--fs-v6-purple);
}
#jtl-nav-wrapper .hide-navbar #search.fs-v6-search .dropdown-body { padding: 18px; }
#jtl-nav-wrapper .hide-navbar #search.fs-v6-search .search-wrapper { width: 100%; max-width: none; }
#jtl-nav-wrapper .hide-navbar #search.fs-v6-search .form-control.ac_input {
    height: 54px;
    border: 2px solid var(--fs-v6-black);
    border-radius: 0;
    background: var(--fs-v6-white);
    color: var(--fs-v6-black);
    font-family: var(--fs-v6-body);
}
#jtl-nav-wrapper .hide-navbar #search.fs-v6-search .form-control.ac_input:focus {
    border-color: var(--fs-v6-purple);
    box-shadow: 0 0 0 3px rgba(131, 7, 121, .18);
}

/* Sichtbarer Tastaturfokus im gesamten Header */
#jtl-nav-wrapper .hide-navbar a:focus-visible,
#jtl-nav-wrapper .hide-navbar button:focus-visible,
#jtl-nav-wrapper .navbar-wrapper a:focus-visible {
    outline: 3px solid var(--fs-v6-purple);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   3 — SCHWARZE KATEGORIENAVIGATION (66 px)
   --------------------------------------------------------------------------- */

/* Auch hier KEIN overflow:hidden — das Mega-Menue haengt in dieser Leiste. */
#jtl-nav-wrapper .navbar-wrapper {
    position: relative;
    min-height: var(--fs-v6-nav-h);
    background: var(--fs-v6-black);
}

/* Diagonale Akzentkeile an beiden Raendern, 116 px */
#jtl-nav-wrapper .navbar-wrapper::before,
#jtl-nav-wrapper .navbar-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 116px;
    height: 100%;
    background: var(--fs-v6-purple);
    pointer-events: none;
    z-index: 0;
}
#jtl-nav-wrapper .navbar-wrapper::before {
    left: 0;
    clip-path: polygon(0 0, 100% 0, 66% 100%, 0 100%);
}
#jtl-nav-wrapper .navbar-wrapper::after {
    right: 0;
    clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
}
#jtl-nav-wrapper .navbar-wrapper > * { position: relative; z-index: 1; }

#jtl-nav-wrapper .navbar-wrapper > .container,
#jtl-nav-wrapper .navbar-wrapper > .container-fluid {
    max-width: none;
    min-height: var(--fs-v6-nav-h);
    padding: 0 116px;
}
#jtl-nav-wrapper .navbar-wrapper .navbar {
    min-height: var(--fs-v6-nav-h);
    padding: 0;
}
#jtl-nav-wrapper .navbar-wrapper .navbar-nav {
    width: 100%;
    justify-content: space-evenly;
}

/* Hauptpunkte: Anton, Versalien. Anzahl, Reihenfolge und Texte bleiben
   exakt wie im Shop — es wird nur gestaltet. */
#jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--fs-v6-nav-h);
    /* Vorlage zeigt 9 Punkte, der Shop hat 12 (Architektur eingefroren).
       Engere Polster + 18px, damit alle 12 bei 1920 in die Zeile passen. */
    padding: 0 clamp(10px, 0.9vw, 17px);
    color: var(--fs-v6-white);
    font-family: var(--fs-v6-title);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
}

#jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item + li.nav-item > a.nav-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 2px;
    height: 27px;
    margin-top: -13.5px;
    background: var(--fs-v6-purple);
}

/* Aktiv/offen: Akzentlinie UND Unterstreichung — nie nur Farbe */
#jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link:hover,
#jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link:focus-visible,
#jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item.show > a.nav-link,
#jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link[aria-expanded="true"] {
    color: var(--fs-v6-white);
    box-shadow: inset 0 -3px 0 0 var(--fs-v6-purple);
    text-decoration: underline;
    text-underline-offset: 6px;
}


} /* Ende Desktop-Kapselung Abschnitt 2+3 */

/* ---------------------------------------------------------------------------
   4 — SCHMALERER DESKTOP (992–1599 px)
   Die Vorlage ist auf 1920 gezeichnet. Darunter schrumpfen Logo, Schrift und
   Abstaende, damit nichts umbricht oder aus dem Container laeuft.
   --------------------------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1599.98px) {
    #jtl-nav-wrapper .hide-navbar { padding: 0 32px; }

    #jtl-nav-wrapper .hide-navbar .navbar-brand img,
    #jtl-nav-wrapper .hide-navbar #shop-logo { width: 400px; }

    #jtl-nav-wrapper .hide-navbar #shop-nav > #search,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-item,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown,
    #jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown { padding: 0 16px; }

    #jtl-nav-wrapper .hide-navbar .fs-hd-link { font-size: 16px; }

    .fs-v6-utility .fs-tb-item { gap: 10px; padding: 0 14px; font-size: 15px; }
    .fs-v6-utility .fs-tb-gruppe .fs-tb-item:first-child { padding-left: 14px; }

    #jtl-nav-wrapper .navbar-wrapper > .container,
    #jtl-nav-wrapper .navbar-wrapper > .container-fluid { padding: 0 116px; }
    #jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link { font-size: 16px; }
}

/* Enger Desktop: die Beschriftungen der beiden Aktionslinks weichen,
   damit die Zeile nicht umbricht. Die Links bleiben erreichbar. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    #jtl-nav-wrapper .hide-navbar .fs-hd-link { font-size: 14px; }
    #jtl-nav-wrapper .hide-navbar #shop-nav > #search,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-item,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown,
    #jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown { padding: 0 11px; }
}

/* ---------------------------------------------------------------------------
   5 — MOBIL BLEIBT UNVERAENDERT
   V6 ist eine Desktop-Vorlage. Unterhalb lg greift keine der Regeln oben:
   .fs-v6-utility ist d-none, und alle Hauptregeln haengen an .hide-navbar
   in Verbindung mit den Desktop-Medienabfragen. Hier wird nur sichergestellt,
   dass die festen Hoehen mobil NICHT gelten.
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    #jtl-nav-wrapper .hide-navbar {
        min-height: 0;
        padding-left: 0;
        padding-right: 0;
    }
    #jtl-nav-wrapper .hide-navbar > .navbar { min-height: 0; }
    #jtl-nav-wrapper .navbar-wrapper { min-height: 0; }
    #jtl-nav-wrapper .navbar-wrapper::before,
    #jtl-nav-wrapper .navbar-wrapper::after { display: none; }
    #jtl-nav-wrapper .hide-navbar .navbar-brand img,
    #jtl-nav-wrapper .hide-navbar #shop-logo {
        width: auto;
        max-height: 44px;
    }
}

/* 6a-6e ebenfalls nur Desktop — 6b wuerde sonst SALE/OUTLET im weissen
   mobilen Offcanvas-Menue weiss (= unsichtbar) faerben. */
@media (min-width: 992px) {

/* ---------------------------------------------------------------------------
   6 — V6-FEINSCHLIFF nach Pixelabgleich mit der Referenz (19.08.2026)
   --------------------------------------------------------------------------- */

/* 6a: Das Basistheme legt 1px oben + 2px unten als Rahmen auf die Navileiste —
   die Zeile war dadurch 69 statt 66 px und der Header 291 statt 288. */
#jtl-nav-wrapper .navbar-wrapper {
    border-top: 0;
    border-bottom: 0;
}

/* 6b: SALE (magenta) und OUTLET (gelb) stammen aus einem frueheren Mockup
   (custom.css, !important). Die verbindliche V6-Referenz zeigt beide WEISS.
   Gleiche Wucht noetig, weil die Altregeln !important tragen. */
#jtl-nav-wrapper .navbar-wrapper li.flag-sale .nav-link,
#jtl-nav-wrapper .navbar-wrapper li.flag-outlet .nav-link,
#jtl-nav-wrapper .navbar-wrapper .navbar-collapse li.flag-sale .nav-link,
#jtl-nav-wrapper .navbar-wrapper .navbar-collapse li.flag-outlet .nav-link {
    color: var(--fs-v6-white) !important;
}
#jtl-nav-wrapper .navbar-wrapper li.flag-outlet { border-left: 0; }

/* 6c: Utility-Bar-Spalten wie im Paket: 30 % / 27 % / 43 % statt drei
   gleicher Drittel — so sitzen die Trennlinien wie in der Referenz. */
.fs-v6-utility .fs-v6-utility-items > .fs-tb-item:nth-child(1) { flex: 0 1 30%; }
.fs-v6-utility .fs-v6-utility-items > .fs-tb-item:nth-child(2) { flex: 0 1 27%; }
.fs-v6-utility .fs-v6-utility-items > .fs-tb-item:nth-child(3) { flex: 1 1 43%; }

/* 6d: Der Warenkorbpreis heisst im Markup .cart-icon-dropdown-price —
   die Regel oben zielte auf .cart-price und griff nie. */
#jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .nav-link .cart-icon-dropdown-price {
    font-family: var(--fs-v6-body);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

/* 6e: Konto-Punkt war 174 px breit (Wunschliste: 83) — Reste von Caret und
   Mindestbreiten aus dem Theme. Alle Symbolpunkte gleich kompakt. */
#jtl-nav-wrapper .hide-navbar #shop-nav > .nav-item { min-width: 0; }
#jtl-nav-wrapper .hide-navbar #shop-nav .dropdown-toggle::after { display: none; }


} /* Ende Desktop-Kapselung Abschnitt 6 */

/* 6f: Zwischen 992 und 1500 px passen die 12 Punkte mit 16px nicht in die
   Zeile — engere Polster und 15px, dann traegt die Zeile bis ~1370 ohne den
   Scrollpfeil. Darunter uebernimmt der vorhandene JTL-Scrollmechanismus
   (menu_multiple_rows = scroll), der die Punkte erreichbar haelt. */
@media (min-width: 992px) and (max-width: 1499.98px) {
    #jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link {
        padding: 0 8px;
        font-size: 15px;
    }
    /* Keile schmaler, damit die Zeile die fehlenden Pixel bekommt */
    #jtl-nav-wrapper .navbar-wrapper > .container,
    #jtl-nav-wrapper .navbar-wrapper > .container-fluid { padding: 0 96px; }
    #jtl-nav-wrapper .navbar-wrapper::before,
    #jtl-nav-wrapper .navbar-wrapper::after { width: 96px; }
}

/* ============================================================================
   F5 — RESPONSIVE-NACHBESSERUNG HEADER V6 (20.08.2026)
   ----------------------------------------------------------------------------
   Befund bei 992–1280 px (Yunus: "der Header ist nicht responsive"):
     1. custom.css haengt per ::after das Wort "Anmelden" an den Konto-Link —
        weiss auf der weissen Zeile, unsichtbar, aber 71 px breit. Daher die
        Luecke zwischen Konto und Wunschliste. Die V6-Referenz zeigt nur das
        Symbol.
     2. Die Flex-Punkte durften schrumpfen (flex-shrink 1) — unter ihrer
        Textbreite uebermalen sich "SENDUNG VERFOLGEN" und "B2B SHOP".
     3. Der Warenkorbpreis lief rechts aus dem Container (gemessen 971 > 960).
   ============================================================================ */

@media (min-width: 992px) {

    /* 1. Kein Punkt schrumpft mehr unter seinen Inhalt.
       Der Platz wird ueber Logo- und Polstergroessen geschaffen, nicht
       durch Quetschen. */
    #jtl-nav-wrapper .hide-navbar #shop-nav > .nav-item {
        flex: 0 0 auto;
    }

    /* 2. Der unsichtbare "Anmelden"-Anhang stammt aus der alten dunklen
       Kopfzeile. V6 zeigt nur das Symbol. */
    #jtl-nav-wrapper .hide-navbar #shop-nav .account-icon-dropdown .nav-link::after {
        content: none;
    }
}

/* 3. Enger Desktop: Logo klein genug, dass Suche, beide Aktionslinks und
   alle Symbole samt Preis nebeneinander Platz haben — rechnerisch und
   nachgemessen bei 992/1007/1120. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    #jtl-nav-wrapper .hide-navbar { padding: 0 24px; }
    #jtl-nav-wrapper .hide-navbar .navbar-brand img,
    #jtl-nav-wrapper .hide-navbar #shop-logo { width: 280px; }
    #jtl-nav-wrapper .hide-navbar .fs-hd-link { font-size: 13px; }
    #jtl-nav-wrapper .hide-navbar #search.fs-v6-search > .nav-link { width: 54px; height: 54px; }
    #jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .nav-link .cart-icon-dropdown-price { font-size: 14px; }
    /* Trennlinien in der niedrigeren Zeile kuerzer */
    #jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-item::before,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown::before,
    #jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish::before,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown::before {
        height: 44px;
        margin-top: -22px;
    }
    /* Die weisse Zeile darf mitwachsen duerfen heisst hier: mitschrumpfen */
    #jtl-nav-wrapper .hide-navbar { min-height: 132px; }
    #jtl-nav-wrapper .hide-navbar > .navbar { min-height: 132px; }
}

/* ============================================================================
   F6 — SCHRIFT-FEINSCHLIFF + KATEGORIE SHISHATABAK AUSGEBLENDET (20.08.2026)
   ============================================================================ */

/* --- 1. Anton -> Oswald (Anweisung Yunus: "nicht so leserlich, schmaler") ---
   Anton hat nur EINEN Schnitt: sehr fette Striche, enge Punzen — bei 13-19px
   in Versalien laeuft das zu. Oswald ist die gleiche kondensierte
   Plakat-Anmutung als Variable Font (200-700): schmalere, offenere Buchstaben,
   waehlbare Strichstaerke.

   Der Tausch passiert am Familiennamen "FS Display": diese Datei laedt NACH
   custom.css, also gewinnt dieses @font-face gegen das Anton-@font-face dort.
   Damit stellt sich JEDE Anton-Stelle um (Header, Mega-Menue, Footer,
   Geschmacksfinder) — eine Quelle, keine Streuung. anton.woff2 bleibt liegen;
   Rollback = diesen Block loeschen.
   Datei: oswald-var.woff2 (28 KB, latin, OFL-Lizenz, lokal gehostet — kein CDN). */
/* Entscheidung Yunus 20.08. (A/B-Vergleich Spielwiese): ANTON bleibt.
   Oswald war ein Zwischenschritt (oswald-var.woff2 liegt noch da).
   WICHTIG: Anton hat genau EINEN Schnitt (400). Jedes hoehere Gewicht
   laesst den Browser kuenstlich nachfetten — DAS war die "Unschaerfe".
   Deshalb traegt jede FS-Display-Stelle ab jetzt font-weight 400. */
@font-face {
    font-family: "FS Display";
    src: url("/templates/MyRemake/themes/base/fonts/anton.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Oswald 400 ist deutlich leichter als Anton. Damit die Navi nicht duenn
   wirkt, bekommen die tragenden Zeilen 500 und einen Hauch mehr Laufweite —
   beides zahlt direkt auf Leserlichkeit ein. */
@media (min-width: 992px) {
    .fs-v6-utility .fs-tb-item,
    #jtl-nav-wrapper .hide-navbar .fs-hd-link,
    #jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link {
        letter-spacing: .045em;
    }
}

/* --- 2. Kategorie SHISHATABAK ausgeblendet (Anweisung Yunus, 20.08.2026) ---
   "entferne mal die Kategorie shishatabak die haben wir schon aus liveshop
   genommen" — Live bestaetigt: 0 Vorkommen. Die eingefrorene Linkregel ist
   fuer diesen Punkt damit ausdruecklich aufgehoben.

   WARUM CSS UND NICHT DATENBANK: Die Dev-DB ist ein veralteter Abzug (siehe
   F20) — auf Live ist die Kategorie bereits ueber die Wawi entfernt. Beim
   naechsten DB-Abgleich verschwindet sie hier von selbst; bis dahin blendet
   CSS sie aus, rueckstandsfrei und ohne der Wawi ins Handwerk zu pfuschen.
   Die Kategorieseite /Shishatabak selbst bleibt im Dev aufrufbar (nur per
   Direktlink) — das erledigt ebenfalls der DB-Abgleich.

   Drei Render-Stellen, drei Selektoren:
   a) Hauptnavigation Desktop + mobiles Offcanvas: li.flag-shishatabak
   b) Kategorielisten mit data-kat="199" (li:has — alle Zielbrowser koennen das)
   c) Sicherheitsnetz ueber das Linkziel */
li.flag-shishatabak,
li:has(> a[data-kat="199"]),
#jtl-nav-wrapper li:has(> a[href$="/Shishatabak"]) {
    display: none !important;
}

/* ============================================================================
   F7 — DEZENTER HEADER (Anweisung Yunus + ChatGPT-Kritik, 20.08.2026)
   ----------------------------------------------------------------------------
   Drei Eingaben, eine Richtung:
     1. Yunus: Original-Logo rein, "weit aus kleiner", weisser Block kleiner.
     2. ChatGPT-Kritik (von Yunus uebergeben): ~15 lila Linien wirken wie ein
        Tabellenraster; Anton schreit ueberall; Suche 66px zu dominant; rechter
        Keil kollidiert; Conversion-Hierarchie falsch.
     3. Yunus: "alles zu ueberdimensional, dezenter, bessere Aufteilung,
        bessere Icons."
   Also: ChatGPT-STRUKTUR (Linien -70%, Gruppierung, Keil weg, Twei-Schrift-
   Hierarchie), aber KOMPAKTERE Masse als deren Vorschlag:
     USP-Bar 40 | weisse Zeile 120 | Kategorien 56 | gesamt 216 (statt 288).
   Ersetzt die V6-Masse und den ersten F7-Entwurf (250/128) vollstaendig.
   ============================================================================ */

/* DM Sans als Variable Font (100-1000) — liefert das fehlende Gewicht 600.
   Deklaration NACH den statischen Schnitten -> gewinnt fuer alle Gewichte. */
@font-face {
    font-family: "FS Body";
    src: url("/templates/MyRemake/themes/base/fonts/dmsans-var.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

@media (min-width: 992px) {

    /* ---------- 1. USP-Bar: 40px, DM Sans 600, zwei feine Trenner ---------- */
    .fs-v6-utility .fs-topbar-inner { min-height: 40px; height: 40px; }
    .fs-v6-utility .fs-v6-star { flex: 0 0 56px; width: 56px; }
    .fs-v6-utility .fs-v6-star svg { width: 18px; height: 18px; }
    .fs-v6-utility .fs-tb-item {
        gap: 10px;
        font-family: var(--fs-v6-body);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .07em;
    }
    /* dezente Trenner statt 2px Akzent */
    .fs-v6-utility .fs-tb-item + .fs-tb-item { border-left: 1px solid rgba(255,255,255,.18); }
    .fs-v6-utility .fs-tb-item svg { width: 18px; height: 18px; flex-basis: 18px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* ---------- 2. Weisse Zeile: 120px, Logo 260 ---------- */
    #jtl-nav-wrapper .hide-navbar { min-height: 120px; padding: 0 56px; }
    #jtl-nav-wrapper .hide-navbar > .navbar { min-height: 120px; }

    #jtl-nav-wrapper .hide-navbar .navbar-brand img,
    #jtl-nav-wrapper .hide-navbar #shop-logo {
        width: 260px;
        max-height: 94px;
    }

    /* Suche: kompakter Knopf, feinere Linie */
    #jtl-nav-wrapper .hide-navbar #search.fs-v6-search > a.nav-link,
    #jtl-nav-wrapper .hide-navbar #search.fs-v6-search > .nav-link {
        width: 48px;
        height: 48px;
        border-width: 1.5px;
    }

    /* Service-Ebene zurueckgenommen: DM Sans 600, klein, anthrazit.
       Anton bleibt den Kategorien vorbehalten — Hierarchie statt Einheitsbrei. */
    #jtl-nav-wrapper .hide-navbar .fs-hd-link {
        font-family: var(--fs-v6-body);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .06em;
        color: #4a4a4c;
    }
    #jtl-nav-wrapper .hide-navbar .fs-hd-link:hover,
    #jtl-nav-wrapper .hide-navbar .fs-hd-link:focus-visible { color: var(--fs-v6-purple); }

    /* Linien im weissen Bereich: NUR EINE, vor der Icon-Gruppe (Konto).
       Alle anderen weg — das Raster verschwindet. */
    #jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-item::before,
    #jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish::before,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown::before { display: none; }
    #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown::before {
        width: 1px;
        height: 30px;
        margin-top: -15px;
        background: rgba(3,3,3,.18);
    }

    /* Konto/Herz/Warenkorb als zusammenhaengende Gruppe, Service davor lockerer */
    #jtl-nav-wrapper .hide-navbar #shop-nav > #search,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-item { padding: 0 14px; }
    #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown,
    #jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown { padding: 0 15px; }
    #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown { padding-right: 0; }

    /* ---------- 3. Feinere Icons: 24px, Strich 2, runde Kappen ---------- */
    #jtl-nav-wrapper .hide-navbar #shop-nav i.fas,
    #jtl-nav-wrapper .hide-navbar #shop-nav i.far,
    #jtl-nav-wrapper .hide-navbar #shop-nav i.fas::before,
    #jtl-nav-wrapper .hide-navbar #shop-nav i.far::before {
        width: 24px;
        height: 24px;
    }
    #jtl-nav-wrapper .hide-navbar #shop-nav i.fa-search::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='21' cy='21' r='13'/%3E%3Cpath d='M30.5 30.5L42 42'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='21' cy='21' r='13'/%3E%3Cpath d='M30.5 30.5L42 42'/%3E%3C/svg%3E");
    }
    #jtl-nav-wrapper .hide-navbar #shop-nav i.fa-user::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='16' r='7.5'/%3E%3Cpath d='M10 41c1.5-8 6.5-12 14-12s12.5 4 14 12'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='16' r='7.5'/%3E%3Cpath d='M10 41c1.5-8 6.5-12 14-12s12.5 4 14 12'/%3E%3C/svg%3E");
    }
    #jtl-nav-wrapper .hide-navbar #shop-nav i.fa-heart::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 41C13 33.5 6.5 27 6.5 19.5 6.5 13.5 11 9 16.5 9c3 0 5.8 1.4 7.5 3.8C25.7 10.4 28.5 9 31.5 9 37 9 41.5 13.5 41.5 19.5c0 7.5-6.5 14-17.5 21.5z'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 41C13 33.5 6.5 27 6.5 19.5 6.5 13.5 11 9 16.5 9c3 0 5.8 1.4 7.5 3.8C25.7 10.4 28.5 9 31.5 9 37 9 41.5 13.5 41.5 19.5c0 7.5-6.5 14-17.5 21.5z'/%3E%3C/svg%3E");
    }
    #jtl-nav-wrapper .hide-navbar #shop-nav i.fa-shopping-cart::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16.5h30l-2.2 24.5H11.2zM17 16.5V13a7 7 0 0 1 14 0v3.5'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16.5h30l-2.2 24.5H11.2zM17 16.5V13a7 7 0 0 1 14 0v3.5'/%3E%3C/svg%3E");
    }
    #jtl-nav-wrapper .hide-navbar #shop-nav i .fa-sup {
        left: 14px;
        top: -6px;
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }
    #jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .nav-link { gap: 10px; }
    #jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .nav-link .cart-icon-dropdown-price {
        font-size: 14px;
        font-weight: 700;
    }

    /* ---------- 4. Kategorien: 56px, KEINE Linien, nur linker Akzent ---------- */
    #jtl-nav-wrapper .navbar-wrapper { min-height: 56px; }
    #jtl-nav-wrapper .navbar-wrapper > .container,
    #jtl-nav-wrapper .navbar-wrapper > .container-fluid {
        min-height: 56px;
        padding: 0 32px 0 76px;
    }
    #jtl-nav-wrapper .navbar-wrapper .navbar { min-height: 56px; }

    /* rechter Keil WEG, linker schmaler */
    #jtl-nav-wrapper .navbar-wrapper::after { display: none; }
    #jtl-nav-wrapper .navbar-wrapper::before {
        width: 56px;
        clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%);
    }

    /* Trennstriche zwischen Kategorien WEG — Abstand gliedert */
    #jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item + li.nav-item > a.nav-link::before { display: none; }

    #jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link {
        height: 56px;
        padding: 0 clamp(8px, 0.8vw, 16px);
        font-size: 15px;
        font-weight: 400;
        letter-spacing: .05em;
    }
    #jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link:hover,
    #jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item.show > a.nav-link,
    #jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link[aria-expanded="true"] {
        box-shadow: inset 0 -2px 0 0 var(--fs-v6-purple);
        text-underline-offset: 5px;
    }
}

@media (min-width: 1600px) {
    #jtl-nav-wrapper .navbar-wrapper .navbar-nav > li.nav-item > a.nav-link { font-size: 16px; }
}

/* Enger Desktop: eine Stufe kleiner */
@media (min-width: 992px) and (max-width: 1279.98px) {
    #jtl-nav-wrapper .hide-navbar { min-height: 104px; padding: 0 24px; }
    #jtl-nav-wrapper .hide-navbar > .navbar { min-height: 104px; }
    #jtl-nav-wrapper .hide-navbar .navbar-brand img,
    #jtl-nav-wrapper .hide-navbar #shop-logo { width: 200px; max-height: 74px; }
    #jtl-nav-wrapper .hide-navbar .fs-hd-link { font-size: 12px; }
    #jtl-nav-wrapper .hide-navbar #search.fs-v6-search > .nav-link { width: 44px; height: 44px; }
    #jtl-nav-wrapper .hide-navbar #shop-nav > #search,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-item { padding: 0 9px; }
    #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown,
    #jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish,
    #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown { padding: 0 10px; }
    #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown { padding-right: 0; }
}

/* F8 — Schaerfe (korrigiert 20.08. nach Test auf DPR-1-Monitor):
   Graustufen-Glaettung hilft NUR auf Retina — auf normalen Monitoren macht
   sie helle Schrift duenner und weicher. Deshalb strikt auf hochaufloesende
   Displays begrenzt; DPR 1 behaelt das scharfe Subpixel-Rendering. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    #header-top-bar, .fs-v6-utility,
    #jtl-nav-wrapper .navbar-wrapper {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Anton hat EINEN Schnitt: Kunstfettung komplett verbieten. Ein 700 (z.B.
   A-Z-Koepfe im Mega-Menue) rendert dann als echtes 400 statt als Matsch. */
#jtl-nav-wrapper, #header-top-bar, .dropdown-menu {
    font-synthesis: none;
}
.mm-letter-head { font-weight: 400 !important; }

/* ============================================================================
   F9 — HEADER-INHALT AUF CONTAINERBREITE (Anweisung Yunus, 20.08.2026)
   ----------------------------------------------------------------------------
   Der Seiteninhalt (Rail, Banner, OPC) laeuft in einem zentrierten
   1430px-Container (gemessen: x=238 bei 1920). Der Header-Inhalt startete
   dagegen bei 56px — drei Zeilen, die mit nichts fluchten. Jetzt: die
   dunklen Balken bleiben vollflaechig, der INHALT jeder Zeile liegt im
   selben 1430er-Raster wie die Seite darunter.
   Ersetzt die F7-Werte fuer padding/Kante; die 72px-Rasterkante von F7 ist
   damit Geschichte — die Rasterkante ist jetzt die Containerkante.
   ============================================================================ */

@media (min-width: 992px) {

    /* USP-Bar: Inhalt in den Container, Sternfeld an der Containerkante */
    .fs-v6-utility .fs-topbar-inner {
        max-width: 1430px;
        margin: 0 auto;
        padding: 0;
    }

    /* Weisse Zeile: Balken voll, Zeileninhalt im Container */
    #jtl-nav-wrapper .hide-navbar { padding: 0; }
    #jtl-nav-wrapper .hide-navbar > .navbar {
        max-width: 1430px;
        margin: 0 auto;
        padding: 0 11px;   /* fluchtet mit der inneren Kante des OPC-Containers */
        width: 100%;
    }

    /* Kategorienzeile: Container zentriert; der Keil wandert vom
       Viewport-Rand an die Containerkante, sonst haengt er verloren links */
    #jtl-nav-wrapper .navbar-wrapper::before { display: none; }
    #jtl-nav-wrapper .navbar-wrapper > .container,
    #jtl-nav-wrapper .navbar-wrapper > .container-fluid {
        position: relative;
        max-width: 1430px;
        margin: 0 auto;
        padding: 0 11px 0 68px;
    }
    #jtl-nav-wrapper .navbar-wrapper > .container::before,
    #jtl-nav-wrapper .navbar-wrapper > .container-fluid::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 44px;
        background: var(--fs-v6-purple);
        clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%);
        pointer-events: none;
    }
    #jtl-nav-wrapper .navbar-wrapper .navbar-nav {
        margin: 0;
    }
    #jtl-nav-wrapper .navbar-wrapper > .container > *,
    #jtl-nav-wrapper .navbar-wrapper > .container-fluid > * {
        position: relative;
    }
}

/* Unter Containerbreite: normale Innenabstaende statt Zentrierung */
@media (min-width: 992px) and (max-width: 1279.98px) {
    #jtl-nav-wrapper .hide-navbar > .navbar { padding: 0 20px; }
    #jtl-nav-wrapper .navbar-wrapper > .container,
    #jtl-nav-wrapper .navbar-wrapper > .container-fluid { padding: 0 16px 0 60px; }
}

/* ============================================================================
   F10 — GEBOXTE BALKEN (Entscheidung Yunus, 20.08.2026)
   ----------------------------------------------------------------------------
   Auf die Frage "die schwarzen Balken gehen trotzdem mit, soll es so sein?"
   fiel die Entscheidung GEGEN vollflaechige Balken: USP-Bar und
   Kategorienzeile enden jetzt an der 1430er-Containerkante — der Header
   ist ein geschlossener Kasten auf weissem Grund.
   (Empfehlung war vollflaechig/Standard; Yunus hat bewusst geboxt gewaehlt.)
   Nur >=992px; mobil bleibt der kompakte vollbreite Theme-Header.
   ============================================================================ */

@media (min-width: 992px) {

    /* Aeussere Traeger verlieren ihre schwarze Flaeche */
    #header-top-bar.topbar-wrapper { background: transparent !important; }
    /* !important noetig: das Theme faerbt den sticky Header-Traeger selbst
       dunkel (gemessen #0b0b0c) — sonst kehrt beim Scrollen der
       Vollbreiten-Balken zurueck. Weiss statt transparent, damit beim
       Darueberscrollen kein Seiteninhalt neben dem Kasten durchscheint. */
    header#jtl-nav-wrapper { background: #ffffff !important; }
    #jtl-nav-wrapper .navbar-wrapper { background: transparent !important; }

    /* Schwarz sitzt jetzt auf den 1430er-Innenelementen */
    .fs-topbar.fs-v6-utility {
        max-width: 1430px;
        margin: 0 auto;
        background: var(--fs-v6-black);
    }
    #jtl-nav-wrapper .navbar-wrapper > .container,
    #jtl-nav-wrapper .navbar-wrapper > .container-fluid {
        background: var(--fs-v6-black);
    }

    /* Randabstand-Vereinheitlichung mit dem Footer (11px, FOOTER-Sitzung) */
    #jtl-nav-wrapper .hide-navbar > .navbar { padding: 0 11px; }
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    #jtl-nav-wrapper .hide-navbar > .navbar { padding: 0 11px; }
    #jtl-nav-wrapper .navbar-wrapper > .container,
    #jtl-nav-wrapper .navbar-wrapper > .container-fluid { padding: 0 11px 0 60px; }
}

/* ============================================================================
   FM1 — MOBILER HEADER: TRUST-SWIPE-BAR + ICON-ANORDNUNG (Auftrag Yunus,
   20.08.2026, Sitzung HEADER)
   ----------------------------------------------------------------------------
   Unter 992px: schwarze Trust-Bar OBEN (35px fest, kein Layout-Shift), links
   dauerhaft das lila Sternfeld, in der Mitte genau EIN Vorteil (Swipe/Auto-
   play/Punkte via fs-header.js, Markup header_top_bar.tpl), rechts drei
   Mini-Punkte. Darunter die Hauptzeile: Burger + Lupe links, Logo exakt
   mittig, Konto + Warenkorb rechts.
   Schrift laut Auftrag "Anton" -> umgesetzt als var(--fs-v6-title)
   ("FS Display" = Oswald, Anweisung vom 20.08. ersetzt Anton generell).
   Aktiver Punkt #830779 laut Auftrag; zusaetzlich Pillenform + feiner Ring,
   weil die Farbe allein auf Schwarz kaum unterscheidbar ist (Farbenblindheit).
   Desktop (>= 992px) bleibt von diesem Abschnitt komplett unberuehrt.
   Rollback = Abschnitt FM1 entfernen (Sicherung .bak-mtrust-20260820).
   (Hiess bis v2.68 "F10" — umbenannt wegen Kollision mit F10 GEBOXTE BALKEN.)
   ============================================================================ */

@media (max-width: 991.98px) {

    /* Topbar-Geruest mobil aktivieren (Inhalt war bisher nur Desktop) */
    #header-top-bar.topbar-wrapper {
        display: block;
        background: var(--fs-v6-black);
        margin: 0;
        border: 0;
    }
    /* Theme gibt .container-fluid-xl mobil 21px Polster — Bar laeuft aber
       ueber die volle Breite */
    #header-top-bar.topbar-wrapper > .container,
    #header-top-bar.topbar-wrapper > .container-fluid {
        padding: 0 !important;
        max-width: none;
    }

    /* ---------- Trust-Swipe-Bar ---------- */
    .fs-mtrust {
        display: flex;
        align-items: stretch;
        height: 35px;                      /* feste Hoehe: kein Layout-Shift */
        background: var(--fs-v6-black);
        color: var(--fs-v6-white);
        overflow: hidden;
        margin: 0;                         /* buendig an der Hauptzeile */
    }
    .fs-mtrust-star {
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--fs-v6-purple);
        color: var(--fs-v6-white);
    }
    .fs-mtrust-star svg { width: 15px; height: 15px; fill: currentColor; }

    .fs-mtrust-viewport {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        touch-action: pan-y;               /* vertikales Seiten-Scrollen bleibt frei */
        cursor: grab;
        outline-offset: -2px;
    }
    .fs-mtrust-viewport:active { cursor: grabbing; }

    .fs-mtrust-slide {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 10px;
        /* DM Sans 600 12px (Anweisung Yunus 20.08., konsolidiert aus F12 —
           Anton/Oswald hatte hier kein Gewicht 500 -> Faux-Bold-Unschaerfe) */
        font-family: var(--fs-v6-body);
        font-weight: 600;
        font-size: 12px;
        letter-spacing: .08em;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
        visibility: hidden;                /* ohne JS zeigt .is-active den ersten */
        will-change: transform;
    }
    .fs-mtrust-slide.is-active { visibility: visible; }
    .fs-mtrust-slide svg {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .fs-mtrust-dots {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 14px 0 8px;   /* Variante A: etwas mehr Luft am rechten Rand */
    }
    .fs-mtrust-dot {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        padding: 0;
        border: 0;
        background: rgba(255, 255, 255, .45);
        transition: width .2s ease, background-color .2s ease;
    }
    .fs-mtrust-dot.is-active {
        width: 14px;
        background: var(--fs-v6-purple);
        /* Ring (Form-Signal, Farbenblindheit) + dezenter Glow (Design-Runde
           20.08., Variante A) */
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 8px rgba(201, 15, 136, .55);
    }
    .fs-mtrust-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    /* ---------- Hauptzeile: Lupe links, Logo exakt mittig ---------- */
    #jtl-nav-wrapper .hide-navbar > .navbar { position: relative; }

    #jtl-nav-wrapper .nav-logo-wrapper #logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
    /* Logo mobil 8 px kleiner (Ansage Yunus, 20.08.2026 — FOOTER-Sitzung).
       Gemessen vorher bei 375 px Fenster: 150 x 38 px, wirksam war der
       40vw-Zweig (40 % von 375 = 150), nicht die 186er-Deckelung.
       Beide Werte proportional um denselben Faktor 142/150 gesenkt, damit die
       Verkleinerung auf JEDER Breite gleich ausfaellt und nicht nur auf 375:
         186 -> 176 px,  40vw -> 37.9vw
       Ergibt bei 375 px: 142 px. Wer hier dreht, muss BEIDE Zahlen anfassen —
       sonst springt die Groesse an der Deckelungsgrenze (ab 465 px Fenster). */
    #jtl-nav-wrapper #shop-logo { max-width: min(176px, 37.9vw); height: auto; }

    /* Lupe aus der rechten Gruppe optisch nach links neben den Burger.
       KEIN transform: das machte den Punkt zum Containing Block fuer das
       position:fixed-Dropdown darunter — Flex-Zentrierung stattdessen. */
    #shop-nav .fs-v6-search {
        position: absolute;
        left: 52px;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
    }

    /* Das Such-Dropdown der versetzten Lupe: volle Breite unter dem Header
       (an der alten Position hing es 36px links aus dem Bild). Vertikal
       haengt es per top:100% am Nav-Punkt (der die volle Zeilenhoehe hat)
       und wandert so mit dem Sticky-Header; left/width auf Viewportbreite
       setzt fs-header.js (das Dropdown oeffnet ohnehin nur mit JS). */
    #shop-nav .fs-v6-search .dropdown-menu {
        top: 100%;
        bottom: auto;
        margin-top: 2px;   /* unter der Magenta-Linie */
        border-radius: 0;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fs-mtrust-dot { transition: none; }
}

/* ============================================================================
   F11 (WIEDERHERGESTELLT) — LOGO DESKTOP MITTIG + 255px
   ⚠️ NICHT LOESCHEN — direkte Anweisung Yunus 20.08.2026 („logo auch in der
   desktopvariante mittig machen und um 5 pixel reduzieren").
   Der erste F11-Block wurde beim Mobil-Header-Umbau (Sitzung HEADER-MOBIL,
   v2.68) versehentlich entfernt. Dieser Block ist strikt >=992px und
   kollidiert NICHT mit der mobilen Trust-Swipe-Bar oder der mobilen
   Logo-Anordnung. Bei Aenderungsbedarf: HEADER-Sitzung anfunken, nicht
   loeschen.
   ============================================================================ */
@media (min-width: 992px) {
    #jtl-nav-wrapper .hide-navbar > .navbar { position: relative; }
    #jtl-nav-wrapper .hide-navbar .nav-logo-wrapper {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        z-index: 2;
    }
    #jtl-nav-wrapper .hide-navbar .navbar-brand img,
    #jtl-nav-wrapper .hide-navbar #shop-logo { width: 255px; }
    #jtl-nav-wrapper .hide-navbar .nav-icons-wrapper,
    #jtl-nav-wrapper .hide-navbar #shop-nav { width: 100%; }
    #jtl-nav-wrapper .hide-navbar #shop-nav > #search { padding-left: 0; }
    /* linke Gruppe endet nach B2B, Freiraum dahinter, Symbole rechts aussen */
    #jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-b2b-wrap { margin-right: auto; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
    #jtl-nav-wrapper .hide-navbar .navbar-brand img,
    #jtl-nav-wrapper .hide-navbar #shop-logo { width: 195px; }
}

/* ============================================================================
   F12 — TRUSTBAR: KLEINER + DM SANS + ORIGINAL-WHATSAPP (Yunus, 20.08.2026)
   ----------------------------------------------------------------------------
   "Schriftgroesse in der Trustbar verkleinern, und wenn es Anton ist ->
    DM Sans" + "WhatsApp-Icon bitte das originale".
   Desktop-USP-Bar war schon DM Sans (13px) -> 12px.
   Die MOBILE Wisch-Leiste (FM1, Sitzung HEADER-MOBIL) lief in Anton 500 —
   Anton hat kein 500, der Browser fettete kuenstlich nach. Hier additiv
   uebersteuert statt FM1 zu editieren; HEADER-MOBIL ist informiert.
   Das offizielle WhatsApp-Logo ist fill-basiert — die Linien-Styles der
   Icon-Regeln duerfen nicht greifen (Klasse .wa).
   ============================================================================ */

@media (min-width: 992px) {
    /* 12 -> 9px auf direkte Anweisung Yunus an BANNER (20.08., v2.124);
       aus fs-banner.css in die Basisregel uebernommen. */
    .fs-v6-utility .fs-tb-item { font-size: 9px; }
}
/* Mobilregeln fuer .fs-mtrust-slide: am 20.08. in FM1 konsolidiert (HEADER-MOBIL, v2.105) */
.fs-v6-utility .fs-tb-item svg.wa,
.fs-mtrust-slide svg.wa {
    fill: currentColor;
    stroke: none;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

/* ============================================================================
   F13 — VARIANTE B PORTIERT (Board-Abnahme Yunus, 20.08.2026)
   ----------------------------------------------------------------------------
   Anatomie der weissen Zeile: LINKS der veredelte Haendler-Button (Magenta,
   Keil-Ecke, "FUER HAENDLER / Grosshandelspreise sichern") — RECHTS die Lupe
   als erstes Mitglied der Icon-Familie, durch eine hauchduenne Linie von
   Konto/Herz/Warenkorb getrennt. "Sendung verfolgen" ist aus dem Header raus
   (wohnt im Footer). Doofinder-Vertrag: .form-control.ac_input unangetastet.
   ============================================================================ */

@media (min-width: 992px) {

    /* Lupe wandert in die rechte Icon-Familie (vor Konto) */
    #jtl-nav-wrapper .hide-navbar #shop-nav > #search { order: 55; padding: 0 14px; }

    /* Hauchduenne Linie zwischen Lupe und Konto-Gruppe */
    #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown::before {
        width: 1px;
        height: 26px;
        margin-top: -13px;
        background: rgba(3,3,3,.10);
    }

    /* Der Haendler-Button */
    #jtl-nav-wrapper .hide-navbar .fs-hd-haendler {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--fs-v6-pink, #c90f88);
        color: #ffffff;
        padding: 10px 26px 10px 16px;
        clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
        text-decoration: none;
        transition: background .15s;
    }
    #jtl-nav-wrapper .hide-navbar .fs-hd-haendler:hover,
    #jtl-nav-wrapper .hide-navbar .fs-hd-haendler:focus-visible {
        background: var(--fs-v6-purple);
        color: #ffffff;
    }
    #jtl-nav-wrapper .hide-navbar .fs-hd-haendler svg {
        width: 21px; height: 21px; flex: 0 0 21px;
        fill: none; stroke: #ffffff; stroke-width: 2.4;
        stroke-linecap: round; stroke-linejoin: round;
    }
    .fs-hz { display: flex; flex-direction: column; line-height: 1.15; }
    .fs-hz-gross {
        font-family: var(--fs-v6-title);
        font-weight: 400; font-size: 15px; letter-spacing: .06em;
    }
    .fs-hz-klein {
        font-family: var(--fs-v6-body);
        font-weight: 700; font-size: 10px; letter-spacing: .1em;
        text-transform: uppercase; color: rgba(255,255,255,.9);
    }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
    #jtl-nav-wrapper .hide-navbar .fs-hd-haendler { padding: 8px 20px 8px 12px; gap: 9px; }
    .fs-hz-gross { font-size: 13px; }
    .fs-hz-klein { font-size: 9px; }
}

/* F14 — Desktop-Icons (Anweisung Yunus, 20.08.): 24 -> 27 -> 30px.
   Formen kommen weiter aus fs-icons.css (Blocksatz v4.1) — hier nur Boxmasse.
   ICONSET ist informiert (deren ::after-Raeder skalieren mit dem Kasten). */
@media (min-width: 992px) {
    #jtl-nav-wrapper .hide-navbar #shop-nav i.fas,
    #jtl-nav-wrapper .hide-navbar #shop-nav i.far,
    #jtl-nav-wrapper .hide-navbar #shop-nav i.fas::before,
    #jtl-nav-wrapper .hide-navbar #shop-nav i.far::before {
        width: 30px;
        height: 30px;
    }
    #jtl-nav-wrapper .hide-navbar #shop-nav i .fa-sup { left: 18px; top: -7px; }
}

/* Kopf-Icons MOBIL (Ansage Yunus, 20.08.2026 — FOOTER-Sitzung): 20 -> 23 px.
   Gegenstueck zur Desktop-Regel darueber, gleiche Selektorkette, damit beide
   Zustaende an einer Stelle nachvollziehbar sind.
   Gemessen vorher bei 375 px: Lupe, Konto und Warenkorb je 20 x 20 px
   (font-size 15.75px, kein eigener Kasten). Formen kommen weiter aus
   fs-icons.css — hier nur Boxmasse, wie beim Desktop-Block.
   ACHTUNG: Die ::after-Raeder des ICONSETs skalieren mit dem Kasten. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper .hide-navbar #shop-nav i.fas,
    #jtl-nav-wrapper .hide-navbar #shop-nav i.far,
    #jtl-nav-wrapper .hide-navbar #shop-nav i.fas::before,
    #jtl-nav-wrapper .hide-navbar #shop-nav i.far::before {
        width: 23px;
        height: 23px;
        font-size: 18px;
    }
}

/* ============================================================================
   MEGA-MENUE AUF DIE BREITE DER SCHWARZEN NAVIGATIONSLEISTE
   (SEITEN 21.08.2026 — Ansage Yunus: "das Fenster das sich oeffnet soll so
   breit sein wie die schwarze Flaeche dahinter")
   ----------------------------------------------------------------------------
   Gemessen: Die schwarze Leiste (.container mit #111114) und das Panel liefen
   auseinander — Panel begann 68px weiter rechts und endete 11px frueher.
   Der Versatz ist bei JEDER Fensterbreite identisch (geprueft bei 1280, 1440,
   1600, 1920: immer 68/11), weil beide im selben Container haengen und der
   Unterschied aus festen Innenabstaenden stammt. Deshalb feste Negativwerte
   statt calc().

   width MUSS auf auto: das Panel traegt eine berechnete Breite (1351px), die
   left/right sonst aushebelt.

   Nur ab 992px — darunter ist das Panel die mobile Ebene und liegt full-bleed.
   ============================================================================ */
@media (min-width: 992px) {
    #mainNavigation .dropdown-menu:has(.mm-wrapper) {
        left: -68px !important;
        right: -11px !important;
        width: auto !important;
    }
}