/* ============================================================================
   FOGSMOKE PRODUKTKARTEN — Sitzung PRODUKTKARTE, 21.08.2026
   Besitzer: PRODUKTKARTE. Aenderungen bitte hier, nicht in custom.css.

   Abschnitt 1: Kompakte Empfehlungskarte auf Produktdetailseiten (.fs-cc)
   Abschnitt 2: Rahmen der Empfehlungsgruppen (.fs-rec)

   Diese Datei steht ans Ende des Minify-Blocks in template.xml und setzt sich
   damit gegen fs-katalog.css und fs-aktivfilter.css durch, ohne fremde Dateien
   anzufassen.

   SCHRIFTEN — Abweichung vom Handoff-Paket, bewusst und dokumentiert:
   Das Paket nennt Anton + DM Sans. Im Shop ist "FS Display" bereits Anton (gut),
   die Textschrift "FS Text" ist aber seit Nicks Entscheidung vom 16.08. MANROPE,
   nicht DM Sans — shopweit. Die Karte benutzt deshalb "FS Text", damit sie nicht
   als einziges Element des Shops in einer anderen Schrift steht. dmsans-*.woff2
   liegt unbenutzt in themes/base/fonts/; ein Wechsel waere ein Ein-Zeilen-Tausch
   in custom.css und beträfe dann den ganzen Shop. Entscheidung liegt bei Yunus.
   ============================================================================ */

/* --- Tokens: gleiche Werte wie die Vollkarte, damit nichts auseinanderlaeuft --- */
.fs-cc,
.fs-rec {
    /* 21.08.2026 PRODUKTKARTE — zwei Token waren mit dem falschen Ton belegt.
       Gemessen am Cross-Selling der Produktseite:
         --fs-primary stand auf #830779. Das ist laut fs-kanon.css Abschnitt 2
         der HOVER-Ton; die Flaeche eines Primaer-CTA ist #c90f88. Der Kaufknopf
         der Kompaktkarte fuhr damit dauerhaft seinen eigenen Hover-Zustand und
         stand neben den Karten der Kategorie in einem anderen Magenta.
         Das ist derselbe Fehler, den der Kanon an der Vollkarte behoben hat —
         die Kompaktkarte war damals noch nicht gebaut und blieb aussen vor.
         --fs-ink-2 stand auf #5c5c63 statt #6b6b75, dem einen gedaempften Ton.
       Beide Token gelten nur innerhalb .fs-cc/.fs-rec, der Eingriff endet
       also an der Kompaktkarte. */
    --fs-primary:  #c90f88;
    --fs-primary-hover: #830779;
    --fs-ink:      #111114;
    --fs-ink-2:    #6b6b75;
    --fs-line:     #e3e3e7;
    --fs-surface:  #ffffff;
    --fs-ok:       #1f7a3d;
    --fs-warn:     #b3261e;
}

/* ============================================================================
   1. Kompakte Empfehlungskarte
   ============================================================================ */

/* Horizontal: Bild links, Text mittig, Aktion rechts. Auf schmalen Karten
   wandert die Aktion unter den Text (siehe Container-Query weiter unten). */
.fs-cc {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas: "media body";
    gap: .85rem;
    align-items: start;
    padding: .7rem .8rem;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
    border-radius: 0;            /* kantig, nicht verspielt */
    min-height: 124px;           /* Richtwert 120-140px aus Doc 10 */
    container-type: inline-size;
    container-name: fscc;
    /* Die Slider-Zelle (.product-wrapper) ist im Theme ein FLEX-Container.
       Ohne diese Zeile bleibt die Karte auf ihrer Inhaltsbreite stehen (gemessen:
       157px in einer 475px-Zelle) und die zweite Rasterspalte faellt auf 0px. */
    width: 100%;
    flex: 1 1 100%;
}

/* --- Bildspalte --- */
.fs-cc__mediacol { grid-area: media; }

.fs-cc__medialink {
    display: block;
    text-decoration: none;
}

/* Exakt 1:1, Produkt vollstaendig sichtbar, nie beschnitten. */
.fs-cc__media {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 104px;
    max-width: 100%;
    overflow: hidden;
    background: #fafafa;
}
.fs-cc__media > .inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fs-cc__media img,
.fs-cc__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

/* Akzentbalken: eigenes Element DIREKT UNTER dem Bild. Nie im Bild.
   2026-08-30 (Ansage Yunus): "entferne bitte bei allen bildern den lila
   balken" — gilt fuer ALLE Kompaktkarten-Flaechen (PDP oben/unten,
   Warenkorb, Nach-dem-Kauf). Bewusst per display:none statt Ausbau des
   <div> aus fs_card_compact.tpl: Rueckbau = diese eine Zeile loeschen, und
   am Template arbeiten parallel andere Sitzungen.
   Die uebrigen .fs-cc__accent-Regeln (Breiten je Kartengroesse, grauer Ton
   bei ausverkauft) bleiben stehen, laufen aber ins Leere. */
.fs-cc__accent {
    width: 104px;
    max-width: 100%;
    height: 3px;
    background: var(--fs-primary);
    display: none;
}

/* --- Textspalte ---
   2026-08-30 (Ansage Yunus): Aktion NEBEN dem Preis auf ALLEN Breiten, nicht
   erst ab 400px — der Kaufknopf ist jetzt icon-only und schmal genug. Damit
   traegt der Knopf keine eigene Zeile mehr und die Karte endet auf ungefaehr
   der Hoehe des Produktbilds. Das Grid stand vorher im 400px-Container-Zweig. */
.fs-cc__body {
    grid-area: body;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "brand brand"
        "name  name"
        "price action";
    /* Die 1fr-Zeile sammelt den Leerraum der gestreckten Karte; Preis ankert
       oben in ihr (gleiche Preishoehe je Reihe), nur die Aktion am Boden. */
    grid-template-rows: auto auto 1fr;
    align-items: end;
    gap: .18rem .6rem;
    min-width: 0;
    /* 2026-08-27 (Ansage Yunus): Kaufknopf und Auswaehlen muessen in jeder
       Sliderreihe auf EINER Hoehe stehen — Staffel- und Nicht-Staffel-Karten
       gleich. .fs-cc steht auf align-items:start, der Body war also nur so
       hoch wie sein Inhalt; das margin-top:auto der Aktion hatte keinen
       Spielraum (gemessen: Knoepfe auf drei Hoehen, 76px Leerraum unterm
       Knopf). stretch gibt dem Body die volle Kartenhoehe, erst damit
       greift die Verankerung nach unten. */
    align-self: stretch;
}

/* 2026-08-30 (Ansage Yunus): "kopiere einfach alles von der Produktkarte in
   der Kategorie" — Marke, Titel, Preis und Einzelpreis-Label tragen exakt die
   Werte der Kategoriekarte (Abschnitt 4), nur das flache Kompakt-Layout
   bleibt. Auch die Verkleinerung auf schmalen Karten ist raus ("ausser den
   Fakt dass es sich zusammenzieht"). */
.fs-cc__brand {
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #111114;
    line-height: 1.2;
}

/* 2026-08-30, zweite Ansage: "Hier kannst du den Titel belassen sowie er
   war" — der Titel bleibt in der Textschrift, NICHT versal wie im Katalog. */
.fs-cc__name {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .875rem;
    line-height: 1.3;
    color: var(--fs-ink);
    min-width: 0;
    /* 2026-08-27 (Ansage Yunus): Preise in jeder Reihe auf gleicher Hoehe —
       die Namenszone reserviert immer zwei Zeilen (2 x 1.3em). */
    min-height: 2.6em;
}
.fs-cc__name a {
    color: inherit;
    text-decoration: none;
    /* Zwei sichtbare Zeilen. Der vollstaendige Text bleibt im DOM. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.fs-cc__name a:hover,
.fs-cc__name a:focus-visible { color: var(--fs-primary); }

/* --- Preis: Anton, deutlich dominant --- */
.fs-cc__price { margin-top: .15rem; }

.fs-cc__price .price,
.fs-cc__price .productbox-price {
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    /* Wie Kategoriekarte (Abschnitt 4): 1.62rem, Markenfarbe, lh 1.05 */
    font-size: 1.62rem;
    line-height: 1.05;
    color: #830779;
    letter-spacing: .01em;
}
.fs-cc__price .price_label {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .7rem;
    color: var(--fs-ink-2);
}
/* Altpreis sekundaer und durchgestrichen — nicht nur farblich unterschieden. */
.fs-cc__price .old-price,
.fs-cc__price .instead-of {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .75rem;
    color: var(--fs-ink-2);
    line-height: 1.2;
}
.fs-cc__price .old-price .value,
.fs-cc__price .instead-of .value { text-decoration: line-through; }

/* Grundpreis bleibt sichtbar — gesetzlich, nicht optional. */
.fs-cc__price .base_price,
.fs-cc__price .price-note {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .7rem;
    line-height: 1.3;
    color: var(--fs-ink-2);
}
.fs-cc__price .footnote-reference { font-size: .62em; vertical-align: super; }

/* Preiszeile: die Vollkarte legt Preis + "Einzelpreis"-Label + Bundle-Box in EINE
   Flex-Zeile (custom.css, an .productbox gebunden). Die Kompaktkarte ist schmaler —
   hier stapelt die Bundle-Box unter den Preis und wird kleiner, damit sie den
   Hauptpreis nicht bedraengt. Der Hauptpreis bleibt der dominanteste Textwert. */
/* 2026-08-27 (Ansage Yunus): Preiszahlen aller Karten einer Reihe auf EINER
   Hoehe. Der Streichpreis (.old-price) ist ein Block VOR dem .price-Div; hat
   die Karte zusaetzlich die Bundle-Box, wird das .price-Div breiter als der
   Restplatz neben dem Streichpreis und rutscht als Ganzes eine Zeile tiefer
   (gemessen: Hauptpreis 21px unter den Nachbarkarten). Deshalb ist jetzt der
   price_wrapper selbst die Flex-Zeile, .price-Div und sein Span geben ihre
   Boxen per display:contents auf: Streichpreis und Hauptpreis teilen sich
   immer Zeile 1, Bundle-Box und Grundpreis stehen als volle Zeilen darunter. */
/* 2026-08-30, dritter Anlauf — GRID statt Flex.
   Yunus' Vorgabe: Streichpreis auf HOEHE DES LABELS "Einzelpreis", rechts
   davon; Hauptpreis darunter; Grundpreis darunter.
   Mit Flex hing der Streichpreis neben der GANZEN Preisspalte, deren Breite
   die PREISZAHL bestimmt (62px) statt das Label (51px) — auf der
   Auswaehlen-Karte fehlten dadurch exakt 2px und er brach unter den Preis um.
   Das Grid stellt ihn neben das Label; maszgeblich sind damit 51px statt 62,
   was ~11px Luft schafft und auch laengere Streichpreise traegt.
   .fs-preis-col wird per display:contents aufgeloest, damit Label und Zahl
   eigene Rasterplaetze bekommen (Muster wie bei .price.productbox-price).
   Im DOM steht die ZAHL vor dem LABEL — die Plaetze sind deshalb explizit
   vergeben, nicht der Quellreihenfolge ueberlassen. */
.fs-cc__price .price_wrapper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: .45rem;
    row-gap: .05rem;
}
.fs-cc__price .price.productbox-price,
.fs-cc__price .price.productbox-price > span,
.fs-cc__price .fs-preis-col { display: contents; }
.fs-cc__price .fs-preis-label { grid-column: 1; grid-row: 1; }
.fs-cc__price .old-price,
.fs-cc__price .instead-of { grid-column: 2; grid-row: 1; justify-self: start; }
.fs-cc__price .fs-preis-zahl { grid-column: 1 / -1; grid-row: 2; }
.fs-cc__price .fs-bundle,
.fs-cc__price .base_price,
.fs-cc__price .price-note { grid-column: 1 / -1; }
/* HISTORIE: Bis 2026-08-30 war der price_wrapper ein Flex-Container und
   .fs-preis-col eine column-reverse-Spalte (Label ueber Zahl) mit
   order-Kette. Beides ersetzt das Grid oben — die Spalte ist jetzt
   display:contents, ihre flex-Eigenschaften waeren wirkungslos. */
.fs-cc__price .fs-preis-label {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .68rem;
    font-weight: 500;
    color: #8a8292;
    text-transform: none;
    letter-spacing: 0;
}
/* Der Mengenhinweis aus der Preisquelle — ein Hinweis, immer mit Mengenbedingung. */
.fs-cc__price .fs-bundle {
    flex-direction: row;
    align-items: baseline;
    gap: .3rem;
    margin: .15rem 0 0;
    padding: .18rem .4rem;
    border-radius: 0;
    background: #f7ecf6;
}
.fs-cc__price .fs-bundle-ab {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .74rem;
    font-weight: 700;
    color: var(--fs-primary);
}
.fs-cc__price .fs-bundle-menge {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .62rem;
    font-weight: 500;
    color: var(--fs-ink-2);
}
/* Prozent-Sticker der Vollkarte hat in der Kompaktkarte keinen Platz. */
.fs-cc__price .fs-bundle-sticker { display: none; }

/* Sicherheitsnetz: falls die Staffelleiste doch einmal in eine Kompaktkarte
   geraet, faellt es hier sofort auf statt still falsch auszusehen. */
.fs-cc__price .fs-staffeln,
.fs-cc__price .fs-spare-row,
.fs-cc .form-counter { display: none !important; }

/* --- Aktion ---
   Sie steht im Textfluss, nicht als zweites Element derselben Rasterzelle:
   in einer gemeinsamen Zelle legte sie sich auf schmalen Karten ueber die
   Preiszeile (gemessen 390px: Button unsichtbar hinter dem Bundle-Hinweis).
   margin-top:auto haelt sie unten, solange Platz da ist. */
.fs-cc__action {
    grid-area: action;
    align-self: end;
    justify-self: end;
}
.fs-cc__brand { grid-area: brand; }
.fs-cc__name  { grid-area: name; }
.fs-cc__price { grid-area: price; align-self: start; }
.fs-cc__form { margin: 0; }

