/* ============================================================================
   fs-filterleiste.css — Sitzung FILTERBAR, 27.08.2026
   ----------------------------------------------------------------------------
   Freigabe Yunus 27.08.2026 (Board: ~/.gstack/projects/FOGSMOKE/designs/
   filterbar-20260827/board.html):
     Desktop = Variante B "Filterleiste oben"  — Sidebar entfaellt, waagerechte
               Leiste ueber dem Raster, Raster traegt 5 statt 4 Karten.
     Mobil   = Variante C "Schnellschiene + Panel", Geschmack als Leitfilter.

   Quelle beider Zweige ist DASSELBE Markup: die Boxen
   .box[class*="box-filter"] und .box-categories aus aside#sidepanel_left.
   Der Server rendert sie AUCH mobil (nur per d-none versteckt) — die alte
   Notiz "mobil rendert der Server #sidepanel_left gar nicht" ist widerlegt,
   am 27.08. bei 390px nachgemessen: 6 Boxen, 27 Geschmackswerte im DOM.
   Deshalb braucht dieser Umbau keinen Template-Eingriff und kein AJAX.

   Verhaeltnis zu fs-aktivfilter.css/js (Besitz HEADER, Variante C Sidebar):
   NICHT editiert. Diese Datei laedt spaeter und gewinnt per Ladereihenfolge.
   fs-filterleiste.js verschiebt die JTL-Chips bewusst NICHT, sondern klont
   sie — sonst schaukeln sich die beiden MutationObserver gegenseitig hoch
   (Ping-Pong alle 150 ms). Details im Kopf der JS-Datei.

   Farben nur ueber --brand-* (FARBKONTRAKT), Radius 0, Anton immer 400 mit
   font-synthesis:none (fs-kanon.css). Kein neues Roh-Hex.
   ========================================================================== */

/* ===========================================================================
   1 — DESKTOP: die linke Spalte traegt die FILTER
   Ansage Yunus 27.08.: "ich will die FILTER LINKS haben" — und ausdruecklich
   KEINE Kategorienavigation, "die gibt es doch schon ueber das Karussell".
   Eine dritte Ausgabe derselben Links kostet nur Platz.
   ========================================================================= */
@media (min-width: 992px) {
    /* Schmaler als JTLs col-lg-3 (25 % = ~380px): jeder Pixel geht sonst
       dem Raster ab. Breite gemessen, nicht geschaetzt — siehe Kopf. */
    .row.justify-content-lg-end > aside#sidepanel_left.fs-fl-links {
        /* 280px. Der erste Versuch stand auf 180px, weil das die fuenfte
           Kartenspalte gerettet haette — das war ein schlechter Handel:
           180 zu 1250 ist ein Verhaeltnis von 1:7, das ist keine Spalte
           mehr, sondern ein Splitter. Preisfelder quetschen sich, das
           Suchfeld schneidet ab. Und bei fuenf Karten brechen die
           Produkttitel ohnehin auf zwei Zeilen.
           280 zu ~1110 ist 1:4 — das uebliche Verhaeltnis fuer eine
           Filterspalte, vier Karten zu je ~270px. */
        flex: 0 0 280px !important;
        max-width: 280px !important;
        padding-right: 36px;
        /* Oberkante: von fs-filterleiste.js gemessen, damit der Kopf auf der
           Grundlinie der Werkzeugleiste sitzt und nicht auf Hoehe der
           Kruemelspur. Faellt das JS aus, steht die Spalte wie vorher oben. */
        padding-top: var(--fs-fl-oben, 0px);
    }
    .row.justify-content-lg-end > .fs-fl-schmal {
        flex: 1 1 0% !important;
        max-width: none !important;
        margin-left: 0 !important;
        min-width: 0;
    }
    aside#sidepanel_left.fs-fl-links > .inner {
        padding: 0 !important;
        /* Senkrechte Trennung zum Raster. Sie sitzt am Filterblock, NICHT an
           der Spalte: die Spalte ist so hoch wie das ganze Raster, eine
           3500px lange Linie neben 300px Filtern sieht falsch aus. */
        border-right: 1px solid var(--brand-haar);
        padding-right: 36px !important;
        margin-right: -36px;
        padding-bottom: 8px !important;
    }

    /* In dieser Spalte stehen NUR Filter. Alles andere, was JTL bzw. die
       Boxenverwaltung dort einhaengt — Kategorienavigation, Merkzettel,
       Vergleich und vor allem Werbebanner (`DIV.banner`, auf /liquids 145px
       hoch mitten zwischen Kopf und erster Filtergruppe) — faellt raus.
       Bewusst als Ausschluss formuliert statt als Liste: sonst taucht beim
       naechsten Box-Typ wieder etwas Fremdes in der Spalte auf.
       Ausgenommen ist unser eigener Kopf; die Vertrauenskarte holt das JS
       ohnehin heraus und unter das Raster. */
    aside#sidepanel_left.fs-fl-links > .inner > *:not(.fs-fl-kopf):not([class*="box-filter"]) {
        display: none !important;
    }
}

/* ===========================================================================
   2 — Gemeinsame Bausteine (beide Breiten)
   ========================================================================= */
.fs-fl-zone,
.fs-fl-schiene,
.fs-fl-sheet {
    --fl-h: 44px;
}

.fs-fl-zone .fs-zaehler,
.fs-fl-schiene .fs-zaehler,
.fs-fl-sheet .fs-zaehler,
.fs-fl-links .fs-zaehler {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--brand-aktion);
    color: var(--brand-aktion-text);
    font-family: "FS Text", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 0;
    font-variant-numeric: tabular-nums;
}

/* Die sieben grauen Nullen des IST-Standes: weg. Ein Zaehler zeigt sich nur,
   wenn er etwas zu sagen hat (fs-aktivfilter.js setzt .fs-aktiv ab n>0). */
.fs-fl-zone .fs-zaehler:not(.fs-aktiv),
.fs-fl-schiene .fs-zaehler:not(.fs-aktiv),
.fs-fl-sheet .fs-zaehler:not(.fs-aktiv),
.fs-fl-links .fs-zaehler:not(.fs-aktiv) {
    display: none !important;
}

/* Stillgelegtes — gilt in BEIDEN Breiten. Diese Regeln standen zuerst
   irrtuemlich im min-width:992px-Block, weshalb der blaue Hinweis mobil
   stehenblieb. Beide Klassen setzt ausschliesslich fs-filterleiste.js,
   und abbauen() nimmt sie wieder weg. */
.filter-toggler.fs-fl-still,
.productlist-page-nav .filter-toggler.fs-fl-still,
.alert.fs-fl-still { display: none !important; }

/* Filterwert-Zeile (Aufklapp-Panel Desktop) */
.fs-fl-panel .filter-item,
.fs-fl-sheet .fs-fl-inhalt .filter-item {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-grau-tief);
    text-decoration: none;
}
.fs-fl-panel .filter-item .box-link-wrapper,
.fs-fl-sheet .fs-fl-inhalt .filter-item .box-link-wrapper {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 3px 0;
    font-family: "FS Text", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.35;
}
.fs-fl-panel .filter-item:hover .box-link-wrapper,
.fs-fl-sheet .fs-fl-inhalt .filter-item:hover .box-link-wrapper {
    color: var(--brand-tinte);
}
.fs-fl-panel .filter-item .snippets-filter-item-icon-right,
.fs-fl-sheet .fs-fl-inhalt .filter-item .snippets-filter-item-icon-right {
    flex: none;
    width: 15px;
    font-size: 14px;
    color: var(--brand-kante);
    order: -1;
}
.fs-fl-panel .filter-item.active,
.fs-fl-sheet .fs-fl-inhalt .filter-item.active {
    color: var(--brand-tinte);
    font-weight: 700;
}
.fs-fl-panel .filter-item.active .snippets-filter-item-icon-right,
.fs-fl-sheet .fs-fl-inhalt .filter-item.active .snippets-filter-item-icon-right {
    color: var(--brand-aktion);
}

/* JTL liefert bei manchen Gruppen (Verfuegbarkeit, Nikotingehalt) eine
   Trefferzahl als .badge mit — bei Geschmack nicht. Wo sie da ist, zeigen
   wir sie; erfunden wird keine. */
.fs-fl-panel .filter-item .badge,
.fs-fl-sheet .fs-fl-inhalt .filter-item .badge {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font-family: "FS Text", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--brand-grau-leise);
    font-variant-numeric: tabular-nums;
}
.fs-fl-sgruppe.fs-fl-leit .fs-fl-inhalt .filter-item .badge { display: none; }

/* Suchfeld in den Merkmalgruppen (JTLs eigene Funktion, nur Optik) */
.fs-fl-panel .filter-search-wrapper .input-group,
.fs-fl-sheet .filter-search-wrapper .input-group {
    margin-bottom: 8px;
}
.fs-fl-panel .filter-search,
.fs-fl-sheet .filter-search {
    height: 36px;
    border-radius: 0;
    border-color: var(--brand-kante);
    font-size: 13px;
}
.fs-fl-panel .input-group-text,
.fs-fl-sheet .filter-search-wrapper .input-group-text {
    border-radius: 0;
    border-color: var(--brand-kante);
    background: var(--brand-flaeche);
    color: var(--brand-grau);
}

/* Preisfelder + Slider */
.fs-fl-panel .price-range-input,
.fs-fl-sheet .price-range-input {
    height: 40px;
    padding-left: 11px;
    border-radius: 0;
    border-color: var(--brand-kante);
    font-size: 13px;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.fs-fl-panel .price-range-inputs .input-group-text,
.fs-fl-sheet .price-range-inputs .input-group-text {
    height: 40px;
    border-radius: 0;
    border-color: var(--brand-kante);
    background: var(--brand-flaeche);
    font-size: 11px;
    color: var(--brand-grau);
}
.fs-fl-panel .price-range-slide,
.fs-fl-sheet .price-range-slide {
    margin: 20px 8px 6px;
}

/* ===========================================================================
   3 — DESKTOP: die Filterspalte
   Die Boxen bleiben, wo der Server sie hinlegt — hier wird nur umgezogen,
   nicht umgehaengt. Das ist der wesentliche Unterschied zum ersten Wurf
   (waagerechte Leiste): solange .box-filter-price in .js-collapse-filter
   stehenbleibt, baut JTLs eigenes Inline-<script> den Preisschieber wie
   immer, und die drei Nachzieh-Fallen entfallen ersatzlos.
   Auf- und Zuklappen macht weiterhin Bootstrap (data-toggle="collapse") —
   mehrere Gruppen duerfen offen sein, das ist in einer Spalte richtig.
   ========================================================================= */
@media (min-width: 992px) {
    .fs-fl-links .fs-fl-kopf {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--brand-tinte);
    }
    .fs-fl-links .fs-fl-kopf .t {
        font-family: "FS Display", "FS Text", sans-serif;
        font-weight: 400;
        font-synthesis: none;
        font-size: 14px;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--brand-tinte);
    }
    .fs-fl-links .fs-fl-kopf .fs-fl-reset { margin-left: auto; }

    /* Boxrahmen und gefuellte Koepfe weg: eine Liste, keine sieben Karten. */
    .fs-fl-links .box[class*="box-filter"] {
        border: 0 !important;
        border-bottom: 1px solid var(--brand-haar) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    .fs-fl-links .btn-filter-box {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: 100% !important;
        min-height: 44px;
        padding: 12px 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        font-family: "FS Display", "FS Text", sans-serif !important;
        font-weight: 400 !important;
        font-synthesis: none;
        font-size: 12.5px !important;
        letter-spacing: .08em;
        line-height: 1.2 !important;
        text-transform: uppercase;
        text-align: left !important;
        color: var(--brand-tinte) !important;
        /* JTLs Knopf bringt overflow:hidden mit. Der Pfeil ist ein um 45
           Grad gedrehtes Quadrat und braucht dadurch das 1,41-fache seiner
           Kantenlaenge — er ragte einen Pixel ueber die Knopfkante und wurde
           genau dort abgeschnitten. Sichtbar als halber Pfeil. */
        overflow: visible !important;
    }
    .fs-fl-links .btn-filter-box:hover { color: var(--brand-grau-tief) !important; }
    .fs-fl-links .btn-filter-box:after,
    .fs-fl-links .btn-filter-box:before { display: none !important; }
    .fs-fl-links .btn-filter-box > span:not(.fs-zaehler):not(.fs-fl-pfeil) {
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        flex: 1;
    }
    .fs-fl-links .btn-filter-box .fs-zaehler { order: 2; }
    .fs-fl-links .fs-fl-pfeil {
        order: 3;
        flex: none;
        width: 7px;
        height: 7px;
        /* Abstand zur Kante, damit die gedrehte Spitze nicht buendig an der
           Knopfkante klebt — sonst sieht der Pfeil auch ohne Beschnitt
           gequetscht aus. */
        margin-right: 4px;
        border: solid var(--brand-grau);
        border-width: 0 1.5px 1.5px 0;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .15s ease;
    }
    .fs-fl-links .btn-filter-box[aria-expanded="true"] .fs-fl-pfeil {
        transform: translateY(1px) rotate(-135deg);
    }
    /* Gruppe mit gesetztem Wert: Marke an der Kante, kein Fuellton —
       gefuellt ist im Kanon dem Kaufknopf vorbehalten. */
    .fs-fl-links .box[class*="box-filter"].fs-fl-hat > .btn-filter-box {
        box-shadow: inset 3px 0 0 var(--brand-aktion);
        padding-left: 10px !important;
    }

    .fs-fl-links .collapse { padding-bottom: 12px; }
    .fs-fl-links .box-filter-price-collapse { padding-bottom: 16px; }

    /* Werte-Zeilen */
    .fs-fl-links .filter-item {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        color: var(--brand-grau-tief);
        text-decoration: none !important;
    }
    .fs-fl-links .filter-item .box-link-wrapper {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 32px;
        padding: 2px 0;
        font-family: "FS Text", system-ui, sans-serif;
        font-size: 13px;
        line-height: 1.35;
    }
    .fs-fl-links .filter-item:hover .box-link-wrapper { color: var(--brand-tinte); }
    .fs-fl-links .filter-item .snippets-filter-item-icon-right {
        flex: none;
        width: 15px;
        font-size: 14px;
        color: var(--brand-kante);
        order: -1;
    }
    .fs-fl-links .filter-item.active { color: var(--brand-tinte); font-weight: 700; }
    .fs-fl-links .filter-item.active .snippets-filter-item-icon-right { color: var(--brand-aktion); }
    .fs-fl-links .filter-item .badge {
        margin-left: auto;
        padding: 0;
        border: 0;
        background: none;
        font-family: "FS Text", system-ui, sans-serif;
        font-size: 11px;
        font-weight: 400;
        color: var(--brand-grau-leise);
        font-variant-numeric: tabular-nums;
    }

    /* 27 Geschmackswerte sind eine Endloswand — Deckel statt Wand. */
    .fs-fl-links .filter-search-wrapper {
        max-height: 268px;
        overflow-y: auto;
    }

    .fs-fl-links .filter-search {
        height: 34px;
        border-radius: 0;
        border-color: var(--brand-kante);
        font-size: 13px;
    }
    .fs-fl-links .input-group-text {
        border-radius: 0;
        border-color: var(--brand-kante);
        background: var(--brand-flaeche);
        color: var(--brand-grau);
    }
    .fs-fl-links .price-range-input {
        height: 38px;
        padding-left: 10px;
        border-radius: 0;
        border-color: var(--brand-kante);
        font-size: 13px;
        text-align: left;
        font-variant-numeric: tabular-nums;
    }
    .fs-fl-links .price-range-inputs .input-group-text {
        height: 38px;
        border-radius: 0;
        border-color: var(--brand-kante);
        background: var(--brand-flaeche);
        font-size: 11px;
    }
    .fs-fl-links .price-range-slide { margin: 20px 8px 6px; }
}

