/* ============================================================================
   FS-MENU — Sitzung MENUE (20.08.2026, ueberarbeitet: Pfeile raus)
   ----------------------------------------------------------------------------
   Gehoert zur Datei fs-menu.js. Laedt im Minify-Block NACH fs-redesign.css
   und ueberschreibt deshalb per Reihenfolge. fs-redesign.css (HEADER-Sitzung)
   wird nicht angefasst.

   Teil 1: Packshot-Karussell unter der Navi — Anweisung Yunus 20.08.:
           KEINE Pfeile mehr. Swipe-Hinweis stattdessen ueber
           1) angeschnittene letzte Kachel (Peek),
           2) weiche Weiss-Verlaeufe an den Raendern, nur dort wo es
              weitergeht (Klassen --more-left/--more-right aus fs-menu.js),
           3) Maus-Ziehen am Desktop (Grab-Cursor), Touch nativ.
           Alle Regeln unter .fs-rail-wrap: die Huelle setzt NUR fs-menu.js.
           Ohne JavaScript bleibt exakt der Zustand aus fs-redesign.css
           (duenne Scrollleiste) — kein Funktionsverlust.
   Teil 2: Mega-Menue — Marke magenta + Produktname dunkel (Referenz 08).

   Rollback = Datei-Eintrag aus template.xml entfernen (+ fs-menu.js).
   ============================================================================ */

/* ---------- Teil 1: Karussell-Huelle ---------- */

.fs-rail-wrap {
    position: relative;
}

/* Scrollleiste aus — die Fades + Peek uebernehmen die Anzeige.
   KEIN scroll-snap: das Theme vererbt scroll-behavior:smooth auf die Rail,
   und Snap + programmatisches Scrollen heben sich gegenseitig auf. */
.fs-rail-wrap .ig-story-bar {
    scrollbar-width: none;
    /* Theme vererbt scroll-behavior:smooth — das macht selbst direktes
       scrollLeft-Setzen (Maus-Ziehen!) zur nachschleppenden Animation.
       Ziehen braucht 1:1-Kopplung; natives Rad-/Touch-Scrollen ist von
       scroll-behavior ohnehin unberuehrt. */
    scroll-behavior: auto;
}
.fs-rail-wrap .ig-story-bar::-webkit-scrollbar {
    display: none;
}
.fs-rail-wrap .ig-story-bar .ig-story {
    /* Kacheln verteilen sich auf die volle Breite, sobald Platz ist;
       bei Ueberbreite greift der interne Scroll und die letzte sichtbare
       Kachel wird angeschnitten (Peek = Swipe-Hinweis). */
    flex: 1 0 116px;
}

/* Tastatur: die Rail selbst ist fokussierbar (tabindex aus fs-menu.js),
   Pfeiltasten scrollen nativ. Sichtbarer Fokus wie im Projektstandard. */
.fs-rail-wrap .ig-story-bar:focus-visible {
    outline: 2px solid #e5169f;
    outline-offset: -2px;
}

/* ---------- Rand-Fades: zeigen, WO es weitergeht ---------- */

.fs-rail-wrap::before,
.fs-rail-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 2;
}
.fs-rail-wrap::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 12%, rgba(255,255,255,0));
}
.fs-rail-wrap::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 12%, rgba(255,255,255,0));
}
.fs-rail-wrap--more-left::before  { opacity: 1; }
.fs-rail-wrap--more-right::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .fs-rail-wrap::before,
    .fs-rail-wrap::after { transition: none; }
}

/* ---------- Maus-Ziehen am Desktop ---------- */

.fs-rail-wrap--draggable .ig-story-bar { cursor: grab; }
.fs-rail-wrap--dragging  .ig-story-bar { cursor: grabbing; }
/* Waehrend des Ziehens keine Text-/Bildauswahl und kein Link-Hover-Flackern */
.fs-rail-wrap--dragging .ig-story-bar .ig-story {
    user-select: none;
    -webkit-user-select: none;
}
.fs-rail-wrap--dragging .ig-story-bar .ig-story img { pointer-events: none; }