.fs-cc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    /* 44px = dieselbe Hoehe wie Kaufknopf, Auswahlfeld und Ausverkauft-Knopf
       auf Kategorie- und Startseite. 38px waeren die dritte Hoehe im Shop und
       auf dem Telefon unter der Touch-Schwelle. */
    min-height: 44px;
    padding: 0 .85rem;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: .8rem;
    letter-spacing: .045em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.fs-cc__btn--cart {
    background: var(--fs-primary);
    border-color: var(--fs-primary);
    color: #fff;
    /* 2026-08-30 (Ansage Yunus): icon-only, quadratisch, direkt neben dem
       Preis. 44px bleibt das Touchziel; der Name steht im aria-label. */
    width: 44px;
    min-width: 44px;
    padding: 0;
}
.fs-cc__btn--cart .fs-cc__btntext { display: none; }
.fs-cc__btn--cart .fs-cc__icon { width: 19px; height: 19px; }
.fs-cc__btn--cart:hover,
.fs-cc__btn--cart:focus-visible { background: var(--fs-primary-hover); border-color: var(--fs-primary-hover); color: #fff; }

.fs-cc__btn--select {
    background: #fff;
    border-color: var(--fs-ink);
    color: var(--fs-ink);
}
.fs-cc__btn--select:hover,
.fs-cc__btn--select:focus-visible { background: var(--fs-ink); color: #fff; }

.fs-cc__btn--soldout {
    background: #f6f5f3;
    border-color: var(--fs-line);
    color: var(--fs-ink-2);
    cursor: not-allowed;
}

.fs-cc__btn:focus-visible {
    outline: 2px solid var(--fs-primary);
    outline-offset: 2px;
}

.fs-cc__icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Ausverkaufte Alternative: Bild zurueckhaltend entsaettigt, Produkt bleibt erkennbar. */
.fs-cc.is-soldout .fs-cc__img { filter: saturate(.25) opacity(.7); }
.fs-cc.is-soldout .fs-cc__accent { background: var(--fs-line); }

/* --- Enge Karten: Aktion unter den Text statt daneben --- */
/* Schmale Karte (Handy, eine Karte je Ansicht): die Aktion nimmt die Breite der
   Textspalte ein. Das Bild wird kleiner, damit der Produktname mehr Zeichen je
   Zeile bekommt — sonst schneidet die Zweizeilenklemme genau die Sorte weg, die
   die Kaufentscheidung traegt. Innenabstaende ruecken zusammen, damit die Karte
   trotz vollwertigem Touchziel nahe an den Richtwerten aus Doc 10 bleibt. */
@container fscc (max-width: 330px) {
    .fs-cc { grid-template-columns: 92px minmax(0, 1fr); gap: .7rem; padding: .6rem .65rem; }
    .fs-cc__media, .fs-cc__accent { width: 92px; }
    .fs-cc--related { grid-template-columns: 92px minmax(0, 1fr); }
    .fs-cc--related .fs-cc__media,
    .fs-cc--related .fs-cc__accent { width: 92px; }
    /* 2026-08-30: kein Schrumpfen mehr — Preisgroesse wie Kategoriekarte */
}

/* 2026-08-30 (Nachfrage Yunus "wieso steht der ALTE Preis darunter"):
   Unter dieser Breite passen "Einzelpreis" + Streichpreis nicht mehr
   nebeneinander (Bedarf ~115px: Preisspalte 62 + Abstand 8 + Streichpreis 45)
   — der Streichpreis brach deshalb UNTER den Hauptpreis um. Da er dort nicht
   stehen soll und Schrumpfen untersagt ist, entfaellt er hier ganz.

   SCHWELLE GEMESSEN, NICHT GESCHAETZT — @container misst die CONTENT-Box:
   Desktop-Karte 338px Rahmen = 312 Content, Tablet 293 = 267, Mobil 283 = 258.
   Eine 330er-Schwelle haette ALLE erwischt (erster Versuch, von Yunus sofort
   bemerkt). 290 trennt Desktop (312, Platz 155px) von Tablet/Mobil (267/258,
   Platz ~101-110px) sauber. */
/* 2026-08-30: Hier stand kurzzeitig eine Ausblendung des Streichpreises auf
   schmalen Karten — mit der Grid-Preiszeile (oben) ist sie hinfaellig.
   Nachgemessen bei 390px Viewport: Label 48px endet bei x=176, Streichpreis
   beginnt bei 182 und endet bei 214, Kaufknopf erst ab 226 — es passt ohne
   Kollision. Der Streichpreis bleibt damit auf JEDER Breite sichtbar, was bei
   Sonderpreisen auch die sauberere Angabe ist. */
/* 2026-08-30 (Ansage Yunus): "Auswaehlen-Button auf die Hoehe des
   Warenkorb-Buttons" — ALLE Knoepfe stehen auf jeder Breite neben dem Preis,
   die fruehere Volle-Breite-Ausnahme fuer Text-Knoepfe auf engen Karten ist
   raus. Auf sehr engen Karten wird nur das Knopf-Polster knapper, damit
   Preis und Knopf nebeneinander Platz finden.
   (Merkposten: Container-Query misst die CONTENT-Box, und grid-column ohne
   Zeilenwechsel wuerde den Knopf UEBER den Preis legen — s. Protokoll.) */
@container fscc (max-width: 270px) {
    .fs-cc__btn--select,
    .fs-cc__btn--soldout { padding: 0 .55rem; font-size: .68rem; letter-spacing: .03em; }
}

@container fscc (max-width: 250px) {
    .fs-cc { grid-template-columns: 76px minmax(0, 1fr); gap: .55rem; }
    .fs-cc__media, .fs-cc__accent,
    .fs-cc--related .fs-cc__media,
    .fs-cc--related .fs-cc__accent { width: 76px; }
    /* 2026-08-30: kein Schrumpfen mehr — Preisgroesse wie Kategoriekarte */
}

/* Groesseres Bild bei Alternativen (Doc 10: 112-140px). 112 statt 118, damit die
   Karte mit Innenabstand und Akzentbalken unter 140px bleibt (gemessen: 137px). */
.fs-cc--related { grid-template-columns: 112px minmax(0, 1fr); }
.fs-cc--related .fs-cc__media,
.fs-cc--related .fs-cc__accent { width: 112px; }

/* Fallback fuer Browser ohne Container-Queries */
@supports not (container-type: inline-size) {
    @media (max-width: 575.98px) {
        .fs-cc__action { justify-self: stretch; }
        .fs-cc__btn { width: 100%; }
    }
}

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

/* Touch: Ziel gross genug */
@media (hover: none) {
    .fs-cc__btn { min-height: 44px; }
}

/* ============================================================================
   2. Empfehlungsgruppen auf der Produktdetailseite
   ============================================================================ */

/* Gruppentitel in der Display-Schrift, klar getrennt, aber leiser als das
   Hauptprodukt — die Empfehlung darf die Seite nicht uebernehmen. */
.fs-rec .hr-sect-line {
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fs-ink);
}

/* Zwei bis drei Karten sichtbar, weitere per Slider. Die Breite kommt vom
   vorhandenen slick-Raster; hier wird nur der Abstand gesetzt. */
.fs-rec .product-wrapper { padding: 0 .35rem; }
/* 2026-08-27: Die Gleichhoehen-Kette gilt fuer JEDEN Kompaktkarten-Slider.
   .fs-rec kommt nur auf der PDP als Zusatzklasse mit; der Warenkorb ruft
   dieselben Karten nur mit .fs-rec-anker auf (product_slider.tpl setzt sie
   im Kompaktmodus immer). Ohne die Kette stehen die Kaufknoepfe dort wieder
   inhaltsgetrieben auf verschiedenen Hoehen. */
.fs-rec .slick-slide,
.fs-rec-anker .slick-slide { height: auto; }
.fs-rec .slick-track,
.fs-rec-anker .slick-track { display: flex; align-items: stretch; }
.fs-rec .slick-slide > div,
.fs-rec-anker .slick-slide > div { height: 100%; }
.fs-rec .fs-cc,
.fs-rec-anker .fs-cc { height: 100%; }

/* ============================================================================
   3. Vollkarte (.productbox) — Nachzieharbeiten aus dem Handoff-Paket
   Diese Datei laedt NACH custom.css und uebersteuert dort gezielt. Nicks Block
   in custom.css bleibt unangetastet, damit ein Rueckbau = Loeschen dieses
   Abschnitts ist.
   ============================================================================ */

/* --- Akzentbalken: eigenes Element unter dem Bild (Doc 01) ---
   Bewusst KEIN ::after auf .productbox-image — der laege im Bild. */
#product-list .productbox .productbox-accent,
.carousel .productbox .productbox-accent,
.productbox.productbox-column .productbox-accent {
    height: 3px;
    width: 100%;
    background: #830779;
    margin: 0;
}
/* Ausverkauft/nicht kaufbar: Balken neutral, damit der Markenakzent nicht
   faelschlich Verfuegbarkeit signalisiert. */
.productbox:has(.fs-ausverkauft-btn) .productbox-accent { background: #d9d9de; }

/* --- Preis in der Display-Schrift (Anton) ---
   Das Paket verlangt Anton fuer den Preis und Magenta nur als sparsamen Akzent.
   Bisher stand der Preis in der Textschrift und komplett in #830779.
   Rueckbau auf den alten Stand = diese beiden Regeln loeschen. */
#product-list .productbox .price.productbox-price,
.carousel .productbox .price.productbox-price {
    font-family: "FS Display", "FS Text", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.62rem !important;
    letter-spacing: .01em;
    /* Zielbild Yunus 21.08.: Preis in Markenfarbe, nicht schwarz. Anton bleibt. */
    color: #830779 !important;
    line-height: 1.05 !important;
}
#product-list .productbox .price.productbox-price .fs-preis-zahl,
.carousel .productbox .price.productbox-price .fs-preis-zahl {
    font-family: inherit;
    font-weight: inherit;
}
/* Label und Altpreis bleiben in der Textschrift und deutlich leiser. */
#product-list .productbox .fs-preis-label,
.carousel .productbox .fs-preis-label {
    font-family: "FS Text", system-ui, sans-serif;
}
#product-list .productbox .price_wrapper .old-price,
#product-list .productbox .price_wrapper .instead-of,
.carousel .productbox .price_wrapper .old-price,
.carousel .productbox .price_wrapper .instead-of {
    font-family: "FS Text", system-ui, sans-serif;
}

/* --- Kaufzeile: einzeilig, Icon-Button (Zielbild Yunus 21.08.) ---
   Zwischenstand vom 21.08. hatte den Buttontext sichtbar gemacht und die Zeile
   dafuer gestapelt (Master-Prompt §6, V17). Yunus' Zielbild zeigt die Kaufzeile
   EINZEILIG: Mengenregler links, quadratischer Icon-Knopf rechts. Gemessen kostet
   die gestapelte Fassung 88px statt 44px — bei einer ohnehin zu hohen Karte der
   groesste einzelne Posten. Das Zielbild sticht hier das Paket; der Buttontext
   bleibt als aria-label und title erhalten, der Knopf ist also weiterhin
   benannt, nur nicht beschriftet.
   Rueckbau auf Text = display:inline auf .fs-cart-text und die Spaltenbreiten
   wieder auf 100%. */
#product-list .productbox .basket-details-add-to-cart .fs-cart-text,
.carousel .productbox .basket-details-add-to-cart .fs-cart-text {
    display: none;
}
#product-list .productbox .basket-details-add-to-cart,
.carousel .productbox .basket-details-add-to-cart {
    border-radius: 0;
    padding: .5rem;
    min-height: 44px;
}
#product-list .productbox .item-list-basket-details,
.carousel .productbox .item-list-basket-details {
    row-gap: 0;
    margin-top: .45rem;
}
#product-list .productbox .form-counter .btn,
.carousel .productbox .form-counter .btn {
    width: 34px;
    flex: 0 0 34px;
    min-height: 44px;
}
#product-list .productbox .form-counter .quantity,
.carousel .productbox .form-counter .quantity {
    text-align: center;
    min-height: 44px;
}

/* --- Variantenkarte, solange kein Kind aufgeloest ist ---
   Der Mengenregler bleibt sichtbar (die Kaufzone soll nicht springen), ist aber
   erkennbar inaktiv: erst die Auswahl, dann die Menge. */
#product-list .productbox .form-counter.fs-counter-gesperrt,
.carousel .productbox .form-counter.fs-counter-gesperrt {
    opacity: .45;
    pointer-events: none;
}
/* Der AUSWAEHLEN-Knopf ist keine Kaufaktion — er fuehrt zur Entscheidung.
   Deshalb Kontur statt Flaeche, damit der volle Markenknopf dem echten Kauf
   vorbehalten bleibt. */
#product-list .productbox .basket-details-add-to-cart.fs-select-cta,
.carousel .productbox .basket-details-add-to-cart.fs-select-cta {
    background-color: #fff;
    border-color: #111114;
    color: #111114;
}
#product-list .productbox .basket-details-add-to-cart.fs-select-cta:hover,
#product-list .productbox .basket-details-add-to-cart.fs-select-cta:focus,
.carousel .productbox .basket-details-add-to-cart.fs-select-cta:hover,
.carousel .productbox .basket-details-add-to-cart.fs-select-cta:focus {
    background-color: #111114;
    border-color: #111114;
    color: #fff;
}
/* Kurzer Hinweis, wohin der Klick gefuehrt hat. Bewegung nur, wenn erwuenscht. */
.productbox.fs-auswahl-betont .productbox-variations select,
.productbox.fs-auswahl-betont .bootstrap-select .dropdown-toggle {
    outline: 2px solid #830779;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .productbox.fs-auswahl-betont .productbox-variations select,
    .productbox.fs-auswahl-betont .bootstrap-select .dropdown-toggle { outline-width: 2px; }
}

/* Sparzeile: mengenabhaengig, deshalb kann sie verschwinden. hidden muss auch
   gegen das Flex-Layout des Preisblocks greifen. */
#product-list .productbox .fs-spare-row[hidden],
.carousel .productbox .fs-spare-row[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   Pflicht-!important gegen das Plugin knm_custom_code
   ---------------------------------------------------------------------------
   plugins/knm_custom_code/frontend/css/custom.css:8107 setzt die Kaufzeile der
   Vollkarte mit !important fest — Flaeche, Rahmen, Schriftstaerke 600 und
   border-radius 6px. Ohne !important gewinnt das Plugin gegen jede noch so
   spezifische Theme-Regel. Das Plugin bleibt unangetastet: es gehoert nicht zu
   diesem Projekt und andere Sitzungen bauen darauf auf.
   Drei Dinge muessen hier zwingend gewinnen:
     1. AUSWAEHLEN ist keine Kaufaktion und darf nicht wie der Kauf-Button aussehen
     2. Anton hat nur den Schnitt 400 — font-weight 600 laesst der Browser
        kuenstlich fetten, was das Paket ausdruecklich verbietet
     3. kantige Ecken statt Radius 6
   --------------------------------------------------------------------------- */
.productbox.productbox-column .item-list-basket-details .basket-details-add-to-cart {
    border-radius: 0 !important;
    font-weight: 400 !important;
}
.productbox.productbox-column .item-list-basket-details .basket-details-add-to-cart .fs-cart-text {
    font-family: "FS Display", "FS Text", sans-serif !important;
    font-weight: 400 !important;
    font-size: .84rem !important;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.productbox.productbox-column .item-list-basket-details .basket-details-add-to-cart.fs-select-cta {
    background-color: #fff !important;
    border-color: #111114 !important;
    color: #111114 !important;
}
.productbox.productbox-column .item-list-basket-details .basket-details-add-to-cart.fs-select-cta:hover,
.productbox.productbox-column .item-list-basket-details .basket-details-add-to-cart.fs-select-cta:focus {
    background-color: #111114 !important;
    border-color: #111114 !important;
    color: #fff !important;
    transform: none !important;
}
/* Mengenregler: kantig und gross genug fuers Tippen. */
.productbox.productbox-column .item-list-basket-details .form-counter .btn,
.productbox.productbox-column .item-list-basket-details .form-counter .form-control {
    border-radius: 0 !important;
}
.productbox.productbox-column .item-list-basket-details .form-counter .form-control {
    font-weight: 500 !important;
}

/* --- Schmale Karte: Mengenhinweis nie ohne seine Bedingung ---
   custom.css blendet bei Karten unter 240px .fs-bundle-menge aus. Uebrig bleibt
   dann "ab 6,30 €" — ein guenstigerer Preis ohne die Menge, ab der er gilt.
   Genau das untersagt das Paket (§5 B, CP09). Auf so schmalen Karten faellt
   deshalb der ganze Chip weg; die Staffelleiste direkt darunter nennt Menge UND
   Preis und traegt die Information vollstaendig. */
@container (max-width: 239px) {
    .productbox .fs-bundle { display: none !important; }
    /* Das Warenkorb-Icon ist ein Flex-Kind und schrumpfte auf schmalen Karten
       auf 0px zusammen (gemessen 320px: Text 92px in 110px Innenbreite, fuer das
       Icon blieben 18px statt der noetigen 19,3px). Das Paket verlangt Text UND
       Icon — also darf das Icon nicht schrumpfen und der Text wird eine Spur
       kleiner, statt das Icon zu verdraengen. */
    .productbox .basket-details-add-to-cart .fa-shopping-cart {
        flex: 0 0 auto;
    }
    .productbox .basket-details-add-to-cart .fs-cart-text {
        font-size: .74rem !important;
        letter-spacing: .02em;
    }
    .productbox .basket-details-add-to-cart { padding-left: .3rem !important; padding-right: .3rem !important; }
}

/* --- Ein Mengenvorteil, einmal gesagt ---
   Auf einer Staffelkarte stand derselbe Sachverhalt dreimal:
     Preiszeile   "ab 6,30 €  im 10er Bundle"
     Staffelleiste "5 Stk. 6,49 € | 10+ Stk. 6,30 €"
     Statuszeile  "ab 10 Stk. −2 %"
   Das Paket erlaubt genau eine Sparaussage plus optional den Prozentsatz
   (§5 B) und untersagt konkurrierende Spar-Badges. Die Staffelleiste ist die
   vollstaendigste Angabe — sie nennt jede Stufe mit Menge UND Preis und markiert
   die aktive. Die Bundle-Box direkt darueber wiederholt davon nur eine Zeile und
   entfaellt deshalb, sobald die Leiste auf derselben Karte steht.
   Karten OHNE Leiste (z. B. Preisspannen ohne gelieferte Staffelwerte) behalten
   die Box — dort ist sie die einzige Mengeninformation.
   Der Prozent-Chip bleibt: er ist der optionale Prozentsatz, nicht dieselbe Zahl. */
.productbox:has(.fs-staffeln:not(.fs-mengen-helfer)) .fs-bundle { display: none !important; }

/* --- Breite Kompaktkarte: Aktion neben den Preis statt darunter ---
   Gemessen bei 465px Kartenbreite: Marke 13 + Name 17 + Preis 38 + Aktion 45
   = 113px Inhalt, dazu Innenabstand -> 163px hohe Karte. Die eigene Zeile fuer
   den Knopf ist der einzige grosse Posten, der sich einsparen laesst, ohne am
   Touchziel oder an Pflichtangaben zu drehen. Ab 400px Kartenbreite steht die
   Aktion deshalb rechts neben der Preisspalte; darunter bleibt es beim Stapel. */
/* 2026-08-30: Das Preis/Aktion-Grid ist in die Basisregeln gewandert (gilt
   jetzt auf allen Breiten, s. .fs-cc__body oben). Hier bleibt nur der
   grosszuegigere Spaltenabstand breiter Karten. */
@container fscc (min-width: 400px) {
    .fs-cc__body { column-gap: .9rem; }
}

/* ============================================================================
   4. Zielbild Yunus, 21.08.2026 — Feinschliff der Vollkarte
   Vorlage: das Kartenmockup aus dem "Most Wanted"-Entwurf. Reihenfolge und
   Bausteine bleiben, Typografie und Dichte ziehen nach.
   ============================================================================ */

/* --- Titel: Display-Schrift, versal, zwei Zeilen --- */
#product-list .productbox .productbox-title,
.carousel .productbox .productbox-title {
    min-height: 0;
    margin-bottom: .3rem;
}
#product-list .productbox .productbox-title a,
.carousel .productbox .productbox-title a {
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.18;
    letter-spacing: .012em;
    text-transform: uppercase;
    color: #111114;
}
/* Zwei Zeilen reserviert, damit die Karten im Raster auf einer Linie bleiben —
   das ist die eine Stelle, an der eine feste Hoehe mehr nutzt als schadet. */
#product-list .productbox .productbox-title,
.carousel .productbox .productbox-title { min-height: 2.36em; }

/* --- Marke: leiser Kicker ueber dem Titel --- */
#product-list .productbox .manufacturer,
.carousel .productbox .manufacturer {
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: .15rem;
}

/* --- "Einzelpreis" ueber den Preis, nicht daneben ---
   Im Zielbild fuehrt das kleine graue Label und der Preis steht darunter. */
#product-list .productbox .fs-preis-col,
.carousel .productbox .fs-preis-col {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: .05rem;
}
#product-list .productbox .fs-preis-label,
.carousel .productbox .fs-preis-label {
    font-size: .68rem;
    font-weight: 500;
    color: #8a8292;
    text-transform: none;
    letter-spacing: 0;
}

/* --- Dichte: die Karte war 748px hoch, das Bild allein traegt davon 340px --- */
#product-list .productbox .product-box,
.carousel .productbox .product-box { padding: .55rem .75rem .7rem; }
#product-list .productbox .price_wrapper .price-note,
.carousel .productbox .price_wrapper .price-note { margin-top: .3rem; }
#product-list .productbox .fs-staffeln,
.carousel .productbox .fs-staffeln { margin-top: .45rem; }
#product-list .productbox .fs-statusrow,
.carousel .productbox .fs-statusrow { margin-top: .45rem; }

/* --- Badge oben links auf dem Bild --- */
.productbox .inner-image-wrapper { position: relative; }
.productbox .fs-staffelbadge {
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    display: inline-block;
    padding: .3rem .55rem;
    background: #111114;
    color: #fff;
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: .66rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.25;
    max-width: calc(100% - 5rem);
}
.productbox .fs-staffelbadge--ohne { background: #6b6b75; }
/* Echte Shop-Badges gewinnen: nie zwei Labels an derselben Stelle. */
.productbox:has(.product-overlays .ribbon) .fs-staffelbadge { display: none; }

/* --- Staffelblock: Rahmen, Kopfzeile, Prozent je Stufe, Bestpreis-Band --- */
#product-list .productbox .fs-staffeln,
.carousel .productbox .fs-staffeln {
    border: 1px solid #e3e3e7;
    padding: .4rem .45rem .45rem;
    background: #fff;
}
.productbox .fs-staffeln-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    margin-bottom: .35rem;
}
.productbox .fs-staffeln-kopf .fs-staffeln-label {
    display: inline;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #111114;
}
.productbox .fs-staffeln-spar {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .62rem;
    font-weight: 600;
    color: #830779;
    background: #f7ecf6;
    padding: .12rem .35rem;
    white-space: nowrap;
}
.productbox .fs-staffeln-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: .3rem;
}
#product-list .productbox .fs-staffel-zelle,
.carousel .productbox .fs-staffel-zelle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .04rem;
    padding: .3rem .15rem .4rem;
    border: 1px solid #e3e3e7;
    border-radius: 0;
    background: #fff;
    min-height: 0;
}
.productbox .fs-staffel-menge {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .66rem;
    color: #5c5c63;
    line-height: 1.2;
}
.productbox .fs-staffel-preis {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .84rem;
    font-weight: 700;
    color: #111114;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.productbox .fs-staffel-proz {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .6rem;
    color: #8a8292;
    line-height: 1.1;
}
/* Beste Stufe: Markenrahmen plus Band — nicht nur Farbe (Doc 01). */
#product-list .productbox .fs-staffel-zelle.fs-staffel-beste,
.carousel .productbox .fs-staffel-zelle.fs-staffel-beste {
    border-color: #830779;
    padding-bottom: .85rem;
}
.productbox .fs-staffel-beste .fs-staffel-preis { color: #830779; }
.productbox .fs-staffel-band {
    position: absolute;
    left: -1px; right: -1px; bottom: -1px;
    background: #830779;
    color: #fff;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: .56rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.6;
}
/* Aktive Stufe nach gewaehlter Menge (fs-karten.js) bleibt zusaetzlich erkennbar. */
#product-list .productbox .fs-staffel-zelle.is-active,
.carousel .productbox .fs-staffel-zelle.is-active {
    background: #f7ecf6;
    border-color: #830779;
}
/* Gesperrte Staffelstufe — 22.08.2026 neu gefasst.
   ------------------------------------------------------------------
   BEFUND Yunus: "die farben von den staffelpreisen wirkt irgendwie
   ausgeblichen". Ursache war nicht der Farbton, sondern opacity:.45 auf
   der ganzen Zelle. Eine Stufe wird gesperrt, wenn der Lagerbestand fuer
   diese Menge nicht reicht (productdetails/price.tpl:543, $fsZelleTot) —
   das kommt oefter vor als gedacht: auf /ELFA-kompatibel bei der Haelfte
   der Karten, auf der Startseite bei der einzigen Staffelkarte.

   Die Zelle traegt ZWEI Rollen: Schaltflaeche UND Preisinformation.
   opacity blendet beide ab — auch den Preis, der weiterhin gilt.
   Gerechnet gegen Weiss: Mengenzeile fiel auf 1,89:1, der Preis auf
   3,03:1. Beides weit unter den 4,5:1, die kleine Schrift braucht.

   Neu: kein opacity. Die Sperre zeigt sich in der FLAECHE (grau statt
   weiss) und im Zeiger, nicht in der Lesbarkeit.
   Gerechnet: #6b6b75 auf #f6f5f3 = 4,84:1. */
/* Die Basisregel weiter oben faehrt #product-list .productbox .fs-staffel-zelle
   — eine ID schlaegt drei Klassen. Ohne dieselbe Stufe blieb die Flaeche weiss,
   waehrend Schriftfarbe und Deckkraft schon sassen: ein halb angekommener
   Zustand, der schwerer zu erkennen ist als gar keiner. */
#product-list .productbox .fs-staffel-zelle[disabled],
#product-list .productbox .fs-staffel-zelle:disabled,
.carousel .productbox .fs-staffel-zelle[disabled],
.carousel .productbox .fs-staffel-zelle:disabled,
.productbox .fs-staffel-zelle[disabled],
.productbox .fs-staffel-zelle:disabled {
    /* opacity:1 ausdruecklich — custom.css:642 (fremde Datei) setzt
       .fs-staffel-zelle:disabled{opacity:.45}. Ohne diese Zeile bleibt die
       Abblendung stehen, auch wenn Flaeche und Schrift hier neu gesetzt sind:
       ein nicht ueberschriebener Wert wird nicht dadurch ungueltig, dass die
       Nachbarwerte es sind. Genau daran ist der erste Anlauf gescheitert. */
    opacity: 1;
    cursor: not-allowed;
    background-color: #f6f5f3;
    border-color: #e8e6e2;
    color: #6b6b75;
}
.productbox .fs-staffel-zelle[disabled] .fs-staffel-preis,
.productbox .fs-staffel-zelle[disabled] .fs-staffel-menge,
.productbox .fs-staffel-zelle[disabled] .fs-staffel-proz,
.productbox .fs-staffel-zelle:disabled .fs-staffel-preis,
.productbox .fs-staffel-zelle:disabled .fs-staffel-menge,
.productbox .fs-staffel-zelle:disabled .fs-staffel-proz {
    color: #6b6b75;
}
/* Auch eine gesperrte Bestmarke bleibt eine Bestmarke — nur eben
   in der gedaempften Fassung, nicht in Magenta. */
.productbox .fs-staffel-zelle[disabled].fs-staffel-beste,
.productbox .fs-staffel-zelle:disabled.fs-staffel-beste {
    border-color: #d8d5d0 !important;
}

/* --- Hinweiskasten statt Mengenzellen, wenn es keine Staffel gibt --- */
.productbox .fs-hinweisbox {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .5rem;
    border: 1px solid #e3e3e7;
    background: #fafafa;
    margin-top: .45rem;
}
.productbox .fs-hinweisbox-icon { flex: 0 0 auto; display: inline-flex; color: #8a8292; }
.productbox .fs-hinweisbox-icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.productbox .fs-hinweisbox-text {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .7rem;
    line-height: 1.3;
    color: #5c5c63;
}
.productbox .fs-hinweisbox--rest .fs-hinweisbox-icon { color: #830779; }

/* Schmale Karten: Prozentzeile und Band weichen zuerst, Menge und Preis bleiben. */
@container (max-width: 200px) {
    .productbox .fs-staffel-proz { display: none; }
    .productbox .fs-staffeln-spar { display: none; }
}

/* --- Reihenfolge im Preisblock ---
   custom.css macht .price_wrapper zu einem Flex-Container mit fester order-Kette
   (Preis 1, Spar-Chip 3, Staffeln 4, Grundpreis 5). Ein neues Kind ohne order
   landet auf 0 und damit VOR dem Preis — der Hinweiskasten stand dadurch ueber
   dem Preis statt darunter. */
.productbox .price_wrapper .fs-hinweisbox {
    order: 4;
    flex-basis: 100%;
    min-width: 0;
}

/* --- Dichte, zweiter Durchgang ---
   Gemessen bei 339px Kartenbreite: Bild 340, Marke 16, Titel 53, Preisblock 175,
   Kaufzeile 44, Status 25 — macht 653 Inhalt bei 726 Gesamthoehe, also 73px
   reine Abstaende. Das Bild ist mit 47% der groesste Posten und bleibt 1:1.
   Gekuerzt wird deshalb an den Abstaenden und am Preisblock. */
#product-list .productbox .product-box,
.carousel .productbox .product-box { padding: .45rem .7rem .6rem; }

#product-list .productbox .price_wrapper,
.carousel .productbox .price_wrapper { row-gap: 0; }
#product-list .productbox .price_wrapper .price-note,
.carousel .productbox .price_wrapper .price-note { margin-top: .25rem; }
#product-list .productbox .fs-staffeln,
.carousel .productbox .fs-staffeln { margin-top: .35rem; }
#product-list .productbox .price_wrapper .fs-hinweisbox,
.carousel .productbox .price_wrapper .fs-hinweisbox { margin-top: .35rem; }
#product-list .productbox .item-list-basket-details,
.carousel .productbox .item-list-basket-details { margin-top: .4rem; }
#product-list .productbox .fs-statusrow,
.carousel .productbox .fs-statusrow { margin-top: .35rem; }

/* Titel: zwei Zeilen bleiben reserviert, aber enger gesetzt. */
#product-list .productbox .productbox-title a,
.carousel .productbox .productbox-title a { line-height: 1.14; }
#product-list .productbox .productbox-title,
.carousel .productbox .productbox-title { min-height: 2.28em; margin-bottom: .25rem; }

/* Grundpreis und Statuszeile ruhig und schmal. */
#product-list .productbox .base_price,
.carousel .productbox .base_price { line-height: 1.25; }

/* --- Staffelblock straffen ---
   Gemessen bei 245px Kartenbreite: der Block war mit 98px nach dem Bild der
   groesste Posten der Karte. Menge, Preis und Prozent bleiben vollstaendig,
   nur die Luft dazwischen geht raus. */
#product-list .productbox .fs-staffeln,
.carousel .productbox .fs-staffeln { padding: .35rem .35rem .4rem; }
.productbox .fs-staffeln-kopf { margin-bottom: .28rem; }
#product-list .productbox .fs-staffel-zelle,
.carousel .productbox .fs-staffel-zelle { padding: .25rem .12rem .3rem; }
#product-list .productbox .fs-staffel-zelle.fs-staffel-beste,
.carousel .productbox .fs-staffel-zelle.fs-staffel-beste { padding-bottom: .78rem; }
.productbox .fs-staffel-band { font-size: .54rem; line-height: 1.5; }
.productbox .fs-staffel-menge { font-size: .64rem; line-height: 1.15; }
.productbox .fs-staffel-preis { font-size: .82rem; line-height: 1.1; }
.productbox .fs-staffel-proz { font-size: .58rem; line-height: 1.05; }

/* Statuszeile einzeilig halten. */
#product-list .productbox .fs-statusrow,
.carousel .productbox .fs-statusrow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: .35rem;
    row-gap: 0;
    line-height: 1.35;
}

/* --- Handy: zwei Karten nebeneinander, jede Zeile zaehlt ---
   Gemessen 390px (Karte 162px): Bild 163, Titel 49, Preis 34, Staffeln 76,
   Grundpreis 14, Kaufzeile 44, Status 40 — 496px je Karte, also fast 1000px
   Scrollweg fuer zwei Produkte. Auf dieser Breite weicht, was auch ohne Zahl
   verstaendlich bleibt: das Bestpreis-Band (der Markenrahmen markiert die Stufe
   weiterhin) und die Wortmarke "Staffelpreise" im Kopf (die Zellen sagen selbst,
   worum es geht). Menge, Preis, Grundpreis und Kaufzeile bleiben unangetastet. */
@container (max-width: 200px) {
    .productbox .fs-staffel-band { display: none; }
    #product-list .productbox .fs-staffel-zelle.fs-staffel-beste,
    .carousel .productbox .fs-staffel-zelle.fs-staffel-beste { padding-bottom: .3rem; }
    .productbox .fs-staffeln-kopf { display: none; }
    /* 2026-08-23: Das Spar-Band folgt derselben Regel wie das Bestpreis-Band
       darueber. Auf dem Desktop nimmt es den Platz der ausgeblendeten
       Kopfzeile ein (Abschnitt 16) — hier gibt es diese Kopfzeile gar nicht
       mehr, das Band kostete also volle 21px und schob die Statuszeile aus der
       Karte (gemessen an vier Karten: 21px Ueberlauf, Status unsichtbar).
       Die Ersparnis bleibt sichtbar: im Preis, der beim Stufenwechsel
       mitlaeuft, und im Markenrahmen der gewaehlten Stufe. */
    #product-list .productbox .fs-spare-row,
    .carousel .productbox .fs-spare-row { display: none !important; }
    #product-list .productbox .fs-staffeln,
    .carousel .productbox .fs-staffeln { padding: .3rem; }
    #product-list .productbox .productbox-title a,
    .carousel .productbox .productbox-title a { font-size: .92rem; }
    #product-list .productbox .fs-statusrow,
    .carousel .productbox .fs-statusrow { font-size: .72rem; }
}

/* ============================================================================
   5. Rasterausrichtung
   ============================================================================
   Gemessen auf /Mehrweg-Vapes, erste Zeile, alle Karten 603px hoch: Kaufzeile
   bei Karte 1-3 auf Y 514, bei Karte 4 auf Y 466. Ursache: bei Variantenkarten
   liegt die Kaufzeile in .productbox-variations > .productbox-onhover, bei
   einfachen Karten direkt in .product-box — zwei verschiedene Verschachtelungen,
   die nicht am selben Flex-Fluss teilnehmen. Unterschiedlich lange Titel und
   Preisbloecke verschieben den Rest zusaetzlich.

   Geloest wird das NICHT ueber Platzhalter (das Paket verbietet sie, und Yunus
   hat Mengenzellen und Hinweiskasten genau deshalb streichen lassen), sondern
   ueber echten Flex-Raum: der Preisblock dehnt sich auf die verbleibende Hoehe,
   Kaufzeile und Statuszeile sitzen dadurch in jeder Karte einer Zeile auf
   derselben Linie. Der Leerraum entsteht dort, wo er am wenigsten stoert —
   zwischen Preis und Kaufzeile.
   ---------------------------------------------------------------------------- */
/* Zweiter Anlauf: Nicht den Preisblock dehnen, sondern die KAUFZEILE unten
   verankern. Der gedehnte Preisblock hat den Versatz nur zufaellig ausgeglichen —
   sobald eine Karte Chips hatte und die Nachbarkarte eine Variantenauswahl,
   liefen sie wieder auseinander (gemessen: 513 gegen 533).
   Der Kaufblock liegt je nach Artikel in zwei verschiedenen Containern:
   .productbox-variations bei Variantenkarten, .fs-mengenlabel + Kaufzeile bei
   allen anderen. Beide bekommen margin-top:auto — es greift immer genau einer. */
#product-list .productbox.productbox-column .product-box > [itemprop="offers"],
.carousel .productbox.productbox-column .product-box > [itemprop="offers"] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}
/* margin-top:auto NUR auf dem ERSTEN Element des Kaufblocks. Stehen mehrere
   Flex-Kinder auf auto, teilen sie sich den freien Raum — gemessen blieben bei
   einfachen Karten 61px unter der Statuszeile, bei Variantenkarten nur 10px.
   Bei Variantenkarten ist das erste Element .productbox-variations (enthaelt
   Label, Auswahl und Kaufzeile), sonst .fs-mengenlabel. */
#product-list .productbox.productbox-column .product-box > .productbox-variations,
.carousel .productbox.productbox-column .product-box > .productbox-variations {
    margin-top: auto;
}
#product-list .productbox.productbox-column .product-box > .fs-mengenlabel,
.carousel .productbox.productbox-column .product-box > .fs-mengenlabel {
    margin-top: auto;
}
/* Variantenkarten geben das Label bereits INNERHALB der Auswahlbox aus, direkt
   ueber der Kaufzeile. Das aeussere Label steht dort hinter der Kaufzeile und
   waere ein zweites, falsch platziertes. */
/* ersetzt — s. praezisierte Regel am Dateiende */

/* Statuszeile schliesst die Karte ab und bekommt keinen zusaetzlichen Schub. */
#product-list .productbox.productbox-column .product-box > .fs-statusrow,
.carousel .productbox.productbox-column .product-box > .fs-statusrow { flex: 0 0 auto; }

/* Variantenkarten rendern einen zweiten, leeren .item-list-basket-details
   (der Zweig fuer "Zum Artikel", der bei auswaehlbaren Varianten leer bleibt).
   Er ist unsichtbar, kostet aber 6px und verschiebt die Kaufzeile gegenueber
   einfachen Karten derselben Zeile. */
#product-list .productbox .item-list-basket-details:not(:has(*)),
.carousel .productbox .item-list-basket-details:not(:has(*)) { display: none; }

/* Auf schmalen Karten bricht die Statuszeile mal um ("Sofort verfuegbar" +
   "1 - 3 Werktage" passen nicht immer nebeneinander). Weil sie unter der
   Kaufzeile steht, zog das den Kaufbutton der Nachbarkarte um 19px nach oben
   (gemessen 390px, Karten 3 und 4 derselben Zeile).
   Zwei Zeilen Mindesthoehe genau dort, wo der Umbruch wirklich vorkommt: das
   ist ein Abstand von einer Textzeile, kein Platzhalterblock — der Kaufbutton
   ist das Element, das im Raster auf einer Linie stehen muss. */
/* Bewusst @media und nicht @container: .productbox traegt selbst KEIN
   container-type (nachgemessen: computed "normal") — die @container-Regeln des
   Bestands haengen an einem anderen Vorfahren. Bis 767.98px steht das
   Zwei-Spalten-Raster, genau dort tritt der Umbruch auf. */
@media (max-width: 767.98px) {
    #product-list .productbox .fs-statusrow,
    .carousel .productbox .fs-statusrow { min-height: 2.6em; }
}

/* ============================================================================
   6. Feinabgleich mit Yunus' Kartenvorlage (21.08., Referenzbild ELFBAR ELFA)
   ============================================================================ */

/* "Spare bis zu 19 %" ist in der Vorlage reiner Text in Markenfarbe, kein Chip. */
.productbox .fs-staffeln-spar {
    background: none;
    padding: 0;
    font-size: .66rem;
    font-weight: 600;
    color: #830779;
}
/* Marke steht in der Vorlage dunkel ueber dem Titel, nicht in Markenfarbe —
   der Magentaton bleibt dem Preis und der markierten Staffel vorbehalten. */
#product-list .productbox .manufacturer,
#product-list .productbox .manufacturer a,
.carousel .productbox .manufacturer,
.carousel .productbox .manufacturer a { color: #111114; }

/* Markierte Staffel: Rahmen und Band in Markenfarbe, Preis ebenso. */
.productbox .fs-staffel-band { font-size: .58rem; letter-spacing: .07em; }

/* Label ueber der Kaufzeile */
.productbox .fs-mengenlabel {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .68rem;
    color: #5c5c63;
    margin-top: .5rem;
    line-height: 1.2;
}
/* Es gehoert zur Kaufzeile — beide zusammen nach unten, damit das Raster haelt. */
#product-list .productbox.productbox-column .product-box > .fs-mengenlabel,
.carousel .productbox.productbox-column .product-box > .fs-mengenlabel { flex: 0 0 auto; }
#product-list .productbox .item-list-basket-details,
.carousel .productbox .item-list-basket-details { margin-top: .3rem; }

/* ============================================================================
   7. Most-Wanted-Schiene: kleinere Karten (Anweisung Yunus 21.08.)
   ----------------------------------------------------------------------------
   Die Breite steuert --fs-mw-spalten aus fs-mostwanted.css (Besitz MOSTWANTED).
   Diese Datei laedt VOR fs-mostwanted.css, deshalb hier ueber die ID statt ueber
   die Klasse — sonst gewinnt der Standardwert. Die Datei der anderen Sitzung
   bleibt unangetastet; Rueckbau = diesen Abschnitt loeschen.
   Von 4,2 auf 5,2 sichtbare Karten: Kartenbreite 339 -> ~272px. Weil das Bild
   quadratisch ist und die halbe Kartenhoehe traegt, sinkt die Karte damit von
   732 auf rund 610px.
   ============================================================================ */
#fs-most-wanted.fs-mw { --fs-mw-spalten: 5.2; }
@media (max-width: 1439.98px) { #fs-most-wanted.fs-mw { --fs-mw-spalten: 4.3; } }
@media (max-width: 1199.98px) { #fs-most-wanted.fs-mw { --fs-mw-spalten: 3.4; } }
@media (max-width: 991.98px)  { #fs-most-wanted.fs-mw { --fs-mw-spalten: 2.8; } }
@media (max-width: 767.98px)  { #fs-most-wanted.fs-mw { --fs-mw-spalten: 1.8; } }
@media (max-width: 400px)     { #fs-most-wanted.fs-mw { --fs-mw-spalten: 1.45; } }

/* --- Attribut-Chips unter dem Titel (Anweisung Yunus 21.08.) ---
   Sie fuellen die Zone, die durch den gestrichenen Hinweiskasten leer geblieben
   ist — mit echten Wawi-Merkmalen statt mit einem Fuellsatz. Ruhig gesetzt: der
   Preis bleibt der staerkste Eindruck unter dem Bild. */
.productbox .fs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: .1rem 0 .35rem;
}
.productbox .fs-chip {
    display: inline-flex;
    align-items: center;
    padding: .16rem .4rem;
    border: 1px solid #e3e3e7;
    background: #fafafa;
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .66rem;
    line-height: 1.25;
    color: #5c5c63;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Schmale Karten: der dritte Chip weicht zuerst, die beiden ersten tragen die
   Kaufentscheidung (wozu es passt, wieviel drin ist). */
@media (max-width: 767.98px) {
    .productbox .fs-chip:nth-child(3) { display: none; }
    .productbox .fs-chip { font-size: .62rem; }
}

/* Warenkorb-Icon im Kaufbutton (Inline-SVG, s. Kommentar in item_box_buy_box.tpl) */
.productbox .basket-details-add-to-cart .fs-cart-icon {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================================
   8. Listenansicht (Umschalter oben rechts, #product-list.layout-list)
   ----------------------------------------------------------------------------
   Dort rendert dieselbe Karte, aber beide Spalten stehen im Markup auf col-12.
   In der Kachelansicht ist die Karte 245px breit, das faellt nicht auf. In der
   Listenansicht ist sie 1046px — das quadratische Produktbild wurde damit
   1046x1046px gross und schob den Rest aus dem Bild. Gemessen: Karte 1415px hoch.
   Gerichtet wird das hier, ohne Template-Aenderung: Bild links in fester Breite,
   Inhalt rechts daneben.
   ============================================================================ */
#product-list.layout-list .productbox-inner > .row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}
/* KOMPAKTE LISTE (Ansage Yunus 27.08.): Zeilenhoehe = Bildhoehe, der Rest
   verteilt sich in die Breite. Die Zeile hat DREI Spalten (Bild | Text |
   Kaufbox), nicht zwei — last-child ist die Kaufbox. Mit flex-basis:auto
   bemass sie sich frueher an ihrer Inhaltsbreite und liess der Textspalte
   (Bootstrap "col", basis 0) nur ~100px. Jetzt: Bild klein und fest, Kaufbox
   fest, Textspalte waechst. Unter 576px stapelt die Karte (s. u.). */
#product-list.layout-list .productbox-inner > .row > .col:first-child {
    flex: 0 0 clamp(140px, 15%, 176px);
    max-width: 176px;
}
#product-list.layout-list .productbox-inner > .row > .col:last-child {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
}
@media (min-width: 576px) {
    /* Luft zwischen Bild und Text — custom.css setzt col-padding auf 0 !important */
    #product-list.layout-list .productbox-inner > .row > .col:not(:first-child):not(:last-child) {
        padding: 8px 18px !important;
    }
    /* Die unteren Elemente der Textspalte schleppen margin-bottoms mit
       (productbox-details ~14px; :last-child greift nicht — nach details
       steht noch ein unsichtbares <meta>). Zusammen mit dem Padding machte
       das die Zeile hoeher als das Bild. */
    #product-list.layout-list .productbox .productbox-details,
    #product-list.layout-list .productbox .productbox-details dl,
    #product-list.layout-list .productbox .productlist-item-detail {
        margin-bottom: 0 !important;
    }
    #product-list.layout-list .productbox-inner > .row > .col:last-child {
        flex: 0 0 clamp(250px, 36%, 360px);
        max-width: 360px;
        padding: 8px 14px 8px 0 !important;
    }
    /* "Variationen in: / GTIN:"-Zeile: Wert direkt hinters Etikett statt col-6/col-6
       (die nowrap-Haelften ueberlappten sich in schmalen Spalten) */
    #product-list.layout-list .productlist-item-detail {
        display: flex !important;
        flex-wrap: wrap;
        align-items: baseline;
    }
    #product-list.layout-list .productlist-item-detail > dt,
    #product-list.layout-list .productlist-item-detail > dd {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0;
        margin-bottom: 0;
    }
    #product-list.layout-list .productlist-item-detail > dt { margin-right: 6px; }
    #product-list.layout-list .productlist-item-detail > dd { margin-right: 16px; }
    /* Vergleichen/Merkzettel ALS Hover-Overlay aufs Bild statt als 34px-Balken
       darueber (der Balken schob das Bild runter und ueberlappte die Badges).
       custom.css erzwingt .productbox-onhover { position: static !important;
       display: block !important } — daher die !important-Gegenwehr; top:auto
       noetig, sonst gewinnt ein fremdes top gegen unser bottom. */
    #product-list.layout-list .productbox-image { position: relative; }
    #product-list.layout-list .productbox-quick-actions {
        position: absolute !important;
        top: auto !important;
        bottom: 10px;
        /* rechts statt links: unten links sitzt jetzt der Status */
        left: auto;
        right: 6px;
        z-index: 5;
        margin: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease;
    }
    #product-list.layout-list .productbox:hover .productbox-quick-actions,
    #product-list.layout-list .productbox:focus-within .productbox-quick-actions {
        opacity: 1;
        pointer-events: auto;
    }
    /* Titelbereich enger takten */
    #product-list.layout-list .productbox .productbox-title { margin-bottom: 4px; }
    #product-list.layout-list .productbox .sku-wrapper { margin: 0 0 6px; min-height: 0; }
    /* --- TICKET-ZEILE (Design-Freigabe Yunus 27.08., Variante A; der
       Poster-Streifen-Versuch vom 28.08. wurde auf Ansage rueckgebaut) ---
       Duenne Trennlinien zwischen Bild | Text | Kaufbox, Kaufzone auf
       leicht abgesetzter Flaeche. Das Produktbild fuellt sein Quadrat
       randlos (Ansage Yunus: "das ganze Quadrat einnehmen"). */
    /* Zeilenhoehe = Bildhoehe (Ansage 28.08.): Karten-Innenpolster weg,
       sonst haengen unten ~16px Weissraum unter jeder Zeile. */
    #product-list.layout-list .productbox { padding: 0 !important; }
    #product-list.layout-list .productbox-inner { margin: 0; }
    #product-list.layout-list .productbox-inner > .row > .col:first-child,
    #product-list.layout-list .productbox-inner > .row > .col:not(:first-child):not(:last-child) {
        border-right: 1px solid #ececef;
    }
    #product-list.layout-list .productbox-inner > .row > .col:last-child {
        background: #f6f6f7;
        /* static, damit der Status-Overlay (absolute) an der KARTE ankert
           und unten links im Bild landet — Bootstrap macht jede .col relativ */
        position: static;
    }
    /* flex statt block: im Markup haengt ein nackter Textknoten neben dem
       Formular, der als anonyme ~20px-Zeile die Kaufzone hoeher machte —
       in einem Flex-Container rendern reine Textknoten nicht. */
    #product-list.layout-list .productbox-buybox {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* das Kachel-Layout gibt der Kaufbox eine feste Hoehe — in der
           Liste macht die die Zeile ~16px hoeher als noetig */
        height: auto !important;
        min-height: 0 !important;
    }
    #product-list.layout-list .productbox-buybox > form { flex: 0 0 auto; }
    #product-list.layout-list .productbox-image,
    #product-list.layout-list .productbox-images { padding: 0; }
    #product-list.layout-list .productbox-images a { display: block; }
    #product-list.layout-list .productbox-images img { display: block; width: 100%; }
    /* Einzelpreis +10px (Ansage Yunus 28.08.): custom.css nagelt 1.5rem=24px
       mit !important fest — daher 34px mit staerkerer Waffe. */
    html body #product-list.layout-list .productbox .price.productbox-price,
    html body #product-list.layout-list .productbox .price.productbox-price .fs-preis-zahl {
        font-size: 34px !important;
    }
    /* Status ("Sofort verfuegbar" usw.) als Overlay unten links ins Bild.
       pointer-events none: der Klick geht durch zum Kartenlink. */
    #product-list.layout-list .productbox .delivery-status {
        position: absolute;
        left: 10px;
        bottom: 10px;
        z-index: 3;
        margin: 0;
        padding: 3px 8px;
        background: rgba(255, 255, 255, .92);
        pointer-events: none;
    }
    /* Staffelpreise: DIESELBE Kaestchen-Box wie in der Kachelansicht der
       Kategorie (Ansage Yunus 28.08. — Kanon schlaegt Mockup-Detail).
       Kein Pillen-Sonderstil; die Basisregeln aus Abschnitt "Staffelblock"
       gelten unveraendert. Nur die Breite an die Optionszone anpassen. */
    #product-list.layout-list .productbox .fs-staffeln {
        width: 100%;
        max-width: 380px;
    }
    /* "Waehle zuerst eine Variante" volle Breite unter der Staffelbox —
       nicht rechts an den Rand (dort haengt sonst der leere Kaufzeilen-Slot). */
    #product-list.layout-list .productbox .item-list-basket-details:has(.choose-variations) {
        flex: 0 0 100%;
        margin-left: 0;
        margin-top: 6px;
    }

    /* Label "Nikotingehalt:" INLINE vor dem Feld statt darueber — eine Zeile. */
    #product-list.layout-list .productbox-variations dl { margin: 0; }
    #product-list.layout-list .productbox-variations .variation-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    #product-list.layout-list .productbox-variations .variation-wrapper dt {
        margin: 0;
        white-space: nowrap;
    }
    #product-list.layout-list .productbox-variations .variation-wrapper dd {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }
    /* "Waehle zuerst eine Variante": kleine Textzeile statt Kasten, sitzt im
       Kaufzeilen-Slot (Spalte 2, unter den Staffeln), rechtsbuendig. */
    #product-list.layout-list .productbox .item-list-basket-details .choose-variations {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0;
        font-size: 12px;
        color: #5c5c63;
        text-align: right;
    }
}
@media (min-width: 992px) {
    /* Kaufbox breiter, ihr Inhalt nebeneinander statt gestapelt:
       Variantenwahl links | Preis + Staffeln + Kaufzeile + Status rechts */
    #product-list.layout-list .productbox-inner > .row > .col:last-child {
        flex: 0 0 clamp(430px, 52%, 620px);
        max-width: 620px;
    }
    #product-list.layout-list .productbox-buybox > form > .row {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    #product-list.layout-list .productbox-buybox .productbox-variations {
        flex: 0 0 34%;
        max-width: 34%;
    }
    /* Bundles ohne Varianten: leere Spalte weg (":empty" scheitert am
       Smarty-Whitespace, siehe Abschnitt 9) */
    #product-list.layout-list .productbox-buybox .productbox-variations:not(:has(*)) {
        display: none;
    }
    #product-list.layout-list .productbox-buybox .productbox-options {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }
    /* Kaufzonen-Raster (Ansage Yunus 28.08. abends, fuer ALLE Zeilen):
       links der Preis (gross), rechts der Stapel von oben nach unten:
       Nikotingehalt-Dropdown -> Staffelpreise -> Mengenwaehler + Warenkorb.
       Der Status wandert als Overlay unten links ins Bild (Regel im
       576er-Block). options/item-list-price/price_wrapper werden per
       display:contents aufgeloest, damit das Grid ueber Containergrenzen
       hinweg anordnen kann — Achtung: Regeln auf den aufgeloesten
       Containern (margin/flex) wirken danach nicht mehr. */
    #product-list.layout-list .productbox-buybox > form > .row {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 4px;
        align-items: center;
        align-content: center;
    }
    /* Staffelbox in der Liste verdichtet (Ansage 28.08.: alles auf
       Bildhoehe) — gleiche Anatomie wie die Kachel, engere Masse. */
    #product-list.layout-list .productbox .fs-staffeln { padding: .3rem .35rem .35rem; }
    #product-list.layout-list .productbox .fs-staffeln-kopf { margin-bottom: .2rem; }
    #product-list.layout-list .productbox .fs-staffel-zelle { padding: .22rem .15rem .3rem; }
    #product-list.layout-list .productbox .fs-staffel-zelle.fs-staffel-beste { padding-bottom: .68rem; }
    #product-list.layout-list .productbox .fs-staffel-band { font-size: .5rem; line-height: 1.5; }
    #product-list.layout-list .productbox .fs-staffel-menge { font-size: .6rem; }
    #product-list.layout-list .productbox .fs-staffel-preis { font-size: .78rem; }
    #product-list.layout-list .productbox .fs-staffel-proz { font-size: .56rem; }
    /* Der "Waehle zuerst"-Hinweis wandert klein unter den Preis (Spalte 1) —
       rechts wuerde er die Kaufzone unnoetig hoeher machen. */
    #product-list.layout-list .productbox .item-list-basket-details:has(.choose-variations) {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        margin: 0;
        /* Textzeile, kein Knopf: die 44px-Mindesthoehe der Kaufzeile kostet
           hier nur Kartenhoehe. */
        min-height: 0 !important;
    }
    #product-list.layout-list .productbox .item-list-basket-details:has(.choose-variations) .choose-variations {
        text-align: left;
    }
    #product-list.layout-list .productbox-buybox > form > .row > .productbox-options,
    #product-list.layout-list .productbox-buybox > form > .row .productbox-options .item-list-price,
    #product-list.layout-list .productbox-buybox > form > .row .productbox-options .price_wrapper {
        display: contents;
    }
    #product-list.layout-list .productbox-buybox > form > .row .price.productbox-price {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
    }
    #product-list.layout-list .productbox-buybox > form > .row .price-note {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        align-self: start;
    }
    #product-list.layout-list .productbox-buybox > form > .row > .productbox-variations {
        grid-column: 2;
        grid-row: 1;
        /* zentriert in der Kaufzonen-Spalte (Ansage Yunus: "genug Platz links") */
        justify-self: center;
        width: auto;
        max-width: none;
    }
    #product-list.layout-list .productbox-buybox > form > .row .fs-staffeln {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        margin-top: 0;
    }
    #product-list.layout-list .productbox-buybox > form > .row .fs-spare-row {
        grid-column: 1;
        grid-row: 3;
    }
    /* Status auf Desktop fest im UNTEREN BILDBEREICH verankern: bei hohen
       Variantenzeilen (237px) liegt die Kartenunterkante unterm 169-176px-Bild,
       eine weisse Pille auf weissem Grund war dort unsichtbar (Fund Yunus).
       Bildhoehe auf >=992px: clamp gibt 168-176px -> top 136 liegt immer im Foto. */
    #product-list.layout-list .productbox .delivery-status {
        top: 136px;
        bottom: auto;
    }
    /* Kaufzeile: Spalte 2, Zeile automatisch — bei Zeilen ohne Dropdown und
       Staffeln landet sie damit OBEN rechts neben dem Preis, sonst darunter.
       Intern bleibt sie flex (Menge neben Knopf) — custom.css: block !important. */
    #product-list.layout-list .productbox .item-list-basket-details {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-end;
        grid-column: 2;
        justify-self: end;
        margin: 0;
    }
    /* Grundpreis einheitlich links unterm Preis — rechtsbuendig ueber die volle
       Kaufbox klebte er an der Kartenkante (und stand je nach Staffel-Zweig
       mal links, mal rechts). */
    #product-list.layout-list .productbox .price_wrapper .price-note {
        text-align: left;
        margin-top: 2px;
    }
}
/* Der Akzentbalken folgt der Bildbreite, nicht der Kartenbreite. */
#product-list.layout-list .productbox-accent { width: 100%; }