/* ===========================================================================
   3a — DESKTOP: das Trusted-Shops-Siegel raeumt die Filterspalte
   Gemessen: das sichtbare Siegel haengt bei left:20px und ist 93px breit,
   liegt also ueber den ersten 35px unserer Spalte — genau dort stehen die
   Kaestchen. Es verdeckte "Cola", "Drachenfrucht" und die Ueberschrift
   Nikotingehalt. Auf der rechten Seite streift es nur den Kartenrand.
   Bewusst eng gefasst: nur Desktop, nur auf Seiten mit unserer Spalte
   (body-Klasse setzt fs-filterleiste.js), und nur die Position. Greift die
   Regel wegen einer Plugin-Aenderung nicht mehr, passiert einfach nichts.
   ========================================================================= */
@media (min-width: 992px) {
    body.fs-fl-spalte [id^="trustbadge-container-"] > div > div {
        left: auto !important;
        right: 20px !important;
    }

    /* ...ABER nicht, solange der Cart-Drawer (Sitzung CARTDRAWER, 27.08.)
       offen ist. Der faehrt als .modal-sidebar.right bei x=1105..1585 auf,
       das Siegel saesse mit z-index 2147483647 gegen dessen 1050 mitten
       darauf — gemessen: es verdeckte den Knopf "WEITER EINKAUFEN" und
       elementFromPoint lieferte dort das Siegel, es fing die Klicks also
       ab. Solange der Drawer offen ist, geht das Siegel zurueck nach links;
       dort liegt der abgedunkelte Hintergrund, und unsere Filterspalte ist
       ohnehin nicht bedienbar. Zwei body-Klassen schlagen die eine oben. */
    body.fs-fl-spalte.fs-conversion-cart-open [id^="trustbadge-container-"] > div > div,
    body.fs-fl-spalte.modal-open [id^="trustbadge-container-"] > div > div {
        left: 20px !important;
        right: auto !important;
    }
}

/* ===========================================================================
   3b — DESKTOP: die Werkzeugleiste zusammenruecken
   Gemessen: drei Bloecke mit zusammen 418px verteilten sich auf 1228px —
   810px Leere zwischen zwei kleinen Ansichtsknoepfen und der Blaetterung.
   Die Trefferzahl gehoert neben die Ansichtsknoepfe, die Blaetterung nach
   rechts. Nur innerhalb unserer Spaltenaufteilung, damit andere Listen
   unberuehrt bleiben.
   ========================================================================= */
@media (min-width: 992px) {
    .fs-fl-schmal .productlist-page-nav-header-m { align-items: center; }
    .fs-fl-schmal .productlist-page-nav-header-m .productlist-item-info {
        flex: 0 0 auto;
        margin-right: auto;
        white-space: nowrap;
    }
    .fs-fl-schmal .productlist-page-nav-header-m .productlist-pagination {
        flex: 0 0 auto;
    }
}

/* ===========================================================================
   4 — DESKTOP: aktive Filter als Chipzeile ueber dem Raster
   Sie stehen bewusst NICHT in der Spalte, sondern ueber den Treffern: sie
   beschreiben das Ergebnis, nicht die Auswahl.
   ========================================================================= */
@media (min-width: 992px) {
    .fs-fl-zone { margin: 0 0 4px; }
    .fs-fl-aktiv {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
        margin: 0 0 16px;
    }
    .fs-fl-aktiv-lab {
        font-family: "FS Text", system-ui, sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--brand-grau-leise);
        margin-right: 2px;
    }
    /* JTLs Original bleibt, wo JTL es hinlegt — wir zeigen einen Klon.
       ABER: nur ausblenden, wenn unser Klon auch wirklich steht. Die Klasse
       setzt fs-filterleiste.js erst NACH dem Einhaengen der Chipzeile.
       Pauschales Ausblenden war eine Sackgasse: auf einer Seite mit NULL
       Treffern rendert JTL keine Filterboxen, unsere Zeile entstand nie,
       und der Kunde hatte keinen sichtbaren Weg aus dem Filter heraus. */
    .active-filters.fs-fl-still { display: none !important; }
}

/* Chip (Desktop-Aktivzeile und mobile Schiene teilen die Machart) */
.fs-fl-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--brand-aktion);
    border-radius: 0;
    background: var(--brand-aktion);
    color: var(--brand-aktion-text);
    font-family: "FS Text", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.fs-fl-chip:hover { background: var(--brand-aktion-hover); border-color: var(--brand-aktion-hover); color: var(--brand-aktion-text); }
.fs-fl-chip .fs-fl-x { font-size: 14px; font-weight: 400; line-height: 1; opacity: .85; }
.fs-fl-reset {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: 12px;
    color: var(--brand-grau);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 5px;
}

/* Vertrauenskarte: unter dem Raster statt in der (jetzt leeren) Sidebar */
@media (min-width: 992px) {
    .fs-fl-vertrauen-platz {
        display: flex;
        justify-content: center;
        margin: 34px 0 6px;
    }
    .fs-fl-vertrauen-platz .fs-vertrauen { max-width: 420px; width: 100%; }
    /* bleibt unter dem Raster; die linke Spalte traegt nur Navigation */
}

/* ===========================================================================
   8 — MOBIL (beide Ansichten): JTLs eigenes Filter-Panel
   Die frueheren Abschnitte 8 und 9 bauten eine eigene Schnellschiene mit
   offenen Wert-Chips und ein eigenes Sheet. Beides ist entfernt: die Chips
   sollen weg, und die Filteroptionen erst nach Antippen erscheinen (Ansage
   Yunus 27.08.). Ausserdem lief die Eigenbau-Loesung auf echten Telefonen
   nie, weil dort #sidepanel_left gar nicht existiert.
   Jetzt wird JTLs Panel benutzt statt ersetzt — dasselbe Markup in beiden
   Ansichten. Hier nur Formensprache: Anton fuer die Gruppentitel, Radius 0,
   Magenta ausschliesslich fuer Gesetztes. Aufklappen macht Bootstrap.
   ========================================================================= */
@media (max-width: 991.98px) {
    /* Gruppentitel */
    .productlist-filter-accordion > li > a {
        font-family: "FS Display", "FS Text", sans-serif;
        font-weight: 400;
        font-synthesis: none;
        font-size: 12.5px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--brand-tinte);
        text-decoration: none !important;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    /* Nur die Trennlinien zwischen den Gruppen — NICHT die linke Kante,
       sonst frisst dieses !important die Leitfilter-Marke darunter (genau
       das ist passiert: Marke rendert grau statt magenta). */
    .productlist-filter-accordion > li {
        border-top-color: var(--brand-haar) !important;
        border-bottom-color: var(--brand-haar) !important;
    }

    /* Geschmack ist die erste Gruppe (umgehaengt von fs-filterleiste.js) und
       traegt eine leise Marke — ohne Fuellton, der gehoert dem Kaufknopf. */
    .productlist-filter-accordion > li.fs-fl-leit {
        /* Marke am LI, nicht am Link: ein inset-Schatten mit eigenem
           padding-left ueberschreibt JTLs groesseres Polster und schiebt den
           Text auf den Balken — das G von GESCHMACK wurde angeschnitten.
           Ein border-left am Container kann das nicht, weil es den Inhalt
           mitverschiebt statt ihn zu ueberdecken. */
        border-left: 3px solid var(--brand-aktion) !important;
        margin-left: -3px;
    }
    /* Luft zwischen Marke und Text: JTLs Link hat padding-left 0, der Titel
       klebte sonst direkt am Balken. */
    .productlist-filter-accordion > li.fs-fl-leit > a { padding-left: 9px; }

    /* Werte-Zeilen. Gemessen im Ausgangszustand: Zeilenhoehe 20px und KEIN
       Abstand zwischen Kaestchen und Text ("☐Ananas") — auf einem Telefon
       ist das ein 20px-Tippziel, Richtgroesse sind 44px. Die Abstandsregel
       stand nur im Desktop-Block. */
    .productlist-filter-accordion .filter-item {
        display: block;
        text-decoration: none !important;
        color: var(--brand-grau-tief);
        font-family: "FS Text", system-ui, sans-serif;
        font-size: 14px;
    }
    .productlist-filter-accordion .filter-item .box-link-wrapper,
    .productlist-filter-accordion .filter-item > span,
    .productlist-filter-accordion a.dropdown-item.filter-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 2px 0;
        line-height: 1.3;
    }
    .productlist-filter-accordion .filter-item .snippets-filter-item-icon-right {
        flex: none;
        width: 16px;
        font-size: 15px;
        color: var(--brand-kante);
        order: -1;
    }
    /* Trennlinien zwischen den Werten, sonst kleben 40 Zeilen aneinander */
    .productlist-filter-accordion .filter-search-wrapper .filter-item + .filter-item,
    .productlist-filter-accordion .collapse > .filter-item + .filter-item {
        border-top: 1px solid var(--brand-haar);
    }
    .productlist-filter-accordion .filter-item.active {
        color: var(--brand-tinte);
        font-weight: 700;
    }
    .productlist-filter-accordion .filter-item.active .snippets-filter-item-icon-right {
        color: var(--brand-aktion);
    }
    .productlist-filter-accordion .filter-item .badge {
        margin-left: auto;
        padding: 0;
        border: 0;
        background: none;
        font-size: 11px;
        font-weight: 400;
        color: var(--brand-grau-leise);
        font-variant-numeric: tabular-nums;
    }

    /* Suchfeld in den langen Gruppen */
    .productlist-filter-accordion .filter-search {
        height: 36px;
        border-radius: 0;
        border-color: var(--brand-kante);
        font-size: 13px;
    }
    .productlist-filter-accordion .input-group-text {
        border-radius: 0;
        border-color: var(--brand-kante);
        background: var(--brand-flaeche);
        color: var(--brand-grau);
    }

    /* Das Trusted-Shops-Siegel faehrt mit z-index 2147483647 ueber alles.
       Solange ein Overlay offen ist — JTLs Filterpanel, der Cart-Drawer
       (Sitzung CARTDRAWER) oder sonst ein Modal — tritt es zur Seite.
       Beleg fuer den Drawer-Fall: CARTDRAWERs Gegenprobe mit 7 echten
       Einzelpositionen auf 360x640, dort lag WEITER EINKAUFEN (y519..564)
       in der Siegelzone (y510..622). Rueckbau: diesen Block loeschen. */
    body.fs-conversion-cart-open [id^="trustbadge-container-"],
    body.modal-open [id^="trustbadge-container-"] { display: none !important; }

    /* JTLs Filterpanel setzt KEIN modal-open — es ist ein Bootstrap-Collapse
       (#collapseFilter.show), kein Modal. Ohne diese Regel liegt das Siegel
       auf dem offenen Panel; gemessen auf 390x844 verdeckte es vier
       Bedienelemente, darunter den Hauptknopf "727 ARTIKEL ANSEHEN"
       (Siegel x10..78/y714..826 gegen Knopf y798).
       WICHTIG — hier stand zuerst `body:has(#collapseFilter.show)`. Das
       funktionierte im Browser, aber **JTLs CSS-Minifier wirft :has()-Regeln
       aus dem Hauptbuendel** (nachgemessen: in myclean_crit.css 1x, in
       myclean.css 0x). Deshalb haengt es jetzt an einer Klasse, die
       fs-filterleiste.js an den Bootstrap-Collapse-Ereignissen setzt.
       Merke: keine :has()-Selektoren in diesem Theme. */
    body.fs-fl-panel-auf [id^="trustbadge-container-"] {
        display: none !important;
    }
}