/* ---------- Einheitliche Standlinie: alle Packshots IM Schatten ----------
   Der ovale CSS-Bodenschatten kommt aus fs-redesign.css (.ig-image::after,
   radialer Verlauf an der Unterkante). Damit jedes Produkt darauf "steht",
   werden alle Bilder buendig an die Unterkante der Bildflaeche gezogen —
   gleicher Startpunkt vom Boden, egal wie hoch das Motiv ist. Bilder mit
   eingebautem Weissraum unten koennen trotzdem schweben; das ist dann ein
   Bildzuschnitt-Thema, kein CSS-Thema. */
.fs-rail-wrap .ig-story-bar .ig-image img {
    object-fit: contain;
    object-position: center bottom;
}
/* Schatten exakt unter die Standlinie, mittig — und DUNKLER als die
   fs-redesign-Fassung (.16): Anweisung Yunus 20.08. (zweimal nachgeschaerft).
   Die eingebackenen Bildschatten sind dafuer aus allen 14 Motiven entfernt
   (fs_rail_v5) — ein Schatten, eine Quelle: CSS. Alle Motive stehen auf
   derselben Standlinie (Unterkante 24px ueber Bildrand = ~1.8px ueber der
   Boxunterkante bei 88px Anzeige), deshalb Schatten knapp darunter. */
.fs-rail-wrap .ig-story-bar .ig-image::after {
    /* Schattenbreite 48% (Anweisung Yunus 30.08.) — vorher 62%.
       Die Kacheln stammen jetzt aus den gepflegten JTL-Kategoriebildern und
       sind an der Standlinie nur 13-21 px breit; 62% lagen deutlich zu weit
       ueber die Flasche hinaus. */
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 48%;
    height: 8px;
    background: radial-gradient(ellipse at center,
        rgba(17,17,20,.40) 0%, rgba(17,17,20,0) 74%);
}

/* Liquids-Kachel (Trio Elfliq/OWLIQ/Vozol): EIN Schatten pro Flasche —
   drei kleine Ovale statt eines breiten (Anweisung Yunus 20.08.).
   Selektor ueber das Linkziel /liquids; die Schwester-Links enden anders
   (owl-liquid, Vozol-Liquid, randm-liquid-tornado) und bleiben unberuehrt. */
.fs-rail-wrap .ig-story-bar .ig-story[href$="/liquids"] .ig-image::after {
    width: 96%;
    background-image:
        radial-gradient(ellipse at center, rgba(17,17,20,.40) 0%, rgba(17,17,20,0) 74%),
        radial-gradient(ellipse at center, rgba(17,17,20,.40) 0%, rgba(17,17,20,0) 74%),
        radial-gradient(ellipse at center, rgba(17,17,20,.40) 0%, rgba(17,17,20,0) 74%);
    background-size: 30% 100%;
    background-repeat: no-repeat;
    background-position: 7% 50%, 50% 50%, 93% 50%;
}

/* ---------- Label in der Display-Schrift (Mockup) ---------- */

.fs-rail-wrap .ig-story-bar .ig-story span {
    font-family: "FS Display", "Oswald", sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: .045em;
}

/* ---------- Mobil: kompakt, mehr Kacheln im Blick ---------- */

@media (max-width: 768px) {
    .fs-rail-wrap .ig-story-bar .ig-story {
        flex-basis: 96px;
        min-width: 96px;
        padding: 6px 8px 10px;
    }
    .fs-rail-wrap .ig-story-bar .ig-image {
        width: 64px;
        height: 64px;
    }
    .fs-rail-wrap .ig-story-bar .ig-story span {
        font-size: 10.5px;
        max-width: 86px;
        margin-top: 10px;
    }
    .fs-rail-wrap .ig-story-bar .ig-badge { left: 8px; font-size: 8px; }
    .fs-rail-wrap::before,
    .fs-rail-wrap::after { width: 28px; }

    /* Kategorietrenner auf Inhaltshoehe + kompakte Rail (Anweisung Yunus,
       uebernommen aus BANNERs Mobil-Block in fs-banner.css — dort geloescht).
       border-left lief ueber die volle Kartenhoehe in den Leerraum unter den
       Labels. Statt fester 108px-Hoehe (galt fuer 72px-Packshots) adaptiv
       top/bottom — die Kacheln sind hier 64px kompakt. .ig-story::after ist
       damit mobil belegt; der Bodenschatten liegt auf .ig-image::after. */
    .ig-story-bar .ig-story {
        border-left: 0;
        position: relative;
        min-height: 0;   /* 132px war Desktop-Touchziel; Inhalt traegt selbst */
    }
    .ig-story-bar .ig-story + .ig-story::after {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 14px;
        height: auto;   /* neutralisiert die fixe 108px-Hoehe aus BANNERs
                           Uebergangsblock, bis er geloescht ist */
        width: 1px;
        background: #eceaef;
    }
    .ig-story-bar { padding-bottom: 10px; }
}