/* Der Inhalt darf die Breite nutzen: Preis und Kaufzeile nebeneinander. */
#product-list.layout-list .productbox .product-box {
    padding: .6rem .9rem .7rem;
}
#product-list.layout-list .productbox .item-list-basket-details {
    max-width: 320px;
}
#product-list.layout-list .productbox .fs-staffeln { max-width: 420px; }
#product-list.layout-list .productbox .fs-chips { margin-bottom: .5rem; }
/* In der Liste ist Platz — der Titel braucht keine reservierte zweite Zeile. */
#product-list.layout-list .productbox .productbox-title { min-height: 0; }

@media (max-width: 575.98px) {
    /* Auf sehr schmalen Schirmen wieder untereinander, sonst bleibt vom Text nichts. */
    #product-list.layout-list .productbox-inner > .row { flex-wrap: wrap; }
    #product-list.layout-list .productbox-inner > .row > .col:first-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- Staffelboxen immer gleich breit (Anweisung Yunus 21.08.) ---
   Vorher: grid-auto-columns 1fr — eine einzelne Stufe zog sich damit ueber die
   ganze Zeile, zwei Stufen ueber je die Haelfte. Die Boxen sahen dadurch auf
   jeder Karte anders aus. Jetzt drei feste Spalten wie in der Vorlage; bleiben
   weniger Stufen uebrig, bleibt rechts Platz frei, aber die Box behaelt ihr Mass. */
.productbox .fs-staffeln-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
}