/* ===========================================================================
   9 — MOBIL: der Panelrahmen als Seitenlade in der Machart des Cart-Drawers
   Ansage Yunus 28.08.: "passe es an unseren Stil an, so wie besprochen."
   Bezug ist NICHT der Kanon im Abstrakten, sondern der naechste Verwandte:
   #cartModal (Sitzung CARTDRAWER, von Yunus am 27.08. abgenommen). Dort
   gemessen und hier uebernommen: schwarze Kopfzeile mit Anton-Titel in
   Versalien und quadratischem Schliesser, weisse Flaeche, linke Haarkante
   1px rgba(17,17,20,.18), Schatten -22px 0 55px rgba(17,17,20,.22),
   Fussleiste am Boden mit 0 -10px 18px rgba(17,17,20,.07), Knopf 3.2rem.
   Der Backdrop (#090909 / .52) stimmte bereits ueberein.

   Drei gemessene Maengel, die dieser Abschnitt behebt (390x844, echter
   iPhone-Kennzeichnung, Panel offen):
   (a) Panel begann bei top 52.5px, der sticky Header endet bei 60px — die
       Kopfzeile "Filter und Sortierung" verlor oben 7.5px.
   (b) Der Kopf rendert in FS Text 19.25px/600 gemischt: die einzige
       Fliesstextzeile im Panel, waehrend jeder Gruppentitel darunter in
       Anton-Versalien steht.
   (c) Der Fuss lief im Fluss mit (static): unter dem Knopf standen 126px
       leere weisse Flaeche, weil das Panel hoeher ist als sein Inhalt.
   Ausserdem war der Schliesser nur 20px breit (Richtgroesse 44px).
   ========================================================================= */
@media (max-width: 991.98px) {
    /* Kopfhoehe als Token, damit die Lade exakt unter dem Header ansetzt.
       Gemessen: 60px bei 390px Breite, 64px ab 768px. fs-filterleiste.js
       ueberschreibt den Wert beim Oeffnen mit der real gemessenen Hoehe —
       der Header gehoert der Sitzung HEADER und darf sich aendern. */
    :root { --fs-fl-kopf-h: 60px; }

    /* Huelle: rechte Seitenlade unter dem Header, als Spalte gesetzt, damit
       Kopf und Fuss stehen und nur die Filterliste scrollt. Die Regel haengt
       an .show, nicht an .collapse — sonst kollidiert die feste Hoehe mit
       Bootstraps .collapsing-Animation beim Auf- und Zuklappen. */
    .productlist-filter.js-collapse-filter.show {
        display: flex !important;
        flex-direction: column;
        top: var(--fs-fl-kopf-h) !important;
        height: calc(100vh - var(--fs-fl-kopf-h)) !important;
        height: calc(100dvh - var(--fs-fl-kopf-h)) !important;
        overflow: hidden;
        background: #ffffff;
        border-left: 1px solid rgba(17, 17, 20, .18);
        box-shadow: -22px 0 55px rgba(17, 17, 20, .22);
    }

    /* Kopfzeile. Der Schliesser ist KEIN Geschwister, sondern liegt im
       heading-<span> — deshalb wird der Span selbst zur Flexzeile; ein
       absolut gesetzter Schliesser waere hier der Umweg. */
    .productlist-filter.js-collapse-filter > .snippets-filter-mobile-heading {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: var(--fs-fl-kopf-h);
        margin: 0;
        padding: 0 8px 0 21px;
        background: var(--brand-tinte);
        color: #ffffff;
        font-family: "FS Display", Anton, "Arial Black", Impact, sans-serif;
        font-weight: 400;
        font-synthesis: none;
        font-size: 19px;
        line-height: 1;
        letter-spacing: .015em;
        text-transform: uppercase;
    }

    /* Schliesser: quadratisch mit Haarrahmen wie im Cart-Drawer, 44px
       Tippziel statt der 20px, die JTL uebrig laesst. */
    .productlist-filter.js-collapse-filter > .snippets-filter-mobile-heading > .close {
        flex: none;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        color: #ffffff !important;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, .32);
        border-radius: 0;
        opacity: 1;
        text-shadow: none;
        font-size: 22px;
        line-height: 1;
    }
    .productlist-filter.js-collapse-filter > .snippets-filter-mobile-heading > .close:hover,
    .productlist-filter.js-collapse-filter > .snippets-filter-mobile-heading > .close:focus-visible {
        background: var(--brand-aktion) !important;
        border-color: var(--brand-aktion);
        opacity: 1;
    }
    .productlist-filter.js-collapse-filter > .snippets-filter-mobile-heading > .close:active {
        transform: translateY(1px);
    }

    /* Filterliste: der einzige Teil, der scrollt. min-height:0 ist Pflicht,
       sonst wehrt sich das Flex-Kind gegen das Schrumpfen und der Fuss
       wird nach unten aus der Lade geschoben. Polster war 21px links und
       25.4px rechts (Platz fuer einen Scrollbalken, den es hier nicht gibt)
       — die Trennlinien liefen dadurch unsymmetrisch aus. */
    .productlist-filter.js-collapse-filter.show > .productlist-filter-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        /* JTL setzt das rechte Polster mit !important — ohne eigenes
           !important bleibt die Asymmetrie stehen (gemessen 25.4px). */
        padding-right: 21px !important;
        padding-left: 21px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Fussleiste steht am Boden der Lade. */
    .productlist-filter.js-collapse-filter.show > .productlist-filter-footer {
        flex: none;
        margin-top: auto;
        padding: 12px 21px calc(12px + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
        border-top: 1px solid var(--brand-haar);
        box-shadow: 0 -10px 18px rgba(17, 17, 20, .07) !important;
    }
    /* Der leere js-helpers-Knoten steht hinter dem Fuss und wuerde ihn ohne
       diese Zeile um seine Zeilenhoehe vom Boden abheben. */
    .productlist-filter.js-collapse-filter.show > .js-helpers { flex: none; }

    /* Zwischenebenen des Fusses: JTL legt den Knopf in .form-row > .col.
       Ohne diese Zeile traegt die Reihe ihre Bootstrap-Rinne (-7.5px) in
       die Lade hinein und der Knopf steht schmaler als das Polster. */
    .productlist-filter.js-collapse-filter.show .productlist-filter-footer .snippets-filter-mobile-buttons {
        margin: 0;
    }
    .productlist-filter.js-collapse-filter.show .productlist-filter-footer .snippets-filter-mobile-buttons > .col {
        padding: 0;
    }

    /* Abschlussknopf. Uebernahm am 28.08. Masse und Schrift des
       Cart-Drawer-Fusses (3.2rem, .86rem, 850, .025em).
       ANGEPASST 29.08. auf Ansage Yunus ("panelknopf anpassen"): die
       Schrift lag mit 12,04px "FS Text"/850 neben dem Kanon fuer
       herausgehobene Knoepfe — Anton 400 bei 15px, ausgezaehlt ueber alle
       50 Knoepfe der Startseite und seither auch an den drei
       Overlay-Karten (Age-Gate, Consent, Rubbellos) gesetzt.
       Hoehe von 3.2rem (51,2px) auf die Sprosse 52 gerundet.
       font-synthesis:none ist Pflicht: Anton hat nur den Schnitt 400,
       sonst faelscht der Browser eine Fettung dazu. */
    .productlist-filter.js-collapse-filter.show .productlist-filter-footer .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 52px !important;
        border-radius: 0;
        border-color: var(--brand-aktion);
        background: var(--brand-aktion);
        color: #ffffff;
        font-family: "FS Display", "FS Text", "DM Sans", Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        font-synthesis: none !important;
        letter-spacing: .08em !important;
        text-transform: uppercase;
    }
    .productlist-filter.js-collapse-filter.show .productlist-filter-footer .btn:active {
        transform: translateY(1px);
    }
    /* Fokusring der Overlay-Familie (2px --brand-deko). */
    .productlist-filter.js-collapse-filter.show .productlist-filter-footer .btn:focus-visible,
    .productlist-filter.js-collapse-filter > .snippets-filter-mobile-heading > .close:focus-visible {
        outline: 2px solid var(--brand-deko);
        outline-offset: 2px;
    }
}

/* ===========================================================================
   10 — MOBIL: der gesetzte Zustand im Panel
   Zwei Befunde aus der Gegenprobe mit gesetztem Filter
   (/liquids__cola-vapes, 390x844, Panel offen):

   (a) Der Gruppentitel einer gesetzten Gruppe rendert #bf986b — Remakes
       Sandton, der in keinem Token des FARBKONTRAKTs vorkommt. Gesetztes
       spricht in diesem Panel bereits Magenta (das Hakensymbol der Werte),
       also zieht der Titel nach.
   (b) Der Chip "GESCHMACK: COLA" stand als Rahmen OHNE Fuellung unter einer
       Schraegkante (clip-path aus fs-aktivfilter.css, Besitz HEADER) — die
       Schraege schneidet dem Rahmen die rechte Kante weg, der Chip sah
       aufgerissen aus. Der Cart-Drawer loest denselben Konflikt, indem er
       im Drawer clip-path und Radius ausdruecklich nullt (fs-cart.css
       Zeile 48-52); dieselbe Entscheidung hier. Gefuellt statt outline,
       wie die Chips der Sidebar-Variante C.

   fs-aktivfilter.css wird NICHT editiert (Besitz HEADER) — die Korrektur
   laeuft ueber die Ladereihenfolge.

   NACHTRAG 28.08. (Befund Yunus am eigenen Telefon): JTL rendert denselben
   .active-filters-Block ein ZWEITES Mal — ueber der Produktliste, ausserhalb
   des Panels. Dort stand der Fehler unveraendert: Rahmen ohne Fuellung unter
   der Schraegkante, also die aufgerissene rechte Kante. Die Regeln haengen
   deshalb nicht mehr am Panel, sondern gelten mobil an beiden Orten.
   ========================================================================= */
@media (max-width: 991.98px) {
    html body #content .productlist-filter.js-collapse-filter .productlist-filter-accordion > li > a.active,
    html body #content .productlist-filter.js-collapse-filter .productlist-filter-accordion > li > a.active * {
        color: var(--brand-aktion) !important;
    }

    /* Wer die Fuellung wegnimmt, ist ausgemessen (CSS.getMatchedStylesForNode
       statt Vermutung): fs-kleinflaechen.css:326 `#content
       .btn-outline-primary { background:transparent !important;
       border:...var(--brand-tinte) !important; color:...!important }`.
       Eine ID schlaegt jede Klassenkette, deshalb steht #content auch hier
       vorn — HEADERs `.active-filters .snippets-filter-item` (#c90f88
       !important) verliert aus demselben Grund. fs-kleinflaechen.css wird
       NICHT angefasst: die Regel ist fuer Knoepfe im Inhalt richtig, sie
       trifft den Chip nur mit. */
    html body #content .active-filters .btn:not(.snippets-filter-item-all) {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        border-radius: 0 !important;
        /* Kompakt, damit zwei bis drei Chips in eine Zeile passen: der
           Praefix faellt per JS weg, die Hoehe von 44 auf 32. Der Chip ist
           eine Anzeige mit kleinem Kreuz, kein Hauptbedienelement — das
           44px-Tippziel gilt den Filterwerten in der Liste. */
        min-height: 32px !important;
        padding: 4px 10px !important;
        border: 1px solid var(--brand-aktion) !important;
        background: var(--brand-aktion) !important;
        color: #ffffff !important;
        font-family: "FS Display", Anton, sans-serif !important;
        font-weight: 400 !important;
        font-synthesis: none;
        font-size: 12px !important;
        line-height: 1.2 !important;
        letter-spacing: .02em;
    }
    html body #content .active-filters .btn:not(.snippets-filter-item-all):hover,
    html body #content .active-filters .btn:not(.snippets-filter-item-all):focus-visible {
        border-color: var(--brand-aktion-hover) !important;
        background: var(--brand-aktion-hover) !important;
        color: #ffffff !important;
    }
    html body #content .active-filters .btn:not(.snippets-filter-item-all) .close,
    html body #content .active-filters .btn:not(.snippets-filter-item-all) i,
    html body #content .active-filters .btn:not(.snippets-filter-item-all) svg {
        color: #ffffff !important;
        opacity: 1;
    }
}