/* ---------- Teil 2: Mega-Menue — Titel, Marke + Produktname ---------- */

/* Anton NUR fuer den Mega-Menue-Titel (Anweisung Yunus 20.08., "titel in
   ANTON"). Global bleibt "FS Display" = Oswald (Yunus' Tausch vom selben
   Tag, siehe fs-redesign F6) — deshalb eigene Familie statt Umbiegen. */
@font-face {
    font-family: "FS Anton";
    src: url("../base/fonts/anton.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.dropdown-menu .mm-header-title,
.mm-wrapper .mm-header-title {
    font-family: "FS Anton", "FS Display", "Oswald", sans-serif;
    font-weight: 400;   /* Anton hat nur einen Schnitt */
    letter-spacing: .02em;
}

/* 29.08.2026 — Ansage Yunus: Markenname NICHT mehr einfaerben, alles schwarz.
   Die Spans werden von fs-menu.js gar nicht mehr erzeugt (brandifyBody ist
   abgeschaltet); diese Regel bleibt nur als Sicherheitsnetz, falls ein alter
   Skript-Stand aus dem Browsercache doch noch welche baut.
   Frueher: color #c90f88 + font-weight 700. NICHT wieder einbauen. */
.dropdown-menu .mm-item-link .fs-mm-brand {
    color: inherit;
    font-weight: inherit;
}
.dropdown-menu .mm-item-link .fs-mm-rest {
    color: inherit;
    font-weight: inherit;
}

/* ---------- Teil 3: Mega-Menue A1b — Buehne rechts, 3 Spalten ----------
   Freigegeben von Yunus 20.08. via /design-shotgun (approved.json:
   mega-menue-desktop-20260820). Tokens aus variant-A1b-liquid.html.
   #mainNavigation-Praefix: gewinnt gegen menuefilter.css (laedt spaeter,
   aber nur Klassen-Spezifitaet). */

/* 27.08.: Das Raster haengt jetzt am Haken .fs-mm-hat-buehne, den fs-menu.js
   NUR setzt, wenn wirklich eine Buehne eingebaut wurde. Vorher bekam JEDES
   Menue die 300px-Spalte — auch die ohne Buehne (Merch | POS, und ab heute
   Aromen und Shishatabak). Dort stand die Spalte leer und die Markenliste
   war grundlos schmal. Ohne den Haken faellt .mm-main auf den Theme-Standard
   zurueck, also volle Breite. */
@media (min-width: 992px) {
    #mainNavigation .mm-wrapper .mm-main.fs-mm-hat-buehne {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-rows: auto auto auto 1fr;
        column-gap: 26px;
    }
    #mainNavigation .mm-main.fs-mm-hat-buehne .mm-header     { grid-area: 1 / 1 / 2 / 3; }
    #mainNavigation .mm-main.fs-mm-hat-buehne .mm-search-wrap{ grid-area: 2 / 1 / 3 / 3; }
    #mainNavigation .mm-main.fs-mm-hat-buehne .mm-alpha-nav  { grid-area: 3 / 1 / 4 / 3; }
    #mainNavigation .mm-main.fs-mm-hat-buehne .mm-columns    { grid-area: 4 / 1 / 5 / 2; }
    #mainNavigation .mm-main.fs-mm-hat-buehne .fs-mm-stage   { grid-area: 4 / 2 / 5 / 3; }
    #mainNavigation .mm-main.fs-mm-hat-buehne .mm-empty      { grid-area: 4 / 1 / 5 / 3; }

    #mainNavigation .fs-mm-stage {
        border-left: 1px solid var(--brand-haar);
        padding-left: 22px;
        min-width: 0;
    }
    #mainNavigation .fs-mm-motiv { height: 170px; margin: 10px 0 12px; }

    /* Zeilen-Tokens aus der A1b-Vorlage: kompakte Liste, sonst waechst
       Liquid (37 Marken) auf ~1140px und scrollt weit ueber die
       gemessene Vorlagenhoehe (818px) hinaus. */
    #mainNavigation .mm-columns .mm-item-link {
        padding: 7px 6px !important;
        font-size: 13.5px !important;
        line-height: 1.35 !important;
        min-height: 0 !important;
    }
    #mainNavigation .mm-columns .mm-letter-head {
        font-size: 11px !important;
        margin-bottom: 6px !important;
        padding: 0 !important;
    }
    #mainNavigation .mm-columns .mm-letter-block { margin-bottom: 16px !important; }
}