/* --- Listenansicht: Typografie und Chips wie in der Kachel --- */
#product-list.layout-list .productbox .productbox-title a {
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: 1.06rem;
    line-height: 1.18;
    letter-spacing: .012em;
    text-transform: uppercase;
    color: #111114;
}
#product-list.layout-list .productbox .manufacturer,
#product-list.layout-list .productbox .manufacturer a {
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #111114;
}
#product-list.layout-list .productbox .price.productbox-price {
    font-family: "FS Display", "FS Text", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.62rem !important;
    color: #830779 !important;
    line-height: 1.05 !important;
}
#product-list.layout-list .productbox .basket-details-add-to-cart {
    border-radius: 0 !important;
    font-weight: 400 !important;
    min-height: 44px;
}
#product-list.layout-list .productbox .basket-details-add-to-cart .fs-cart-text {
    display: inline;
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: .82rem;
    letter-spacing: .045em;
    text-transform: uppercase;
}

/* --- Feste Boxhoehe fuer die Statuszeile (Anweisung Yunus) ---
   Sie ist die letzte Zeile der Karte und mal ein-, mal zweizeilig ("Sofort
   verfuegbar" mit oder ohne Lieferzeit). Dadurch sass der Kaufbutton bei
   Nachbarkarten derselben Zeile 14px versetzt. Feste Hoehe statt Umbruch-
   Zufall — auf allen Breiten, nicht nur mobil. */
#product-list .productbox .fs-statusrow,
.carousel .productbox .fs-statusrow {
    min-height: 2.6em;
    align-content: flex-start;
}

/* Nachtrag: Die auto-Regeln oben blieben wirkungslos (gemessen margin-top 0px),
   weil spaetere Regeln derselben Spezifitaet in dieser Datei und im Theme
   dazwischenfunken. Hier stehen sie am Dateiende und mit !important, damit die
   Verankerung der Kaufzeile eindeutig ist. */
#product-list .productbox.productbox-column .product-box > .productbox-variations {
    margin-top: auto !important;
}
/* ersetzt — s. praezisierte Regel am Dateiende */
#product-list .productbox.productbox-column .product-box > .productbox-variations ~ .form-row.item-list-basket-details:not(:has(*)) {
    display: none !important;
}
/* Ohne :not(:has(...)) — das greift im Projekt nicht (nachgemessen). Beide
   moeglichen Traeger bekommen auto; es wirkt immer genau bei einem, weil der
   jeweils andere auf display:none steht:
     Variantenkarte -> .productbox-variations sichtbar, Label ausgeblendet
     einfache Karte -> Label sichtbar, Variantenzone leer/ausgeblendet */
#product-list .productbox.productbox-column .product-box > .fs-mengenlabel,
.carousel .productbox.productbox-column .product-box > .fs-mengenlabel {
    margin-top: auto !important;
}
/* Ausverkaufte Artikel haben weder Auswahl noch Mengenlabel — dort traegt die
   Schaltflaechenzeile selbst den Ausgleich. */
#product-list .productbox.productbox-column .product-box > .form-row.item-list-basket-details:has(.fs-ausverkauft-btn),
#product-list .productbox.productbox-column .product-box > .form-row.item-list-basket-details:has(.btn-outline-primary),
.carousel .productbox.productbox-column .product-box > .form-row.item-list-basket-details:has(.fs-ausverkauft-btn),
.carousel .productbox.productbox-column .product-box > .form-row.item-list-basket-details:has(.btn-outline-primary) {
    margin-top: auto !important;
}

/* --- AUSWAEHLEN behaelt seinen Text ---
   Die Regel weiter oben blendet .fs-cart-text aus, weil der Kaufbutton nur das
   Icon traegt (Zielbild). Beim AUSWAEHLEN-Knopf gibt es aber KEIN Icon — der
   Text ist dort die einzige Information. Ohne diese Ausnahme stand auf jeder
   Variantenkarte ein leerer magentafarbener Knopf.
   Ausserdem: Kontur statt Flaeche, damit der volle Markenknopf dem echten Kauf
   vorbehalten bleibt. Das Plugin knm_custom_code setzt die Flaeche mit
   !important, deshalb hier ebenfalls. */
#product-list .productbox .basket-details-add-to-cart.fs-select-cta .fs-cart-text,
.carousel .productbox .basket-details-add-to-cart.fs-select-cta .fs-cart-text,
#product-list.layout-list .productbox .basket-details-add-to-cart.fs-select-cta .fs-cart-text {
    display: inline !important;
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: .82rem;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.productbox .basket-details-add-to-cart.fs-select-cta,
.productbox.productbox-column .item-list-basket-details .basket-details-add-to-cart.fs-select-cta {
    background-color: #fff !important;
    border-color: #111114 !important;
    color: #111114 !important;
}
.productbox .basket-details-add-to-cart.fs-select-cta:hover,
.productbox .basket-details-add-to-cart.fs-select-cta:focus,
.productbox.productbox-column .item-list-basket-details .basket-details-add-to-cart.fs-select-cta:hover,
.productbox.productbox-column .item-list-basket-details .basket-details-add-to-cart.fs-select-cta:focus {
    background-color: #111114 !important;
    border-color: #111114 !important;
    color: #fff !important;
    transform: none !important;
}

/* Eine andere Sitzung setzt die Kaufbutton-Farbe ueber
   "html body #content .productbox .basket-details-add-to-cart.btn.btn-primary"
   mit !important — Spezifitaet [1,5,2]. Der AUSWAEHLEN-Knopf ist aber KEINE
   Kaufaktion und darf nicht wie der Kauf aussehen. Deshalb hier derselbe
   Selektor plus .fs-select-cta. Die Kauf-Buttons behalten ihr #c90f88; nur
   dieser eine Zustand wird zur Kontur. */
html body #content .productbox .basket-details-add-to-cart.fs-select-cta.btn.btn-primary {
    background-color: #fff !important;
    border-color: #111114 !important;
    color: #111114 !important;
}
html body #content .productbox .basket-details-add-to-cart.fs-select-cta.btn.btn-primary:hover,
html body #content .productbox .basket-details-add-to-cart.fs-select-cta.btn.btn-primary:focus {
    background-color: #111114 !important;
    border-color: #111114 !important;
    color: #fff !important;
    transform: none !important;
}

/* ============================================================================
   9. Fester Raster (Anweisung Yunus 21.08.)
   ----------------------------------------------------------------------------
   Alle Karten einer Zeile sollen dieselben Linien haben. Gemessen ueber drei
   Kategorien (liquids, Mehrweg-Vapes, Big-Puffs) sind die Hoechstwerte je Zone:
       Chips 42px (zwei Zeilen) · Preisblock 170px (mit Staffeln) ·
       Variantenauswahl 116px (ohne die darin enthaltene Kaufzeile) ·
       Mengenlabel 12px · Kaufzeile 44px · Statuszeile 37px
   Diese Werte werden reserviert. Der Preis dafuer ist Leerraum bei Artikeln,
   denen eine Zone fehlt — das ist die bewusste Entscheidung fuer ein ruhiges
   Raster.

   Die teuerste Reserve ist die Variantenauswahl mit 116px. Sie wird deshalb NUR
   auf Seiten reserviert, auf denen ueberhaupt Variantenkarten stehen
   (:has am Listencontainer). Auf reinen Nicht-Varianten-Kategorien wie
   /Elfbar-800 bleibt die Karte dadurch so kompakt wie bisher.
   ============================================================================ */

/* Chips: EINE Zeile, auch wenn ein Artikel keinen Chip hat.
   2026-08-23: von 42px (zwei Zeilen) auf 21px gesenkt. Moeglich geworden, weil
   das Snippet seit heute hoechstens zwei Chips ausgibt — und zwei passen in eine
   Zeile. Vorher standen einzeilige neben zweizeiligen Karten. */
#product-list .productbox .fs-chips,
.carousel .productbox .fs-chips { min-height: 21px; align-content: flex-start; }
#product-list .productbox .product-box > [itemprop="offers"]:first-of-type::before,
.carousel .productbox .product-box > [itemprop="offers"]:first-of-type::before { content: none; }

/* Preisblock inklusive Staffelleiste und Grundpreis.
   2026-08-23: von 170px auf 140px gesenkt (Anweisung Yunus "bring es auf 617px").
   Die 170 waren am 21.08. richtig gemessen — der volle Block brauchte damals
   171px: Streichpreis 18 + Preiszeile 36 + leere Preisnotiz 15 + Staffelleiste 84
   plus Abstaende. Zwei dieser Posten fallen mit den Aenderungen von heute weg:
   der Streichpreis rueckt neben den Preis (-18) und die LEERE Preisnotiz wird
   ausgeblendet (-15). Damit braucht der vollste Block noch 138px.
   Nachgemessen auf /Mehrweg-Vapes: Karten MIT Staffel nutzten 171 von 170px aus,
   Karten OHNE Staffel nur 74 — dort standen 96px leer. */