/* ===========================================================================
   11 — MOBIL: zwei Nachmessungen aus der dritten Sichtpruefung
   (a) Die Kaestchen der Werte rendern #707070 — weder --brand-kante (leer)
       noch --brand-aktion (gesetzt) kamen durch; die Regeln aus Abschnitt 8
       verlieren gegen dieselbe #content-Uebermacht wie die Chips. Mit der
       ID davor stimmt es: leere Kaestchen ruhig, das gesetzte magenta.
   (b) Der Chipblock klebte an der Unterkante des schwarzen Kopfs (beide bei
       y=120 gemessen). 14px Luft, derselbe Wert, den JTL unter dem Block
       schon fuehrt (margin-bottom:14px).
   ========================================================================= */
@media (max-width: 991.98px) {
    /* NICHT --brand-kante: der Linienton haette auf Weiss 1.3:1 — ein
       Auswahlkaestchen ist ein Bedienelement und braucht 3:1.
       --brand-grau-leise (#888891) liegt bei 3.54:1. */
    html body #content .productlist-filter.js-collapse-filter .productlist-filter-accordion .filter-item .snippets-filter-item-icon-right {
        color: var(--brand-grau-leise) !important;
    }
    html body #content .productlist-filter.js-collapse-filter .productlist-filter-accordion .filter-item.active .snippets-filter-item-icon-right {
        color: var(--brand-aktion) !important;
    }
    html body #content .productlist-filter.js-collapse-filter.show > .productlist-filter-wrapper {
        padding-top: 14px !important;
    }
}

/* ===========================================================================
   12 — MOBIL: Luft zwischen Leitmarke und Inhalt, Schliesser mittig
   Ansage Yunus 28.08.: "setz den ganzen Inhalt weiter rechts, die schneiden
   ja die Linie" und "das X zentriert in die Box und kleiner".

   Gemessen (390x844, Panel offen, Werte relativ zur Panelkante): die
   Leitmarke der Geschmack-Gruppe liegt bei 19–22px, und JEDE waagerechte
   Linie sowie jeder Text der Gruppen beginnt bei exakt 22px — also bruendig
   an der Marke, ohne einen einzigen Pixel Abstand. Genau das liest sich als
   angeschnittene Linie. 12px Polster an allen Gruppen loesen es fuer
   Titel, Suchfeld, Werte UND deren Trennlinien in einem Zug; die Chipzeile
   rueckt mit, damit die Flucht im Panel eine bleibt.
   Die 9px am Leit-Titel aus Abschnitt 8 entfallen dabei — sonst stuende er
   als einziger 9px weiter rechts als alles andere.
   ========================================================================= */
@media (max-width: 991.98px) {
    html body #content .productlist-filter.js-collapse-filter .productlist-filter-accordion > li {
        padding-left: 12px;
    }
    html body #content .productlist-filter.js-collapse-filter .productlist-filter-accordion > li.fs-fl-leit > a {
        padding-left: 0;
    }
    html body #content .productlist-filter.js-collapse-filter .active-filters {
        padding-left: 12px;
    }

    /* Schliesser: das × ist ein Textzeichen und sass durch die geerbte
       Zeilenhoehe links oben in der Box statt in der Mitte. */
    .productlist-filter.js-collapse-filter > .snippets-filter-mobile-heading > .close {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        line-height: 1;
        text-align: center;
    }
}

/* ===========================================================================
   13 — MOBIL: "Standard" aus der Sortierung nehmen
   Ansage Yunus 28.08.: die Sortierung bietet nur Artikelname A–Z / Z–A,
   Preis auf-/absteigend und Neueste zuerst.

   Sieben der zwoelf Eintraege sind ueber die Shop-Einstellungen erledigt
   (suche_sortierprio_* auf 0: Gewicht, Artikelnummer, GTIN,
   Erscheinungsdatum, Bestseller, Bewertungen) — das gilt shopweit und ist
   die richtige Stelle dafuer. Der zwoelfte, "Standard" (Sortierung=100),
   hat keine Einstellung: JTL haengt ihn immer an.

   Er ist trotzdem entbehrlich, und das ist nachgerechnet, nicht geraten:
   `artikeluebersicht_artikelsortierung` steht auf 6 — die Grundsortierung
   IST "Neueste zuerst". "Standard" und "Neueste zuerst" liefern also
   dieselbe Reihenfolge; wer zurueckwill, nimmt "Neueste zuerst".
   Rueckbau: diesen Block loeschen.
   ========================================================================= */
@media (max-width: 991.98px) {
    html body #content .productlist-filter.js-collapse-filter .filter-item[href*="Sortierung=100"] {
        display: none !important;
    }
}

/* ===========================================================================
   14 — DESKTOP: Werkzeugleiste ueber der Liste, "Variante D"
   Sitzung SORTIERLEISTE, 29.08.2026. Freigabe Yunus am Entwurfsbrett
   (~/.gstack/projects/FOGSMOKE/designs/sortierleiste-20260829/).

   Anlass war Yunus' Blick auf die Leiste: drei Bauteilhoehen nebeneinander
   (Ansicht 40, Feld 44, Blaettern 40 — keine davon auf der Kanonleiter
   36/44/52), zwei Grautoene ausserhalb des Farbkontrakts (#55555a an den
   Ziffern, #6b6b70 am Ansichtssymbol) und vier Schriftgroessen in einer
   Zeile. Dazu ein ungeplanter Umbruch zwischen 1280 und 1366 px, bei dem
   der Zaehler allein oben rechts stehenblieb.

   Die Machart ist die der Filterspalte daneben (Abschnitt 14, Besitz
   FILTERBAR): schwarzer Kopf in Anton-Versalien, Radius 0, Magenta-Kante
   als Zeichen fuer "hier hat der Kunde eingegriffen". Der Kopf traegt sie
   nur, wenn NICHT die Grundsortierung laeuft.

   Anordnung: links bedienen (Ansicht + Sortierung), dann der Zaehler,
   Blaetterleiste rechts. Der Zaehler traegt margin-right:auto — dadurch
   bleibt er an den Werkzeugen kleben, der freie Platz liegt dahinter, und
   beim Umbruch faellt die Blaetterleiste linksbuendig in die zweite Zeile
   statt nach rechts wegzurutschen.

   Loest die erste Fassung dieses Abschnitts ab (Etikett neben einem frei
   stehenden Feld, 29.08. mittags). Blaetterkacheln stehen in
   fs-pagination.css; die Filterspalte bleibt unberuehrt.
   ========================================================================= */