#mainNavigation .fs-mm-stage-eyebrow {
    color: #c90f88;
    font: 700 10.5px/1 "DM Sans", sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}
#mainNavigation .fs-mm-motiv {
    background: repeating-linear-gradient(45deg, #f6f5f3 0 10px, var(--brand-haar) 10px 20px);  /* Farbaudit 21.08.: Systemflaeche */
    border: 1px solid var(--brand-haar);
    display: flex;
    align-items: center;
    justify-content: center;
}
#mainNavigation .fs-mm-motiv span {
    color: var(--brand-grau);
    font: 600 10px/1 "DM Sans", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}
/* Mit echtem Motiv faellt die Schraffur weg — sie war nur der Platzhalter.
   Die Haarlinie bleibt: sie fasst das Bild und traegt die Trennung zur
   Markenliste mit. Bildnorm 1108 x 680 = exakt das Seitenverhaeltnis der
   Flaeche (277 x 170), cover schneidet daher praktisch nichts weg. */
#mainNavigation .fs-mm-motiv-bild {
    background: none;
    padding: 0;
    overflow: hidden;
}
#mainNavigation .fs-mm-motiv-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#mainNavigation .fs-mm-stage-name {
    font-family: "FS Anton", "FS Display", "Oswald", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #111114;
}
#mainNavigation .fs-mm-stage-cta {
    display: inline-block;
    margin-top: 10px;
    background: #111114;
    color: #ffffff;
    font: 700 11px/1 "DM Sans", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: 0;
    text-decoration: none;
}
#mainNavigation .fs-mm-stage-cta:hover,
#mainNavigation .fs-mm-stage-cta:focus-visible {
    background: #c90f88;
    color: #ffffff;
    text-decoration: underline;      /* nicht-farbliches Signal */
    text-underline-offset: 3px;
}
#mainNavigation .fs-mm-stage-cta:focus-visible {
    outline: 2px solid #e5169f;
    outline-offset: 2px;
}
#mainNavigation .fs-mm-stage-arr { color: #e5169f; margin-right: 6px; }

/* CTA kantig (Referenz 08 / V6-Formensprache). menuefilter.css und
   fs-redesign.css enthalten BEIDE den Selektor
   ".navbar-wrapper .navbar-collapse a.mm-cta-btn" (0-3-1, !important) —
   Gleichstand, und menuefilter.css haengt sich per JS als LETZTES
   Stylesheet ein, gewinnt also die Reihenfolge. Nur eine ID schlaegt das.
   Eng auf diese eine Eigenschaft begrenzt. */
#mainNavigation .mm-cta-btn,
.mm-wrapper .mm-cta-btn {
    border-radius: 0 !important;
}

/* ====================================================================
   TEXTKACHEL — Sitzung RAIL, 30.08.2026

   Die Rail kommt seit heute aus dem Kategoriebaum (Bootstrap.php,
   {fsKatRail}). Hat eine Unterkategorie noch kein freigestelltes
   Kategoriebild, rendert das Template statt <img> ein <span class="ig-text">
   mit dem Markennamen.

   WARUM UEBERHAUPT EINE ERSATZKACHEL:
   Der Eintrag wegzulassen waere schlimmer — dann fehlt dem Kunden ein Weg
   in eine Kategorie, die es gibt. Ein unbearbeitetes Kategoriebild
   dazwischen waere ebenfalls falsch: zwischen freigestellten Packshots
   faellt ein weisser Kasten sofort auf. Die Textkachel ist neutral, sie
   traegt den Namen und bleibt im Raster.

   Bodenschatten ist hier abgeschaltet: es steht nichts drauf.
   ==================================================================== */

.ig-story-bar .ig-image .ig-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 4px;
    font-family: "FS Display", "Oswald", sans-serif;
    font-weight: 600;
    /* 10.5px traegt auch "Barhead Electric Punch" in drei Zeilen, ohne dass
       die 88x88-Flaeche ueberlaeuft. */
    font-size: 10.5px;
    line-height: 1.12;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
    color: var(--brand-magenta, #c90f88);
    overflow: hidden;
    hyphens: auto;
}