#product-list .productbox.productbox-column .product-box > [itemprop="offers"],
.carousel .productbox.productbox-column .product-box > [itemprop="offers"] {
    min-height: 140px;
}

/* Ausgleich fuer die fehlende Variantenauswahl — nur auf gemischten Seiten.
   Er sitzt als Innenabstand am Mengenlabel, weil ein Pseudoelement sich nicht
   zwischen zwei Flex-Kinder setzen laesst. */
/* Die Auswahlzone ist bei JEDER Karte im Markup vorhanden — bei Artikeln ohne
   Variationen nur leer (gemessen: Container da, Hoehe 0). Deshalb bekommt sie
   die Reserve direkt, statt sie ueber Nachbarselektoren am Mengenlabel
   nachzubilden. Nur auf Seiten, auf denen ueberhaupt eine Auswahl vorkommt. */
/* Die Variantenreserve ist ERSETZT (s. Abschnitt 10). Eine Mindesthoehe half
   nur, solange die Zone sichtbar war — bei ausverkauften Artikeln steht sie auf
   display:none und nimmt dann gar keinen Platz mehr ein. */

/* Der Titel ist die letzte variable Zone: kurze Namen brauchen eine Zeile,
   lange zwei (gemessen 44 gegen 53px). Zwei Zeilen sind gesetzt, der Rest wird
   sichtbar geklemmt — der vollstaendige Name bleibt serverseitig im DOM. */
#product-list .productbox .productbox-title,
.carousel .productbox .productbox-title {
    height: 2.42em;
    min-height: 2.42em;
    overflow: hidden;
}
#product-list .productbox .productbox-title a,
.carousel .productbox .productbox-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kaufzeile und Statuszeile schliessen die Karte ab und wachsen nicht mehr. */
#product-list .productbox .item-list-basket-details,
.carousel .productbox .item-list-basket-details { min-height: 44px; }

/* ============================================================================
   10. Kaufblock am Kartenboden verankert
   ----------------------------------------------------------------------------
   Der letzte Rest Versatz kam von ausverkauften Artikeln: deren Variantenzone
   steht auf display:none, und ein ausgeblendetes Element nimmt keine
   Mindesthoehe an — die reservierten 116px fielen dort ersatzlos weg.

   Statt jede Zone einzeln zu reservieren, wird jetzt die Statuszeile fest an
   den unteren Kartenrand gesetzt. Der Kaufblock darueber behaelt sein
   margin-top:auto und schiebt sich damit bis an die Statuszeile heran. Das
   wirkt unabhaengig davon, WAS der Block enthaelt:
       Variantenkarte  -> Auswahl + Label + Kaufzeile
       einfache Karte  -> Label + Kaufzeile
       ausverkauft     -> Ausverkauft-Schaltflaeche
   In allen drei Faellen ist die Kaufzeile das letzte Element und endet an
   derselben Linie. Das ist robuster als feste Hoehen und macht die Karten
   wieder kompakter, weil keine leere Auswahlzone mehr mitgeschleppt wird.
   ============================================================================ */
/* 2026-08-23: Bodenabstand von 3.1rem auf 2.15rem. Er haelt den Platz fuer die
   absolut gesetzte Statuszeile frei. Gemessen braucht die 23px plus die 0.6rem
   Abstand nach unten = rund 33px; 3.1rem (49,6px) waren 16px zu viel. */
#product-list .productbox.productbox-column .product-box,
.carousel .productbox.productbox-column .product-box {
    position: relative;
    padding-bottom: 2.15rem;
}
#product-list .productbox.productbox-column .product-box > .fs-statusrow,
.carousel .productbox.productbox-column .product-box > .fs-statusrow {
    position: absolute;
    bottom: .6rem;
    left: .7rem;
    right: .7rem;
    margin-top: 0;
    min-height: 0;
}
/* Der Block direkt darueber darf bis an die Statuszeile heranruecken. */
#product-list .productbox.productbox-column .product-box > .form-row.item-list-basket-details,
#product-list .productbox.productbox-column .product-box > .productbox-variations,
.carousel .productbox.productbox-column .product-box > .form-row.item-list-basket-details,
.carousel .productbox.productbox-column .product-box > .productbox-variations {
    margin-bottom: 0;
}

/* --- Wer traegt die Verankerung? ---
   Der Container .productbox-variations steht bei JEDER Karte im Markup, auch
   ohne Auswahl — dann auf display:none. Meine erste Fassung blendete das
   Mengenlabel aus, sobald dieser Container existierte. Ergebnis: Auf Karten
   ohne Auswahl waren beide moeglichen Traeger unsichtbar, margin-top:auto lief
   ins Leere und die Kaufzeile sass 62px zu hoch (gemessen an einem Pod ohne
   Variationen zwischen Variantenkarten).
   Jetzt entscheidet der INHALT: nur wenn wirklich ein Auswahlfeld drin steckt,
   uebernimmt die Auswahlzone — sonst bleibt das Label sichtbar und traegt. */
#product-list .productbox .product-box > .productbox-variations:has(select) ~ .fs-mengenlabel,
.carousel .productbox .product-box > .productbox-variations:has(select) ~ .fs-mengenlabel {
    display: none !important;
}

/* --- Chip-Zone hart auf EINE Zeile ---
   min-height allein reicht nicht, deshalb hier eine feste Hoehe.

   2026-08-23: von zwei Zeilen (42px) auf eine (21px). Die alte Begruendung
   ("auf schmalen Karten brauchen VIER Chips drei Zeilen") ist entfallen, weil
   fs_card_chips.tpl seit heute hoechstens ZWEI Chips ausgibt. Zwei passen auf
   allen gemessenen Breiten in eine Zeile; laengere Paare werden beschnitten,
   was den ersten Chip — die Kompatibilitaet — immer vollstaendig laesst. */
#product-list .productbox .fs-chips,
.carousel .productbox .fs-chips {
    height: 21px;
    max-height: 21px;
    overflow: hidden;
}

/* --- Touch-Ziele der Staffelzellen ---
   Die Zellen sind echte Schaltflaechen: ein Tipp setzt die Menge in den
   Mengenwaehler. Gemessen auf 390px waren sie 40x33px — unter dem, was sich
   sicher treffen laesst. Auf Touch-Geraeten daher mindestens 44px hoch.
   Auf Zeigegeraeten bleiben sie kompakt, dort ist Treffgenauigkeit kein Thema. */
@media (hover: none) {
    #product-list .productbox .fs-staffel-zelle,
    .carousel .productbox .fs-staffel-zelle {
        min-height: 44px;
        justify-content: center;
    }
    #product-list .productbox .fs-staffel-zelle.fs-staffel-beste,
    .carousel .productbox .fs-staffel-zelle.fs-staffel-beste {
        min-height: 52px;
    }
    /* Die Chip-Zone waechst dadurch nicht — die Staffelleiste sitzt im
       Preisblock, dessen Mindesthoehe die Zeile bereits traegt. */
}

/* --- Kontrast: Grundpreis und Prozentwerte ---
   Gemessen gegen Weiss: beide standen auf #8a8292 und kamen auf 3,69:1 — WCAG AA
   verlangt 4,5:1 fuer Text unter 18,66px. Beim Grundpreis ist das nicht nur eine
   Stilfrage: er ist eine gesetzlich vorgeschriebene Pflichtangabe und muss
   lesbar sein. #6b6b75 liegt bei 5,3:1 und ist der im Projekt bereits benutzte
   dunklere Grauton. Die Schriftgroesse des Prozentwerts geht von 9 auf 10px. */