@media (min-width: 992px) {

    /* --- Zeile ---------------------------------------------------------- */
    .productlist-page-nav-header-m {
        align-items: center;
        row-gap: 14px;
    }
    /* Bootstraps col-7 macht den Werkzeugblock auf 992-1199px 58 % breit,
       obwohl er nur so breit sein muss wie sein Inhalt. col-xl-auto tut ab
       1200 genau das — hier gilt es fuer beide Stufen. */
    .productlist-page-nav-header-m > .displayoptions {
        display: flex;
        align-items: center;
        gap: 16px;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
    /* JTLs zweiter Filterknopf ist am Desktop stillgelegt (.fs-fl-still,
       Abschnitt 12) — seine leere Huelle wuerde sonst eine Luecke am
       Zeilenanfang kosten. */
    .productlist-page-nav-header-m > .displayoptions > .result-option-wrapper:has(.fs-fl-still) {
        /* !important, weil Bootstraps Utility d-inline-block am selben
           Element display:inline-block!important setzt — ohne das blieb
           eine 0px breite Huelle stehen und kostete 16px Luecke. */
        display: none !important;
    }
    .productlist-page-nav-header-m > .productlist-item-info {
        /* Das Theme gibt dem Zaehler margin:0 auto — mit BEIDEN Auto-Raendern
           schwimmt er mittig im Restplatz (gemessen 241.8px links wie rechts).
           Links auf 0, damit er an den Werkzeugen klebt; nur rechts auto. */
        margin-left: 0;
        margin-right: auto;
        padding-left: 20px;
        font-size: 13px;
        color: var(--brand-grau);
    }

    /* --- Ansichtsumschalter --------------------------------------------- */
    /* Grundoptik kommt aus fs-katalog.css (Radius 0, Kante) — dort ohne
       Hoehe, weshalb Bootstraps Polster 40px ergab. Die -1px-Verzahnung
       der btn-group weicht 6px Luft, wie am Entwurf abgenommen. */
    .productlist-page-nav-header-m .btn-group {
        gap: 6px;
    }
    .productlist-page-nav-header-m .btn-option,
    .productlist-page-nav-header-m .btn-option.btn-outline-secondary {
        height: 44px;
        min-width: 44px;
        padding: 0;
        margin: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--brand-kante) !important;
        border-radius: 0 !important;
        color: var(--brand-grau);
        font-size: 14px;
        line-height: 1;
        box-shadow: none !important;
        transition: border-color .15s ease, color .15s ease;
    }
    .productlist-page-nav-header-m .btn-option:hover,
    .productlist-page-nav-header-m .btn-option:focus {
        border-color: var(--brand-tinte) !important;
        color: var(--brand-tinte);
    }
    /* Gewaehlte Ansicht bleibt schwarz. Die Kante muss hier mit, weil die
       Regel oben (gleiche Spezifitaet, spaeter) sonst auch der aktiven
       Kachel die helle Kante gibt — schwarzer Block mit hellem Halo. */
    .productlist-page-nav-header-m .btn-option.active,
    .productlist-page-nav-header-m .btn-option:not(.disabled):active {
        border-color: var(--brand-tinte) !important;
    }

    /* --- Sortierung: schwarzer Kopf + Feld ------------------------------- */
    .fs-fl-sort {
        display: inline-flex;
        align-items: stretch;
        height: 44px;
    }

    .fs-fl-sort-kopf {
        display: inline-flex;
        align-items: center;
        margin: 0;                       /* Bootstrap gibt <label> 8px */
        padding: 0 14px;
        background: var(--brand-tinte);
        color: #ffffff;
        font-family: "FS Display", "FS Text", sans-serif;
        font-weight: 400;
        font-synthesis: none;
        font-size: 12.5px;
        letter-spacing: .1em;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
    }
    /* Nur wenn der Kunde eine andere als die Grundsortierung gewaehlt hat
       (Klasse setzt fs-filterleiste.js aus den Server-Daten). */
    .fs-fl-sort--gesetzt .fs-fl-sort-kopf {
        box-shadow: inset 4px 0 0 0 var(--brand-aktion);
    }

    .fs-fl-sort-feld {
        height: 44px;
        min-width: 196px;
        padding: 0 34px 0 12px;
        border: 1px solid var(--brand-kante);
        border-left: 0;                  /* schliesst fugenlos an den Kopf */
        border-radius: 0;
        background-color: #ffffff;
        /* Pfeil: 10x6 Dreieck in --brand-grau (#6c6c75). Als Daten-URI,
           weil appearance:none den System-Pfeil mitnimmt. */
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%236c6c75'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        color: var(--brand-tinte);
        font-family: "FS Text", system-ui, sans-serif;
        font-size: 13px;
        line-height: 1.2;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .fs-fl-sort-feld:hover {
        border-color: var(--brand-grau-leise);
    }

    .fs-fl-sort-feld:focus-visible {
        outline: 2px solid var(--brand-deko);
        outline-offset: 2px;
    }
}

/* ===========================================================================
   15 — D-SKIN "Schwarzer Index + Chips" (Design-Freigabe Yunus 29.08.2026)
   WIEDER EINGESETZT 29.08. nach Parallelsitzungs-Kollision: SORTIERLEISTE
   ersetzte den damaligen Abschnitt 14 auf Basis eines veralteten Stands.
   Dieser Block MUSS nach den Abschnitten 3/8 und der Sortierleiste stehen.
   ---------------------------------------------------------------------------
   Board: ~/.gstack/projects/FOGSMOKE/designs/filterfunktion-20260828/
   (variant-D.png Desktop, variant-D-mobil.png). Grundstruktur "Schwarzer
   Index": FILTER-Kopf und jeder Gruppenkopf als schwarzer Vollbalken,
   4px-Magenta-Kante an OFFENEN Gruppen. Werte als eckige CHIPS statt
   Checkbox-Zeilen — fuer Geschmack, Nikotingehalt UND Preisspanne (die
   Spannen-Chips liefern die Template-Overrides boxes/box_filter_pricerange
   .tpl und snippets/filter/mobile.tpl ueber genericFilterItem.tpl).
   Struktur vom 27.08. (Spalte links 280px, Reihenfolge, Suchfeld) bleibt.
   Dieser Abschnitt steht bewusst am DATEIENDE: er ueberschreibt die
   Zeilen-Optik der Abschnitte 3 und 8 per Reihenfolge.
   Der Magenta-CTA aus dem Mockup existiert nur mobil (JTLs Panel-Knopf) —
   am Desktop haette er keine Funktion, dort bleibt der Reset im Kopfbalken.
   ========================================================================= */

/* --- Chips: gemeinsame Machart beider Breiten --- */
.fs-fl-links .filter-item,
.productlist-filter-accordion .filter-item {
    display: inline-flex;
    border: 1px solid var(--brand-kante);
    background: var(--brand-papier, #fff);
    border-radius: 0;
}
.fs-fl-links .filter-item .box-link-wrapper,
.productlist-filter-accordion .filter-item .box-link-wrapper {
    min-height: 36px;
    padding: 0 12px;
    gap: 6px;
}
/* Das Checkbox-/Truck-Icon entfaellt: der Chip-Zustand traegt die Auswahl. */
.fs-fl-links .filter-item .snippets-filter-item-icon-right,
.productlist-filter-accordion .filter-item .snippets-filter-item-icon-right {
    display: none !important;
}
.fs-fl-links .filter-item .badge,
.productlist-filter-accordion .filter-item .badge {
    margin-left: 2px;
}
.fs-fl-links .filter-item.active,
.productlist-filter-accordion .filter-item.active {
    background: var(--brand-aktion);
    border-color: var(--brand-aktion);
}
.fs-fl-links .filter-item.active .box-link-wrapper,
.fs-fl-links .filter-item.active .word-break,
.productlist-filter-accordion .filter-item.active .box-link-wrapper,
.productlist-filter-accordion .filter-item.active .word-break {
    color: var(--brand-aktion-text, #fff);
}
.fs-fl-links .filter-item.active .badge,
.productlist-filter-accordion .filter-item.active .badge {
    color: rgba(255, 255, 255, .72);
}

/* --- DESKTOP: Balken und Chip-Flaechen in der Spalte --- */
@media (min-width: 992px) {
    .fs-fl-links .fs-fl-kopf {
        background: var(--brand-tinte);
        border-bottom: 0;
        min-height: 48px;
        padding: 0 12px;
        margin-bottom: 6px;
    }
    .fs-fl-links .fs-fl-kopf .t {
        color: var(--brand-papier, #fff);
        font-size: 16px;
    }
    .fs-fl-links .fs-fl-kopf .fs-fl-reset,
    .fs-fl-links .fs-fl-kopf .fs-fl-reset a {
        color: rgba(255, 255, 255, .8);
    }
    .fs-fl-links .fs-fl-kopf .fs-fl-reset:hover,
    .fs-fl-links .fs-fl-kopf .fs-fl-reset a:hover {
        color: var(--brand-papier, #fff);
    }

    .fs-fl-links .box[class*="box-filter"] {
        border-bottom: 0 !important;
        margin: 0 0 6px !important;
    }
    .fs-fl-links .btn-filter-box {
        background: var(--brand-tinte) !important;
        color: var(--brand-papier, #fff) !important;
        min-height: 44px;
        padding: 0 12px !important;
    }
    .fs-fl-links .btn-filter-box:hover { color: var(--brand-papier, #fff) !important; }
    .fs-fl-links .fs-fl-pfeil { border-color: var(--brand-papier, #fff); }
    /* Offene Gruppe: die Magenta-Kante des Entwurfs. Die aeltere
       .fs-fl-hat-Kante (Gruppe MIT gesetztem Wert) bleibt darunter bestehen
       und zeigt Gesetztes auch an zugeklappten Balken. */
    /* !important noetig: Abschnitt 3 setzt box-shadow: none !important auf
       den Balken (und hat damit auch die alte fs-fl-hat-Kante geschluckt). */
    .fs-fl-links .btn-filter-box[aria-expanded="true"],
    .fs-fl-links .box[class*="box-filter"].fs-fl-hat > .btn-filter-box {
        box-shadow: inset 4px 0 0 var(--brand-aktion) !important;
        padding-left: 16px !important;
    }

    /* Chip-Flaechen: die Werte-Links stehen DIREKT im Collapse bzw. im
       Scroll-Wrapper des Geschmacks — kein ul/li im Markup. */
    .fs-fl-links [class*="box-filter"] .collapse.show,
    .fs-fl-links [class*="box-filter"] .collapsing {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 2px 14px;
    }
    .fs-fl-links [class*="box-filter"] .collapse.show > .input-group { flex: 0 0 100%; }
    .fs-fl-links .filter-search-wrapper {
        flex: 0 0 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-height: 224px;
        overflow-y: auto;
    }
}

/* --- MOBIL: Balken und Chip-Flaechen im JTL-Panel --- */
@media (max-width: 991.98px) {
    .productlist-filter-accordion > li {
        border: 0 !important;
        margin-bottom: 6px;
    }
    /* Der doppelte Selektor ist Absicht: fs-aktivfilter.css (Besitz HEADER)
       faerbt die Panel-Links ueber ".modal-body.js-collapse-filter ..." mit
       hoeherer Spezifitaet auf Tinte — im Desktop-Schmalfenster steckt das
       Panel in genau diesem Gehaeuse (schwarze Schrift auf schwarzem Balken),
       auf echten Telefonen fehlt es. Beide Gehaeuse abdecken. */
    .productlist-filter-accordion > li > a,
    .modal-body.js-collapse-filter .productlist-filter-accordion > li > a {
        background: var(--brand-tinte);
        /* !important: Abschnitt 10 faerbt den Titel bei aktivem Wert magenta */
        color: var(--brand-papier, #fff) !important;
        min-height: 44px;
        padding: 0 12px;
    }
    .productlist-filter-accordion > li > a[aria-expanded="true"] {
        box-shadow: inset 4px 0 0 var(--brand-aktion);
        padding-left: 16px;
    }
    /* Die Leitfilter-Marke von Abschnitt 8 ist im Balken-System redundant —
       jede offene Gruppe traegt jetzt die Kante. */
    .productlist-filter-accordion > li.fs-fl-leit {
        border-left: 0 !important;
        margin-left: 0;
    }
    .productlist-filter-accordion > li.fs-fl-leit > a { padding-left: 12px; }
    .productlist-filter-accordion > li.fs-fl-leit > a[aria-expanded="true"] { padding-left: 16px; }

    .productlist-filter-accordion .collapse.show,
    .productlist-filter-accordion .collapsing {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 2px 14px;
    }
    .productlist-filter-accordion .collapse.show > .input-group { flex: 0 0 100%; }
    .productlist-filter-accordion .filter-search-wrapper {
        flex: 0 0 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    /* Touchgroesse: 44px statt der 36 vom Desktop. */
    .productlist-filter-accordion .filter-item .box-link-wrapper {
        min-height: 44px;
        padding: 0 14px;
    }
    /* Solange das Panel offen ist, scheinen die Merkzettel/Vergleichs-Kreise
       der Produktkarten hindurch (custom.css erzwingt sie mit display:block
       !important sichtbar, unter 576px greift die Hover-Versteck-Regel der
       Produktkarte nicht). Gleiches Muster wie beim Trusted-Shops-Siegel:
       an der JS-Klasse fs-fl-panel-auf festmachen, kein :has(). */
    body.fs-fl-panel-auf .productbox-quick-actions {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /* Die Zeilen-Trennlinien aus Abschnitt 8 passen nicht zu Chips —
       der Chip bringt seinen eigenen Rahmen mit. */
    .productlist-filter-accordion .filter-search-wrapper .filter-item + .filter-item,
    .productlist-filter-accordion .collapse > .filter-item + .filter-item {
        border-top: 1px solid var(--brand-kante) !important;
    }
    .productlist-filter-accordion .filter-item + .filter-item { border-top-width: 1px; }
}

/* ===========================================================================
   16 — BEDIENFORMEN: Kaestchenlisten (Entwurf C) + Preisschieber (Entwurf B)
   Sitzung FILTERBAR, 29.08.2026.
   ---------------------------------------------------------------------------
   Ansage Yunus, in drei Schritten:
   1. "Filterbar haben wir einen fehler gemacht wir haben alles in chips
       gemacht aber ich wollte eine ausgewogene mischung aus chips und
       anderen systemen passend zu einem filter"
   2. "Preis zum beispiel in einer leiste zum schieben"
   3. Nach Vorlage der vier Entwuerfe vom 29.08.: "Preisspanne wie bei 2 -
      der rest wie bei 3" — also Preis = variant-B, alles andere = variant-C.
      Dazu: "bau die FILTER so aus wie es ein professioneller shop machen
      wuerde uebersichtlich" und "das gleiche auch fuer mobil".

   Damit loest dieser Abschnitt die Chip-Entscheidung des D-Skins
   (Abschnitt 15) ab. Die Chips waren an drei Stellen nachweislich die
   falsche Form — gemessen an /Elfbar und /liquids:
     · Preisspanne: bei /liquids sassen 723 von 727 Artikeln in EINEM Chip
       "0,00 - 15,00 EUR". Der Chip filterte praktisch nichts.
     · Verfuegbarkeit: genau EIN Wert, also ein An/Aus-Zustand.
     · Ja/Nein-Merkmale (Wiederaufladbar, Nachfuellbar): zwei sich
       ausschliessende Antworten als zwei lose Chips.
   Entwurf C loest alle drei mit demselben Mittel: einer Kaestchenliste,
   in der die Trefferzahlen rechts in einer Flucht stehen und der Zustand
   am Kaestchen abzulesen ist, nicht an der Fuellfarbe des ganzen Elements.

   Was BLEIBT: die Grundstruktur "Schwarzer Index" (FILTER-Kopf, schwarze
   Gruppenbalken, 4px-Magenta-Kante an offenen Gruppen), die Spaltenbreite
   280px, die Reihenfolge und das Suchfeld im Geschmack. Es aendert sich
   nur, was IM Balken steckt.

   Dieser Block MUSS nach Abschnitt 15 stehen — er nimmt dessen
   Chip-Regeln per Reihenfolge zurueck.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   16.1 — Werteliste: gemeinsame Machart beider Breiten (Entwurf C)
   Die Werte-Links stehen direkt im Collapse bzw. im Scroll-Wrapper des
   Geschmacks — im Markup gibt es kein ul/li.
   --------------------------------------------------------------------------- */

.fs-fl-links [class*="box-filter"] .collapse.show,
.fs-fl-links [class*="box-filter"] .collapsing,
.productlist-filter-accordion .collapse.show,
.productlist-filter-accordion .collapsing {
    display: block;
    padding: 8px 2px 12px;
}

.fs-fl-links .filter-search-wrapper,
.productlist-filter-accordion .filter-search-wrapper {
    display: block;
}

/* Die Chip-Huelle aus Abschnitt 15 zurueck auf eine Zeile.
   margin/padding muessen mit: das <a> traegt vom Theme 3,5px oben und
   unten (der erste sogar 10,5px), was den 44px-Wrapper auf 51 bzw. 58px
   aufblies — gemessen am iPhone-Panel. Bei neun sichtbaren Werten sind
   das ueber 120px Hoehe ohne Inhalt. */
.fs-fl-links .filter-item,
.productlist-filter-accordion .filter-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}

/* Abschnitt 15 fuellte den GANZEN gewaehlten Wert magenta. In Entwurf C
   traegt das Kaestchen die Farbe, die Zeile bleibt ruhig. */
.fs-fl-links .filter-item.active,
.productlist-filter-accordion .filter-item.active {
    background: transparent;
    border-color: transparent;
}

.fs-fl-links .filter-item .box-link-wrapper,
.productlist-filter-accordion .filter-item .box-link-wrapper {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 38px;
    padding: 0 2px;
    width: 100%;
    color: var(--brand-tinte);
    line-height: 1.25;
}

/* Das Kaestchen. Leer bewusst NICHT --brand-kante (1,3:1 auf Weiss),
   sondern --brand-grau-leise (3,54:1) — ein Kaestchen ist ein
   Bedienelement und muss als solches erkennbar sein. */
.fs-fl-links .filter-item .box-link-wrapper::before,
.productlist-filter-accordion .filter-item .box-link-wrapper::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--brand-grau-leise);
    background-color: var(--brand-papier, #fff);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 11px 11px;
    transition: background-color .12s ease, border-color .12s ease;
}

.fs-fl-links .filter-item.active .box-link-wrapper::before,
.productlist-filter-accordion .filter-item.active .box-link-wrapper::before {
    background-color: var(--brand-aktion);
    border-color: var(--brand-aktion);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.2l3.3 3.4L11 2.6' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* Gewaehlt wird zusaetzlich fett gesetzt — so bleibt die Auswahl auch
   dann lesbar, wenn das Kaestchen ausserhalb des Blickfelds liegt. */
.fs-fl-links .filter-item.active .box-link-wrapper,
.fs-fl-links .filter-item.active .word-break,
.productlist-filter-accordion .filter-item.active .box-link-wrapper,
.productlist-filter-accordion .filter-item.active .word-break {
    color: var(--brand-tinte);
    font-weight: 700;
}

.fs-fl-links .filter-item .box-link-wrapper > *:not(.badge),
.productlist-filter-accordion .filter-item .box-link-wrapper > *:not(.badge) {
    min-width: 0;
}

/* Trefferzahl rechts in die Flucht. */
.fs-fl-links .filter-item .badge,
.productlist-filter-accordion .filter-item .badge {
    margin-left: auto;
    padding-left: 8px;
    color: var(--brand-grau);
    background: transparent;
    font-size: 12.5px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.fs-fl-links .filter-item.active .badge,
.productlist-filter-accordion .filter-item.active .badge {
    color: var(--brand-grau);
    font-weight: 400;
}

.fs-fl-links .filter-item:hover .box-link-wrapper::before,
.productlist-filter-accordion .filter-item:hover .box-link-wrapper::before {
    border-color: var(--brand-tinte);
}

/* Die Trennlinien aus Abschnitt 8/15 entfallen — Entwurf C hat keine,
   die Kaestchenspalte ordnet die Zeilen bereits. */
.fs-fl-links .filter-item + .filter-item,
.productlist-filter-accordion .filter-search-wrapper .filter-item + .filter-item,
.productlist-filter-accordion .collapse > .filter-item + .filter-item,
.productlist-filter-accordion .filter-item + .filter-item {
    border-top: 0 !important;
}

/* ---------------------------------------------------------------------------
   16.2 — Suchfeld im Geschmack (Entwurf C: volle Breite ueber der Liste)
   --------------------------------------------------------------------------- */
.fs-fl-links [class*="box-filter"] .collapse.show > .input-group,
.productlist-filter-accordion .collapse.show > .input-group {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
   16.3 — PREISSPANNE als Schieber (Entwurf B)
   JTLs eigener noUi-Schieber, seit 29.08. wieder aktiv (die beiden
   Chip-Overrides boxes/box_filter_pricerange.tpl und
   snippets/filter/mobile.tpl liegen als .bak-chips-20260829 daneben).
   Entwurf B zeigt eine schlanke Leiste mit zwei schwarzen Quadratgriffen
   und darunter EINE Textzeile "5 EUR - 70 EUR" statt zweier Eingabefelder.
   Die Textzeile baut fs-filterleiste.js aus den beiden Feldern; die Felder
   selbst bleiben im DOM (JTL liest sie beim Filtern aus), nur unsichtbar.
   Slider-Hoheit liegt sonst bei HEADER (fs-aktivfilter.css Abschnitt 4) —
   deren Datei bleibt unberuehrt, hier gewinnt die Ladereihenfolge
   (fs-aktivfilter 24 vor fs-filterleiste 37 in der template.xml).
   --------------------------------------------------------------------------- */

/* Luft fuer die Griffe: sie sind 18px hoch und sitzen 8px UEBER der 3px
   duennen Leiste. Ohne Polster stachen sie (mobil gemessen) in den
   schwarzen Gruppenbalken darueber, und der linke ragte 6px ueber die
   Panelkante hinaus. Seitlich deshalb 4px + 12px Schienenrand. */
.fs-fl-links .box-filter-price .collapse.show,
.fs-fl-links .box-filter-price .collapsing,
.productlist-filter-accordion .fs-fl-preis .collapse.show,
.productlist-filter-accordion .fs-fl-preis .collapsing {
    /* Unten bewusst knapp: die Textzeile bringt schon 16px margin-top mit.
       Mit 18px standen darunter 38px Luft, waehrend zwischen zwei
       zugeklappten Balken 6px sitzen — im Panel als Loch sichtbar.
       Jetzt rund 24px, derselbe Abschluss wie bei jeder anderen offenen
       Gruppe (deren Collapse 16px + 6px li-Abstand traegt). */
    padding: 26px 4px 4px;
}

/* Die zwei Eingabefelder tragen in Entwurf B keine eigene Flaeche mehr.
   Nicht display:none — JTL schreibt beim Ziehen hinein und liest sie beim
   Absenden; ein entferntes Feld nimmt dem Schieber die Wirkung. */
.fs-fl-links .price-range-inputs,
.productlist-filter-accordion .price-range-inputs {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Die Leiste selbst. */
.fs-fl-links .price-range-slide.noUi-target,
.fs-fl-links .price-range-slide .noUi-target,
.productlist-filter-accordion .price-range-slide.noUi-target,
.productlist-filter-accordion .price-range-slide .noUi-target {
    height: 3px;
    margin: 4px 12px 0;
    background: var(--brand-kante);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.fs-fl-links .price-range-slide.noUi-horizontal,
.fs-fl-links .price-range-slide .noUi-horizontal,
.productlist-filter-accordion .price-range-slide.noUi-horizontal,
.productlist-filter-accordion .price-range-slide .noUi-horizontal {
    height: 3px;
}

/* Der gewaehlte Bereich ist in Entwurf B schwarz, nicht magenta — die
   Leiste zeigt eine Spanne, keine Einzelauswahl. */
.fs-fl-links .price-range-slide .noUi-connect,
.productlist-filter-accordion .price-range-slide .noUi-connect {
    background: var(--brand-tinte);
    border-radius: 0;
}

/* Quadratgriffe, Radius 0 wie im Kanon. */
.fs-fl-links .price-range-slide .noUi-handle,
.productlist-filter-accordion .price-range-slide .noUi-handle {
    width: 18px;
    height: 18px;
    top: -8px;
    right: -9px;
    border: 0;
    border-radius: 0;
    background: var(--brand-tinte);
    box-shadow: none;
    cursor: grab;
}
.fs-fl-links .price-range-slide .noUi-handle:hover,
.fs-fl-links .price-range-slide .noUi-handle:active,
.productlist-filter-accordion .price-range-slide .noUi-handle:hover,
.productlist-filter-accordion .price-range-slide .noUi-handle:active {
    border: 0;
    background: var(--brand-aktion);
}
.fs-fl-links .price-range-slide .noUi-handle:active,
.productlist-filter-accordion .price-range-slide .noUi-handle:active {
    cursor: grabbing;
}
/* noUi zeichnet zwei Griffstriche hinein — in einem 18px-Quadrat ist das
   Unruhe ohne Aussage. */
.fs-fl-links .price-range-slide .noUi-handle::before,
.fs-fl-links .price-range-slide .noUi-handle::after,
.productlist-filter-accordion .price-range-slide .noUi-handle::before,
.productlist-filter-accordion .price-range-slide .noUi-handle::after {
    display: none;
}
.fs-fl-links .price-range-slide .noUi-handle:focus-visible,
.productlist-filter-accordion .price-range-slide .noUi-handle:focus-visible {
    outline: 2px solid var(--brand-aktion);
    outline-offset: 2px;
}

/* Der Radius kam als einziger Wert nicht durch: gemessen blieb 50% (Kreis)
   stehen, obwohl Breite, Hoehe und Farbe der Regel oben folgten. Die Quelle
   ist in KEINEM auslesbaren Stylesheet zu finden (alle 70 durchsucht) —
   verdaechtig sind die drei Doofinder-CDN-Dateien, die document.styleSheets
   nicht oeffnen kann. Deshalb hier mit html body + !important, dasselbe
   Mittel wie beim CTA-Ton in fs-kanon.css Block 6. */
html body .fs-fl-links .price-range-slide .noUi-handle,
html body .productlist-filter-accordion .price-range-slide .noUi-handle {
    border-radius: 0 !important;
}

/* Die Textzeile unter der Leiste (JS: .fs-fl-preiszeile). */
.fs-fl-preiszeile {
    display: block;
    margin: 16px 0 0;
    font-family: "FS Text", system-ui, sans-serif;
    font-size: 14px;
    color: var(--brand-tinte);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   16.4 — MOBIL: dieselbe Liste, groessere Tippziele
   Ansage Yunus: "das gleiche auch fuer mobil". Auf echten Telefonen liefert
   JTL ein anderes Markup (kein sidepanel_left, Werte erst nach Klick auf
   .filter-toggler) — deshalb haengen alle Regeln oben doppelt.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* EINE linke Kante. Gemessen am iPhone-Panel (375px): Kopf bei 78,
       Balken bei 90, Werte bei 102 — drei Kanten uebereinander, das war
       der "chaotische" Eindruck. Das <li> traegt vom Theme ein
       padding-left:12px, das Collapse hatte noch einmal 12px dazu. */
    .productlist-filter-accordion > li {
        padding-left: 0;
    }
    .productlist-filter-accordion .collapse.show,
    .productlist-filter-accordion .collapsing {
        padding: 10px 0 16px;
    }
    .productlist-filter-accordion .filter-item .box-link-wrapper {
        min-height: 44px;
        padding: 0;
        gap: 13px;
        font-size: 15px;
    }
    .productlist-filter-accordion .filter-item .box-link-wrapper::before {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        background-size: 12px 12px;
    }
    .productlist-filter-accordion .filter-item .badge {
        font-size: 13px;
    }
    .productlist-filter-accordion .collapse.show > .input-group {
        margin-bottom: 12px;
    }

    /* Deckel wie am Desktop (dort 224px, Abschnitt 15). Mobil fehlte er:
       die offene Geschmack-Gruppe war 2043px hoch = 76% des gesamten
       Panelinhalts (45 Werte x 44px, gemessen auf /liquids). Wer sie
       aufmachte, musste ueber 2000px scrollen, um zur naechsten Gruppe zu
       kommen. Betroffen sind Geschmack (45), Alle Hersteller (32) und
       Nikotingehalt (12) — alle drei haben einen .filter-search-wrapper,
       kurze Gruppen bleiben unbeschnitten.
       336px sind rund siebeneinhalb Zeilen: genug zum Ueberblicken, und
       die naechste Gruppe bleibt im Bild. Das Suchfeld steht ausserhalb
       des Wrappers und scrollt deshalb nicht mit weg. */
    .productlist-filter-accordion .filter-search-wrapper {
        max-height: 336px;
        overflow-y: auto;
        /* damit am Listenende nicht das ganze Panel weiterrutscht */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    /* fs-aktivfilter.css (Besitz HEADER) faerbt die Panel-Links ueber
       ".modal-body.js-collapse-filter ..." spezifischer auf Tinte. Im
       Desktop-Schmalfenster steckt das Panel in genau diesem Gehaeuse, auf
       echten Telefonen fehlt es — beide Gehaeuse abdecken. */
    .modal-body.js-collapse-filter .productlist-filter-accordion .filter-item .box-link-wrapper {
        display: flex;
        min-height: 44px;
        padding: 0;
        gap: 13px;
    }
    .modal-body.js-collapse-filter .productlist-filter-accordion .filter-item.active .box-link-wrapper {
        font-weight: 700;
    }
}

/* ===========================================================================
   17 — FEINSCHLIFF: Proportionen, Abstaende, Bedienbarkeit
   Sitzung FILTERBAR, 29.08.2026. Ansage Yunus: "bitte ueberpruefe alles auf
   proportionen abstaende nutzerfreundlichkeit etc".
   Fuenf Befunde, jeder am lebenden Objekt gemessen — kein Angleichen nach
   Gefuehl.
   ========================================================================= */

/* --- 17.1 Gruppenbalken mobil: 47px -> 44px --------------------------------
   Gemessen im iPhone-Panel: das <a> traegt vom Theme padding:14px 0, das
   sich zur eigenen min-height:44px addierte (14+18,75+14 = 46,75). Damit
   lag der Balken als einziges Bauteil neben der Kanonleiter 36/44/52 —
   der Desktop-Balken sitzt mit padding:0 12px exakt auf 44.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* html body + !important, weil das Theme-Polster (14px 0) auch die
       gleichlautende Regel aus Abschnitt 15 schlaegt — dieselbe Signatur
       wie beim noUi-Griff: die Quelle ist in keinem auslesbaren
       Stylesheet zu finden. */
    html body .productlist-filter-accordion > li > a,
    html body .modal-body.js-collapse-filter .productlist-filter-accordion > li > a {
        padding: 0 12px !important;
    }
    html body .productlist-filter-accordion > li > a[aria-expanded="true"],
    html body .modal-body.js-collapse-filter .productlist-filter-accordion > li > a[aria-expanded="true"] {
        padding-left: 16px !important;
    }
}

/* --- 17.2 Suchfeld auf die Leiter ------------------------------------------
   Das Feld im Geschmack war 31px (Desktop) bzw. 30px (mobil) hoch — unter
   jeder Sprosse, und mobil unter dem 44px-Tippziel, das jeder andere Wert
   in derselben Liste einhaelt. Es ist das erste Bedienelement der Gruppe.
   -------------------------------------------------------------------------- */
.fs-fl-links .filter-search,
.fs-fl-links .input-group .form-control.filter-search,
.productlist-filter-accordion .filter-search,
.productlist-filter-accordion .input-group .form-control.filter-search {
    height: 36px;
    border-radius: 0;
}
/* Das Lupen-Kaestchen stand auf 30px neben einem 44px-Feld — die Gruppe
   zerfiel sichtbar in zwei Kaesten mit unterschiedlicher Kante. Beide auf
   dieselbe Hoehe und in EINEN Rahmen: Prepend traegt die Kante links/oben/
   unten, das Feld gibt seine linke ab. */
.fs-fl-links .input-group-prepend,
.productlist-filter-accordion .input-group-prepend {
    height: 36px;
    display: flex;
    align-items: center;
    border: 1px solid var(--brand-kante);
    border-right: 0;
    border-radius: 0;
    background: var(--brand-papier, #fff);
}
.fs-fl-links .input-group-prepend .input-group-text,
.productlist-filter-accordion .input-group-prepend .input-group-text {
    border: 0;
    border-radius: 0;
    background: transparent;
    height: 100%;
    display: flex;
    align-items: center;
}
.fs-fl-links .filter-search,
.productlist-filter-accordion .filter-search {
    border-left: 0 !important;
}
@media (max-width: 991.98px) {
    .productlist-filter-accordion .filter-search,
    .productlist-filter-accordion .input-group .form-control.filter-search {
        height: 44px;
        font-size: 15px;
    }
    .productlist-filter-accordion .input-group-prepend {
        height: 44px;
    }
}

/* --- 17.3 Wertzeile Desktop: 38px -> 36px ----------------------------------
   Die einzige Hoehe der Spalte, die neben der Leiter lag (Kopf 48,
   Balken 44, Zeile 38). 36 ist die Sprosse darunter und spart bei 45
   Geschmackswerten zusaetzlich Hoehe im gedeckelten Scrollfenster.
   Mobil bleibt es bei 44 — dort ist es ein Tippziel.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .fs-fl-links .filter-item .box-link-wrapper {
        min-height: 36px;
    }
}

/* --- 17.4 Schieber-Spur sichtbar machen ------------------------------------
   Gemessen: die ungefuellte Spur stand auf --brand-kante = 1,41:1 gegen
   Weiss. Fuer eine Flaeche waere das egal, fuer ein BEDIENELEMENT nicht —
   dieselbe Entscheidung wie bei den leeren Kaestchen (dort dokumentiert:
   "nicht --brand-kante (1,3:1), sondern --brand-grau-leise (3,54:1) — ein
   Kaestchen ist ein Bedienelement"). Der Schieber faellt unter dieselbe
   Regel, ich hatte sie beim Bauen uebersehen.
   -------------------------------------------------------------------------- */
.fs-fl-links .price-range-slide.noUi-target,
.fs-fl-links .price-range-slide .noUi-target,
.productlist-filter-accordion .price-range-slide.noUi-target,
.productlist-filter-accordion .price-range-slide .noUi-target {
    background: var(--brand-grau-leise);
}

/* --- 17.5 Sichtbarer Tastaturfokus -----------------------------------------
   Gemessen: weder die Wert-Links noch die Gruppenbalken hatten einen
   Fokusring — wer mit der Tastatur filtert, sieht nicht, wo er steht.
   Der Kanon kennt genau einen Ring: 2px --brand-deko (#e5169f), so wie
   ihn die drei Overlays und der Schiebergriff schon tragen.
   :focus-visible statt :focus, damit Mausklicks keinen Ring hinterlassen.
   -------------------------------------------------------------------------- */
.fs-fl-links .filter-item:focus-visible,
.fs-fl-links .btn-filter-box:focus-visible,
.fs-fl-links .filter-search:focus-visible,
.productlist-filter-accordion > li > a:focus-visible,
.productlist-filter-accordion .filter-item:focus-visible,
.productlist-filter-accordion .filter-search:focus-visible {
    outline: 2px solid var(--brand-deko) !important;
    outline-offset: -2px;
}

/* --- 17.6 Schwarze Balken ab dem ersten Bild -------------------------------
   Die Balkenfarbe haengt in Abschnitt 15 an .fs-fl-links — einer Klasse,
   die erst fs-filterleiste.js setzt. Bis dahin zeigt die Spalte die alte
   helle Kopfoptik aus Abschnitt 3 (beim Messen mehrfach erwischt, bevor
   das Skript lief). Das Server-Markup traegt aside.sidepanel-left von
   Anfang an — dieselbe Regel daran gehaengt, und die Spalte startet
   schwarz statt umzuspringen. Reines Vorziehen, kein neuer Zustand.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    aside.sidepanel-left .btn-filter-box {
        background: var(--brand-tinte) !important;
        color: var(--brand-papier, #fff) !important;
        min-height: 44px;
        padding: 0 12px !important;
    }
    aside.sidepanel-left .fs-fl-pfeil {
        border-color: var(--brand-papier, #fff);
    }
}

/* ---------------------------------------------------------------------------
   17.7 — Panel-CTA auf den Kanon (Ansage Yunus 29.08.: "panelknopf anpassen")
   Gemessen: 45px hoch, 12,04px in "FS Text". Der Kanon fuer herausgehobene
   Knoepfe steht seit dem Knopfschrift-Befund fest — Anton 400 bei 15px,
   ausgezaehlt ueber alle 50 Knoepfe der Startseite (8 Treffer, u.a. der
   Newsletter-ANMELDEN). Hoehe auf die oberste Sprosse 52, wie die drei
   Overlay-Knoepfe (Age-Gate, Consent, Rubbellos).
   font-synthesis:none ist Pflicht: Anton hat nur 400, sonst faelscht der
   Browser eine Fettung.
   Die WIRKSAME Regel steht in Abschnitt 9 (sie traegt !important aus der
   Cart-Drawer-Angleichung) und ist dort gleichlautend nachgezogen — dieser
   Block deckt nur die uebrigen Gehaeuse ab, in denen der Fuss ohne
   .js-collapse-filter.show rendert.
   -------------------------------------------------------------------------- */
.productlist-filter-footer .btn,
.productlist-filter-footer button.btn-primary,
.modal-body.js-collapse-filter .productlist-filter-footer .btn {
    height: 52px;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 0;
    font-family: "FS Display", "FS Text", system-ui, sans-serif;
    font-weight: 400;
    font-synthesis: none;
    font-size: 15px;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===========================================================================
   18 — MOBIL HELL: Gruppenkoepfe nach Entwurf B statt schwarzer Balken
   Sitzung FILTERBAR, 29.08.2026. Ansage Yunus: "mir ist aufgefallen dass es
   am handy zu dunkel ist ich haette gern farblich folgendes die 2 version
   ohne die dunklen dropdowns sondern einfach in weiss" — Version 2 = der
   Entwurf variant-B vom Brett filterfunktion-20260828.

   Am Handy nimmt die schwarze Flaeche einen viel groesseren Anteil des
   Bildes ein als in der 280px-Spalte am Desktop: dort stehen die Balken
   neben der Produktliste, im Panel FUELLEN sie den Schirm. Gemessen auf
   /liquids: 10 Gruppen a 44px = 440px schwarz auf 633px Panelhoehe.

   Entwurf B loest das mit reiner Typografie: Anton-Versalien in Tinte auf
   Papier, dazwischen Haarlinien, der Pfeil traegt den Auf/Zu-Zustand.
   Keine Flaechen, keine Rahmen.

   NUR MOBIL. Die Desktop-Spalte (Abschnitt 15) bleibt schwarz — dort ist
   die Balkenreihe schmal und traegt die Gliederung gegen die Produktliste.
   ========================================================================= */
@media (max-width: 991.98px) {

    /* --- Gruppenkopf: weiss statt Tinte ---------------------------------
       Der doppelte Selektor ist Pflicht: fs-aktivfilter.css (Besitz HEADER)
       faerbt die Panel-Links ueber ".modal-body.js-collapse-filter …"
       spezifischer, und Abschnitt 15 setzt die weisse Schrift mit
       !important. Beide Gehaeuse und beide Eigenschaften muessen mit. */
    .productlist-filter-accordion > li > a,
    .modal-body.js-collapse-filter .productlist-filter-accordion > li > a {
        background: var(--brand-papier, #fff);
        color: var(--brand-tinte) !important;
    }

    /* --- Haarlinien statt Abstaenden ------------------------------------
       In Entwurf B trennt eine feine Linie die Gruppen; die 6px Luft aus
       dem Balken-System werden dadurch entbehrlich. Die Linie sitzt am
       <li>, damit sie IMMER unter dem gesamten Gruppeninhalt liegt — bei
       einer offenen Gruppe also unter den Werten, nicht unter dem Titel. */
    .productlist-filter-accordion > li {
        margin-bottom: 0;
        border-bottom: 1px solid var(--brand-kante) !important;
    }
    .productlist-filter-accordion > li:last-child {
        border-bottom: 0 !important;
    }

    /* --- Der Pfeil traegt jetzt den Zustand ------------------------------ */
    .productlist-filter-accordion > li > a .fs-fl-pfeil,
    .productlist-filter-accordion > li > a::after,
    .productlist-filter-accordion > li > a .fas,
    .productlist-filter-accordion > li > a .far {
        color: var(--brand-tinte);
        border-color: var(--brand-tinte);
    }

    /* --- Die Magenta-Kante nur noch fuer GESETZTE Gruppen ----------------
       Auf schwarzem Grund markierte sie "offen" — das uebernimmt bei
       Entwurf B der Pfeil. Als Zeichen fuer "hier hat der Kunde
       eingegriffen" bleibt sie: an einer zugeklappten Gruppe ist sie der
       einzige Hinweis, dass darin etwas gesetzt ist. */
    .productlist-filter-accordion > li > a[aria-expanded="true"],
    .modal-body.js-collapse-filter .productlist-filter-accordion > li > a[aria-expanded="true"] {
        box-shadow: none;
    }
    html body .productlist-filter-accordion > li > a[aria-expanded="true"] {
        padding-left: 12px !important;
    }
    .productlist-filter-accordion > li.fs-fl-hat > a,
    .modal-body.js-collapse-filter .productlist-filter-accordion > li.fs-fl-hat > a {
        box-shadow: inset 4px 0 0 var(--brand-aktion);
    }
    html body .productlist-filter-accordion > li.fs-fl-hat > a {
        padding-left: 16px !important;
    }

    /* --- Sortierzeile: der aktive Wert stand weiss auf schwarz ----------- */
    .productlist-filter-accordion > li > a .font-italic,
    .modal-body.js-collapse-filter .productlist-filter-accordion > li > a .font-italic {
        color: var(--brand-tinte);
    }

    /* --- Zaehlerkreis im Kopf, falls vorhanden --------------------------- */
    .productlist-filter-accordion > li > a .fs-zaehler {
        color: var(--brand-papier, #fff);
        background: var(--brand-aktion);
    }
}

/* ===========================================================================
   19 — DESKTOP HELL: Filterspalte nach Entwurf B statt schwarzer Balken
   Sitzung FILTERBAR, 29.08.2026. Ansage Yunus: "Kannst du das bitte sowohl
   mobil als auch desktop auf weiss umstellen" — mobil war seit Abschnitt 18
   bereits hell, dieser Abschnitt zieht die Desktop-Spalte nach.

   Gleiche Sprache wie mobil: Anton-Versalien in Tinte auf Papier,
   Haarlinien zwischen den Gruppen, der Pfeil traegt Auf/Zu, die
   Magenta-Kante markiert nur noch GESETZTE Gruppen (.fs-fl-hat).
   Der schwarze FILTER-Kopfbalken bleibt — er ist der Rahmen, nicht der
   Dropdown (dieselbe Abgrenzung wie beim mobilen Panel-Kopf, Abschnitt 18).

   Ueberschreibt Abschnitt 15 (D-Skin-Balken) und 17.6 (Vorzieh-Regel an
   aside.sidepanel-left) per Reihenfolge; die !important muessen mit, weil
   beide Quellen sie tragen. aside.sidepanel-left in jedem Selektor doppeln,
   damit die Spalte schon VOR dem JS (Klasse .fs-fl-links) weiss startet.
   ========================================================================= */
@media (min-width: 992px) {

    /* --- Gruppenkopf: weiss statt Tinte -------------------------------- */
    .fs-fl-links .btn-filter-box,
    aside.sidepanel-left .btn-filter-box {
        background: var(--brand-papier, #fff) !important;
        color: var(--brand-tinte) !important;
    }
    .fs-fl-links .btn-filter-box:hover,
    aside.sidepanel-left .btn-filter-box:hover {
        color: var(--brand-tinte) !important;
    }
    .fs-fl-links .fs-fl-pfeil,
    aside.sidepanel-left .fs-fl-pfeil {
        border-color: var(--brand-tinte);
        color: var(--brand-tinte);
    }

    /* --- Haarlinien statt 6px-Fugen -------------------------------------
       Die Linie sitzt an der BOX, nicht am Kopf-Link: bei einer offenen
       Gruppe liegt sie damit unter den Werten, wie mobil am <li>. */
    .fs-fl-links .box[class*="box-filter"],
    aside.sidepanel-left .box[class*="box-filter"] {
        margin: 0 !important;
        border-bottom: 1px solid var(--brand-kante) !important;
    }
    .fs-fl-links .box[class*="box-filter"]:last-child,
    aside.sidepanel-left .box[class*="box-filter"]:last-child {
        border-bottom: 0 !important;
    }

    /* --- Magenta-Kante nur noch fuer GESETZTE Gruppen --------------------
       Auf schwarzem Grund markierte sie "offen" — das uebernimmt jetzt der
       Pfeil (wie mobil, Abschnitt 18). Erst alles abraeumen, dann die
       .fs-fl-hat-Kante wieder setzen: der Hat-Selektor ist spezifischer,
       aber die Reihenfolge macht die Absicht lesbar. */
    .fs-fl-links .btn-filter-box[aria-expanded="true"],
    aside.sidepanel-left .btn-filter-box[aria-expanded="true"] {
        box-shadow: none !important;
        padding-left: 12px !important;
    }
    .fs-fl-links .box[class*="box-filter"].fs-fl-hat > .btn-filter-box,
    aside.sidepanel-left .box[class*="box-filter"].fs-fl-hat > .btn-filter-box {
        box-shadow: inset 4px 0 0 var(--brand-aktion) !important;
        padding-left: 16px !important;
    }
}


/* ===========================================================================
   20 — SCHMALER DESKTOP: Werkzeugzeile wie auf dem Handy
   Sitzung KATALOG-SCHMAL, 30.08.2026. Befund Yunus (Screenshot
   Bundle/Sparpaket, Desktop-Fenster schmal gezogen): das bei breitem Laden
   gebaute Sortierfeld (.fs-fl-sort) blieb beim Verkleinern stehen —
   abbauen() kennt es nicht — und lag ueber den Ansichtskacheln
   (fs-listenansicht.css macht die unter 768px bewusst sichtbar).

   Zielbild laut Ansage = Handy: EIN Knopf "Filter und Sortierung" (unter
   768px laedt JTL das Panel mit der Sortierung als erster Gruppe,
   useMobileFilters — verifiziert), daneben die Ansichtskacheln. Die
   Beschriftung macht fs-filterleiste.js (knopfBeschriften, nur
   desktop-device — Telefone bekommen den Text vom Server).

   Zwischen 768 und 991.98px traegt das Server-Modal die Sortierung NICHT
   (Titel dort nur "Filter") — deshalb baut fs-filterleiste.js das
   Sortierfeld jetzt ab 768px (Gate SORTBREIT). Die Optik dafuer ist hier
   aus Abschnitt 14 (Besitz SORTIERLEISTE, dort >=992px) fuer die
   Zwischenbreite GEDOPPELT — Abschnitt 14 selbst ist unberuehrt.
   ========================================================================= */

/* --- unter 768px: wie auf dem Handy ------------------------------------- */
@media (max-width: 767.98px) {

    /* Das Sortierfeld hat hier keine Aufgabe (Panel traegt die Sortierung)
       und keinen Platz. Faengt zugleich die Leiche nach dem
       Fensterverkleinern ab — CSS wirkt, bevor irgendein JS laeuft. */
    body.desktop-device .displayoptions .fs-fl-sort {
        display: none !important;
    }
}

/* --- 768 bis 991.98px: Sortierfeld in der Werkzeugzeile ------------------ */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Zeile als Flexband — sonst stehen die 40px-Theme-Knoepfe
       baseline-versetzt neben dem 44px-Feld. Bootstraps col-7 wuerde die
       Spalte auf 58% deckeln und das Sortierfeld in die zweite Zeile
       druecken (bei 820px gemessen: 443px Spalte gegen 478px Inhalt) —
       wie in Abschnitt 14 nur Inhaltsbreite fordern. */
    body.desktop-device .productlist-page-nav-header-m > .displayoptions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    /* Hoehenleiter 44 wie in Abschnitt 14 (dort erst ab 992px). */
    body.desktop-device .productlist-page-nav-header-m .filter-toggler,
    body.desktop-device .productlist-page-nav-header-m .btn-option {
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- ab hier 1:1 aus Abschnitt 14 gedoppelt (nur der Media-Bereich
           ist neu; Aenderungen dort bitte hier nachziehen) --------------- */
    .fs-fl-sort {
        display: inline-flex;
        align-items: stretch;
        height: 44px;
    }

    .fs-fl-sort-kopf {
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 0 14px;
        background: var(--brand-tinte);
        color: #ffffff;
        font-family: "FS Display", "FS Text", sans-serif;
        font-weight: 400;
        font-synthesis: none;
        font-size: 12.5px;
        letter-spacing: .1em;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
    }

    .fs-fl-sort--gesetzt .fs-fl-sort-kopf {
        box-shadow: inset 4px 0 0 0 var(--brand-aktion);
    }

    .fs-fl-sort-feld {
        height: 44px;
        min-width: 196px;
        padding: 0 34px 0 12px;
        border: 1px solid var(--brand-kante);
        border-left: 0;
        border-radius: 0;
        background-color: #ffffff;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%236c6c75'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        color: var(--brand-tinte);
        font-family: "FS Text", system-ui, sans-serif;
        font-size: 13px;
        line-height: 1.2;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .fs-fl-sort-feld:hover {
        border-color: var(--brand-grau-leise);
    }

    .fs-fl-sort-feld:focus-visible {
        outline: 2px solid var(--brand-deko);
        outline-offset: 2px;
    }
}

/* ===========================================================================
   21 — MOBIL: Artikelzaehler in die Werkzeugzeile (30.08.2026, KATALOG-SCHMAL)
   "727 Artikel" steht rechtsbuendig AUF der 44px-Zeile neben Filterknopf und
   Ansichtskacheln statt in einer eigenen Zeile darunter (~46px gespart).
   NUR echte Telefone (body.mobile-device) — der schmale Desktop-Zweig aus
   Abschnitt 20 bleibt unberuehrt (QA-Stand ISSUE-008 nicht anfassen).
   Vier gemessene Bremsen, die diese Regeln loesen:
   (1) .productlist-item-info traegt flex 1 0 100% -> erzwang die eigene Zeile.
   (2) Bootstraps col-7 deckelt .displayoptions auf 58%, die Kacheln laufen
       heraus und der Zaehler ordnete sich HINTER ihnen unter die Kacheln ein
       (dieselbe Falle wie im 820px-Band, Abschnitt 20).
   (3) Der unsichtbare .js-collapse-filter (319px breit bei 0px Hoehe) blaeht
       die Flex-Basis der Spalte auf und erzwang den Umbruch trotz optisch
       freiem Platz. Solange er weder .show noch .collapsing traegt, kommt er
       aus dem Fluss.
   (4) Die Zeile traegt gap:12px — nur column-gap auf 0, row-gap bleibt fuer
       den Rueckfall erhalten.
   Kacheln 52 -> 44px (Kanon-Sprosse, Besitz LISTENANSICHT — nur Groesse,
   nicht Sichtbarkeit). Passt ab ~390px Geraetebreite; auf 360/375 bricht der
   Zaehler automatisch als rechtsbuendige zweite Zeile um (gemessener,
   sauberer Rueckfall — kein Ueberlappen, kein Anschnitt).
   ========================================================================= */

@media (max-width: 767.98px) {

    body.mobile-device .productlist-page-nav-header-m {
        column-gap: 0 !important;
    }

    body.mobile-device .productlist-page-nav-header-m .displayoptions {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    body.mobile-device .productlist-page-nav-header-m .js-collapse-filter:not(.show):not(.collapsing) {
        position: absolute !important;
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden;
    }

    body.mobile-device .productlist-page-nav-header-m .fsl-ansicht-mobil {
        gap: 0 !important;
        margin-left: 0 !important;
    }

    body.mobile-device .productlist-page-nav-header-m .fsl-ansicht-mobil .btn-option {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        margin-left: 4px !important;
        margin-right: 0 !important;
    }

    body.mobile-device .productlist-page-nav-header-m .productlist-item-info {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0;
        margin-left: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        align-self: center;
        padding: 0 !important;
        white-space: nowrap;
        font-size: 12px !important;
    }
}

/* Nachschaerfung zu Abschnitt 11: die Versteckregel fuer die Merkzettel/
   Vergleichs-Kreise bei offenem Panel wird inzwischen von einer spezifischeren
   Regel bei opacity/visibility ueberstimmt (pointer-events kam noch durch —
   die Kreise schienen sichtbar durchs Panel, waren aber nicht klickbar).
   Vorbestehender Defekt, am 30.08. bei der Zaehlerzeilen-Abnahme gefunden.
   html-body-Prefix gewinnt, gemessen bei 390px Mobil-UA. */
html body.fs-fl-panel-auf .productbox-quick-actions,
html body.fs-fl-panel-auf #content .productbox-quick-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Schutzgitter fuer sehr schmale Geraete (gemessen bei 320px): dort schob
   sich der Zaehler 6px UEBER die zweite Ansichtskachel, statt umzubrechen —
   die Flex-Basis der Werkzeugspalte ist schmaler als ihr sichtbarer Inhalt
   (die Kacheln laufen aus ihr heraus, gleiche Mechanik wie Bremse 2/3 oben),
   deshalb hielt der Umbruchalgorithmus die Zeile fuer passend. Unter 360px
   bekommt der Zaehler seine eigene Zeile zurueck, rechtsbuendig. */
@media (max-width: 359.98px) {
    body.mobile-device .productlist-page-nav-header-m .productlist-item-info {
        flex: 1 0 100% !important;
        margin-left: 0 !important;
    }
}

/* Fuenfte Bremse, erst mit GELADENER Webschrift messbar (die Zeile war dann
   349,1px bei 348px Innenbreite — EIN Pixel, und der Zaehler fiel wieder in
   Zeile 2): der Desktop-Ansichtsumschalter (.btn-group.d-md-inline-flex) haengt
   mit 0px Breite in .displayoptions, weil eine !important-Regel sein d-none
   uebersteuert (gleiche Fallenart wie Abschnitt-20-Falle 1) — und das gap:8px
   der Spalte spendiert dem Phantom 8px Vorlauf. Auf Telefonen traegt die
   Kacheln ohnehin .fsl-ansicht-mobil. */
@media (max-width: 767.98px) {
    body.mobile-device .productlist-page-nav-header-m .displayoptions > .btn-group.d-md-inline-flex {
        display: none !important;
    }
}


/* ===========================================================================
   22 — MOBIL: Einzeiler auch auf 320–389px (30.08.2026, KATALOG-SCHMAL,
   WIEDERAUFSATZ nach Kollision — Erstfassung 2.1315 wurde vom 09:55-Upload
   der Parallel-Instanz ueberschrieben; dieser Block sitzt jetzt NACH deren
   Schutzgitter/Phantom-Fix und ist mit ihr abgestimmt.)
   Freigabe Yunus nach Vorschau (Style-Injektion, 375px und 320px gemessen):
   Zaehler, Filterknopf und Ansichtskacheln stehen IMMER auf einer 44px-Zeile,
   die Weissflaeche der zweiten Zeile entfaellt. Texte verkleinert, damit die
   Zeile traegt: Filterknopf 13 -> 11px, Zaehler 12 -> 11px; unter 360px beide
   10px und engere Polster. Kacheln bleiben 44px aus Abschnitt 21 (Besitz
   LISTENANSICHT, nur Groesse), alle Tippziele halten 44px Hoehe.
   Der <360px-Block stellt BEWUSST das Schutzgitter aus Abschnitt 21 zurueck
   (flex 1 0 100% -> eigene Zeile): dessen Anlass war eine 6px-Ueberlappung
   bei 12px-Zaehlerschrift — bei 10px existiert sie nicht mehr, und der
   Phantom-btn-group-Fix (Bremse 5) gibt zusaetzlich 8px Luft. Gitter bleibt
   im Quelltext stehen, Uebersteuerung per Reihenfolge — Rueckbau trivial.
   Gemessen vor Freigabe: 375px -> Knopf 149px, Zeile endet x354, Ueberlauf 0;
   320px -> Knopf 136px, Zeile endet x299, Ueberlauf 0.
   ========================================================================= */

@media (max-width: 767.98px) {

    body.mobile-device .productlist-page-nav-header-m {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    body.mobile-device .productlist-page-nav-header-m .displayoptions {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    body.mobile-device .productlist-page-nav-header-m .result-option-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    body.mobile-device .productlist-page-nav-header-m button.filter-toggler {
        font-size: 11px !important;
        padding: 0 10px !important;
        width: auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    body.mobile-device .productlist-page-nav-header-m .productlist-item-info {
        font-size: 11px !important;
    }
}

@media (max-width: 359.98px) {

    body.mobile-device .productlist-page-nav-header-m button.filter-toggler {
        font-size: 10px !important;
        padding: 0 8px !important;
    }

    body.mobile-device .productlist-page-nav-header-m .fsl-ansicht-mobil .btn-option {
        margin-left: 2px !important;
    }

    /* Uebersteuert das Schutzgitter aus Abschnitt 21 (siehe Kopfkommentar):
       Zaehler bleibt auch <360px in der Zeile, rechtsbuendig. */
    body.mobile-device .productlist-page-nav-header-m .productlist-item-info {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        font-size: 10px !important;
    }
}


/* Nachschaerfung zu Abschnitt 22 (30.08., nach Hinweis der Parallel-Instanz):
   die 320px-Erstmessung prueft nur den Flex-Ueberlauf — die Kacheln laufen
   aber aus der Flex-Basis der Werkzeugspalte heraus (Bremse 2/3 aus
   Abschnitt 21), der Zaehler ueberlappte die zweite Kachel um 9px, obwohl
   scrollWidth sauber war. UEBERLAPPUNG IMMER GESONDERT MESSEN (Rechteck-
   Schnitt Kachel/Zaehler), erst nach document.fonts.ready.
   Fix: unter 360px faellt das dekorative Filter-Icon im Knopf (14px Icon +
   9px Eigen-Gap = 24px gewonnen); gemessen danach: Kachel endet x233,
   Zaehler ab x248, Schnitt 0, Zeile endet x299. */
@media (max-width: 359.98px) {
    body.mobile-device .productlist-page-nav-header-m button.filter-toggler .fa-filter {
        display: none !important;
    }
}