/* Kein Produkt, kein Schatten. */
.ig-story-bar .ig-image:has(.ig-text)::after,
.fs-rail-wrap .ig-story-bar .ig-image:has(.ig-text)::after {
    display: none;
}

@media (max-width: 767px) {
    .ig-story-bar .ig-image .ig-text { font-size: 9.5px; }
}

/* Doppelten Namen abraeumen: bei der Textkachel TRAEGT die Kachel schon den
   Markennamen, die Beschriftung darunter wiederholt ihn nur. Sie bleibt im
   Markup (Vorlesehilfen, Suchmaschinen) und behaelt ihre Hoehe, damit die
   Rail nicht ausfranst, wenn Bild- und Textkacheln nebeneinander stehen —
   sie wird lediglich nicht mehr angezeigt. */
.ig-story-bar .ig-story:has(.ig-text) > span,
.fs-rail-wrap .ig-story-bar .ig-story:has(.ig-text) > span {
    visibility: hidden;
}

/* Silbentrennung raus: "187 Strassenbande" wurde zu "187 STRASSENBAN-DE"
   getrennt. In einer 88 px breiten Kachel ist ein Trennstrich mitten im
   Markennamen schlechter lesbar als ein Umbruch am Leerzeichen. */
.ig-story-bar .ig-image .ig-text {
    hyphens: manual;
    overflow-wrap: break-word;
    font-size: 10px;
    letter-spacing: .02em;
}

/* ====================================================================
   SCROLLLEISTE UNTER DER RAIL — Sitzung RAIL, 30.08.2026, Anweisung Yunus

   Am Desktop war nicht erkennbar, dass die Rail weitergeht: die Rand-Fades
   sind absichtlich leise, und wenn die letzte sichtbare Kachel zufaellig
   buendig endet, fehlt auch der Anschnitt als Hinweis. Der Balken zeigt
   beides auf einmal — DASS es weitergeht und WIE weit man ist.

   Nur bei echtem Mauszeiger. Auf dem Handy uebernehmen der Kachel-Anschnitt
   und das Schwungscrollen; ein zweiter Balken neben der System-Scrollleiste
   waere dort nur Laerm.
   ==================================================================== */

.fs-rail-leiste { display: none; }

@media (pointer: fine) {
    .fs-rail-wrap--leiste .fs-rail-leiste {
        display: block;
        position: relative;
        height: 3px;
        /* Anweisung Yunus 30.08.: naeher ans Karussell (oben 10 -> 5 px) und
           mehr Luft zum Block darunter (unten 0 -> 5 px). */
        margin: 5px auto 5px;
        width: min(320px, 42%);
        /* Eckenradius 1 px statt rund — der Kanon setzt im Shop knappe
           Radien, ein Kapselbalken faellt daneben auf. */
        border-radius: 1px;
        background: rgba(17, 17, 20, .10);
        cursor: pointer;
    }
    .fs-rail-wrap--leiste .fs-rail-daumen {
        position: absolute;
        top: -1px;
        height: 5px;
        min-width: 26px;
        border-radius: 1px;
        /* Schwarz statt Magenta (Anweisung Yunus): das Magenta ist im Shop
           die Akzentfarbe fuer Aktionen — ein Scrollbalken ist keine. */
        background: var(--brand-tinte, #111114);
        transition: left .12s ease-out, width .12s ease-out;
    }
    /* Beim Ziehen darf der Daumen nicht nachlaufen — sonst haengt er
       sichtbar hinter dem Mauszeiger her. */
    .fs-rail-wrap--dragging .fs-rail-daumen { transition: none; }
    .fs-rail-wrap--leiste .fs-rail-leiste:hover { background: rgba(17, 17, 20, .16); }
}

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

/* Startseite: 10 px mehr Luft zwischen Rail und dem Bannerblock darunter
   (Anweisung Yunus 30.08.). Der Selektor trifft nur die Startseiten-Rail:
   dort liegt sie in einem OPC-Container, auf den Kategorieseiten rendert
   sie das Template (productlist/header.tpl) ausserhalb jedes .opc-Container. */
.opc-Container .fs-rail-wrap {
    margin-bottom: 10px;
}