#product-list .productbox .base_price,
#product-list .productbox .base_price .value,
#product-list .productbox .price-note,
.carousel .productbox .base_price,
.carousel .productbox .base_price .value,
.carousel .productbox .price-note,
#product-list.layout-list .productbox .base_price .value {
    color: #6b6b75;
}
.productbox .fs-staffel-proz {
    color: #6b6b75;
    font-size: .63rem;
}
.productbox .fs-staffel-menge { color: #55555b; }

/* Zusaetzlich breitenbasiert: (hover: none) greift nur auf echten Touchgeraeten
   und ist damit weder im Testbrowser noch auf Touch-Notebooks verlaesslich.
   Bis 767px steht das Zwei-/Dreispaltenraster — dort wird getippt. */
@media (max-width: 767.98px) {
    #product-list .productbox .fs-staffel-zelle,
    .carousel .productbox .fs-staffel-zelle {
        min-height: 44px;
        justify-content: center;
    }
    #product-list .productbox .fs-staffel-zelle.fs-staffel-beste,
    .carousel .productbox .fs-staffel-zelle.fs-staffel-beste {
        min-height: 52px;
    }
}

/* ======================================================================
   VARIANTENAUSWAHL AUF SLIDERFLAECHEN     (21.08.2026, Sitzung PRODUKTKARTE)
   ======================================================================

   Markup: productlist/item_box.tpl · Verhalten: fs-produktkarte.js
   Betrifft nur Slider und Empfehlungen; im Kategorielisting rendert JTL seine
   eigene Auswahl (.productbox-variations), die hier unberuehrt bleibt.

   EINE ZEILE, NICHT ZWEI: Beschriftung und Feld stehen nebeneinander. Ein
   Label ueber dem Feld haette die Karte um eine volle Zeile wachsen lassen —
   bei festem Raster zahlen das alle Karten, auch die ohne Varianten. */
.fs-varianten {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 8px;
    min-width: 0;
}

.fs-varianten__label {
    flex: 0 0 auto;
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* Gleicher Ton wie Grundpreis und Prozentwerte: 5,3:1 gegen Weiss.
       Der vorherige Grauton lag bei 3,69:1 und fiel durch WCAG AA. */
    color: #6b6b75;
    white-space: nowrap;
}

.fs-varianten__select {
    flex: 1 1 auto;
    /* Ohne min-width:0 sprengt ein langer Variantenname ("Kiwi Passion Fruit
       Guava") die Flexzelle statt zu kuerzen — die Karte wird dann breiter als
       ihre Nachbarn und der feste Raster kippt. */
    min-width: 0;
    height: 34px;
    padding: 0 26px 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fs-ink, #1a1a1f);
    background-color: var(--fs-surface, #fff);
    border: 1px solid var(--fs-line, #e3e3e8);
    border-radius: 0;
    cursor: pointer;
    /* Eigener Pfeil: das native Select-Dreieck folgt der Systemfarbe und
       sprang zwischen den Browsern sichtbar auseinander. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236b6b70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 12px 12px;
    text-overflow: ellipsis;
}

.fs-varianten__select:hover {
    border-color: var(--fs-ink-2, #6b6b75);
}

.fs-varianten__select:focus-visible {
    outline: 2px solid var(--fs-primary, #e6007e);
    outline-offset: 1px;
    border-color: var(--fs-primary, #e6007e);
}

/* Ausverkaufte Werte bleiben SICHTBAR, nur nicht waehlbar: 158 Vaeter haben
   solche Faelle, und wer die Farbe sucht, soll sehen, dass es sie gibt. */
.fs-varianten__select option:disabled {
    color: #9a9aa2;
}

/* Die Auswahl gehoert optisch zur Kaufzeile, nicht zum Preisblock darueber. */
.fs-varianten-col {
    padding-bottom: 0;
}

/* Touch: 34px reichen fuer die Maus, nicht fuer den Daumen.
   Gleiche Schwelle wie bei den Staffelzellen weiter oben. */
@media (max-width: 767px), (hover: none) {
    .fs-varianten__select {
        height: 44px;
        font-size: 14px;
    }
}

/* ======================================================================
   NACHZUG 21.08.2026 — vier Befunde von Yunus an der mobilen Kartenansicht
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) TITEL AUF GLEICHER HOEHE
   ----------------------------------------------------------------------
   Befund: Bei zwei Karten nebeneinander stand der Titel der einen 72px
   tiefer als der der anderen (Marke bei 173px gegen 245px).

   Ursache: Die Kartenzeile ist ein Flexcontainer mit flex-wrap:wrap. Bild
   und Inhalt liegen darin als zwei Zeilen zu je 100% Breite. Weil alle
   Karten auf gleicher Hoehe stehen (fester Raster), bleibt bei der Karte
   mit weniger Inhalt Platz uebrig — und align-content:stretch, der
   Vorgabewert, verteilt diesen Platz GLEICHMAESSIG auf beide Zeilen.
   Die Bildzeile wuchs so von 163px auf 235px und schob den Titel nach unten.

   Loesung: eine echte Spalte statt umbrechender Zeilen. Dann traegt die
   Bildzone ihre natuerliche Hoehe (flex:0 0 auto) und der Ueberschuss geht
   vollstaendig an die Inhaltszone (flex:1 1 auto) — dort, wo ihn das
   margin-top:auto der Kaufzeile ohnehin nach unten schiebt.
   Damit stehen Titel OBEN und Kaufzeile UNTEN bei allen Karten bündig.
   Gemessen: Marke 173, Titel 189, Kaufzeile 600, Statuszeile 658 — gleich
   auf beiden Karten, vorher 173/245.

   !important, weil die Bootstrap-Rasterklassen dieselbe Spezifitaet haben. */
/* NUR die Kachel. Die Listenansicht (.productbox-row) stellt Bild und Inhalt
   bewusst NEBENeinander — dort wuerde flex-direction:column beides
   untereinander werfen und das Bild auf volle Spaltenbreite aufblasen
   (gemessen 1044x1047px, Karte 1497px hoch). Genau dieser Fehler ist am
   20.08. schon einmal aufgetreten und wurde per CSS geradegezogen; ohne
   diese Ausnahme haette der Nachzug ihn zurueckgeholt. */
.productbox:not(.productbox-row) .productbox-inner > .row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

.productbox:not(.productbox-row) .productbox-inner > .row > .col:first-child {
    flex: 0 0 auto !important;
    max-width: 100% !important;
}

.productbox:not(.productbox-row) .productbox-inner > .row > .col:last-child {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ----------------------------------------------------------------------
   2) VARIANTENAUSWAHL IM KATEGORIELISTING
   ----------------------------------------------------------------------
   Im Listing rendert JTL seine eigene Auswahl (productdetails/variation.tpl)
   und ersetzt das <select> durch einen Bootstrap-Selectpicker. Der kam
   ungestaltet daher: Radius 3,5px, fremde Randfarbe, Beschriftung "Farbe:"
   in Fliesstext. Daneben steht auf Sliderflaechen die neue .fs-varianten —
   zwei Auswahlfelder in zwei Handschriften auf derselben Kartensorte.
   Hier bekommt der Selectpicker dieselben Werte wie .fs-varianten__select
   (Radius 8px, --fs-line, 34px bzw. 44px auf Touch). */
.productbox-variations .js-btn-slider-wrapper {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b6b75;
    line-height: 1.2;
    margin-bottom: 4px;
}

.productbox-variations .bootstrap-select > .btn.dropdown-toggle {
    height: 34px;
    padding: 0 26px 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fs-ink, #1a1a1f);
    background-color: var(--fs-surface, #fff) !important;
    border: 1px solid var(--fs-line, #e3e3e8) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
}

.productbox-variations .bootstrap-select > .btn.dropdown-toggle:hover,
.productbox-variations .bootstrap-select.show > .btn.dropdown-toggle {
    border-color: var(--fs-ink-2, #6b6b75) !important;
}

.productbox-variations .bootstrap-select > .btn.dropdown-toggle:focus-visible {
    outline: 2px solid var(--fs-primary, #e6007e) !important;
    outline-offset: 1px;
}

/* Der Selectpicker legt sein Menue an das Kartenende; ohne eigenen Radius
   steht ein eckiges Menue unter einem runden Feld. */
.productbox-variations .bootstrap-select .dropdown-menu {
    border-radius: 0;
    border: 1px solid var(--fs-line, #e3e3e8);
    font-size: 13px;
}

/* ----------------------------------------------------------------------
   3) KNOPF "AUSVERKAUFT"
   ----------------------------------------------------------------------
   Befund Yunus: "nicht unser Stil". Gemessen stand er auf Radius 6px, waehrend
   jeder andere Knopf der Karte 0px traegt, und trug als einziges Element der
   Karte einen roten Eigenton (#c0392b auf #fdf7f7) — eine Farbe, die im
   Farbsystem nicht vorkommt.

   Neu: dieselbe Form wie der Kaufknopf, aber sichtbar stillgelegt — grauer
   Grund, gedeckte Schrift, kein Zeigerwechsel. Die Aussage traegt der Text,
   nicht die Farbe. Rot bliebe eine Warnung; ausverkauft ist keine Warnung,
   sondern ein Zustand. */
.productbox .fs-ausverkauft-btn,
.productbox a.fs-ausverkauft-btn {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* 4,6:1 gegen #f2f2f4 — ueber der AA-Schwelle, aber klar zurueckgenommen. */
    color: #6b6b75 !important;
    background-color: #f2f2f4 !important;
    border: 1px solid var(--fs-line, #e3e3e8) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.productbox .fs-ausverkauft-btn:hover {
    background-color: #e9e9ed !important;
    color: var(--fs-ink, #1a1a1f) !important;
}

/* ----------------------------------------------------------------------
   4) KNOPF "AUSWAEHLEN" — Text lief ueber den Rand
   ----------------------------------------------------------------------
   Befund Yunus: "Text im Button zu groß, was am äußeren Rand".
   Gemessen auf 390px: Knopf 40x44px, Textspanne darin 57x18px — der Text war
   17px BREITER als sein Knopf und stand deshalb ueber beide Kanten hinaus.

   Ursache ist nicht die Schriftgroesse, sondern die Aufteilung: Die Kaufzeile
   teilt sich in Mengenwaehler (col-4) und Knopf (col-8). Bei 162px Kartenbreite
   bleiben dem Knopf 40px. Auf Variantenkarten ist der Mengenwaehler an dieser
   Stelle ohnehin gegenstandslos — es ist noch nichts gewaehlt, wovon man eine
   Menge nehmen koennte; er steht bereits als .fs-counter-gesperrt da.
   Deshalb: Mengenwaehler weg, Knopf ueber die volle Breite. Die Menge waehlt
   man nach der Auswahl, auf der Produktseite. */
.productbox .item-list-basket-details:has(.fs-select-cta) .form-counter,
.productbox .item-list-basket-details:has(.fs-select-cta) .fs-counter-gesperrt {
    display: none !important;
}

.productbox .item-list-basket-details:has(.fs-select-cta) > .col:has(.fs-select-cta) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Auch ohne :has() (aeltere Browser) darf der Text nicht ueberstehen. */
.productbox .fs-select-cta {
    padding-left: 6px !important;
    padding-right: 6px !important;
    overflow: hidden;
}

.productbox .fs-select-cta .fs-cart-text {
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Auf Variantenkarten steht ueber der Kaufzeile "Direkt mehr bestellen" —
   eine Mengenansage ohne Mengenfeld. Sie gehoert dorthin, wo man auch eine
   Menge waehlen kann. */
.productbox .product-box:has(.fs-select-cta) .fs-mengenlabel {
    visibility: hidden;
}

/* ======================================================================
   FOGSMOKE-STIL BIS INS DETAIL          (21.08.2026, Sitzung PRODUKTKARTE)
   ======================================================================

   ANSAGE Yunus: "ich will das alles den FOGSMOKE STIL besitzt bis ins
   letzte Detail."

   Grundlage ist fs-kanon.css (Sitzung GUSS, 21.08.2026). Verbindlich sind
   dort: EIN Radius (0, ausgenommen echte Kreise), EIN CTA-Magenta (#c90f88,
   Hover #830779), EIN gedaempfter Ton (#6b6b75 = 5,28:1), ein neutraler Ton
   (#111114), eine Flaeche (#f6f5f3), EINE Textschrift und Anton ausschliesslich
   im 400er Schnitt.

   Ich habe die Karte Element fuer Element dagegen gemessen. Gefunden wurden
   drei eigene Verstoesse (oben direkt korrigiert: das neue Auswahlfeld stand
   auf Radius 8px, der Selectpicker auf 8px, der gedaempfte Ton auf #6b6b70
   statt #6b6b75) und die folgenden Abweichungen, die schon laenger auf der
   Karte sassen. Sie werden HIER durchgesetzt und nicht in fs-kanon.css:
   die Datei gehoert einer anderen Sitzung, und die Karte ist mein Bereich.

   Jeder Ton unten ist vor dem Setzen gegen seinen Grund gerechnet worden. */

/* ---------- Radius: alles auf 0 ---------------------------------------
   Gemessen auf der Karte: .fs-chip 6px, .bootstrap-select 3,75px,
   dessen Knopf 8px. Vier Radien auf einer Karte sind genau der Eindruck,
   den der Kanon abstellen sollte. Kreise (.btn.badge, 50%) bleiben rund —
   ein Kreis ist eine Form, kein Radiuswert. */
.productbox .fs-chip,
.productbox .bootstrap-select,
.productbox .bootstrap-select > .btn.dropdown-toggle,
.productbox .bootstrap-select .dropdown-menu,
.productbox .fs-varianten__select,
.productbox .form-counter,
.productbox .form-counter .btn,
.productbox .form-counter .quantity {
    border-radius: 0 !important;
}

/* ---------- Anton nur im 400er Schnitt --------------------------------
   Der Kanon nennt in Abschnitt 6c die Herstellerzeilen ausdruecklich als
   Stelle, die sich gewehrt hat. Gemessen stand dort weiterhin Gewicht 700,
   dazu .fs-bundle-ab auf 800 und .fs-bundle-menge auf 600. Anton hat nur
   einen Schnitt; jedes andere Gewicht laesst der Browser kuenstlich fetten,
   und genau das ist die Unschaerfe, die Yunus schon einmal bemaengelt hat.
   Text wird dadurch schmaler, nie breiter — kein Ueberlaufrisiko.
   html body: dieselbe Spezifitaetsstufe, die der Kanon fuer den
   Auswahlknopf bereits brauchte. */
html body .productbox .manufacturer,
html body .productbox .manufacturer *,
html body .productbox .fs-bundle-ab,
html body .productbox .fs-bundle-menge,
html body .productbox .productbox-title .text-clamp-2 {
    font-weight: 400 !important;
}

/* ---------- Toene auf die Palette ------------------------------------
   Gemessen wurden fuenf Toene, die im Farbsystem nicht vorkommen:
     Titel            #232323  -> #111114  (18,85:1, der neutrale Ton)
     Chip-Schrift     #5c5c63  -> #6b6b75  (Kanonton fuer Gedaempftes)
     Chip-Flaeche     #fafafa  -> #f6f5f3  (der eine Flaechenton)
     Streichpreis     #707070  -> #6b6b75
     Preis-Label      #8a8292  -> #6b6b75  (der alte Ton lag bei 3,69:1
                                            und fiel durch WCAG AA)
   #6b6b75 auf #f6f5f3 ergibt 4,94:1 und bleibt damit ueber der Schwelle. */
html body .productbox .productbox-title,
html body .productbox .productbox-title .text-clamp-2,
html body .productbox .productbox-title a {
    color: #111114 !important;
}

html body .productbox .fs-chip {
    color: #6b6b75 !important;
    background-color: #f6f5f3 !important;
    border-color: #e8e6e2 !important;
}

html body .productbox .price_wrapper .value,
html body .productbox .price_wrapper .old-price,
html body .productbox .price_wrapper .instead-of,
html body .productbox .fs-preis-label,
html body .productbox .fs-mengenlabel,
html body .productbox .fs-varianten__label,
html body .productbox .productbox-variations .js-btn-slider-wrapper {
    color: #6b6b75 !important;
}

/* Die Auswahl traegt Text wie ein Eingabefeld, nicht wie ein Etikett. */
html body .productbox .bootstrap-select .filter-option-inner-inner,
html body .productbox .fs-varianten__select {
    color: #111114 !important;
}

/* ---------- Kanten der Auswahl ---------------------------------------
   Der Selectpicker zog seine Randfarbe aus dem Bootstrap-Grundgeruest
   (#202020) — ein sechster Grauton auf derselben Karte. Er nimmt jetzt
   dieselbe Linie wie alle anderen Felder. */
html body .productbox .bootstrap-select > .btn.dropdown-toggle {
    border-color: var(--fs-line, #e3e3e8) !important;
}

html body .productbox .bootstrap-select > .btn.dropdown-toggle:hover,
html body .productbox .bootstrap-select.show > .btn.dropdown-toggle {
    border-color: #6b6b75 !important;
}

/* ---------- Ausverkauft: Kanonton statt Eigenton ---------------------- */
html body .productbox .fs-ausverkauft-btn {
    color: #6b6b75 !important;
    background-color: #f6f5f3 !important;
    border-color: #e8e6e2 !important;
}

html body .productbox .fs-ausverkauft-btn:hover {
    background-color: #ecebe7 !important;
    color: #111114 !important;
}

/* ---------- Letzter Durchgang: die Reste ------------------------------
   Nach dem Angleich blieben ueber acht Flaechen und zwei Breiten noch fuenf
   Stellen stehen. Alle gemessen, keine geraten:

     .fs-staffel-menge  #55555b   ein sechster Grauton, nur hier im Einsatz.
                                  Der Kanon fuehrt die Staffelzelle bereits
                                  auf #6b6b75 (Abschnitt 5) — die Mengenzeile
                                  in derselben Zelle stand daneben.
     .sku-wrapper       #707070   Artikelnummer der Listenansicht.
     Titel/Sonstige     #111111   drei Punkte neben dem neutralen #111114.
                                  Unsichtbar, aber es ist ein zweiter Ton im
                                  System, und der Kanon kennt genau einen.
     .alert             3,5-3,75px  Hinweiskasten der Listenansicht.
     .btn               3,75px      Restknopf aus dem Bootstrap-Geruest.

   Radius 0 gilt laut Kanon fuer alle Kanten ausser echten Kreisen. */
html body .productbox .fs-staffel-menge,
html body .productbox .sku-wrapper,
html body .productbox .sku,
html body .productbox .productbox-sku {
    color: #6b6b75 !important;
}

html body .productbox .alert,
html body .productbox .btn:not(.badge),
html body .productbox .badge:not(.badge-circle-1):not(.circle-small) {
    border-radius: 0 !important;
}

/* #111111 -> #111114: derselbe Ton, aber der aus dem System. */
html body .productbox .productbox-title,
html body .productbox .productbox-title *,
html body .productbox .price.productbox-price,
html body .productbox .fs-preis-zahl {
    color: #111114 !important;
}

/* Der Preis bleibt der Preis: die Magenta-Auszeichnung des Aktionspreises
   ist eine Rolle aus dem Farbsystem und wird hier NICHT ueberschrieben. */
html body .productbox .price.productbox-price.fs-preis-aktion,
html body .productbox .fs-preis-zahl.fs-preis-aktion {
    color: #c90f88 !important;
}

/* ---------- Abschluss: die letzten drei ------------------------------
     dd / li  #111111 statt #111114 — Merkmalslisten und EAN. Drei Blaustufen
              Unterschied, mit blossem Auge nicht zu sehen. Es bleibt trotzdem
              ein zweiter neutraler Ton, und der Kanon kennt genau einen.
     .btn-primary "Zum Artikel"  Schrift #f2f2f2 statt #fff. Auf der
              Magentaflaeche faellt der Kontrast damit von 5,34:1 auf 5,03:1 —
              noch ueber der Schwelle, aber ohne Grund darunter.

   Bewusst NICHT angefasst: die gruene Statusampel (.fs-dot, #1d9e50) und ihr
   rotes Gegenstueck. Das sind funktionale Signalfarben fuer "sofort verfuegbar"
   bzw. "nicht verfuegbar" — sie tragen eine Aussage, keine Formensprache, und
   waeren im Kanonton nicht mehr unterscheidbar. */
html body .productbox dd,
html body .productbox dt,
html body .productbox li,
html body .productbox .productbox-title,
html body .productbox .productbox-title * {
    color: #111114 !important;
}

html body .productbox .btn-primary,
html body .productbox a.btn-primary {
    color: #fff !important;
}

/* ======================================================================
   EINE HOEHE, DREI STUFEN            (21.08.2026, Sitzung PRODUKTKARTE)
   ======================================================================

   Anlass fuer fs-kanon.css war "7 Hoehen bei 23 Knoepfen". Auf der Karte
   waren nach dem Farbangleich immer noch drei im Umlauf:

     Auswahlfeld (.bootstrap-select)   34px
     "Zum Artikel" (.btn-primary)      37px, Flaeche #111111 gefuellt
     Kaufen / Auswaehlen               44px

   Und "Zum Artikel" fuhr als einziges Element eine vierte Knopfmachart:
   schwarz gefuellt. Der Kanon kennt Magenta als Flaeche eines Primaer-CTA —
   ein zweiter gefuellter Knopf daneben macht beide zum Primaeren, also keinen.

   DREI STUFEN, nach Gewicht der Handlung:
     1  kaufen            Flaeche #c90f88, weisse Schrift   (Kanon Abschnitt 2)
     2  auswaehlen /      weiss, Kontur #111114
        zum Artikel       — fuehrt weiter, kauft aber nicht
     3  ausverkauft       Flaeche #f6f5f3, Schrift #6b6b75  — sichtbar stillgelegt

   EINE HOEHE: 44px, auch am Auswahlfeld. 44px ist die Touch-Schwelle, die
   die Staffelzellen weiter oben bereits einhalten; sie hier zu unterschreiten
   waere auf dem Telefon ein Treffproblem und auf dem Schreibtisch eine
   vierte Hoehe. */
html body .productbox .basket-details-add-to-cart,
html body .productbox .fs-ausverkauft-btn,
html body .productbox .item-list-basket-details .btn-primary,
html body .productbox .item-list-basket-details .btn-outline-primary,
html body .productbox .bootstrap-select > .btn.dropdown-toggle,
html body .productbox .fs-varianten__select {
    height: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
}

/* Das Auswahlfeld ist ein Feld, kein Knopf: Text linksbuendig. */
html body .productbox .bootstrap-select > .btn.dropdown-toggle,
html body .productbox .fs-varianten__select {
    justify-content: flex-start !important;
}

/* Stufe 2 — weiterfuehrend, nicht kaufend. :not(.basket-details-add-to-cart)
   ist Pflicht: ohne sie fing die Regel auch den ECHTEN Kaufknopf der Liste
   (button.basket-details-add-to-cart.btn-primary) — sein weisser Grund verlor
   zwar gegen Kanons #content-Regel, aber die schwarze Schrift ueberlebte:
   Magenta-Knopf mit schwarzem Text (Fund Yunus 28.08.). */
html body .productbox .item-list-basket-details .btn-primary:not(.basket-details-add-to-cart),
html body .productbox .item-list-basket-details a.btn-primary,
html body .productbox .item-list-basket-details .btn-outline-primary:not(.basket-details-add-to-cart) {
    background-color: #fff !important;
    border: 1px solid #111114 !important;
    color: #111114 !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

html body .productbox .item-list-basket-details .btn-primary:not(.basket-details-add-to-cart):hover,
html body .productbox .item-list-basket-details .btn-outline-primary:not(.basket-details-add-to-cart):hover {
    background-color: #111114 !important;
    color: #fff !important;
}

/* Der Kaufknopf bleibt Stufe 1 — hier wird nur die Schrift auf dieselbe
   Machart gezogen wie bei den anderen beiden. Flaeche und Farbe regelt
   fs-kanon.css und werden ausdruecklich NICHT angefasst. */
html body .productbox .basket-details-add-to-cart .fs-cart-text,
html body .productbox .fs-ausverkauft-btn {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Zentriert bleibt zentriert: die Flex-Regel oben darf den Kaufknopf mit
   Icon + Text nicht nach links ziehen. */
html body .productbox .basket-details-add-to-cart,
html body .productbox .fs-ausverkauft-btn {
    justify-content: center !important;
    gap: 6px;
}

/* ---------- Kompaktkarte: die Reste gegen den Kanon -------------------
   .fs-cc__img traegt zusaetzlich Bootstraps .img-fluid, das einen eigenen
   Radius mitbringt (gemessen 3,75px) und die border-radius:0-Regel weiter
   oben ueberholt. Ausserdem standen Streichpreis und Preis-Label auf
   #707070 bzw. #5c5c63 statt auf dem einen gedaempften Ton. */
html body .fs-cc .fs-cc__img,
html body .fs-cc .fs-cc__media img,
html body .fs-cc img.img-fluid {
    border-radius: 0 !important;
}

html body .fs-cc .value,
html body .fs-cc .old-price,
html body .fs-cc .instead-of,
html body .fs-cc .fs-preis-label,
html body .fs-cc .fs-cc__btntext {
    color: inherit;
}

html body .fs-cc .value,
html body .fs-cc .old-price,
html body .fs-cc .instead-of,
html body .fs-cc .fs-preis-label {
    color: #6b6b75 !important;
}

/* Hinweisbox der Karte ("Abnahme in 1 Stk."): das <b> darin stand auf #5c5c63,
   dem alten gedaempften Ton. Letzter Fund des Kanon-Durchgangs. */
html body .productbox .fs-hinweisbox-text,
html body .productbox .fs-hinweisbox-text b,
html body .productbox .fs-hinweisbox-text strong {
    color: #6b6b75 !important;
}

/* ======================================================================
   BILDZONE UEBER DIE VOLLE KARTENBREITE   (23.08.2026, Sitzung PRODUKTKARTE)
   ======================================================================

   ANSAGE Yunus: "das Produktbild sollte ueber die Breite des Containers
   gehen", danach zur Vorlage: "setz es so um! also voll breite quadratisch".

   VORGESCHICHTE: Am 21.08. stand hier eine Begrenzung auf max-width:210px.
   Sie kam aus seiner damaligen Ansage "bild auf 210px so fern es quadratisch
   bleibt" und war der einzige Weg, die Karte von 755 auf 723px zu kuerzen,
   ohne Inhalt zu streichen — geprueft und verworfen waren vorher:
     Innenabstand 46,5 -> 14px   -32px, ABER 4 von 5 Zeilen liefen auseinander
     alle Abstaende straffen     0px, der Gewinn geht sofort an margin-top:auto
     31px Luft in der Auswahlzone 0px, dasselbe
     Chips-Zone halbieren        0px, auf /ELFA-kompatibel brauchen ALLE
                                 20 Karten wirklich zwei Chip-Zeilen
     Titel auf eine Zeile        -22px, aber 17 von 20 Titeln brauchen zwei

   Der Preis der Begrenzung waren sichtbare Raender neben jedem Bild, weil die
   Karte je nach Fenstergroesse breiter ist als 210px:
     390px Fenster  Karte 162  Bild 160   1px  (Begrenzung greift gar nicht)
     560px Fenster  Karte 231  Bild 210  10px
     768px Fenster  Karte 221  Bild 210   6px
     1024px Fenster Karte 167  Bild 165   1px
     1440px Fenster Karte 245  Bild 210  17px
   Genau diese Raender hat Yunus im Screenshot vom 23.08. beanstandet.

   DIE KARTE WAECHST NICHT — nachgemessen am 23.08. bei 1700px Fenster,
   Karte 246px breit, alle 20 Bilder vollstaendig geladen:
                        Bild    Abstand Bild -> Kaufzeile   Karte
     mit 210er Grenze   213px   377px                       735px
     volle Breite       247px   344px                       735px
   Das Bild gewinnt 34px, der Leerraum verliert 33px, die Kaufzeile bleibt
   auf den Pixel genau bei 591px stehen. Der Zuwachs kommt vollstaendig aus
   dem Puffer, den margin-top:auto vor der Kaufzeile haelt.

   Die Erwartung war eine andere: quadratisch heisst Breite = Hoehe, also
   haette die Karte um 34px wachsen muessen. Sie tut es nicht, weil ihre Hoehe
   nicht vom Bild bestimmt wird, sondern von der hoechsten Karte der
   Rasterzeile — und dort sitzt der Puffer. Yunus hatte mit seiner Frage
   "wieso soll die Karte laenger werden? wir muessen doch einfach nur das Feld
   fuer die Anzeige des Produktbildes vergroessern" recht.

   Daraus folgt auch: die 210er Grenze hat ihre urspruengliche Wirkung
   (755 -> 723px am 21.08.) seither verloren. Seit die Karte mehr Inhalt
   traegt — u.a. die immer gerenderte Bewertungszeile — bestimmen Textzeilen
   die Rasterhoehe, nicht mehr das Bild. Die Grenze kostete nur noch Raender.

   MESSFALLE, die diesen Befund fast gekippt haette: Im verdeckten Browser-
   Panel werden lazy-Bilder nicht geladen. Ohne Bildmasse meldet die Karte
   559px statt 735px und scrollHeight-clientHeight = 176px, was wie ein
   abgeschnittener Kaufknopf aussieht. Beides ist Messrauschen. Vor jeder
   Kartenmessung erst alle Bilder auf loading=eager setzen und ihr Laden
   abwarten.

   Auf dem Telefon aendert sich nichts: dort ist die Karte 162px breit, das
   Bild war mit 160px schon voll — die 210er Grenze hat nie gegriffen.

   MESSFALLE, die am 21.08. drei Anlaeufe gekostet hat: Der Kartenwrapper
   traegt einen INLINE-Style height:785px, den JTLs Hoehenangleichung beim
   Seitenaufbau setzt. Wer CSS erst danach im Browser injiziert, misst weiter
   die alte Hoehe. Nur ein echter Deploy zeigt die Wirkung.

   Hier steht bewusst KEINE Regel mehr: ohne Begrenzung fuellt die Kachel den
   Container von selbst. Der Block bleibt als Merkposten stehen, damit die
   210px nicht ein drittes Mal eingefuehrt werden. */

/* ======================================================================
   GANZE KARTE KLICKBAR              (22.08.2026, Sitzung PRODUKTKARTE)
   ======================================================================

   BEFUND Yunus: "das anklicken der karte muss sowohl im bild als auch auf
   einer freiflaeche zur produktdetailseite fuehren."

   Nachgemessen mit elementFromPoint ueber ein Raster von 16x28px:
     Bild (y 38-198)              fuehrte zur Seite
     Marke und Titel (y 230-278)  fuehrten zur Seite
     Chips, Preis, Staffelleiste  TOT — 256px, ein Drittel der Karte
     Statuszeile und Kartenfuss   TOT
   Wer auf den Preis klickte, loeste nichts aus.

   Markup: der Aufzieh-Link .fs-kartenlink in productlist/item_box.tpl.

   SCHICHTUNG: Der Link liegt auf z-index 1 ueber der Karte. Alles Bedienbare
   muss darueber, sonst schluckt er den Klick:
     .fs-staffel-zelle          echte Schaltflaechen, setzen die Menge
     .productbox-variations     Variantenauswahl
     .item-list-basket-details  Mengenwaehler und Kaufknopf
     .productbox-quick-actions  Merkzettel und Vergleich
     .manufacturer a            fuehrt zum Hersteller, NICHT zum Artikel
   Die Sale-Etiketten (.product-overlays) bleiben bewusst UNTEN: sie sind
   Auszeichnung, kein Bedienelement — ein Klick darauf soll zur Seite fuehren.

   Textauswahl: Der Link deckt die Karte ab, Text laesst sich dort nicht mehr
   markieren. Auf einer Produktkachel ist das der uebliche Handel — die
   Detailseite traegt denselben Text markierbar. */
#product-list .productbox,
.carousel .productbox {
    position: relative;
}

.fs-kartenlink {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    /* Kein eigenes Aussehen: die Karte zeigt den Zustand, nicht der Link. */
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    background: transparent;
}

#product-list .productbox .fs-staffel-zelle,
#product-list .productbox .productbox-variations,
#product-list .productbox .item-list-basket-details,
#product-list .productbox .fs-mengenlabel,
#product-list .productbox .productbox-quick-actions,
#product-list .productbox .product-actions,
#product-list .productbox .manufacturer a,
#product-list .productbox .productbox-title a,
#product-list .productbox .fs-ausverkauft-btn,
#product-list .productbox .bootstrap-select,
#product-list .productbox .dropdown-menu,
.carousel .productbox .fs-staffel-zelle,
.carousel .productbox .productbox-variations,
.carousel .productbox .item-list-basket-details,
.carousel .productbox .fs-mengenlabel,
.carousel .productbox .productbox-quick-actions,
.carousel .productbox .product-actions,
.carousel .productbox .manufacturer a,
.carousel .productbox .productbox-title a,
.carousel .productbox .fs-ausverkauft-btn,
.carousel .productbox .bootstrap-select,
.carousel .productbox .dropdown-menu {
    position: relative;
    z-index: 2;
}

/* Die Kaufzeile der LISTE traegt .productbox-onhover, und custom.css setzt
   darauf position: static !important (Schnellkauf-Sichtbarkeit) — das
   entwaffnete die Schichtung oben: die Zeile fiel unter den Kartenlink (z1),
   jeder Klick auf Menge oder Kaufknopf oeffnete die Produktseite. Mit echtem
   Playwright-Klick nachgewiesen (27.08.): "fs-kartenlink intercepts pointer
   events". Gegen-!important nur fuer diese eine Zone. */
#product-list .productbox .item-list-basket-details,
.carousel .productbox .item-list-basket-details {
    position: relative !important;
    z-index: 2;
}

/* Das Auswahlmenue klappt ueber die Karte auf und braucht mehr als die 2. */
#product-list .productbox .bootstrap-select.show,
#product-list .productbox .bootstrap-select .dropdown-menu.show,
.carousel .productbox .bootstrap-select.show,
.carousel .productbox .bootstrap-select .dropdown-menu.show {
    z-index: 30;
}

/* Der Zeiger sagt schon vor dem Klick, dass die Flaeche fuehrt. */
#product-list .productbox,
.carousel .productbox {
    cursor: pointer;
}
#product-list .productbox .item-list-basket-details,
#product-list .productbox .productbox-variations,
.carousel .productbox .item-list-basket-details,
.carousel .productbox .productbox-variations {
    cursor: auto;
}

/* Feinschliff: Die Container der Bedienelemente liegen zwar oben, sind aber
   zwischen ihren Kindern LEER — dort fingen sie den Klick ab, ohne selbst
   etwas zu tun (gemessen 52 tote Punkte, vor allem zwischen Staffelleiste und
   Auswahlfeld und neben dem Kaufknopf). pointer-events:none laesst den Klick
   an diesen Stellen zum Kartenlink durch; die Kinder holen ihn sich zurueck. */
#product-list .productbox .productbox-variations,
#product-list .productbox .item-list-basket-details,
#product-list .productbox .fs-mengenlabel,
.carousel .productbox .productbox-variations,
.carousel .productbox .item-list-basket-details,
.carousel .productbox .fs-mengenlabel {
    /* !important: ohne das blieb .productbox-variations gemessen auf
       pointer-events:auto — eine Regel aus dem Theme setzt sich sonst durch. */
    pointer-events: none !important;
}
#product-list .productbox .productbox-variations .productbox-onhover,
#product-list .productbox .productbox-variations .row.variations,
#product-list .productbox .productbox-variations dl,
#product-list .productbox .productbox-variations dt,
#product-list .productbox .productbox-variations .variation-wrapper,
.carousel .productbox .productbox-variations .productbox-onhover,
.carousel .productbox .productbox-variations .row.variations,
.carousel .productbox .productbox-variations dl,
.carousel .productbox .productbox-variations dt,
.carousel .productbox .productbox-variations .variation-wrapper {
    pointer-events: none !important;
}
/* Nicht das direkte Kind — das ist bei der Auswahlzone selbst wieder ein
   flaechiger Container (.productbox-onhover) und fing den Klick erneut ab.
   Nur was man wirklich bedient, holt sich die Klicks zurueck. */
#product-list .productbox .productbox-variations select,
#product-list .productbox .productbox-variations button,
#product-list .productbox .productbox-variations .bootstrap-select,
#product-list .productbox .productbox-variations .dropdown-menu,
#product-list .productbox .productbox-variations label,
#product-list .productbox .item-list-basket-details button,
#product-list .productbox .item-list-basket-details input,
#product-list .productbox .item-list-basket-details a,
#product-list .productbox .item-list-basket-details .form-counter,
.carousel .productbox .productbox-variations select,
.carousel .productbox .productbox-variations button,
.carousel .productbox .productbox-variations .bootstrap-select,
.carousel .productbox .productbox-variations .dropdown-menu,
.carousel .productbox .productbox-variations label,
.carousel .productbox .item-list-basket-details button,
.carousel .productbox .item-list-basket-details input,
.carousel .productbox .item-list-basket-details a,
.carousel .productbox .item-list-basket-details .form-counter {
    pointer-events: auto;
}

/* --- Variantenauswahl der Schnellkauf-Kachel -----------------------------
   BEFUND Yunus (23.08.): "die VARIANTEN AUSWAHL in der schnellkaufansicht
   funktioniert nicht sie fuehrt mich zur produktdetailseite."

   Ursache: Die Auswahl heisst .fs-varianten__select und sitzt in
   .item-list-basket-details. Der Container steht per Regel oben auf
   pointer-events:none, und die Freigabeliste darunter kennt fuer diesen
   Container nur button, input, a und .form-counter — ein select war nie
   vorgesehen, weil es das dort bis heute frueh nicht gab. Der Klick fiel
   also durch auf .fs-kartenlink (z-index 1) und oeffnete die Produktseite.
   Nachgemessen mit elementFromPoint auf der Feldmitte: oberstes Element
   war .fs-kartenlink, das Select selbst meldete pointer-events:none.

   MEIN FEHLER BEIM TESTEN: Ich hatte das Umschalten heute frueh per
   dispatchEvent('change') geprueft — das umgeht pointer-events vollstaendig
   und meldet Erfolg, obwohl kein Mensch das Feld bedienen kann. Bedienbarkeit
   nur mit echten Klicks pruefen (siehe [[fogsmoke-verdeckter-tab-messfalle]]).

   z-index 2 zusaetzlich zu pointer-events, damit das aufgeklappte Feld auch
   ueber dem Kartenlink liegt und nicht von ihm ueberdeckt wird. */
#product-list .productbox .fs-varianten__select,
#product-list .productbox .fs-varianten__label,
#product-list .productbox .item-list-basket-details select,
#product-list .productbox .fs-varianten-col select,
.carousel .productbox .fs-varianten__select,
.carousel .productbox .fs-varianten__label,
.carousel .productbox .item-list-basket-details select,
.carousel .productbox .fs-varianten-col select {
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}

/* Sale- und Neu-Etiketten sind Auszeichnung, kein Bedienelement: ein Klick
   darauf soll wie auf der uebrigen Flaeche zur Produktseite fuehren. */
#product-list .productbox .product-overlays,
#product-list .productbox .widget-sale,
.carousel .productbox .product-overlays,
.carousel .productbox .widget-sale {
    pointer-events: none;
}

/* Listenansicht: dieselbe Schichtung. Die Karte traegt dort .productbox-row,
   die Regeln oben greifen ueber #product-list .productbox bereits mit —
   ergaenzt werden nur die Elemente, die es nur in der Liste gibt. */
#product-list .productbox-row {
    position: relative;
    cursor: pointer;
}
#product-list .productbox-row .item-list-basket-details,
#product-list .productbox-row .productbox-variations,
#product-list .productbox-row .fs-staffel-zelle,
#product-list .productbox-row .productbox-quick-actions,
#product-list .productbox-row .manufacturer a,
#product-list .productbox-row .productbox-title a,
#product-list .productbox-row .bootstrap-select,
#product-list .productbox-row .fs-ausverkauft-btn {
    position: relative;
    z-index: 2;
}
#product-list .productbox-row .item-list-basket-details,
#product-list .productbox-row .productbox-variations {
    cursor: auto;
}

/* Kompaktkarte: gleiche Schichtung wie die Vollkarte. */
.fs-cc {
    position: relative;
    cursor: pointer;
}
.fs-cc .fs-cc__action,
.fs-cc .fs-cc__btn,
.fs-cc .fs-cc__form,
.fs-cc .fs-cc__medialink,
.fs-cc .fs-cc__name a {
    position: relative;
    z-index: 2;
}
.fs-cc .fs-cc__action,
.fs-cc .fs-cc__form {
    cursor: auto;
}

/* Merkzettel- und Vergleichsleiste: der Container ist 160x32px gross, die
   beiden Icons darin sind es nicht — die Flaeche dazwischen fing den Klick ab
   (gemessen 26 tote Punkte auf /Big-puffs, mobil wie am Schreibtisch).
   Wie bei den uebrigen Containern: die Flaeche wird durchlaessig, die Icons
   holen sich die Klicks zurueck. */
#product-list .productbox .productbox-quick-actions,
#product-list .productbox .product-actions,
.carousel .productbox .productbox-quick-actions,
.carousel .productbox .product-actions {
    pointer-events: none;
}
#product-list .productbox .productbox-quick-actions a,
#product-list .productbox .productbox-quick-actions button,
#product-list .productbox .product-actions a,
#product-list .productbox .product-actions button,
.carousel .productbox .productbox-quick-actions a,
.carousel .productbox .productbox-quick-actions button,
.carousel .productbox .product-actions a,
.carousel .productbox .product-actions button {
    pointer-events: auto;
}

/* Kaufknopf mobil: Touch-Schwelle in der BREITE
   ------------------------------------------------------------------
   Gemessen auf 390px: Der Icon-Knopf stand auf 40x44px. Die Hoehe stimmte,
   die Breite lag unter den 44px, die ein Fingertipp braucht.

   Die Aufteilung selbst bleibt, wie sie ist — sie ist nicht willkuerlich:
   der Mengenregler braucht seine 90px, sonst schrumpft das Zahlenfeld
   zwischen den Plus/Minus-Knoepfen von 24px auf 3px und ist unlesbar
   (nachgemessen bei 50/50 und 55/45). Und der quadratische Icon-Knopf
   rechts neben dem Regler ist Yunus' Zielbild vom 21.08., kein Notbehelf.
   Es geht hier also nur um die vier fehlenden Pixel.
   Gemessen danach: Knopf 44x44, Regler 90, Zahlenfeld 24, Zeile 150 — passt. */
@media (max-width: 767px) {
    #product-list .productbox .basket-details-add-to-cart,
    .carousel .productbox .basket-details-add-to-cart {
        min-width: 44px;
    }
}

/* Auch die gesperrte Bestmarke bekommt die graue Flaeche. Ohne diese Zeile
   behielt sie Weiss und den kraeftigen Text der aktiven Bestmarke — sie sah
   dann heller aus als die gesperrten Zellen daneben, obwohl sie denselben
   Zustand hat. Gemessen: #6b6b75 auf #f6f5f3 = 4,84:1. */
.productbox .fs-staffel-zelle[disabled].fs-staffel-beste,
.productbox .fs-staffel-zelle:disabled.fs-staffel-beste {
    background-color: #f6f5f3 !important;
    color: #6b6b75 !important;
}
.productbox .fs-staffel-zelle[disabled].fs-staffel-beste .fs-staffel-preis,
.productbox .fs-staffel-zelle[disabled].fs-staffel-beste .fs-staffel-menge,
.productbox .fs-staffel-zelle[disabled].fs-staffel-beste .fs-staffel-proz,
.productbox .fs-staffel-zelle:disabled.fs-staffel-beste .fs-staffel-preis,
.productbox .fs-staffel-zelle:disabled.fs-staffel-beste .fs-staffel-menge,
.productbox .fs-staffel-zelle:disabled.fs-staffel-beste .fs-staffel-proz {
    color: #6b6b75 !important;
}

/* ======================================================================
   PREISE AUF EINER LINIE            (22.08.2026, Sitzung PRODUKTKARTE)
   ======================================================================

   BEFUND Yunus: "Preise sollten immer auf der gleichen Hoehe stehen."
   Seine Vermutung war die Sternebewertung. Nachgemessen ist es etwas
   anderes — und die Sterne sind es NICHT:

   Auf /Big-puffs standen die Preise bei 341px und bei 373px, obwohl dort
   keine einzige Karte eine Bewertung traegt. Der Unterschied lag in der
   Bildzone: 213px gegen 245px. Ursache ist .productbox-quick-actions
   (Merkzettel und Vergleich): Der Container steht mit position:relative
   IM FLUSS. Wo die Icons vorhanden sind, ist er 32px hoch und schiebt
   Bild, Titel und Preis um genau diese 32px nach unten; wo sie fehlen,
   ist er 0px hoch. Dieselben 32px erklaerten auch den Versatz auf der
   Startseite (373 gegen 403).

   Loesung: Die Icons gehoeren UEBER das Bild, nicht davor. Absolut
   positioniert nehmen sie keinen Platz mehr im Fluss ein und der Versatz
   verschwindet an der Wurzel — ohne dass irgendwo Platz reserviert werden
   muss, den die meisten Karten nicht brauchen.
   Gemessen danach: alle Preise auf 341, alle Bildzonen auf 213, Icons
   unveraendert sichtbar (64x32, oben rechts im Bild).

   z-index 3: ueber dem Kartenlink (1) und den Bedienelementen (2), damit
   Merkzettel und Vergleich anklickbar bleiben. */
#product-list .productbox .inner-image-wrapper,
.carousel .productbox .inner-image-wrapper {
    position: relative;
}

#product-list .productbox .productbox-quick-actions,
.carousel .productbox .productbox-quick-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
}

/* Bewertungszeile: Platz nur reservieren, wo es Bewertungen gibt
   ------------------------------------------------------------------
   Der leere Container (.rating-wrapper--leer) ist standardmaessig 0 hoch.
   Erst wenn auf derselben Liste mindestens eine Karte wirklich bewertet ist
   (:has(.rating-wrapper--hat)), bekommt er die Hoehe der echten Sternezeile.
   So stehen die Preise dort auf einer Linie, ohne dass Seiten ohne jede
   Bewertung — das ist die Mehrzahl — 30px Kartenhoehe dafuer bezahlen.
   Gemessen: echte Sternezeile 23px plus 7px Abstand. */
#product-list .productbox .rating-wrapper--leer,
.carousel .productbox .rating-wrapper--leer {
    min-height: 0;
    /* Auch den Aussenabstand der Basisklasse zuruecknehmen: der leere
       Container war zwar 0 hoch, brachte aber 7,5px margin mit und schob
       den Preis auf Seiten ohne jede Bewertung von 341 auf 349. */
    margin: 0;
}

#product-list:has(.rating-wrapper--hat) .productbox .rating-wrapper--leer,
.carousel:has(.rating-wrapper--hat) .productbox .rating-wrapper--leer {
    /* 1,6em statt fester Pixel: die echte Sternenzeile ist an die Schriftgroesse
       gekoppelt und misst 21px auf dem Telefon gegen 23px am Schreibtisch.
       Ein fester Wert passte deshalb immer nur auf einer Breite — mobil blieben
       2px Versatz zwischen bewerteter und unbewerteter Karte stehen.
       Gemessen: 21px / 13,125px Schrift = 1,6. */
    min-height: 1.6em;
    margin-bottom: 7px;
}

/* Empfehlungsblock unter der Kaufflaeche — Ausrichtung und Abstand
   ------------------------------------------------------------------
   BEFUND Yunus 23.08.2026: "bring die senkrecht auf eine linie und
   vergroessere den abstand zur beschreibung".
   Gemessen VORHER (mobil 390px): Kaufflaeche beginnt bei 11px, der
   Empfehlungsblock bei 0px, die Reiterleiste bei 21px — drei verschiedene
   linke Kanten. Und der Block endete bei exakt 1237px, wo die Reiterleiste
   beginnt: null Abstand.
   Die Einrueckung loest jetzt der {container} im Template. Hier nur der
   Abstand nach unten, damit Empfehlung und Beschreibung als zwei Bereiche
   lesbar sind statt als ein Block. */
.fs-rec-oben {
    margin-bottom: 42px;
}
@media (max-width: 767px) {
    .fs-rec-oben {
        margin-bottom: 32px;
    }
}
/* Der untere Block sitzt bereits im Container des Parents und braucht nur
   oben Luft gegen die Bewertungen. */
.fs-rec--behavioral {
    margin-top: 34px;
}

/* ============================================================================
   14. Kartenhoehe auf 617px            (23.08.2026, Sitzung PRODUKTKARTE)
   ----------------------------------------------------------------------------
   ANWEISUNG Yunus: "DIE KARTE MUSS KUERZER WERDEN!" — danach "bring es mal
   bitte auf 617 pixel".

   AUSGANGSLAGE: 705px auf /Mehrweg-Vapes (1700px Fenster, alle Bilder geladen).
   Die Hoehe kam nicht von zu viel Inhalt, sondern von den Reserven aus
   Abschnitt 9 — die waren am 21.08. korrekt auf den groessten Fall gemessen.
   Kuerzer wird die Karte nur, wenn die Reserven kleiner werden duerfen. Genau
   das leisten die drei Aenderungen unten: sie machen den groessten Fall
   kleiner, statt Inhalt zu streichen.

   ZWEI MESSFALLEN, die diesen Umbau fast verhindert haetten:
   1. JTL friert die Kartenhoehe beim Seitenaufbau per JS ein (fester height-Wert
      auf .product-wrapper, bei allen 20 Karten). Wer CSS erst danach im Browser
      injiziert, misst IMMER "0px Wirkung" — der Inhalt schrumpft, die Huelle
      bleibt. Nur ein echter Deploy zeigt die Wirkung; beim Messen im Browser
      vorher `document.querySelectorAll('.product-wrapper').forEach(w =>
      w.style.height = '')`.
   2. Der Preisblock traegt kein eigenes Klassenattribut, sondern haengt an
      [itemprop="offers"]. Bei der Suche nach "welche Regel setzt hier eine
      Hoehe" faellt er durch jedes Klassenraster.

   RECHNUNG (jeweils an der Karte gemessen, die die Zeilenhoehe bestimmt):
       Chip-Reserve   42 -> 21px   -21   (Snippet gibt nur noch 2 Chips aus)
       Preisblock    170 -> 140px  -30   (Streichpreis daneben, leere Notiz raus)
       Bodenabstand  3.1 -> 2.4rem -16
       Staffelleiste, Innenabstaende gestrafft        -15
       Summe                                          -82  ->  623px
   ============================================================================ */

/* --- Streichpreis neben den Preis statt darueber -------------------------
   Yunus' Vorschlag, und er ist besser als meiner: Ich wollte die Zeile auch bei
   Artikeln ohne Sale leer reservieren, damit die Preiszone ueberall gleich hoch
   ist. Nebeneinander kostet sie GAR KEINE eigene Zeile — und ist bei 775
   Sale-Artikeln trotzdem ueberall gleich. */
#product-list .productbox .price_wrapper,
.carousel .productbox .price_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .4rem;
}
#product-list .productbox .price_wrapper > .price.productbox-price,
.carousel .productbox .price_wrapper > .price.productbox-price { order: 1; }
#product-list .productbox .price_wrapper > .instead-of.old-price,
.carousel .productbox .price_wrapper > .instead-of.old-price {
    order: 2;
    margin: 0;
    align-self: baseline;
    /* Ohne diese drei Zeilen bleibt der Streichpreis auf flex-basis:100% stehen
       (gemessen 215 von 223px) und beansprucht trotz order:2 eine eigene Zeile —
       die ganze Ersparnis verpufft. */
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
/* Alles Weitere (Grundpreis, Staffelleiste, Hinweise) bleibt in eigenen Zeilen. */
#product-list .productbox .price_wrapper > *:not(.price):not(.instead-of),
.carousel .productbox .price_wrapper > *:not(.price):not(.instead-of) {
    order: 3;
    flex-basis: 100%;
}
/* Die Preiszeile fuellt sonst die ganze Kartenbreite (gemessen 223 von 223px),
   weil ihr innerer Span sich streckt — der Streichpreis wird dadurch in die
   naechste Zeile gedraengt und die Ersparnis verpufft. Beide auf Inhaltsbreite
   setzen, damit sie nebeneinander stehen. Das Sternchen-Label "*Einzelpreis"
   rutscht dabei mit unter den Preis; es bleibt vollstaendig sichtbar, weil die
   Zeile umbrechen darf (Preisangabenverordnung). */
#product-list .productbox .price_wrapper > .price.productbox-price,
.carousel .productbox .price_wrapper > .price.productbox-price {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
}
#product-list .productbox .price_wrapper > .price.productbox-price > span,
.carousel .productbox .price_wrapper > .price.productbox-price > span {
    flex: 0 1 auto;
}

/* --- Leere Preisnotiz einklappen -----------------------------------------
   Sie steht auf JEDER Karte im Markup und ist bei den meisten leer — gemessen
   15px, die niemand sieht.

   FALLE: :empty greift hier NICHT. Smarty gibt den Container mit Einrueckung
   aus, er enthaelt also 147 Zeichen Whitespace und gilt als nicht leer
   (nachgemessen 23.08.). Verlaesslich ist die Frage nach ELEMENT-Kindern:
   gefuellte Notizen tragen genau eines (den Grundpreis-Span), leere keines. */
#product-list .productbox .price-note:not(:has(*)),
.carousel .productbox .price-note:not(:has(*)) { display: none !important; }

/* --- Staffelleiste: Innenabstaende gestrafft -----------------------------
   Die Leiste selbst bleibt unangetastet: drei Stufen, anklickbar, mit Menge,
   Preis und Prozentwert. Yunus am 23.08.: "wir haben verbrauchsgueter und
   moechten dass kunden die moeglichkeit haben grosse mengen einfach zu kaufen"
   — sie ist Kernangebot, kein Beiwerk. Gekuerzt werden nur die Polster. */
#product-list .productbox .fs-staffeln,
.carousel .productbox .fs-staffeln { padding: .28rem .35rem .3rem; }
.productbox .fs-staffeln-kopf { margin-bottom: .22rem; }
#product-list .productbox .fs-staffel-zelle,
.carousel .productbox .fs-staffel-zelle { padding: .22rem .12rem .26rem; }
.productbox .fs-staffel-menge { line-height: 1.1; }
.productbox .fs-staffel-proz { line-height: 1; }

/* ============================================================================
   15. Variantenknoepfe — gebaut und zurueckgenommen        (23.08.2026)
   ----------------------------------------------------------------------------
   Hier stand eine Buttonreihe im Stil von .fs-pdp-vt-item (fs-pdp.css): Zahl
   gross, Einheit klein, gewaehlter Zustand als Vollflaeche. Sie lief technisch
   (Klick erreichbar, name="a" wurde korrekt umgesetzt), wurde aber auf Ansage
   wieder entfernt: "Nikotingehalt weiterhin als DROPDOWN, also auf den
   produktkarten" (Yunus).

   Auf der PRODUKTDETAILSEITE bleiben die Knoepfe unveraendert — dort ist Platz
   fuer sie. Auf der Kachel bleibt das Auswahlfeld, das ausverkaufte Werte
   ueber disabled-Optionen kompakter abbildet.

   Wer sie wieder aktivieren will, braucht drei Dinge: die Schwelle im Template
   (bis vier Werte Knoepfe — 687 der 694 Nikotinachsen liegen darunter, Farbe
   geht bis 19), den Radio-Zweig in variantenWechsel() und pointer-events:auto
   plus z-index 2 auf dem Label, sonst schluckt .fs-kartenlink den Klick.
   ============================================================================ */

/* ============================================================================
   16. Spar-Band verschiebt die Statuszeile nicht mehr   (23.08.2026)
   ----------------------------------------------------------------------------
   BEFUND Yunus: "ueberpruefe das sofort verfuegbar das runter rutscht wenn der
   button kommt mit so und so viel gespart."

   Nachgemessen auf /liquids: Klickt man eine Staffelstufe, blendet
   fs-produktkarte.js die .fs-spare-row ein ("20 Stk. · 4,20 € gespart", 33px).
   Der Preisblock waechst von 152 auf 185px, die Kartenhoehe steht aber fest —
   die Statuszeile rutschte 19px aus der Karte und wurde abgeschnitten.

   Ursache war meine eigene Kuerzung von heute: die Reserve des Preisblocks ging
   von 170 auf 140px. Die 170 waren genau der Platz fuer dieses Band.

   Loesung ohne die Karte wieder hoeher zu machen: Das Band ERSETZT die
   Kopfzeile der Staffelleiste. Beide sagen dasselbe — "Spare bis zu 5 %" ist
   die Ankuendigung, "4,20 € gespart" das Ergebnis. Sobald das Ergebnis
   dasteht, ist die Ankuendigung ueberfluessig. Dazu wird das Band selbst
   kompakter gesetzt. */
#product-list .productbox .fs-spare-row,
.carousel .productbox .fs-spare-row {
    margin: .1rem 0 0;
    padding: 0;
    line-height: 1;
}
/* Der Chip selbst traegt die Hoehe. Ziel sind 22px — genau so viel, wie die
   ausgeblendete Kopfzeile der Staffelleiste freigibt (19px plus deren Abstand).
   Nachgemessen an fuenf Karten mit eingefrorener Kartenhoehe: 1px Rest, die
   Statuszeile bleibt vollstaendig sichtbar. Vor dieser Kuerzung waren es 35px
   und damit 15px Ueberlauf. */
#product-list .productbox .fs-spare,
.carousel .productbox .fs-spare {
    padding: .02rem .35rem;
    font-size: .58rem;
    line-height: 1.3;
    gap: .2rem;
}
#product-list .productbox .fs-spare svg,
.carousel .productbox .fs-spare svg { width: 9px; height: 9px; }
/* Solange das Band sichtbar ist, verschwindet die Kopfzeile der Staffelleiste. */
#product-list .productbox .price_wrapper:has(.fs-spare-row:not([hidden])) .fs-staffeln-kopf,
.carousel .productbox .price_wrapper:has(.fs-spare-row:not([hidden])) .fs-staffeln-kopf {
    display: none !important;
}
/* Fallback fuer Browser ohne :has() — dort bleibt die Kopfzeile stehen und die
   Reserve faengt das Band ab. Kostet 12px auf allen Karten, aber nur dort. */
@supports not selector(:has(*)) {
    #product-list .productbox.productbox-column .product-box > [itemprop="offers"],
    .carousel .productbox.productbox-column .product-box > [itemprop="offers"] {
        min-height: 152px;
    }
}

/* ============================================================================
   17. Sparbetrag als Box neben dem Preis   (23.08.2026, Sitzung PRODUKTKARTE)
   ----------------------------------------------------------------------------
   ANSAGE Yunus: "bei STAFFELPREISE bitte nicht SPARE BIS ZU 14% sondern den
   Betrag den er spart und setze das etwas groesser in eine eigene Box rechts
   vom Hauptpreis mit einem kleinen Icon, so wie es ungefaehr auf dem aktuellen
   Liveshop aussieht."

   Vorlage ist die Live-Zeile `[Preisschild] Spare 0,50 € pro Stueck`. Der
   Betrag kommt aus $fsSpare (price.tpl, Zeile 22): der regulaere Stueckpreis
   minus dem besten Staffelpreis, gerechnet in derselben Kundengruppe und
   Steuerbasis — nie aus einem lokalisierten Preistext.

   RECHTLICHER ZUSAMMENHANG, der hier zusammengehoert: Abschnitt weiter oben
   blendet .fs-bundle aus, sobald eine Staffelleiste auf derselben Karte steht
   ("§5 B ... untersagt konkurrierende Spar-Badges"). Genau deshalb wurde mit
   dieser Aenderung die Prozent-Kopfzeile "Spare bis zu X %" aus der
   Staffelleiste ENTFERNT. Es bleibt EIN Sparversprechen auf der Karte, nicht
   zwei — die Vorgabe ist damit eingehalten und nicht umgangen. Die Leiste
   darunter nennt weiterhin jede Stufe mit Menge UND Preis; die Box fasst
   dieselbe Information zusammen, ohne einen zweiten Rabattwert zu behaupten.

   Die alten .fs-bundle-Regeln greifen nicht mehr, weil das Markup die Klasse
   nicht mehr traegt. Sie bleiben als Historie stehen.
   ============================================================================ */
#product-list .productbox .fs-sparbox,
.carousel .productbox .fs-sparbox {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 0 .3rem;
    margin-left: auto;          /* schiebt die Box an den rechten Rand der Preiszeile */
    padding: .3rem .45rem;
    border: 1px solid #e3e3e7;
    background: #f7ecf6;        /* dieselbe helle Markenflaeche wie der Bestpreis-Chip */
    line-height: 1.15;
    max-width: 100%;
}
#product-list .productbox .fs-sparbox-icon,
.carousel .productbox .fs-sparbox-icon {
    flex: 0 0 auto;
    fill: none;
    stroke: #830779;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* "etwas groesser" (Ansage): deutlich ueber der alten Kopfzeile mit .62rem,
   aber unter dem Hauptpreis, der die Fuehrung behaelt. */
#product-list .productbox .fs-sparbox-wert,
.carousel .productbox .fs-sparbox-wert {
    font-family: "FS Text", system-ui, sans-serif;
    font-size: .82rem;
    font-weight: 700;
    color: #830779;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
#product-list .productbox .fs-sparbox-sub,
.carousel .productbox .fs-sparbox-sub {
    flex-basis: 100%;
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b6b75;
    white-space: nowrap;
    padding-left: calc(15px + .3rem);   /* unter dem Text, nicht unter dem Icon */
}
/* Die Preiszeile traegt Preis links und Box rechts. */
#product-list .productbox .price_wrapper,
.carousel .productbox .price_wrapper { align-items: flex-start; }
#product-list .productbox .price_wrapper > .price.productbox-price,
.carousel .productbox .price_wrapper > .price.productbox-price { flex: 0 1 auto; }

/* Schmale Karten: Auf zwei Zeilen wuerde die Box die Preiszeile sprengen —
   dort steht sie unter dem Preis statt daneben und wird kompakter. Die
   Zusatzzeile "pro Stueck" entfaellt, der Betrag allein bleibt eindeutig. */
@container (max-width: 239px) {
    #product-list .productbox .fs-sparbox,
    .carousel .productbox .fs-sparbox {
        margin-left: 0;
        padding: .2rem .35rem;
        gap: 0 .22rem;
    }
    #product-list .productbox .fs-sparbox-wert,
    .carousel .productbox .fs-sparbox-wert { font-size: .7rem; }
    #product-list .productbox .fs-sparbox-sub,
    .carousel .productbox .fs-sparbox-sub { display: none; }
    #product-list .productbox .fs-sparbox-icon,
    .carousel .productbox .fs-sparbox-icon { width: 12px; height: 12px; }
}

/* ============================================================================
   18. Leere Bewertungszeile beansprucht keinen Platz mehr    (29.08.2026)
   ----------------------------------------------------------------------------
   BEFUND: item_box.tpl:313 rendert auf jeder Karte ohne Bewertung
   <div class="rating-wrapper rating-wrapper--leer" aria-hidden="true"></div>.
   Der Platzhalter ist richtig gedacht — er haelt die Zeile frei, damit Karten
   mit und ohne Bewertung in einer Rasterzeile fluchten.

   Nur hat KEIN Artikel im Shop eine Bewertung: auf der Produktseite steht
   "Geben die erste Bewertung fuer diesen Artikel ab" (geprueft 29.08. an
   /elfliq-liquid-by-elfbar-peach-ice). Die Reserve haelt also Platz fuer etwas,
   das es nicht gibt — gemessen 21px auf jeder Karte, mal 20 Karten je Seite.

   WARUM AUSGERECHNET DIESE ZEILE: Die Notiz in Abschnitt "BILDZONE UEBER DIE
   VOLLE KARTENBREITE" nennt die immer gerenderte Bewertungszeile ausdruecklich
   als einen der Posten, die seit dem 23.08. die Rasterhoehe bestimmen. Das Bild
   dagegen tut es nachweislich NICHT: dort gemessen 213px vs 247px Bildbreite bei
   unveraenderten 735px Kartenhoehe. Verkleinern gibt den Platz nur als Leerraum
   zurueck, weil margin-top:auto ihn vor der Kaufzeile puffert.

   SELBSTHEILEND STATT PAUSCHAL: Die Zeile verschwindet nur, solange auf der
   Seite ueberhaupt keine bewertete Karte steht. Sobald ein Artikel seine erste
   Bewertung bekommt, rendert das Template .rating-wrapper--hat, die Bedingung
   faellt weg und die Reserve ist von selbst wieder da. Niemand muss daran
   denken, diese Regel spaeter zurueckzunehmen.
   ============================================================================ */
#product-list:not(:has(.rating-wrapper--hat)) .productbox .rating-wrapper--leer,
.carousel:not(:has(.rating-wrapper--hat)) .productbox .rating-wrapper--leer {
    display: none;
}

/* --- Ansage Yunus 31.08.: "können wir das bei allen Produktkarten in der
   Herstellerzeile machen — Desktop und mobil, Landingpage auch". Die Sterne
   stehen jetzt rechts in der Markenzeile (Markup in productlist/item_box.tpl,
   dem gemeinsamen Template aller Kartenflaechen). Die Zeile war rechts leer,
   deshalb kostet die Bewertung KEINE Kartenhoehe — keine Karte verschiebt sich.
   FALLE: html body .productbox .manufacturer * setzt font-weight:400 !important
   (Runde "Toene auf die Palette"). Font Awesome Solid braucht aber 900, sonst
   faellt der gefuellte Stern auf die Outline-Form zurueck. Deshalb unten die
   gezielte Rueckgabe mit hoeherer Spezifitaet. --- */
.productbox .manufacturer {
    display: flex !important;
    align-items: center;
    gap: 6px;
}
.productbox .manufacturer > a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.productbox .fs-marke-bewertung {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    line-height: 1;
}
.productbox .fs-marke-bewertung .rating {
    display: inline-flex !important;
    align-items: center;
    gap: 1px;
    color: #111114 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.productbox .manufacturer .fs-marke-bewertung .rating i {
    font-size: inherit !important;
    line-height: 1 !important;
    color: inherit !important;
}
.productbox .manufacturer .fs-marke-bewertung .rating i.fas {
    font-weight: 900 !important;
}
.productbox .manufacturer .fs-marke-bewertung .rating i.far {
    font-weight: 400 !important;
}
.productbox .manufacturer .fs-marke-bewertung .fs-mb-wert {
    font: 400 10px/1 "FS Body", system-ui, sans-serif !important;
    color: #6b6b75 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
    .productbox .fs-marke-bewertung .rating { font-size: 12px !important; }
    .productbox .manufacturer .fs-marke-bewertung .fs-mb-wert { font-size: 12px !important; }
}
/* Die alte eigene Sternzeile behaelt ihren reservierten Platz (sonst springen
   die Preise aus der Flucht), zeigt aber nichts mehr — sonst stuenden die
   Sterne doppelt. */
.productbox .rating-wrapper > .rating {
    display: none !important;
}

/* --- Nachmessung 31.08.: die Markenzeile hat mobil nur 135 px Innenmass.
   Sterne + Zahl zogen 81,3 px, der Markenlink brauchte 51 und bekam 47,7 —
   "RandM ›" wurde um drei Pixel beschnitten. Mobil tragen deshalb die Sterne
   allein: bei 5,0 aus einer Stimme sagt die Zahl nichts, was fuenf gefuellte
   Sterne nicht schon zeigen. Desktop behaelt Sterne UND Wert. --- */
@media (max-width: 767.98px) {
    .productbox .manufacturer .fs-marke-bewertung .fs-mb-wert {
        display: none !important;
    }
    .productbox .fs-marke-bewertung .rating {
        font-size: 9.5px !important;
    }
}

/* --- Ansage Yunus 31.08.: "für crossselling und listenansicht karten noch
   nicht. Machen wir es für die Produktkarten in der Landingpage, in der
   Kategorie sowohl mobil als auch auf dem Desktop. Wir machen die Sterne gold!"

   1) GOLD wird festgeschrieben. Bisher kam der Ton nur geerbt: die Farbe sitzt
      nicht am <i>, sondern an dessen ::before, gesetzt vom Bewertungsstil des
      Shops, der NACH dieser Datei laedt. Damit haette jede Umstellung dort die
      Karte mitgerissen. Jetzt steht der Goldton (#f49d1a, derselbe wie im
      Bewertungsbereich) direkt an der Karte. Leere Sterne bleiben Haarlinie.
   2) Die Listenansicht und die Crossselling-Schienen bekommen die Sterne
      NICHT — dort bleibt die Zeile wie vorher. --- */
.productbox .manufacturer .fs-marke-bewertung .rating i,
.productbox .manufacturer .fs-marke-bewertung .rating i::before {
    color: #f49d1a !important;
}
.productbox .manufacturer .fs-marke-bewertung .rating i.far,
.productbox .manufacturer .fs-marke-bewertung .rating i.far::before {
    color: #d9d9de !important;
}

/* Listenansicht: eigene Zeilengeometrie, kommt spaeter dran */
#product-list.layout-list .fs-marke-bewertung,
#product-list .productbox-row .fs-marke-bewertung,
.productbox-row .fs-marke-bewertung {
    display: none !important;
}
/* Crossselling / Zubehoer-Schienen: kommen spaeter dran */
.slider-xsell .fs-marke-bewertung,
[id*="xsell"] .fs-marke-bewertung,
[class*="xsell"] .fs-marke-bewertung,
.crossselling .fs-marke-bewertung {
    display: none !important;
}

/* --- Ansage Yunus 01.09.: "die sollten überall die selbe höhe haben wie die
   hersteller … die Zahl dahinter kannst du weg machen … bei 4,5 sind es einfach
   4,5 sterne die gold leuchten, der rest soll in einem grau hinterlegt sein."

   Umsetzung: zwei deckungsgleiche Sternreihen. Unten liegt die graue Reihe als
   voller Grund, darueber die goldene, auf die Breite des Werts beschnitten
   (--fs-bew kommt als Prozent aus item_box.tpl). Damit ist jeder Zwischenwert
   exakt darstellbar, nicht nur halbe Symbole.

   HOEHE: font-size 1em — die Sterne erben die Groesse der Herstellerzeile und
   sind damit auf JEDER Flaeche automatisch so hoch wie der Markenname
   (mobil 10,6px, Desktop 15,31px), ohne feste Werte je Breakpoint.
   line-height 1 haelt die Zeilenhoehe unveraendert. --- */
.productbox .manufacturer .fs-marke-bewertung {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    font-size: 1em !important;
    line-height: 1 !important;
    white-space: nowrap;
}
.productbox .manufacturer .fs-mb-sterne {
    position: relative;
    display: inline-block;
    line-height: 1;
}
.productbox .manufacturer .fs-mb-grund,
.productbox .manufacturer .fs-mb-gold {
    display: block;
    white-space: nowrap;
    letter-spacing: 1px;
    line-height: 1;
}
.productbox .manufacturer .fs-mb-gold {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--fs-bew, 100%);
    overflow: hidden;
}
.productbox .manufacturer .fs-mb-sterne i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;          /* Solid; die Zeile zwingt sonst 400 */
    font-size: inherit !important;
    line-height: 1 !important;
    font-style: normal !important;
}
.productbox .manufacturer .fs-mb-grund i { color: #dcdce1 !important; }
.productbox .manufacturer .fs-mb-gold  i { color: #f49d1a !important; }

/* Die Zahl entfaellt ueberall (Ansage 01.09.) */
.productbox .manufacturer .fs-mb-wert { display: none !important; }

/* --- Nachmessung 01.09.: 1em war zu gross. Gemessen bei 15,31px Schriftgroesse
   (Canvas, actualBoundingBox): Versalhoehe der Marke (Anton) 13,16px, Sternglyphe
   15,46px — die Glyphe traegt 2,06px Unterlaenge. Faktor 0,851. Mit 0.85em ist
   der Stern exakt so hoch wie die Versalien des Markennamens, und weil es eine
   em-Angabe ist, gilt das auf jeder Flaeche und in jedem Breakpoint. --- */
.productbox .manufacturer .fs-marke-bewertung {
    font-size: 0.85em !important;
}

/* --- Befund Yunus 01.09.: "die Pfeile hinter dem Hersteller werden an der
   Spitze vorne abgeschnitten, mobil wie Desktop." Nachgemessen: es ist keine
   Beschneidung durch die Karte (alle Vorfahren ausser der Karte selbst stehen
   auf overflow:visible, und die Pfeilspitze endet 5,6px vor der Kante),
   sondern die SCHRIFT. FS Display (Anton) zeichnet das Zeichen "›" mit flach
   gekappter Spitze: im Pixelbild bei 64px traegt die letzte Ink-Spalte
   15 Pixel — eine senkrechte Kante. Dieselbe Messung mit FS Text ergibt 1.
   Dazu kam Kunstfettung, weil Anton nur einen Schnitt hat (font-weight 800
   in custom.css). Der Haken wird deshalb in der Textschrift gesetzt, die
   einen echten 800er-Schnitt und eine spitze Form hat. --- */
.productbox .manufacturer a::after {
    font-family: "FS Text", system-ui, sans-serif !important;
}

/* Nachmessung: FS Text bringt andere Zeilenmetrik mit als Anton — die
   Markenzeile wuchs von 19,14 auf 21,14px. line-height 1 plus inline-block
   nimmt dem Haken den Einfluss auf die Zeilenhoehe, vertical-align:middle
   setzt ihn wieder auf die Mitte der Versalien. */
.productbox .manufacturer a::after {
    line-height: 1 !important;
    display: inline-block;
    vertical-align: middle;
}