/* === Move To Shop Storefront (Phase D.1) ============================== */
/* Theme-friendly: nutzt currentColor + neutrale Greys, ueberschreibt nichts. */
/*
   WHITE-LABEL (TASK-483 P4): Alle marken-/theme-relevanten Farben sind
   Tokens (--mts-c-primary & Familie). Der :root-DEFAULT ist bewusst
   NEUTRAL (sachliches Slate/Grau-Blau), damit das Modul fuer beliebige
   Fremd-Haendler OHNE Multicycle-Bezug ausrollbar ist. Das Multicycle-Gruen
   ist als Override-Block direkt unter :root erhalten und wird ueber das
   Attribut data-mts-brand="multicycle" (auf <html> oder <body>) aktiviert.
   Zustandsfarben (success/warning/danger) und neutrale Struktur-Greys sind
   theme-agnostisch und bleiben markenunabhaengig.

   THEME-ANKER-KOPPLUNG (Fremd-Theme-Fallbacks): Viele Regeln weiter unten
   (.pd-offer-actions, .pd-data-col, .gal-nav-cell, .costep, .faceted-search,
   .megamenu, .artlist-actions, .breadcrumb-container, .choice-box*, der
   #main-update-container-PDP-Kontext) haengen an der DOM-Struktur des
   Smartstore-Flex/Flow-Themes. Auf einem Ziel-Theme mit abweichender
   Markup-Struktur greifen sie ggf. nicht (rein kosmetischer Verlust, KEIN
   Funktionsbruch). Die JS-Fallback-Anker #main-update-container /
   form[data-pf] / .pd-form liegen in storefront.js (collectVariantQuery) und
   degradieren dort defensiv auf `document`. */

:root {
    /* ---- Marken-/Primaerfarbe: NEUTRALER Default (white-label) ----------
       Sachliches Slate/Grau-Blau. Multicycle-Gruen -> Override-Block unten.
       Die -rgb-Tokens speisen die abgeleiteten tint/ring/Schatten via
       rgba(var(--...-rgb), a); so muss der Brand-Override nur die Basiswerte
       setzen, die Ableitungen folgen automatisch. */
    --mts-c-primary:            #3f5b73;
    --mts-c-primary-rgb:        63, 91, 115;
    --mts-c-primary-soft:       #6c839a;    /* heller: Gradient-Start / Light-BG */
    --mts-c-primary-soft-rgb:   108, 131, 154;
    --mts-c-primary-soft-2:     #5a7288;    /* Hover-Gradient-Start */
    --mts-c-primary-dark:       #33485c;    /* Gradient-Ende */
    --mts-c-primary-hover:      #324759;    /* Solid-Button-Hover */
    --mts-c-primary-active:     #29394a;    /* aktiv/gedrueckt */
    --mts-c-primary-active-rgb: 41, 57, 74;
    --mts-c-primary-shadow-rgb: 26, 40, 52; /* Add-to-Cart-Drop-Shadow */
    --mts-c-primary-onbg:       #ffffff;    /* Text auf der Primaerflaeche */
    --mts-c-primary-tint:       rgba(var(--mts-c-primary-rgb), 0.10);
    --mts-c-primary-ring:       rgba(var(--mts-c-primary-rgb), 0.22);
    /* "Hauptfiliale"-Badge (Filialfinder-Karten): weicher Primaer-Tint. */
    --mts-c-badge-primary-bg:   #e9edf1;
    --mts-c-badge-primary-fg:   #33485c;

    /* ---- Zustandsfarben (theme-agnostisch, markenunabhaengig) ----------- */
    --mts-c-warning: #d97706;
    --mts-c-danger:  #dc2626;
    --mts-c-success: #16a34a;

    /* ---- Neutrale Struktur-/Text-Tokens (theme-agnostisch) -------------- */
    --mts-c-text:    #1f2937;
    --mts-c-muted:   #6b7280;
    --mts-c-border:  #e5e7eb;
    --mts-c-bg-soft: #f9fafb;
    /* Global promotet (waren zuvor nur .mts-page-lokal): so loesen die
       PDP-/Listing-/Cart-Overrides weiter unten diese Tokens global auf
       (statt per-Site var()-Fallback-Literal). Werte identisch zu den
       bisherigen Fallbacks -> kein visueller Unterschied. --mts-surface-2,
       --mts-line und --mts-line-soft bleiben BEWUSST .mts-page-lokal, weil
       ihre per-Site-Fallbacks divergieren (#f5f5f7 vs #f1f1f4 / mehrere
       Border-Alphas) - ein globales Hochziehen wuerde sie kollabieren. */
    --mts-surface:   #ffffff;
    --mts-ink:       #0b1220;
    --mts-ink-soft:  #4a5568;
    --mts-ink-muted: #6b7280;
    /* Akzent-Aliase zeigen auf die Brand-Tokens (killt die zuvor versteckten
       green-Fallbacks in var(--mts-accent) ausserhalb .mts-page). */
    --mts-accent:    var(--mts-c-primary);
    --mts-accent-2:  var(--mts-c-primary-soft);
    /* 2026-08-15: Die beiden hier ergaenzt, weil sie bisher NUR im
       Multicycle-Marken-Block standen. Fuer jede andere Marke - die Demo faehrt
       data-mts-brand="bidex" - war `--mts-accent-text` damit UNDEFINIERT, und
       das ist kein harmloser Zustand: `color: var(--mts-accent-text)` wäre
       dort "invalid at computed-value time". Die Deklaration gewinnt die
       Kaskade trotzdem, ihr Wert wird aber `unset` und die Farbe ERBT vom
       Elternelement - die eigentlich gemeinte Regel darunter greift NICHT
       nach. Ergebnis wäre ein lautloser Verlust der Akzentfarbe an rund 30
       Textstellen, sichtbar nur auf der fremden Instanz.

       Als Alias auf die -dark-Stufe statt als Literal: die ist pro Marke
       definiert und immer die dunklere Variante derselben Farbe. Gemessen
       2026-08-15: Demo #00686a (6,59:1 auf Weiß), neutraler Default #33485c.
       Der Multicycle-Block ueberschreibt weiterhin mit dem ausdruecklich
       freigegebenen #4d6b60. */
    --mts-accent-text:  var(--mts-c-primary-dark);
    --mts-accent-hover: var(--mts-c-primary-hover);

    /* --mts-radius stand hier mit `0.55rem` und war eine tote Deklaration.
       Entfernt am 2026-08-03 (TASK-594.01 AC#5).

       `mts-theme-global.css :root` setzt `--mts-radius: 18px !important`
       (TASK-577, mit Begruendung an der Fundstelle). `!important` schlaegt
       Spezifitaet UND Reihenfolge - diese Zeile konnte in keinem Geltungsbereich
       gewinnen. Am 2026-08-03 an beiden Instanzen gemessen: html und body loesen
       auf 18px auf, nicht auf 8,8 px. Die einzige `var(--mts-radius)`-Stelle in
       dieser Datei bekommt damit denselben Wert wie vorher.

       Wer den Radius des Moduls aendern will, aendert ihn ab jetzt an genau
       einer Stelle - in mts-theme-global.css. */
    --mts-shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
    --mts-shadow-md: 0 6px 18px rgba(15,23,42,0.10);
}

/* === Multicycle-Brand-Override (movetoshopdemo) =========================
   Byte-genau die bisherigen Multicycle-Gruen-Werte (Stand vor TASK-483 P4).
   Aktivierung ueber data-mts-brand="multicycle" auf <html> ODER <body>
   (beide Selektor-Varianten abgedeckt).

   >>> DEPLOY-AUFLAGE <<<  Dieses Attribut MUSS serverseitig gesetzt werden.
   Das bestehende data-tenant sitzt auf dem MtsAssets-<script>-Tag
   (Views/Shared/Components/MtsAssets/Default.cshtml) und ist fuer CSS-Scoping
   NICHT nutzbar (Script-Element, keine gerenderten Kinder). Es braucht einen
   neuen Anker auf <html>/<body> - z.B. via kleinem Inline-Setter in
   Default.cshtml, der aus @Model.TenantId ("movetoshopdemo") ->
   document.documentElement.setAttribute('data-mts-brand','multicycle') macht.
   OHNE das Attribut erscheint auch die Demo NEUTRAL (slate) statt gruen.

   tint/ring/Schatten leiten sich aus den -rgb-Tokens ab -> hier nur Basis.

   =====================================================================
   2026-08-15: EIN GRÜNTON, UND DAS PLUGIN IST SEINE QUELLE
   =====================================================================
   VORHER liefen auf mc.movetoshop.com DREI Grüntöne nebeneinander, alle
   am ausgelieferten Stand gemessen (Computed Style, nicht aus den Dateien
   gefolgert):

       Ankündigungsleiste   #6d8c80   3,68:1   Theme, --b365-accent
       "In den Warenkorb"   #5f8175   4,30:1   dieser Block
       SmartFit-Knopf       #4d6b60   5,85:1   mts-theme-global.css, hart
       "Vergleichen"        #4d6b60   5,85:1   dieselbe Regel

   Nutzer-Entscheidung vom 15.08.: ALLES auf den Bike365-Markenton
   #6d8c80 - den Ton, den die Ankündigungsleiste seit dem 07.08. trägt.
   Die Tonleiter darunter ist mit den libsass-Formeln aus
   custom-themes/MoveToShop.BikeTheme/wwwroot/_mts-tokens.scss gerechnet
   (desaturate(lighten(x)) bzw. saturate(darken(x)), dieselben Prozentwerte),
   nicht handgewählt. Die Nachrechnung mit $mts-brand = #5f8175 hat die dort
   dokumentierte Alt-Palette reproduziert - damit ist die Formel belegt und
   nicht bloß behauptet.

   >>> DER PREIS, AUSDRÜCKLICH <<<
   #6d8c80 erreicht auf Weiß 3,68:1. Weißer Text auf der Markenfläche liegt
   damit shopweit unter der WCAG-AA-Schwelle von 4,5:1 (1.4.3). Der
   Kontrast-Fix vom 13.08. (Commit 32fa7718, "Akzent als Text 4,30 -> 5,85")
   ist für die GEFÜLLTEN Flächen damit bewusst zurückgenommen. Das ist eine
   getroffene Design-Entscheidung, kein Versehen - wer sie "repariert",
   dreht sie gegen den Auftraggeber zurück. Erhalten bleibt der Fix dort, wo
   die Marke TEXT auf Weiß ist: --mts-accent-text steht weiter auf #4d6b60
   (5,85:1, mts-theme-global.css Abschnitt "TEXTKONTRAST"). Fläche und Text
   sind ab hier zwei getrennte Töne, und das ist der ganze Punkt.

   >>> WARUM DIESER BLOCK AUCH THEME-TOKENS SETZT <<<
   Vorgabe des Nutzers: die Storefront-Farbe wird über das PLUGIN gesteuert.
   Das ging bis heute nur zur Hälfte. Am Livestand nachgesehen: das Theme
   liefert in `theme.css` eine Regel `html:root` mit 54 (!) MTS-Tokens,
   abgeleitet aus der Theme-Variable $mts-brand (Admin -> Themes ->
   Konfigurieren, Wert steht in der Tabelle ThemeVariable). Spezifität
   `html:root` = (0,1,1). Dieser Block hier ist (0,2,0) und schlägt das -
   ABER nur für die Tokens, die er tatsächlich nennt. Die übrigen, darunter
   ausgerechnet `--mts-accent` (53 Leser allein in mts-theme-global.css) und
   die `--mts-cta-grad-*` des Kaufknopf-Verlaufs, kamen deshalb weiter vom
   Theme und wären bei einer Änderung nur hier STUMM auf dem Altwert stehen
   geblieben. Genau diese Falle. Sie sind jetzt mit aufgeführt.

   NICHT aufgeführt, weil live nachgezählt NULL Leser: --mts-brand* und
   --mts-shadow-brand-* (Alt-Namen des Themes). Wer sie in Benutzung nimmt,
   muss sie hier ergänzen.

   FOLGE, die bekannt sein muss: eine Änderung der Primärfarbe im
   Theme-Backend bleibt für alle hier genannten Tokens WIRKUNGSLOS, solange
   data-mts-brand="multicycle" gesetzt ist. Der Ton wird in dieser Datei
   geändert, nirgends sonst. */
:root[data-mts-brand="multicycle"],
[data-mts-brand="multicycle"] {
    --mts-c-primary:            #6d8c80;
    --mts-c-primary-rgb:        109, 140, 128;
    --mts-c-primary-soft:       #8ea49c;
    --mts-c-primary-soft-rgb:   142, 164, 156;
    --mts-c-primary-soft-2:     #809990;
    --mts-c-primary-dark:       #5b776c;
    --mts-c-primary-hover:      #5c796e;
    --mts-c-primary-active:     #516a60;
    --mts-c-primary-active-rgb: 81, 106, 96;
    --mts-c-primary-shadow-rgb: 70, 92, 83;
    --mts-c-primary-onbg:       #1a1a1a;
    /* Badge-Tint BEWUSST auf den Altwerten: die Formel liefert für die
       hellere Basis #f4f6f5 - praktisch Weiß, der grüne Anklang der
       "Hauptfiliale"-Pille wäre weg. Ein Tint ist keine Markenfläche, er
       fällt nicht unter "ein Ton". */
    --mts-c-badge-primary-bg:   #e6efe9;
    --mts-c-badge-primary-fg:   #33544a;

    /* ---- Tokens, die sonst das Theme (html:root, 0,1,1) pinnt ---------
       Ohne diesen Abschnitt bleibt der halbe Shop auf dem Altton stehen. */
    --mts-accent:               var(--mts-c-primary);
    --mts-accent-2:             var(--mts-c-primary-soft);
    --mts-accent-hover:         var(--mts-c-primary-hover);
    /* Die Marke ALS TEXT auf Weiss - bewusst NICHT der Flaechenton.
       #4d6b60 = 5,85:1, der Wert aus dem Kontrast-Fix vom 13.08.
       Er stand bisher nur unter `.mts-store` und `.mts-page`
       (mts-theme-global.css, Abschnitt TEXTKONTRAST) und war damit fuer
       alles ausserhalb dieser beiden Teilbaeume - PDP-Angebotsspalte,
       Listing-Karten, SmartFit - gar nicht erreichbar. Jetzt global. */
    --mts-accent-text:          #4d6b60;
    /* Kaufknopf-Verlauf. Gelesen von 5 Regeln im DB-Topic (HeadMarkUp der
       Story), nicht aus einer Datei dieses Moduls - deshalb hier und nicht
       dort. Der Verlauf läuft von der hellen Stufe auf den Markenton. */
    --mts-cta-grad-from:        var(--mts-c-primary-soft);
    --mts-cta-grad-to:          var(--mts-c-primary);
    --mts-cta-grad-from-hover:  var(--mts-c-primary-soft-2);
    --mts-cta-grad-to-hover:    var(--mts-c-primary-hover);
}

/* --- Header-Pill (BranchPickerHeader) --------------------------------- */
.mts-branch-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--mts-c-text);
    text-decoration: none !important;
    font-size: 0.85rem; line-height: 1;
    transition: color 0.15s;
}
.mts-branch-pill:hover { color: var(--mts-accent-text); }
.mts-branch-pill svg { flex-shrink: 0; }
.mts-branch-pill-label { font-weight: 600; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) { .mts-branch-pill-label { max-width: 16ch; } }
.mts-branch-pill-caret { opacity: 0.6; }

/* --- PDP-Stockbox ------------------------------------------------------ */
.mts-pdp-stockbox {
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    background: var(--mts-c-bg-soft);
    border: 1px solid var(--mts-c-border);
    border-radius: var(--mts-radius);
    color: var(--mts-c-text);
    font-size: 0.9rem;
}
.mts-pdp-stockbox-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.mts-pdp-stockbox-title { font-weight: 600; }
.mts-pdp-stockbox-aggregate { margin-left: auto; font-size: 0.78rem; color: var(--mts-c-muted); }
.mts-pdp-stockbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.mts-pdp-stockbox-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    background: #fff;
    border: 1px solid transparent;
}
.mts-pdp-stockbox-row.is-current { border-color: var(--mts-c-primary); background: var(--mts-c-primary-tint); }
.mts-pdp-stockbox-dot { width: 10px; height: 10px; border-radius: 50%; background: #ddd; }
.mts-state-in  .mts-pdp-stockbox-dot { background: var(--mts-c-success); }
.mts-state-low .mts-pdp-stockbox-dot { background: var(--mts-c-warning); }
.mts-state-out .mts-pdp-stockbox-dot { background: var(--mts-c-danger); }
.mts-pdp-stockbox-name { color: var(--mts-c-text); text-decoration: none; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mts-pdp-stockbox-name:hover { text-decoration: underline; }
.mts-pdp-stockbox-status { font-size: 0.78rem; color: var(--mts-c-muted); }
.mts-state-in  .mts-pdp-stockbox-status { color: var(--mts-c-success); }
.mts-state-low .mts-pdp-stockbox-status { color: var(--mts-c-warning); }
.mts-state-out .mts-pdp-stockbox-status { color: var(--mts-c-danger); }
.mts-pdp-stockbox-qty { font-size: 0.78rem; color: var(--mts-c-muted); white-space: nowrap; }
.mts-pdp-stockbox-foot { margin-top: 0.6rem; font-size: 0.8rem; }
/* Text auf hellem Grund -> Textton (2026-08-15). --mts-c-primary ist der
   FLÄCHENton und trägt auf Weiß nur 3,68:1. */
.mts-pdp-stockbox-foot a { color: var(--mts-accent-text); text-decoration: none; }
.mts-pdp-stockbox-foot a:hover { text-decoration: underline; }

/* --- Cart Pickup CTA (TASK-251 / Strom A) ----------------------------- */
/* Borderless, button-first. Der gruene Aktivieren-Button ist ein
   gleichwertiges Geschwister des orangen "Zur Kasse"-Buttons (#checkout):
   full-width Pille, gleiche Hoehe/Radius/Shadow-Sprache. */
.mts-cart-pickup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin: 0;            /* sitzt im row-gap-2-Flow der cart-footer-actions */
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font-size: 0.9rem;
    text-align: center;
}
.mts-cart-pickup--cart { margin-top: 0.5rem; }

/* Primaerer Aktivieren-Button: gruene Voll-Pille im #checkout-Stil. */
.mts-cart-pickup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    cursor: pointer;
    border: 0;
    font-family: inherit;
    font-weight: 600;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.mts-cart-pickup-btn-on {
    min-height: 52px;
    padding: 12px 28px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1.2;
    background: #16a34a;
    color: #fff;
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.30);
}
.mts-cart-pickup-btn-on:hover,
.mts-cart-pickup-btn-on:focus-visible { background: #15803d; color: #fff; }
.mts-cart-pickup-btn-icon { display: inline-flex; }

/* Deaktivieren-Button im Aktiv-Zustand: dezenter Outline-Pill, kein dominanter Block. */
.mts-cart-pickup-btn-off {
    min-height: 44px;
    padding: 10px 24px;
    border-radius: 999px;
    font-size: 0.92rem;
    background: #fff;
    color: #15803d;
    border: 1.5px solid #16a34a;
    box-shadow: none;
}
.mts-cart-pickup-btn-off:hover,
.mts-cart-pickup-btn-off:focus-visible { background: #f0fdf4; color: #166534; border-color: #15803d; }

/* Begleittext borderless (kein gelber Kasten mehr). */
.mts-cart-pickup-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.45rem;
    color: #475569;
    font-size: 0.84rem;
    line-height: 1.45;
    padding: 0 0.25rem;
}
.mts-cart-pickup-note strong { color: #1e293b; font-weight: 600; }
.mts-cart-pickup-note--inactive { color: #64748b; }
.mts-cart-pickup-note--active { color: #15803d; }
.mts-cart-pickup-note--active strong { color: #166534; }
.mts-cart-pickup-note-icon { flex: 0 0 auto; color: #16a34a; margin-top: 0.05rem; }
.mts-cart-pickup-note-text { text-align: left; }

/* "Andere Filiale waehlen" – nur im Aktiv-Zustand sichtbar (View-seitig konditional). */
.mts-cart-pickup-link {
    display: inline-block;
    color: #64748b;
    font-size: 0.82rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.mts-cart-pickup-link:hover { color: #16a34a; border-bottom-color: currentColor; }

/* Side-Cart (Offcanvas): kompakter, ohne grossen Shadow. */
.mts-cart-pickup--offcanvas { gap: 0.4rem; margin-top: 0.4rem; }
.mts-cart-pickup--offcanvas .mts-cart-pickup-btn-on {
    min-height: 46px;
    padding: 10px 22px;
    font-size: 0.95rem;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.26);
}
.mts-cart-pickup--offcanvas .mts-cart-pickup-btn-off { min-height: 40px; }

/* --- Reserve-Drawer (Phase 7c, shopify-style slide-in von rechts) ---- */
.mts-drawer[hidden] { display: none !important; }
.mts-drawer {
    position: fixed; inset: 0; z-index: 10600;
    display: flex; justify-content: flex-end;
    pointer-events: none;
}
.mts-drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.0);
    backdrop-filter: blur(0px);
    transition: background 0.35s ease, backdrop-filter 0.35s ease;
    pointer-events: none;
}
.mts-drawer.is-open { pointer-events: auto; }
.mts-drawer.is-open .mts-drawer-backdrop {
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}
.mts-drawer-panel {
    position: relative;
    width: 100%; max-width: 480px;
    height: 100%;
    background: #fff;
    box-shadow: -24px 0 56px rgba(15, 23, 42, 0.18);
    border-top-left-radius: 0;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.mts-drawer-head {
    background: linear-gradient(180deg, var(--mts-c-primary-tint) 0%, transparent 100%);
    padding-bottom: 1.4rem;
}
.mts-drawer.is-open .mts-drawer-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
    .mts-drawer-panel, .mts-drawer-backdrop { transition: none; }
}
.mts-drawer-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.5rem 1.1rem;
}
.mts-drawer-eyebrow {
    margin: 0 0 0.2rem; font-size: 0.72rem; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 700;
    /* Text auf hellem Grund -> Textton (2026-08-15). */
    color: var(--mts-accent-text);
}
.mts-drawer-head h3 {
    margin: 0; font-size: 1.35rem; font-weight: 700; color: #0f172a;
    line-height: 1.2;
}
.mts-drawer-close {
    border: 0; background: transparent; cursor: pointer;
    padding: 0.4rem; color: #64748b;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}
.mts-drawer-close:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; }

/* TASK-444: Such-/Standort-Toolbar im Reserve-Drawer. Eine Zeile (nowrap),
   Pill-Form mit leichtem grauem Rand, Akzente im Multicycle-Gruen
   (var(--mts-c-primary)). */
.mts-drawer-tools {
    display: flex; flex-wrap: nowrap; gap: 0.5rem; align-items: stretch;
    padding: 0 1.5rem 0.8rem;
}
.mts-drawer-search-wrap {
    position: relative; flex: 1 1 auto; min-width: 0;
    color: #94a3b8;
}
.mts-drawer-search-wrap svg {
    position: absolute; left: 0.8rem; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
input.mts-drawer-search {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    border-radius: 999px !important;
    background: #fff;
    padding: 0.55rem 1rem 0.55rem 2.3rem;
    font-size: 0.9rem;
    line-height: 1.3;
    height: auto;
    color: #0f172a;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input.mts-drawer-search:focus {
    border-color: var(--mts-c-primary) !important;
    box-shadow: 0 0 0 3px var(--mts-c-primary-ring);
}
input.mts-drawer-search::placeholder { color: #94a3b8; }
.mts-drawer-geo {
    display: inline-flex; align-items: center; gap: 0.4rem;
    flex: 0 0 auto;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    background: #fff;
    padding: 0.55rem 0.95rem;
    font-size: 0.85rem; font-weight: 600;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.mts-drawer-geo:hover {
    /* Rahmen bleibt Fläche, die Beschriftung bekommt den Textton (2026-08-15). */
    border-color: var(--mts-c-primary);
    color: var(--mts-accent-text);
    box-shadow: 0 0 0 3px var(--mts-c-primary-ring);
}
.mts-drawer-geo.is-active {
    background: var(--mts-c-primary);
    border-color: var(--mts-c-primary);
    color: #fff;
}
.mts-drawer-geo.is-loading { opacity: 0.6; cursor: wait; }
.mts-drawer-geo-err {
    margin: 0 1.5rem 0.6rem;
    padding: 0.6rem 0.85rem;
    background: rgba(217, 119, 6, 0.08);
    color: #92400e;
    border-radius: 0.6rem;
    font-size: 0.82rem;
}
.mts-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 0 1.5rem 1rem;
    display: flex; flex-direction: column; gap: 0.8rem;
}
.mts-drawer-foot {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.mts-drawer-footnote { margin: 0; font-size: 0.78rem; color: #64748b; line-height: 1.5; }
.mts-drawer-empty { color: #64748b; padding: 1rem 0; }
.mts-drawer-error {
    margin: 0; padding: 0.85rem 1rem;
    background: rgba(220, 38, 38, 0.06);
    color: #b91c1c;
    border-radius: 0.6rem;
    font-size: 0.88rem;
}

/* Reserve-Card (no border, no grey bg - clean shadow + hover lift) */
.mts-rc {
    background: #fff;
    border-radius: 14px;
    padding: 1.1rem 1.15rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}
.mts-rc::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: transparent;
    transition: background 0.18s ease;
}
.mts-rc:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10); }
.mts-rc.is-current::before { background: linear-gradient(180deg, var(--mts-c-primary-soft), var(--mts-c-primary)); }
.mts-rc-state-in::before    { background: #16a34a; }
.mts-rc-state-low::before   { background: #d97706; }
.mts-rc-state-out::before   { background: #94a3b8; }
.mts-rc-state-unknown::before { background: #cbd5e1; }
/* Reserve-Card-Header: Verfuegbarkeit links, Badges rechts.
   Bis 2026-07-14 hatte KEINE der beiden Seiten eine Flex-Vorgabe - beide waren
   damit gleich schrumpfbar. Standen rechts BEIDE Badges ("Aktuell ausgewaehlt"
   + "Hauptfiliale"), wurde der Status-Block so schmal, dass er INNERHALB
   umbrach: "Wenige / verfuegbar" und "1 / Stueck" jeweils zweizeilig.
   Der Bestand ist die Kerninformation der Karte - er behaelt seine natuerliche
   Breite (flex: 0 0 auto + nowrap), die Badges geben nach.

   Ziel ist EINE Zeile: "Wenige verfuegbar | 1 Stueck | Aktuell ausgewaehlt |
   Hauptfiliale". Reicht der Platz nicht (schmaler Viewport), sollen die Badges
   OBERHALB der Bestandsangabe landen, nicht darunter (User-Vorgabe 2026-07-14).
   Genau das macht `wrap-reverse`: es kehrt nur die Stapelrichtung der Zeilen um
   (Zeilen wachsen nach oben), NICHT die Reihenfolge innerhalb der Zeile. Im
   Einzeiler bleibt es also bei Bestand links / Badges rechts. */
.mts-rc-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.5rem; margin-bottom: 0.55rem; flex-wrap: wrap-reverse;
}
.mts-rc-state-pill {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.78rem; color: #475569; font-weight: 600;
    flex: 0 0 auto;
}
.mts-rc-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1;
    box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.25);
}
.mts-rc-state-in    .mts-rc-dot { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16); }
.mts-rc-state-low   .mts-rc-dot { background: #d97706; box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.16); }
.mts-rc-state-out   .mts-rc-dot { background: #94a3b8; }
.mts-rc-state-unknown .mts-rc-dot { background: #cbd5e1; }
.mts-rc-state-label { color: #1e293b; white-space: nowrap; }
.mts-rc-state-in    .mts-rc-state-label { color: #15803d; }
.mts-rc-state-low   .mts-rc-state-label { color: #b45309; }
/* TASK-731 - Filialtransfer. Die Karte traegt weiterhin ihre Bestands-Klasse
   (mts-rc-state-out/-unknown), damit nichts anderes umgedeutet wird; .is-transfer
   liegt DARUEBER und faerbt nur, was der Kunde als Aussage liest. Gruen waere
   gelogen (hier liegt keins), grau wäre es auch (er bekommt es ja).

   Seit 2026-08-15 in der MARKENFARBE statt im Bernstein von "wenige
   verfügbar" - und zwar über die Tokens, NICHT über [data-mts-brand]: so
   trägt jede Instanz ihre eigene Primärfarbe. Genau dieses Muster fährt der
   Listing-Chip 'elsewhere' (Zeile 2024-2036) schon, und er sagt dasselbe
   ("liegt woanders, du bekommst es") - gleiche Aussage, gleiche Farbe.

   Nebenbei besser lesbar: der Textton liegt auf mc bei #4d6b60, Kontrast gegen
   Weiß 5,85:1. Das bisherige #b45309 lag bei rund 5,0:1.
   NACHTRAG 2026-08-15: Die Regel las bis heute --mts-c-primary-dark. Der Token
   löst seit der Umstellung auf den Bike365-Ton auf #5b776c auf (4,89:1) - noch
   AA, aber nicht mehr der hier zugesicherte Wert. Sie liest jetzt
   --mts-accent-text und trägt damit wieder exakt die 5,85:1.

   'low' ("Wenige verfügbar", Zeile 473-479) BEHÄLT sein #d97706 - aus-
   drückliche Nutzervorgabe. Das ist eine Bestandsangabe zu Ware, die HIER
   liegt, und keine Transportzusage; die beiden dürfen sich ab jetzt
   unterscheiden.

   Die Regeln stehen NACH den Zustandsregeln, sonst gewinnt bei gleicher
   Spezifitaet die spaetere (Memory feedback_css_kaskade_drei_fallen). */
.mts-rc.is-transfer::before { background: var(--mts-c-primary); }
.mts-rc.is-transfer .mts-rc-dot { background: var(--mts-c-primary); box-shadow: 0 0 0 4px rgba(var(--mts-c-primary-rgb), 0.16); }
.mts-rc.is-transfer .mts-rc-state-label { color: var(--mts-accent-text); }
.mts-rc-eta {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.35;
}
.mts-rc-qty {
    font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px;
    background: rgba(15, 23, 42, 0.05); color: #475569;
    white-space: nowrap;   /* "1 Stueck" nie umbrechen */
}
.mts-rc-badges {
    display: inline-flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end;
    flex: 1 1 auto; min-width: 0;   /* gibt nach, statt den Bestand zu quetschen */
}
.mts-rc-badge {
    font-size: 0.66rem; font-weight: 700; padding: 0.18rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;   /* Umbruch ZWISCHEN Badges, nicht innerhalb */
}
.mts-rc-badge-current {
    background: linear-gradient(135deg, var(--mts-c-primary-soft) 0%, var(--mts-c-primary) 100%);
    color: var(--mts-c-primary-onbg);
}
.mts-rc-badge-primary { background: var(--mts-c-primary-dark); color: #fff; }
.mts-rc-name { margin: 0 0 0.3rem; font-size: 1.02rem; font-weight: 700; color: #0f172a; line-height: 1.25; }
.mts-rc-addr { margin: 0 0 0.6rem; font-size: 0.83rem; color: #64748b; line-height: 1.4; }
.mts-rc-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem; }
.mts-rc-tag {
    font-size: 0.7rem; padding: 0.2rem 0.55rem;
    border-radius: 999px; background: rgba(15, 23, 42, 0.045); color: #475569;
}
.mts-rc-actions { margin-top: 0.3rem; }
.mts-rc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.7rem 1rem;
    /* 44 px ist die Trefferflächen-Untergrenze auf dem Telefon. Rechnerisch kam
       der Knopf auf rund 37 px. Im Anfrage-Modus der Seitenleiste ist das der
       zentrale Bedienpunkt, und zwar elfmal untereinander - deshalb hier und
       nicht nur an der einen neuen Stelle. Die Optik ändert sich um wenige
       Pixel, weil die Polsterung bleibt. */
    min-height: 44px;
    border-radius: 10px;
    font-size: 0.92rem; font-weight: 600; line-height: 1;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.18s, background 0.18s;
    text-decoration: none;
    border: 0;
    font-family: inherit;
}
.mts-rc-btn-primary {
    background: linear-gradient(135deg, var(--mts-c-primary-soft) 0%, var(--mts-c-primary) 100%);
    color: var(--mts-c-primary-onbg);
    box-shadow: 0 1px 2px rgba(var(--mts-c-primary-rgb), 0.20), 0 4px 14px rgba(var(--mts-c-primary-rgb), 0.28);
    letter-spacing: 0.01em;
}
.mts-rc-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--mts-c-primary-rgb), 0.32), 0 8px 22px rgba(var(--mts-c-primary-rgb), 0.22);
    background: linear-gradient(135deg, var(--mts-c-primary-soft-2) 0%, var(--mts-c-primary-dark) 100%);
}
.mts-rc-btn-primary:active { transform: translateY(0); }
.mts-rc-btn-primary.is-loading { opacity: 0.6; cursor: progress; }
.mts-rc-btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.mts-rc-btn-ghost {
    background: transparent; color: #1e293b;
    box-shadow: inset 0 0 0 1.5px rgba(15, 23, 42, 0.12);
}
.mts-rc-btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #0f172a; }
.mts-rc-btn-disabled { background: rgba(15, 23, 42, 0.06); color: #94a3b8; cursor: not-allowed; }
/* Ein Hinweis, kein Bedienelement. Steht dort, wo sonst der Knopf sitzt, wenn
   eine Filiale weder Bestand meldet noch eine Telefonnummer hat - dann gibt es
   nichts zu bedienen, und die Karte soll das auch nicht behaupten. Bewusst ohne
   Rahmen, ohne Zeigerwechsel und ohne Hover. */
.mts-rc-note {
    margin: 0;
    padding: 0.7rem 1rem;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.3;
    color: var(--mts-c-muted, #64748b);
}
.mts-rc-err {
    margin-top: 0.6rem; padding: 0.5rem 0.7rem;
    background: rgba(220, 38, 38, 0.08); color: #b91c1c;
    border-radius: 0.5rem; font-size: 0.82rem;
}
.mts-rc-success { animation: mtsRcPulse 0.4s ease-out; }
@keyframes mtsRcPulse {
    0%   { transform: scale(0.98); }
    50%  { transform: scale(1.01); }
    100% { transform: scale(1); }
}
.mts-rc-success-box { text-align: center; padding: 0.8rem 0.4rem; }
.mts-rc-success-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(22, 163, 74, 0.12); color: #15803d;
    margin-bottom: 0.6rem;
}
.mts-rc-success-box h5 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; color: #15803d; }
.mts-rc-success-box p { margin: 0 0 0.25rem; font-size: 0.9rem; color: #1e293b; }
.mts-rc-success-box strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: 0.04em; }
.mts-rc-success-sub { color: #64748b !important; font-size: 0.82rem !important; }

/* Skeleton placeholder waehrend Verfuegbarkeit laedt */
.mts-drawer-skeleton { display: flex; flex-direction: column; gap: 0.8rem; }
.mts-skeleton-card {
    height: 145px; border-radius: 14px;
    background: linear-gradient(90deg, rgba(15,23,42,0.04) 0%, rgba(15,23,42,0.08) 50%, rgba(15,23,42,0.04) 100%);
    background-size: 220% 100%;
    animation: mtsShimmer 1.4s linear infinite;
}
@keyframes mtsShimmer {
    0%   { background-position: 220% 0; }
    100% { background-position: -20% 0; }
}

/* --- Modal: der Filial-Waehler ---------------------------------------- */
/*
   GELTUNGSBEREICH. Der gesamte `.mts-modal-*`-Namensraum gehoert AUSSCHLIESSLICH
   dem Filial-Waehler. Nachgeprueft am 2026-08-08, weil es die naheliegende
   Annahme ist, dass die Leasing- und Bestpreis-Dialoge mitbetroffen sind:
     - Leasing/Bestpreis laufen ueber `.mts-pd-modal*` (mts-theme-global.js:684
       baut das Markup, mts-theme-global.css:2508-2558 gestaltet es) - eine
       vollstaendig andere Klassenfamilie.
     - Der Reserve-Drawer laeuft ueber `.mts-drawer*`.
     - Im gerenderten HTML von Startseite, /filialen und /filialen/<slug>
       traegt KEIN anderes Element eine `mts-modal-`Klasse.
   Zwei Razor-Views erzeugen dieses Markup und muessen zusammen gepflegt werden:
   Views/Shared/Components/BranchPickerHeader/Default.cshtml (der aktive Pfad)
   und Views/Shared/Components/MtsModalsHost/Default.cshtml (zweite Quelle fuer
   die body_end_html_tag-Zone).
   Fremdreferenzen ausserhalb dieses Blocks: storefront.css:2288/2295
   (`.mts-modal-card` unter mts-zoom-110), storefront.css:1289 (max-height auf
   schmalen Breiten) und storefront.js (oeffnen/schliessen, Suchfilter,
   Distanz-Badge). Alle drei bleiben gueltig - Kartenklasse, Suchfeldklasse und
   Listenanker sind unveraendert.

   GESTALTUNGSABSICHT. Vorher: zwoelf gleich grosse, umrandete Boxen mit kleinem
   Bild und drei linksbuendigen Textzeilen - optisch eine Tabelle mit Fotos.
   Jetzt: randlose Foto-Kacheln (das Bild traegt die Flaeche, der Rahmen faellt
   weg), die eigene Filiale als breite Kachel ganz oben, Zustandsmarken auf dem
   Bild statt im Namen. Der Grund, warum das Foto NICHT allein tragen kann:
   alle elf Titelbilder zeigen denselben Motivtyp (Ladenflaeche mit Raedern) und
   unterscheiden die Filialen praktisch nicht - die Aussage traegt der Name,
   das Foto traegt die Flaeche. */
.mts-modal[hidden] { display: none !important; }
.mts-modal { position: fixed; inset: 0; z-index: 10500; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.mts-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(9, 14, 24, 0.44);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
}
.mts-modal-card {
    position: relative; width: 100%;
    /* 1040 -> 1280 (Nutzer 2026-08-09): erst ab dieser Breite passen bei der
       eigenen Filiale Bild, Anschrift UND die drei Handlungen nebeneinander,
       ohne dass eine Spalte unter 200px faellt. */
    max-width: 1280px; max-height: 88vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 24px;
    box-shadow: var(--mts-shadow-sm, 0 1px 2px rgba(15,23,42,0.06)), 0 32px 80px -24px rgba(9,14,24,0.34);
    overflow: hidden;
    animation: mtsModalIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mtsModalIn { from { transform: translateY(14px) scale(0.985); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.mts-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    /* Unten knapp: die Suchleiste bringt ihr eigenes oberes Polster mit. Beide
       Werte zusammen ergeben den Abstand - bei der 110-Prozent-Darstellung
       dieser Instanz wirkt jeder Wert rund ein Zehntel groesser. */
    padding: 1.5rem 1.6rem 0.35rem;
    border: 0;
}
.mts-modal-headings { min-width: 0; }
.mts-modal-head h3 {
    margin: 0;
    font-family: var(--mts-font-display, inherit);
    font-size: 1.45rem; font-weight: 700;
    color: var(--mts-ink, #0b1220); letter-spacing: -0.02em; line-height: 1.15;
}
/* Der Einleitungssatz sass bisher IM Scrollbereich (erste Zeile ueber der
   Liste) und war nach der ersten Kachelreihe fort. Er gehoert zur Ueberschrift. */
.mts-modal-intro {
    margin: 0.35rem 0 0;
    font-size: 0.94rem; line-height: 1.45;
    color: var(--mts-ink-soft, #4a5568);
    max-width: 62ch;
}
.mts-modal-close {
    border: 0; background: transparent; cursor: pointer;
    width: 40px; height: 40px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--mts-ink-muted, #6b7280); border-radius: 999px;
    transition: background 0.18s ease, color 0.18s ease;
}
.mts-modal-close:hover { background: rgba(9,14,24,0.06); color: var(--mts-ink, #0b1220); }
.mts-modal-close:focus-visible {
    outline: 3px solid var(--mts-c-primary);
    outline-offset: 2px;
    color: var(--mts-ink, #0b1220);
}

/* padding-top bewusst 0: die Suchleiste klebt mit position:sticky an der
   Oberkante dieses Scrollbereichs. Mit oberem Padding wuerde Inhalt in dem
   Streifen darueber sichtbar durchlaufen. */
.mts-modal-body { padding: 0 1.6rem 1.4rem; overflow-y: auto; }

.mts-modal-searchbar {
    position: sticky; top: 0; z-index: 5;
    margin: 0 -1.6rem;
    padding: 0.9rem 1.6rem 0.9rem;
    background: linear-gradient(to bottom, #fff 0, #fff 74%, rgba(255,255,255,0) 100%);
}
.mts-modal-search {
    width: 100%; box-sizing: border-box;
    /* Optik der Kopf-Suchleiste uebernommen (Nutzer 2026-08-09). Dort gemessen:
       weisser Grund, 1px Kontur in #6d8c80, Radius 32px, Innenabstand 16/24.
       Zwei Suchfelder auf derselben Seite, die verschieden aussehen, lesen sich
       wie zwei verschiedene Funktionen. */
    padding: 0.85rem 1.1rem 0.85rem 2.9rem;
    background-color: #fff;
    /* Rückfall auf die Marke der INSTANZ, nicht auf Bike365-Grün (2026-08-15).
       --b365-accent kommt aus dem Multicycle-Theme und existiert nur dort; auf
       der Bidex-Demo griff bis heute der harte Rückfall #6d8c80 und zeichnete
       eine grüne Kontur in einen türkisen Shop. Gemessen an 3 Stellen
       (Suchfeld, Rollbalken zweimal). Gleiche Fehlerklasse wie die harten
       Hexwerte, nur eine Ebene weiter innen. */
    border: 1px solid var(--b365-accent, var(--mts-accent));
    border-radius: 32px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--mts-ink, #0b1220);
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1.05rem center;
    background-size: 18px 18px;
    box-shadow: none;
}
.mts-modal-search::placeholder { color: var(--mts-ink-muted, #6b7280); }
.mts-modal-search:focus {
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 0 3px var(--mts-c-primary-ring), inset 0 0 0 1.5px var(--mts-c-primary);
}

/* Suchfeld und Standort-Umschalter teilen sich eine Zeile: das Feld nimmt den
   Rest, der Knopf behaelt seine Breite. */
.mts-modal-searchrow { display: flex; align-items: center; gap: 0.6rem; }
.mts-modal-searchrow .mts-modal-search { flex: 1 1 auto; min-width: 0; }

/* Umschalter "In der Naehe". Der aktive Zustand haengt am ARIA-Attribut und
   nicht an einer eigenen Klasse - so KANN die Optik nicht auseinanderlaufen
   mit dem, was ein Bildschirmleser ansagt. */
.mts-modal-geo {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 0.4rem;
    /* Ohne Rahmen und ohne Flaeche (Nutzer 2026-08-09). Er steht neben einem
       Suchfeld, das jetzt selbst eine Kontur traegt - zwei umrandete Elemente
       nebeneinander lesen sich als zwei gleichrangige Eingaben. Der Knopf ist
       aber eine Handlung, keine zweite Eingabe. */
    padding: 0.72rem 0.6rem;
    border: 0;
    border-radius: 14px;
    background-color: transparent;
    box-shadow: none;
    color: var(--mts-ink-muted, #6b7280);
    font-family: inherit; font-size: 0.88rem; font-weight: 600; line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.mts-modal-geo:hover {
    background-color: transparent;
    box-shadow: none;
    color: var(--mts-accent-text);
}
.mts-modal-geo:focus-visible {
    outline: 3px solid var(--mts-c-primary);
    outline-offset: 2px;
}
.mts-modal-geo[aria-pressed="true"] {
    background-color: var(--mts-c-primary);
    color: #fff;
    box-shadow: none;
}
.mts-modal-geo.is-loading, .mts-modal-geo[disabled] { opacity: 0.6; cursor: wait; }

/* Status-/Fehlerzeile unter der Suchleiste. Sie ist eine aria-live-Region und
   steht deshalb immer im DOM; leer heisst hier "keine Hoehe", nicht "hidden". */
.mts-modal-geo-status {
    margin: 0.55rem 0 0;
    font-size: 0.85rem; line-height: 1.35;
    color: var(--mts-ink-muted, #6b7280);
}
.mts-modal-geo-status:empty { display: none; }
.mts-modal-geo-status.is-error { color: var(--mts-c-danger, #dc2626); }

@media (max-width: 520px) {
    /* Der Text bleibt fuer Bildschirmleser stehen - er IST der Name des
       Knopfes. display:none machte ihn namenlos. */
    .mts-modal-geo-label {
        position: absolute; width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .mts-modal-geo { padding: 0.72rem 0.8rem; }
}

/* --- Kachelraster ------------------------------------------------------ */
.mts-modal-branch-list {
    list-style: none; margin: 0; padding: 0.15rem 0 0.4rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: 1.35rem 1.15rem;
    align-content: start;
}
.mts-modal-branch-item { border-radius: 18px; min-width: 0; }
/* Der Suchfilter (storefront.js:102-114) blendet ueber das hidden-Attribut aus.
   Diese Zeile haelt das gegen jede spaetere display-Regel auf dem Element. */
.mts-modal-branch-item[hidden] { display: none !important; }

.mts-modal-branch-btn {
    width: 100%; height: 100%; text-align: left;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 18px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    display: flex; flex-direction: column; gap: 0.68rem;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.mts-modal-branch-btn:hover { transform: translateY(-2px); }
.mts-modal-branch-btn:focus-visible {
    outline: 3px solid var(--mts-c-primary);
    outline-offset: 4px;
}

/* Bildflaeche. 8:5 ist das Seitenverhaeltnis der Quelle (1200x750) - bei 16:9
   schnitt der cover-Zuschnitt oben und unten je rund 5 Prozent weg. */
.mts-modal-branch-media {
    position: relative;
    display: grid; place-items: center;
    width: 100%; aspect-ratio: 8 / 5;
    border-radius: 14px;
    background: var(--mts-c-bg-soft, #f9fafb);
    color: var(--mts-c-primary);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(9,14,24,0.06);
}
.mts-modal-branch-media > svg { width: 34px; height: 34px; opacity: 0.45; }
/* Ruhige Fuellfarbe, solange das Bild laedt. Die Bilder tragen loading="lazy"
   und starten erst, wenn das Modal sichtbar wird - ohne diese Flaeche waere der
   erste Blick auf zwoelf weisse Loecher. */
.mts-modal-branch-media.has-image {
    background: linear-gradient(160deg, #eef1f0 0%, #e2e8e5 100%);
}
.mts-modal-branch-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mts-modal-branch-btn:hover .mts-modal-branch-media img { transform: scale(1.045); }

/* Zustandsmarken liegen auf dem Bild, nicht im Namen: der Name bleibt dadurch
   ein Textblock und bricht bei langen Bezeichnungen sauber um. Beide Marken
   sind deckend, damit ihr Kontrast nicht vom Foto darunter abhaengt. */
.mts-modal-branch-flags {
    position: absolute; left: 0.55rem; top: 0.55rem; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    max-width: calc(100% - 3.2rem);
}
.mts-modal-branch-primary,
.mts-modal-branch-active {
    font-size: 0.66rem;
    padding: 0.22rem 0.52rem;
    border-radius: 9999px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.25;
    white-space: nowrap;
}
/* Weiß auf --mts-c-primary-dark: seit 2026-08-15 #5b776c (4,88:1), davor
   #4d6b60 (5,85:1), 9,5:1 im
   neutralen White-Label-Default (#33485c). Auf --mts-c-primary waeren es 4,3:1
   und damit unter AA fuer diese Schriftgroesse - deshalb die dunkle Variante. */
.mts-modal-branch-active {
    background: var(--mts-c-primary-dark);
    color: #fff;
}
.mts-modal-branch-primary {
    background: rgba(255,255,255,0.94);
    color: var(--mts-ink, #0b1220);
    box-shadow: 0 1px 3px rgba(9,14,24,0.18);
}
.mts-modal-branch-check {
    position: absolute; right: 0.55rem; top: 0.55rem; z-index: 2;
    width: 26px; height: 26px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mts-c-primary-dark); color: #fff;
    box-shadow: 0 2px 8px rgba(9,14,24,0.3);
}
/* Portraet des Ansprechpartners, nur auf der eigenen Filiale. Das Bild ist
   hochkant (766x900) und traegt am unteren Rand einen weissen Balken mit dem
   eingebrannten Namen - der ist in dieser Groesse nicht lesbar und wird ueber
   object-position bewusst herausgeschnitten. Es sitzt INNERHALB der Bildflaeche:
   ein ueberstehender Kreis wuerde vom overflow:hidden der Kachel abgeschnitten,
   das dort den Bildradius und den Hover-Zoom haelt. */
.mts-modal-branch-face {
    position: absolute; left: 0.7rem; bottom: 0.7rem; z-index: 3;
    /* 54 -> 84px (Nutzer 2026-08-09): das Portrait traegt einen eingebrannten
       Namensbalken, der bei 54px nicht lesbar war. */
    width: 84px; height: 84px; border-radius: 999px;
    overflow: hidden; background: #fff;
    box-shadow: 0 0 0 3px #fff, 0 8px 20px -8px rgba(9,14,24,0.55);
}
/* Spezifitaet ist hier tragend, nicht kosmetisch: `.mts-modal-branch-media img`
   (Klasse+Typ) legt jedes Bild in der Kachel absolut auf die volle Flaeche und
   skaliert es beim Hover - das Portrait ist ebenfalls ein img IN dieser Flaeche
   und wuerde beides mitnehmen. Beide Regeln unten stehen deshalb bewusst eine
   Stufe hoeher und nicht nur weiter unten in der Datei. */
.mts-modal-branch-media .mts-modal-branch-face img {
    position: static;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 20%;
    display: block;
    transition: none;
}
.mts-modal-branch-btn:hover .mts-modal-branch-media .mts-modal-branch-face img { transform: none; }

.mts-modal-branch-info { display: flex; flex-direction: column; gap: 0.2rem; padding: 0 0.15rem; min-width: 0; }
.mts-modal-branch-name {
    display: block;
    font-family: var(--mts-font-display, inherit);
    font-weight: 600; color: var(--mts-ink, #0b1220);
    font-size: 1rem; line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    transition: color 0.18s ease;
}
.mts-modal-branch-btn:hover .mts-modal-branch-name { color: var(--mts-accent-text); }
/* Strasse, darunter PLZ und Ort - zwei eigene Zeilen (Nutzer-Vorgabe 2026-08-09).
   Vorher stand beides in einer Zeile mit Mittelpunkt-Trenner; bei langen
   Strassennamen brach das unguenstig um und las sich nicht wie eine Anschrift. */
.mts-modal-branch-where {
    display: block;
    font-size: 0.875rem; line-height: 1.42;
    color: var(--mts-ink-muted, #6b7280);
}
.mts-modal-branch-street { display: block; font-weight: 400; }
.mts-modal-branch-city { display: block; }
/* Distanz-Badge. storefront.js:947-957 erzeugt dieses Element bei der
   Naehe-Sortierung und haengt es in .mts-modal-branch-name - bis heute gab es
   dafuer KEINE Regel, es erschien also als nackter Fliesstext mitten im Namen. */
.mts-modal-branch-distance {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem; font-weight: 700;
    color: var(--mts-accent-text);
    background: var(--mts-c-primary-tint);
    border-radius: 9999px;
    vertical-align: 0.08em;
    text-transform: none; letter-spacing: 0;
}

/* --- Die eigene Filiale: breite Kachel, immer als erste ---------------- */
/* Sie beantwortet die Frage "wo bin ich gerade" ohne Suchen. Die Reihenfolge
   kommt server-seitig (BranchPickerHeader/Default.cshtml), die Breite hier. */
/* RAHMEN UND FLAECHE LIEGEN AM <li>, NICHT AM <button> (Nutzer 2026-08-09).
   Vorher trug der Knopf beides - und weil die Handlungsleiste sein GESCHWISTER
   ist (ein <a> im <button> waere ungueltiges Markup), stand sie sichtbar
   ausserhalb der Umrandung. Der Rahmen umschliesst jetzt beides. */
.mts-modal-branch-item.is-current {
    grid-column: 1 / -1;
    /* WEISS, nicht getoent: die getoente Flaeche liess die eigene Filiale wie
       eine deaktivierte Kachel aussehen statt wie die ausgewaehlte. */
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--mts-c-primary, #6d8c80);
    border-radius: 20px;
    padding: 0.7rem;
}
.mts-modal-branch-item.is-current .mts-modal-branch-btn {
    flex-direction: row; align-items: center;
    gap: 1.3rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 16px;
}
.mts-modal-branch-item.is-current .mts-modal-branch-btn:hover { transform: none; }
.mts-modal-branch-item.is-current .mts-modal-branch-media {
    flex: 0 0 auto;
    width: 38%; max-width: 380px;
}
.mts-modal-branch-item.is-current .mts-modal-branch-info { padding-right: 0.6rem; }
.mts-modal-branch-item.is-current .mts-modal-branch-name { font-size: 1.3rem; font-weight: 700; }
.mts-modal-branch-item.is-current .mts-modal-branch-where { font-size: 0.95rem; margin-top: 0.15rem; }

/* --- Eintrag ohne Standort (z.B. "Onlineshop") ------------------------- */
/* Er ist keine Filiale ohne Foto, sondern etwas anderes - und sieht deshalb
   anders aus statt defekt. */
.mts-modal-branch-item.is-online .mts-modal-branch-media {
    background: var(--mts-c-bg-soft, #f9fafb);
    color: var(--mts-ink-muted, #6b7280);
}
.mts-modal-branch-item.is-online .mts-modal-branch-media > svg { width: 30px; height: 30px; opacity: 0.55; }

/* --- Suche ohne Treffer ------------------------------------------------ */
/* storefront.js:102-114 versteckt nur die Eintraege; ohne diese Regel blieb eine
   leere weisse Flaeche ohne Hinweis stehen. Reines CSS, damit dafuer kein
   Eingriff in storefront.js noetig ist. `:has()` ist in dieser Datei bereits
   etabliert (storefront.css:1319). */
.mts-modal-branch-empty {
    display: none;
    margin: 0.4rem 0 0.6rem;
    padding: 2.4rem 1rem;
    text-align: center;
    font-size: 0.95rem; line-height: 1.5;
    color: var(--mts-ink-muted, #6b7280);
}
.mts-modal-branch-list:not(:has(> li:not([hidden]))) + .mts-modal-branch-empty { display: block; }

/* Alte Markup-Varianten: als No-Op belassen, falls eine Seite noch aus dem
   OutputCache mit aelterem HTML ausgeliefert wird. */
.mts-modal-branch-addr { display: block; font-size: 0.88rem; color: var(--mts-ink-muted, #6b7280); line-height: 1.4; }
.mts-modal-branch-tags { display: none; }

.mts-modal-foot {
    padding: 0.85rem 1.6rem 1.25rem;
    border: 0;
    border-top: 1px solid rgba(9,14,24,0.06);
    background: transparent;
    display: flex; justify-content: flex-end;
}
.mts-modal-allbranches {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.92rem; font-weight: 600;
    color: var(--mts-accent-text);
    text-decoration: none;
    border-radius: 9999px;
    transition: background 0.18s ease, gap 0.18s ease;
}
.mts-modal-allbranches:hover {
    background: var(--mts-c-primary-tint);
    color: var(--mts-accent-text);
    gap: 0.7rem;
    text-decoration: none;
}
.mts-modal-allbranches:focus-visible {
    outline: 3px solid var(--mts-c-primary);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .mts-modal { padding: 0.6rem; }
    .mts-modal-card { border-radius: 20px; }
    .mts-modal-head { padding: 1.2rem 1.15rem 0.7rem; }
    .mts-modal-body { padding: 0 1.15rem 1.1rem; }
    .mts-modal-searchbar { margin: 0 -1.15rem; padding: 0.75rem 1.15rem; }
    .mts-modal-foot { padding: 0.75rem 1.15rem 1rem; }
    .mts-modal-branch-list { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1.1rem 0.85rem; }
    .mts-modal-branch-item.is-current .mts-modal-branch-btn { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .mts-modal-branch-item.is-current .mts-modal-branch-media { width: 100%; max-width: none; }
    .mts-modal-branch-item.is-current .mts-modal-branch-name { font-size: 1.15rem; }
    .mts-modal-branch-item.is-current .mts-modal-branch-info { padding: 0 0.35rem 0.35rem; }
    .mts-modal-branch-face { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .mts-modal-card { animation: none; }
    .mts-modal-branch-btn,
    .mts-modal-branch-media img,
    .mts-modal-branch-name,
    .mts-modal-allbranches { transition: none; }
    .mts-modal-branch-btn:hover { transform: none; }
    .mts-modal-branch-btn:hover .mts-modal-branch-media img { transform: none; }
}

/* === Storefront Pages: Filialfinder + Detail (Apple-style polish) ====== */
/* Design tokens, lokal scoped damit der Rest der Storefront-Komponenten
   nicht beeinflusst wird. */
.mts-page {
    /* --mts-ink, --mts-ink-soft, --mts-ink-muted und --mts-surface standen hier
       ein zweites Mal, byte-gleich zum `:root`-Block dieser Datei. Entfernt am
       2026-08-03 (TASK-594.01 AC#5: genau eine Quelle je Variable).

       Beleg, dass die Entfernung nichts verschiebt: `:root` ist `<html>` und
       damit Vorfahre jedes `.mts-page`; Custom-Properties erben. Fuer diese vier
       Namen gibt es auf beiden Instanzen GENAU ZWEI Definierer, und beide stehen
       in dieser Datei (`:root` und `.mts-page`) - kein Theme, kein Marken-Layer,
       keine Story mischt mit. Am 2026-08-03 auf /filialen gemessen (die Seite,
       die `.mts-page` traegt): #0b1220 / #4a5568 / #6b7280 / #ffffff an html,
       body und .mts-page - dreimal derselbe Wert.

       --mts-line, --mts-line-soft, --mts-surface-2, --mts-accent, --mts-accent-2
       und --mts-radius-lg BLEIBEN hier: sie sind keine Duplikate, sondern
       Bereichs-Ueberschreibungen mit einem ANDEREN Wert als die globale Ebene
       (--mts-line 0,08-Alpha statt #e5e5e7, --mts-radius-lg 20px statt 24px) bzw.
       eine bewusste Rueckbindung an die White-Label-Kette (--mts-accent zeigt auf
       --mts-c-primary, nicht auf das, was ein fremdes Theme unter --mts-accent
       versteht). Beides sauber aufzuloesen heisst, eigene Namen zu vergeben -
       das ist der Token-Kontrakt (TASK-594.01 AC#1), nicht diese Aufraeumung. */
    --mts-line:       rgba(15, 23, 42, 0.08);
    --mts-line-soft:  rgba(15, 23, 42, 0.04);
    --mts-surface-2:  #f5f7fa;
    --mts-accent:     var(--mts-c-primary);
    --mts-accent-2:   var(--mts-c-primary-soft);
    --mts-radius-lg:  20px;
    --mts-radius-md:  14px;
    --mts-radius-sm:  10px;
    --mts-shadow-1:   0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -10px rgba(15,23,42,0.10);
    --mts-shadow-2:   0 1px 2px rgba(15,23,42,0.06), 0 24px 60px -22px rgba(15,23,42,0.22);
    max-width: 1200px;
    margin: 2.5rem auto 4rem;
    padding: 0 1.25rem;
    color: var(--mts-ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Hero / Page-Head -------------------------------------------------- */
.mts-page-head {
    margin: 1.5rem 0 2.25rem;
    padding: 2.25rem 2.5rem 2rem;
    border-radius: var(--mts-radius-lg);
    background:
        radial-gradient(ellipse 75% 80% at 12% 0%, rgba(var(--mts-c-primary-soft-rgb),0.14), transparent 60%),
        radial-gradient(ellipse 70% 70% at 100% 0%, rgba(var(--mts-c-primary-rgb),0.10), transparent 65%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid var(--mts-line);
    position: relative;
    overflow: hidden;
}
.mts-page-head::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--mts-c-primary-soft-rgb),0.10) 0%, transparent 65%);
    pointer-events: none;
}
/* Textton statt Flächenton: kleine Versalien auf hellem Seitenkopf - der Punkt
   im ::before darunter bleibt Fläche und behält --mts-accent. */
.mts-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mts-accent-text);
    margin: 0 0 0.85rem;
}
.mts-page-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mts-accent);
    box-shadow: 0 0 0 4px rgba(var(--mts-c-primary-rgb),0.22);
}
.mts-page-title {
    font-size: clamp(2rem, 3.4vw, 2.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 0.6rem;
    color: var(--mts-ink);
}
.mts-page-lead {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.55;
    color: var(--mts-ink-soft);
    max-width: 60ch;
    margin: 0;
}

/* Filter Bar -------------------------------------------------------- */
.mts-tag-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 2rem;
    padding: 0;
    border: 0;
}
.mts-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--mts-line);
    border-radius: 9999px;
    background: var(--mts-surface);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--mts-ink);
    text-decoration: none !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.mts-tag-pill:hover {
    background: var(--mts-surface-2);
    border-color: rgba(15,23,42,0.16);
    color: var(--mts-ink);
}
.mts-tag-pill.is-active {
    background: var(--mts-ink);
    border-color: var(--mts-ink);
    color: #fff;
}
.mts-tag-pill.is-active:hover {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

/* Service-Tag-Chips: farbcodiert pro Service-Typ ------------------- */
.mts-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.65rem;
    background: #eef2f7;
    color: #1f2937;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 9999px;
}
/* Sprachneutrale Heuristik per Attribut-Selector — der View liefert den
   Service-Tag-Text direkt, also greifen wir auf den Inhalt indirekt zu via
   class-Toggle wäre sauberer; hier matchen wir den deutschen Standard. */
.mts-tag-chip:where([data-tag="Verkauf"], :is(span:where(:not([data-tag])):where(:where([data-tag])))) { background: #e0f2fe; color: #075985; }
/* Fallback farb-codiert via JS / data-tag — siehe storefront.js (Phase D.2) */
.mts-tag-chip[data-tag="Verkauf"]      { background: #e0f2fe; color: #075985; }
/* BEWUSST hart kodiert, nicht tokenisiert (zurueckgedreht 2026-08-15).
   Die sechs Chips sind eine geschlossene KATEGORIE-Palette: jede Leistungsart
   trägt ihren eigenen Farbton, und "Werkstatt" ist grün, weil Werkstatt grün
   ist - nicht weil die Marke grün ist. Hängt man einen davon an die
   Markenfarbe, folgt er auf einer fremden Instanz der Marke, waehrend die
   fuenf Geschwister stehen bleiben: aus einem System wird ein Ausreisser.
   Der Zufall, dass die Werte byte-genau dem Marken-Tint entsprachen, ist keine
   Aussage über ihre Bedeutung. */
.mts-tag-chip[data-tag="Werkstatt"]    { background: #e6efe9; color: #33544a; }
.mts-tag-chip[data-tag="Leasing"]      { background: #ecfccb; color: #3f6212; }
.mts-tag-chip[data-tag="Versicherung"] { background: #ede9fe; color: #5b21b6; }
.mts-tag-chip[data-tag="Probefahrt"]   { background: #cffafe; color: #155e75; }
.mts-tag-chip[data-tag="Service"]      { background: #ffe4e6; color: #9f1239; }

/* Empty-State ------------------------------------------------------- */
.mts-empty {
    text-align: center;
    padding: 4.5rem 1.5rem;
    color: var(--mts-ink-muted);
    background: var(--mts-surface-2);
    border-radius: var(--mts-radius-lg);
    border: 1px dashed var(--mts-line);
}
.mts-empty svg { color: var(--mts-ink-muted); opacity: 0.6; margin-bottom: 0.85rem; }
.mts-empty h2 { margin: 0 0 0.4rem; color: var(--mts-ink); font-size: 1.25rem; font-weight: 600; }
.mts-empty p { margin: 0; }

/* Branch Cards ------------------------------------------------------ */
.mts-branch-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
.mts-branch-card {
    position: relative;
    background: var(--mts-surface);
    border: 1px solid var(--mts-line);
    border-radius: var(--mts-radius-lg);
    box-shadow: var(--mts-shadow-1);
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.75rem 1.5rem;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.22s cubic-bezier(.4,0,.2,1), border-color 0.22s;
}
.mts-branch-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mts-shadow-2);
    border-color: rgba(15,23,42,0.12);
}
.mts-branch-card.is-current {
    border-color: var(--mts-accent);
    box-shadow: 0 0 0 1px var(--mts-accent), var(--mts-shadow-2);
}
.mts-branch-card.is-current::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mts-accent), var(--mts-accent-2));
    z-index: 1;
}
/* Filialfoto als Kartenkopf ---------------------------------------------
   Die Karte traegt `padding: 1.75rem 1.75rem 1.5rem`. Ein Bild darin waere
   allseitig eingerueckt und saehe aus wie ein Versehen. Die negativen
   Aussenabstaende ziehen es exakt um diese Polsterung wieder heraus, oben
   bis an die Kante - deshalb muessen die drei Werte zum padding passen.
   `overflow: hidden` liegt bereits auf der Karte, die Rundung greift also.
   Die feste `aspect-ratio` haelt die Hoehe VOR dem Laden: ohne sie wachsen
   alle Karten beim Nachladen der Bilder und die Seite springt. */
.mts-branch-card-media {
    margin: -1.75rem -1.75rem 1.25rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef2f0;
}
.mts-branch-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.mts-branch-card:hover .mts-branch-card-media img { transform: scale(1.04); }
/* Karte ohne Foto: gleiche Flaeche, anderes Motiv. Ohne sie begann die Karte
   direkt mit der Ueberschrift und wirkte im Raster wie ein Fehler. */
.mts-branch-card-media.is-empty {
    display: grid; place-items: center;
    background: linear-gradient(160deg, #eef1f0 0%, #e2e8e5 100%);
    color: var(--mts-accent);
}
.mts-branch-card-media.is-empty svg { width: 40px; height: 40px; opacity: 0.45; }

/* Stretched-Link-Pattern: Title-Link spannt sich unsichtbar ueber die ganze Card.
   Inline-Links (Phone/Email/Details) bleiben darueber klickbar via z-index. */
.mts-branch-card-title-link {
    color: inherit;
    text-decoration: none !important;
}
/* Tastaturfokus. Das Stretched-Link-Muster laesst den Standard-Fokusring am
   Textfragment der Ueberschrift haengen - er sagt dann nicht, dass die ganze
   Karte das Ziel ist, und verschwindet auf der aktiven Karte fast im Rahmen.
   Der Ring gehoert an die Karte. */
.mts-branch-card:has(.mts-branch-card-title-link:focus-visible) {
    outline: 3px solid var(--mts-accent);
    outline-offset: 3px;
}
.mts-branch-card-title-link:focus-visible { outline: none; }
/* Rueckfall fuer Browser ohne :has() - dort bleibt der Ring am Text, aber
   sichtbar. Bewusst KEIN outline:none ohne Ersatz. */
@supports not selector(:has(*)) {
    .mts-branch-card-title-link:focus-visible { outline: 3px solid var(--mts-accent); outline-offset: 2px; }
}
.mts-branch-card-title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.mts-branch-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.35rem;
}
.mts-branch-card-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--mts-ink);
    flex: 1;
    min-width: 0;
    text-wrap: balance;
}
.mts-branch-card-name a { color: inherit; text-decoration: none !important; }
/* Kartentitel ist Text auf weißer Karte - Textton, nicht Flächenton. */
.mts-branch-card:hover .mts-branch-card-name a { color: var(--mts-accent-text); }
.mts-branch-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}
.mts-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.mts-badge-primary  { background: var(--mts-c-badge-primary-bg); color: var(--mts-c-badge-primary-fg); }
.mts-badge-current  { background: var(--mts-accent); color: #fff; }
.mts-badge-distance { background: #eef2ff; color: #3730a3; }

.mts-branch-card-address {
    font-style: normal;
    margin: 1rem 0 0;
    color: var(--mts-ink-soft);
    font-size: 0.92rem;
    line-height: 1.5;
    padding-left: 1.5rem;
    background-repeat: no-repeat;
    background-position: 0 0.18rem;
    background-size: 1rem 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.mts-branch-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mts-line-soft);
    font-size: 0.92rem;
    position: relative;
}
.mts-branch-card-meta::before {
    content: 'Kontakt';
    position: absolute;
    top: -0.5rem;
    left: 0;
    background: var(--mts-surface);
    padding: 0 0.5rem 0 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mts-ink-muted);
}
.mts-branch-card-meta dt { display: none; }
.mts-branch-card-meta dd {
    margin: 0;
    padding-left: 1.7rem;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 1rem 1rem;
    line-height: 1.4;
}
.mts-branch-card-meta dt:has(+ dd:first-of-type) + dd,
.mts-branch-card-meta dd:nth-of-type(1) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.mts-branch-card-meta dd:nth-of-type(2) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.mts-branch-card-meta a {
    color: var(--mts-ink);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
    position: relative;
    z-index: 2;
}
/* Telefon-/Mail-Link ist Text auf weißer Karte - Textton, nicht Flächenton. */
.mts-branch-card-meta a:hover { color: var(--mts-accent-text); }

.mts-branch-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mts-line-soft);
    position: relative;
}
.mts-branch-card-tags::before {
    content: 'Vor Ort';
    position: absolute;
    top: -0.5rem;
    left: 0;
    background: var(--mts-surface);
    padding: 0 0.5rem 0 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mts-ink-muted);
}

.mts-branch-card-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: auto 0 0;
    padding-top: 1.5rem;
    background: transparent;
    border-top: 0;
    position: relative;
    z-index: 2;
}

/* Buttons ---------------------------------------------------------- */
.mts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 9999px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
    text-decoration: none !important;
    line-height: 1.15;
    font-family: inherit;
    white-space: nowrap;
}
.mts-btn:active { transform: scale(0.98); }
.mts-btn-primary {
    background: linear-gradient(135deg, var(--mts-c-primary-soft) 0%, var(--mts-c-primary) 100%);
    color: var(--mts-c-primary-onbg);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(var(--mts-c-primary-rgb),0.18), 0 4px 14px rgba(var(--mts-c-primary-rgb),0.26);
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: 0.01em;
}
.mts-btn-primary:hover {
    background: linear-gradient(135deg, var(--mts-c-primary-soft-2) 0%, var(--mts-c-primary-dark) 100%);
    border-color: transparent;
    color: var(--mts-c-primary-onbg);
    box-shadow: 0 4px 14px rgba(var(--mts-c-primary-rgb),0.32), 0 8px 22px rgba(var(--mts-c-primary-rgb),0.22);
    transform: translateY(-1px);
}
.mts-btn-current {
    background: var(--mts-c-primary-tint);
    color: var(--mts-accent-text);
    border-color: var(--mts-c-primary-ring);
    cursor: default;
    flex: 1 1 auto;
    min-width: 0;
}
.mts-btn-ghost {
    background: transparent;
    color: var(--mts-ink-soft);
    border-color: var(--mts-line);
    flex: 0 0 auto;
    padding: 0.7rem 1rem;
}
.mts-btn-ghost:hover {
    background: var(--mts-surface-2);
    border-color: rgba(15,23,42,0.15);
    color: var(--mts-ink);
}

/* --- Detail-Page ------------------------------------------------------ */
.mts-breadcrumb {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--mts-ink-muted);
    margin: 0 0 1.5rem;
    padding: 0;
}
.mts-breadcrumb a { color: var(--mts-ink-muted); text-decoration: none; transition: color 0.15s; }
/* Breadcrumb ist Fließtext auf weißem Grund - Textton, nicht Flächenton. */
.mts-breadcrumb a:hover { color: var(--mts-accent-text); }
.mts-bc-sep { opacity: 0.4; }

.mts-detail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.mts-detail-badges { margin-top: 0.6rem; display: flex; gap: 0.4rem; }

/* Titelbild der Filiale ueber der Ueberschrift. `aspect-ratio` haelt die Hoehe
   vor dem Laden fest - sonst rutscht die Ueberschrift nach unten, sobald das
   Bild ankommt. Die Quellbilder liegen als 1200x750 bzw. 1200x800 vor; 21/9
   beschneidet sie bewusst zu einem Band, damit der Kopf der Seite nicht von
   einem hohen Foto beherrscht wird. */
.mts-detail-hero {
    /* Deckel bei 1200px: die Quelle (bidex.media) liefert genau 1200x750 und
       nicht mehr. Wer breiter streckt, bekommt kein groesseres Bild, sondern
       ein weiches. 21/9 statt 16/10, damit der Beschnitt die verlorene Hoehe
       nicht auch noch als Unschaerfe sichtbar macht. */
    max-width: 1200px;
    margin: 0 auto 2rem;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: var(--mts-radius-lg);
    background: #eef2f0;
}
.mts-detail-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Ladenschild + Ansprechpartner (die bisher ungenutzten Bildrollen) ---
   Beide Bilder liegen seit dem Import in MtsBranchMediaFiles (DisplayOrder >= 90)
   und wurden von keiner Seite gelesen. Sie kommen hier zum Zug, weil sie beide
   TEXT im Bild tragen, der erst in dieser Groesse lesbar ist - das Logo Marke
   und Ort, das Portrait den Namen des Ansprechpartners. In Kachelgroesse (rund
   290 px) waere die Logoschrift etwa 7 px hoch, also unlesbar; das ist der Grund,
   warum das Logo NICHT in den Filial-Waehler wandert. */
.mts-detail-signboard {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: var(--mts-radius-lg) var(--mts-radius-lg) 0 0;
    overflow: hidden;
    background: #000;
    line-height: 0;
}
.mts-detail-signboard img { width: 100%; height: auto; display: block; }
/* Schild und Schaufenster sind zusammen EIN Block - deshalb rundet das Titelbild
   darunter nur noch nach unten. */
.mts-detail-hero.has-signboard { border-radius: 0 0 var(--mts-radius-lg) var(--mts-radius-lg); }

.mts-detail-person {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
    background: var(--mts-surface);
    border: 1px solid var(--mts-line);
    border-radius: var(--mts-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--mts-shadow-1);
}
/* Das Portrait wird NICHT beschnitten: der Namensbalken am unteren Bildrand ist
   die einzige Stelle, an der der Name des Ansprechpartners ueberhaupt steht. */
.mts-detail-person-photo {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--mts-surface-2);
}
.mts-detail-person-photo img { width: 100%; height: auto; display: block; }
.mts-detail-person-text { min-width: 0; }
/* Als <h2> ausgezeichnet, deshalb muessen Groesse, Gewicht und Laufweite hier
   ausdruecklich stehen: mts-theme-global.css:74 setzt fuer h1-h5 eine eigene
   Anzeigeschrift samt negativer Laufweite. */
.mts-detail-person-eyebrow {
    margin: 0;
    font-size: 0.75rem; font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.09em; text-transform: uppercase;
    /* Nicht --mts-accent: der Flaechenton kommt auf Weiß nur auf 3,68:1
       (bis 2026-08-15: #5f8175, 4,30:1) und bleibt damit unter AA für 12 px
       Fettschrift. Der Textton erreicht 5,85:1, im neutralen Default 9,5:1.
       Diese Regel meinte immer schon genau das, was seit dem 15.08.
       --mts-accent-text heißt - sie liest ihn jetzt auch. */
    color: var(--mts-accent-text);
}
.mts-detail-person-lead {
    margin: 0.55rem 0 1.3rem;
    font-size: 1.05rem; line-height: 1.55;
    color: var(--mts-ink-soft);
    max-width: 46ch;
}

.mts-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.mts-detail-card {
    background: var(--mts-surface);
    border: 1px solid var(--mts-line);
    border-radius: var(--mts-radius-lg);
    padding: 1.75rem 1.85rem;
    box-shadow: var(--mts-shadow-1);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.mts-detail-card:hover { box-shadow: var(--mts-shadow-2); transform: translateY(-2px); }
.mts-detail-card h2 {
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0 0 1.1rem;
    color: var(--mts-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 0;
    padding: 0;
}
.mts-detail-card address {
    font-style: normal;
    margin: 0 0 0.85rem;
    line-height: 1.55;
    font-size: 0.98rem;
    color: var(--mts-ink);
}
.mts-detail-card address strong { font-weight: 600; }
.mts-detail-card p { margin: 0.45rem 0; font-size: 0.95rem; color: var(--mts-ink); }
.mts-detail-card p a { color: var(--mts-ink); text-decoration: none; font-weight: 500; transition: color 0.15s; }
/* Inline-Link im Kartentext auf weißem Grund - Textton, nicht Flächenton. */
.mts-detail-card p a:hover { color: var(--mts-accent-text); }
.mts-detail-label { color: var(--mts-ink-muted); margin-right: 0.45rem; font-size: 0.85rem; }

.mts-hours-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.mts-hours-table th, .mts-hours-table td {
    padding: 0.6rem 0.4rem;
    text-align: left;
    border-bottom: 1px solid var(--mts-line-soft);
    font-weight: 400;
    color: var(--mts-ink);
}
.mts-hours-table th { color: var(--mts-ink-soft); }
.mts-hours-table tr:last-child th, .mts-hours-table tr:last-child td { border-bottom: 0; }
.mts-hours-table tr.is-today {
    background: linear-gradient(90deg, var(--mts-c-primary-tint), transparent);
    border-radius: var(--mts-radius-sm);
}
/* Die Zeile des heutigen Tages ist Text über einem 10-%-Tint, also praktisch
   über Weiß - Textton, nicht Flächenton; der Tint selbst bleibt unberührt. */
.mts-hours-table tr.is-today th, .mts-hours-table tr.is-today td { font-weight: 700; color: var(--mts-accent-text); }
.mts-hours-closed { color: var(--mts-ink-muted); font-style: italic; }
.mts-tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }

@media (max-width: 720px) {
    .mts-page { margin: 1.5rem auto 3rem; padding: 0 0.75rem; }
    .mts-page-head { padding: 1.75rem 1.5rem 1.5rem; margin: 0.75rem 0 1.5rem; }
    .mts-branch-grid { grid-template-columns: 1fr; gap: 1rem; }
    .mts-branch-card-link { padding: 1.5rem 1.25rem 1rem; }
    .mts-branch-card-actions { padding: 1rem 1.25rem 1.25rem; flex-wrap: wrap; }
    .mts-branch-card-actions .mts-btn-ghost { margin-left: 0; flex: 1; }
    .mts-detail-head { flex-direction: column; align-items: flex-start; }
    .mts-modal-card { max-height: 92vh; }
    .mts-detail-person { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.15rem; text-align: left; }
    .mts-detail-person-photo { max-width: 260px; }
}

/* --- Color-Swatch als Kreis (Phase 6, 2026-05-11) ---------------------
   Smartstore-Default rendert PVAV.Color als eckiges ".choice-box-element"
   mit Border (border-radius-md + 1px solid). Wir wollen einen randlosen
   Kreis im Apple-Style. Scope: NUR Color-Boxes (die haben inline
   background-color), Size-Boxes (Text-Pills) bleiben rechteckig.
   --------------------------------------------------------------------- */
.choice-box-element[style*="background-color"] {
    border-radius: 50% !important;
    border: 0 !important;
    /* Dezenter Innenring statt none: helle/weisse Lack-Swatches (bild-
       abgeleitete PVAV.Color, TASK-444) bleiben auf Weiss sichtbar. */
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18) !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 !important;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    transition: transform 0.18s cubic-bezier(.22,.61,.36,1), box-shadow 0.18s ease;
}

/* Wrapper randlos + tap-target ~44x44 (Padding 8px um den 28px-Kreis).
   :has() wird von allen modernen Browsern unterstuetzt (Chrome 105+,
   Safari 15.4+, Firefox 121+). Aelterer Browser sieht den Kreis mit
   alter Wrapper-Border - akzeptabler Fallback, fault tolerant. */
.choice-box-content:has(> .choice-box-element[style*="background-color"]),
.choice-box:has(.choice-box-element[style*="background-color"]) .choice-box-label,
.choice-box:has(.choice-box-element[style*="background-color"]) .choice-box-content {
    border: 0 !important;
    background: transparent !important;
    padding: 6px !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

.choice-box:has(.choice-box-element[style*="background-color"]) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Smartstore-Default-Selected-State (.choice-box-control-native:checked + ...)
   ueberschreiben - kein gray-700-Border, kein inset-2px-white, kein heller
   Outer-Ring.

   AUSGEWAEHLT HEISST GROESSER, NICHT UMRANDET (Nutzer-Vorgabe 2026-08-09).
   WAR `box-shadow: 0 0 0 2px #000, ...` - der enge schwarze Ring im
   Apple-Watch-Stil. Der Nutzer will ihn auf der Produktseite nicht mehr sehen;
   die Auswahl traegt jetzt allein die Groesse, gleiche Sprache wie auf der
   Produktkarte (`.mts-pcard__swatch.is-active`, mts-theme-global.css).

   28 -> 33 px passen ohne Beschnitt: der Wrapper `.choice-box-content` traegt
   6 px Polsterung (Regel oben) und laesst `overflow` auf `visible` - am
   Livestand nachgemessen, nicht angenommen.

   Der `!important`-Block bleibt noetig, weil er weiterhin gegen den
   Smartstore-Default anschreibt; die Grundregel weiter oben setzt denselben
   Innenring, sie wuerde hier aber vom Default geschlagen.

   `transform` ohne `!important` ist Absicht: die Hover-Regel darunter darf fuer
   nicht ausgewaehlte Kreise weiter gewinnen. */
.choice-box-control-native:checked + .choice-box-label .choice-box-element[style*="background-color"],
.choice-box-control-native:checked + .choice-box-content .choice-box-element[style*="background-color"],
.choice-box.selected:has(.choice-box-element[style*="background-color"]) .choice-box-element {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18) !important;
    transform: scale(1.18);
}

/* Hover (nicht-selected): leichter Lift. */
.choice-box:has(.choice-box-element[style*="background-color"]):not(.selected):hover .choice-box-element {
    transform: scale(1.10);
}

/* Unavailable: ausgegraut + Strike (Smartstore-Default-Strike via `&:after`
   passt nicht zum Kreis - wir nutzen statt dessen Opacity + grayscale). */
.choice-box.unavailable:has(.choice-box-element[style*="background-color"]) .choice-box-element {
    filter: grayscale(0.85);
    opacity: 0.55;
}
.choice-box.unavailable:has(.choice-box-element[style*="background-color"]) .choice-box-element::after {
    display: none !important;
}

/* ====================================================================
   TASK-294-FE (2026-06-14): Breadcrumb-Overlap-Fix + PDP-Galerie-
   Doppelbild-Fix (Slick-FOUC) + Sidebar-Modernisierung.
   Append-only Override-Block (hoechste Cascade-Prio); reversibel durch
   Entfernen dieses Blocks. Live-diagnostiziert per DOM-Messung/Screenshot.
   ==================================================================== */

/* --- 1) Breadcrumb nicht vom Galerie-/Content-Block ueberlappen ---
   Live gemessen: .breadcrumb-container hatte effektiv margin-bottom:0
   (Bootstrap mb-4 ueberschrieben), das nachfolgende Galerie-Element
   startete ~8px zu hoch und kappte die Unterlaengen (g/p/y). Fix:
   echter Abstand + eigener Stacking-Context (Kategorien ueber dem Bild). */
.breadcrumb-container {
    margin-bottom: 1.25rem !important;
    position: relative;
    z-index: 5;
    overflow: visible;
}
.breadcrumb-container .breadcrumb { overflow: visible; margin-bottom: 0; }
.breadcrumb-container .breadcrumb-item,
.breadcrumb-container .breadcrumb-item > * { line-height: 1.5; }

/* --- 2) PDP-Galerie: Produktbild nicht doppelt (Slick-FOUC) ---
   Die Galerie ist ein Slick-Karussell (.gal in .gal-cell). Vor der Slick-
   Initialisierung stapeln sich die Bild-Slides untereinander; zusaetzlich
   bleiben die Original-Quell-Items (ohne .slick-slide) bei 0x0 stehen.
   Beides defensiv ausblenden -> immer genau EIN Hauptbild + Dots. */
.pd-data-col .gal:not(.slick-initialized) .gal-item:not(:first-child) { display: none !important; }
.pd-data-col .gal-cell .gal-item:not(.slick-slide) { display: none !important; }
.pd-data-col .gal .slick-list { overflow: hidden !important; }

/* --- 3) Listing-Filter/Sortier-Buttons: keine schwarzen Flaechen ---
   "Filtern & Sortieren" + "Ergebnisse pro Seite" waren --mts-ink (fast
   schwarz). Auf cleanes, helles Outline-Styling umstellen. Scope strikt
   auf die Listing-Action-Bar + Filter-Offcanvas - der Warenkorb-CTA
   (eigene Klasse) bleibt unberuehrt. */
.artlist-action-group .btn,
.artlist-actions .btn-secondary,
.artlist-actions .dropdown-toggle,
.artlist-action--filter .btn,
.faceted-search .btn-primary,
.faceted-search .btn-secondary,
.faceted-search-offcanvas .btn-primary,
.offcanvas-lg .facet-offcanvas-actions .btn {
    background: var(--mts-surface, #fff) !important;
    color: var(--mts-ink, #0b1220) !important;
    border: 1px solid var(--mts-line, rgba(15,23,42,0.12)) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
.artlist-action-group .btn:hover,
.artlist-actions .btn-secondary:hover,
.artlist-actions .dropdown-toggle:hover,
.artlist-action--filter .btn:hover,
.faceted-search .btn-primary:hover,
.faceted-search .btn-secondary:hover,
.offcanvas-lg .facet-offcanvas-actions .btn:hover {
    background: var(--mts-surface-2, #f5f5f7) !important;
    border-color: rgba(15,23,42,0.2) !important;
    color: var(--mts-ink, #0b1220) !important;
}

/* --- 4) Facet-Gruppen: ruhigere, modernere Optik (schlicht/professionell) --- */
.faceted-search .facet-group {
    border: 0 !important;
    border-top: 1px solid var(--mts-line, rgba(15,23,42,0.08)) !important;
    margin: 0 !important;
}
.faceted-search .facet-group:first-child { border-top: 0 !important; }
.faceted-search .facet-group-header,
.faceted-search .facet-group-header .facet-toggle {
    padding: 0.85rem 0 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--mts-ink, #0b1220) !important;
}
.faceted-search .facet-body { padding: 0 0 0.7rem 0 !important; }
.faceted-search .facet-control-label { color: var(--mts-ink-soft, #4a5568) !important; }
/* Preis-"Los"-Button (rund, Akzent) etwas dezenter, aber sichtbar */
.faceted-search .facet-range-container .btn { border-radius: 9999px !important; }

/* --- 5) Listing-Toolbar + Pagination: keine fast-schwarzen Flaechen ---
   "Ergebnisse pro Seite"-Dropdown, Grid/Sort-Icon-Buttons (btn-artlist-actions)
   waren --mts-ink (#1d1d1f). Auf cleanes helles Outline-Styling. */
.btn-artlist-actions,
.btn.btn-secondary.dropdown-toggle,
.art-actions .btn-secondary,
.artlist-actions .btn-secondary {
    background: var(--mts-surface, #fff) !important;
    color: var(--mts-ink, #0b1220) !important;
    border: 1px solid var(--mts-line, rgba(15,23,42,0.14)) !important;
    box-shadow: none !important;
}
.btn-artlist-actions:hover,
.btn.btn-secondary.dropdown-toggle:hover,
.art-actions .btn-secondary:hover,
.artlist-actions .btn-secondary:hover {
    background: var(--mts-surface-2, #f5f5f7) !important;
    border-color: rgba(15,23,42,0.22) !important;
    color: var(--mts-ink, #0b1220) !important;
}
/* Pagination aktive Seite: Akzent statt Schwarz */
.pagination .page-item.active .page-link,
.pagination .active > .page-link,
.page-link.active {
    background: var(--mts-accent) !important;
    border-color: var(--mts-accent) !important;
    color: #fff !important;
}

/* --- 6) Breadcrumb-Abstand robust (hoehere Spezifitaet gegen Theme mb:0) ---
   Ergaenzt den z-index-Lift (Punkt 1): echter Abstand unter der Breadcrumb,
   damit die Galerie sie gar nicht erst beruehrt. */
body .product-details-page .breadcrumb-container,
body .product-details .breadcrumb-container,
body .breadcrumb-container {
    margin-bottom: 1.25rem !important;
}

/* --- 7) Click&Collect: Versand/Abholung-Choice-Widget (C&C-Umbau 2026-06-14) ---
   Bewusste, gleichwertige Wahl statt aktivieren/deaktivieren-Toggle. Segmented
   Control + inline Abhol-Block (Filiale + Standort/PLZ-Lookup). Nutzt die
   bestehenden --mts-Tokens; generisch (keine filial-spezifischen Werte). */
.mts-fulfillment { margin: 0 0 1rem; }
.mts-fulfillment--offcanvas { margin: 0.6rem 0; }
.mts-fulfillment-seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    background: var(--mts-surface-2, #f1f1f4); padding: 5px; border-radius: 14px;
}
.mts-fulfillment-opt {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 0.6rem; border: 1px solid transparent; border-radius: 10px;
    background: transparent; color: var(--mts-ink-soft, #4a5568);
    font-size: 0.92rem; font-weight: 600; cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.mts-fulfillment-opt:hover { color: var(--mts-ink, #0b1220); }
.mts-fulfillment-opt.is-selected {
    background: var(--mts-surface, #fff); color: var(--mts-ink, #0b1220);
    box-shadow: 0 1px 3px rgba(15,23,42,0.12); border-color: rgba(15,23,42,0.06);
}
.mts-fulfillment-opt-icon { display: inline-flex; }
.mts-fulfillment-pickup {
    margin-top: 0.85rem; padding-top: 0.85rem;
    border-top: 1px solid var(--mts-line, rgba(15,23,42,0.1)); display: grid; gap: 0.7rem;
}
.mts-fulfillment-pickup[hidden] { display: none; }
.mts-fulfillment-branch {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.25rem 0;
    background: transparent; border-radius: 0;
}
.mts-fulfillment-branch-icon { display: none !important; }
/* Checkout-Pickup-Hint: SVG-Icon neben dem Hinweistext ausblenden (Confirm-Seite) */
.mts-checkout-pickup-hint-icon { display: none !important; }
.mts-fulfillment-branch-text { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; text-align: center; }
.mts-fulfillment-branch-name { font-weight: 600; color: var(--mts-ink, #0b1220); }
.mts-fulfillment-branch-addr { font-size: 0.83rem; color: var(--mts-ink-muted, #6b7280); }
/* Entfernungsangabe ist Kleintext auf weißer Fläche - Textton, nicht Flächenton. */
.mts-fulfillment-branch-distance { font-size: 0.83rem; color: var(--mts-accent-text); font-weight: 600; }
.mts-fulfillment-locate { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mts-fulfillment-locate-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.85rem;
    border: 1px solid var(--mts-line, rgba(15,23,42,0.14)); border-radius: 9999px;
    background: var(--mts-surface, #fff); color: var(--mts-ink, #0b1220);
    font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.15s;
}
.mts-fulfillment-locate-btn:hover { background: var(--mts-surface-2, #f1f1f4); }
.mts-fulfillment-locate-or {
    display: inline-flex; align-items: center; flex: 1; min-width: 160px;
    border: 1px solid var(--mts-line, rgba(15,23,42,0.14)); border-radius: 9999px;
    overflow: hidden; background: var(--mts-surface, #fff);
}
.mts-fulfillment-locate-input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0.55rem 0.85rem; font-size: 0.85rem; background: transparent; color: var(--mts-ink, #0b1220); }
.mts-fulfillment-locate-go { display: inline-flex; align-items: center; justify-content: center; width: 38px; border: 0; background: transparent; color: var(--mts-ink-muted, #6b7280); cursor: pointer; }
/* Aufmerksamkeitszustand eines Bedienelements auf weißem Grund - Textton; für
   das Glyph darin ist der dunklere Ton nie zu wenig Kontrast. */
.mts-fulfillment-locate-go:hover { color: var(--mts-accent-text); }
.mts-fulfillment-locate-status { width: 100%; margin: 0; font-size: 0.82rem; color: var(--mts-ink-muted, #6b7280); }
/* Textlink ("andere Filiale") auf weißem Grund - Textton, nicht Flächenton. */
.mts-fulfillment-otherbranch { display: block; text-align: center; font-size: 0.85rem; color: var(--mts-accent-text); text-decoration: none; font-weight: 500; }
.mts-fulfillment-otherbranch:hover { text-decoration: underline; }
.mts-fulfillment-pickup-note { margin: 0; font-size: 0.82rem; color: var(--mts-ink-muted, #6b7280); }

/* ----------------------------------------------------------------------------
   TASK-249 - Verfuegbarkeits-Chip auf den nativen Smartstore-Produktkarten
   (Zone productbox_add_info). Dezenter Pill mit Inline-SVG-Icon + Label.
   Drei Zustaende (in/low/out) konsistent zu den Reserve-Drawer-Farb-Tokens.
   --------------------------------------------------------------------------- */
.mts-listing-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}
.mts-listing-chip-icon { display: inline-flex; flex: 0 0 auto; }
.mts-listing-chip-icon svg { display: block; }
.mts-listing-chip-label { white-space: nowrap; }

.mts-listing-chip.mts-state-in {
    color: var(--mts-c-success, #16a34a);
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.22);
}
.mts-listing-chip.mts-state-low {
    color: var(--mts-c-warning, #d97706);
    background: rgba(217, 119, 6, 0.10);
    border-color: rgba(217, 119, 6, 0.24);
}
/* Bestandszeile der Produktkarte, solange der Chip noch nicht geantwortet hat
   (2026-08-05). Sie behauptet dann NICHTS - vorher stand dort der Default
   "Auf Lager", auch fuer Raeder ohne einen einzigen Filialbestand.

   Der Platzhalter haelt nur die Hoehe: das Nachtragen darf die Karte nicht
   springen lassen, sonst tauscht man eine falsche Aussage gegen einen
   CLS-Beitrag ([[feedback_cls_frame_gruppe_maskiert_verursacher]]). Punkt und
   Text bleiben deshalb im Fluss und werden nur unsichtbar geschaltet.

   Steht hier und nicht in mts-theme-global.css, obwohl die uebrigen
   .mts-pcard-Regeln dort liegen: storefront.css laedt spaeter und ist auf der
   Box bereits auf dem Stand des Repos - so bleibt es bei EINER Datei je Deploy.
   Spezifitaet schlaegt die Basisregel (0,3,1 gegen 0,2,1), beide !important. */
.art.mts-pcard .mts-pcard__stock.mts-pcard__stock--pending {
    color: transparent !important;
}
.art.mts-pcard .mts-pcard__stock.mts-pcard__stock--pending .mts-pcard__stock-dot {
    background: rgba(0, 0, 0, 0.07) !important;
}

/* 'out' im LISTING heisst seit 2026-08-05 "Auf Bestellung", nicht "ausverkauft"
   (Begruendung samt Messung in mts-branch-stock.js, labels()). Rot waere dazu
   ein Widerspruch: die Farbe warnt, der Text sagt "geht". Deshalb neutral-grau -
   eine Information, kein Alarm.
   NUR das Listing. `.mts-state-out` an der PDP-Bestandsbox und an den
   Filial-Karten des Reserve-Drawers bleibt rot: dort ist die Aussage
   tatsaechlich "diese Filiale hat keins", und das ist eine Absage. */
.mts-listing-chip.mts-state-out {
    color: var(--mts-ink-muted, #6b7280);
    background: rgba(107, 114, 128, 0.10);
    border-color: rgba(107, 114, 128, 0.22);
}

/* 'elsewhere' (TASK-686) - liegt in einer anderen Filiale abholbereit. Bewusst
   in der Markenfarbe und NICHT im Gruen von 'in': gruen hiesse "hier", und der
   Unterschied zwischen "hier" und "20 km weiter" ist genau der, den diese Stufe
   ueberhaupt erst sichtbar macht. Kein Rot, kein Grau - es ist eine gute
   Nachricht, nur eine mit Bedingung. */
/* Die Chip-Beschriftung ist Text über einem 10-%-Tint, also praktisch über
   Weiß - Textton; das bisherige Rückfall-Literal war exakt dieser Ton und ist
   damit sein Token. Fläche und Kontur darunter bleiben unverändert. */
.mts-listing-chip.mts-state-elsewhere {
    color: var(--mts-accent-text);
    background: rgba(var(--mts-c-primary-rgb, 63, 91, 115), 0.10);
    border-color: rgba(var(--mts-c-primary-rgb, 63, 91, 115), 0.24);
}
/* Dieselbe Aussage als Bestandszeile der Produktkarte, ebenfalls Text auf Weiß. */
.art.mts-pcard .mts-pcard__stock.mts-pcard__stock--elsewhere {
    color: var(--mts-accent-text) !important;
}

/* ============================================================================
   PDP-Design-Fixes (2026-07-05) - Produktdetailseite store.movetoshop.de.
   Override-Layer: laedt NACH dem Base-Overlay (DB-Topic MtsThemeGlobal) und
   nach der PDP-Widget-CSS (pdp-countdown.html). Alle Regeln additiv + scoped,
   damit Listing/Cart/andere Seiten unberuehrt bleiben.
   ============================================================================ */

/* --- Fix 1 (rev3): Preis WIEDER ZENTRIERT + Deal rechts daneben -----------
   Regression aus rev2: der `order`-Flex hatte .pd-finalprice an den Zeilenstart
   (links) gezogen (Preis-cx 961 statt Block-Mitte 1152). Ziel: Preis wieder
   mittig (wie die "Zuletzt niedrigster Preis"-Zeile darunter), Deal-Badge rechts
   daneben, OHNE den Preis aus der Mitte zu schieben.
   Technik = Balanced-Flex: ein leerer ::before-Spacer (flex:1) links und die
   .pd-promobadges-Zelle (flex:1) rechts wachsen gleich stark -> der Preis
   (flex:0 0 auto) steht mathematisch zentriert, unabhaengig von der Badge-
   Breite. Das Badge sitzt am Start seiner (rechten) Zelle, also direkt rechts
   vom Preis; sein margin-left liegt INNEN in der Zelle und stoert die Balance
   nicht. Restgruppe (Zuletzt-niedrigster-Preis) via flex-basis:100% neue Zeile.
   <meta>-Kinder sind display:none -> keine Flex-Items. */
body.mts-pdp .pd-price-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 0 !important;
    row-gap: 2px !important;
}
/* :has() ist KEIN Feintuning, sondern die Bedingung, unter der die Balance
   ueberhaupt eine ist. Der Spacer ist die LINKE Zelle eines Paares; seine
   rechte Haelfte ist .pd-promobadges. Smartstore rendert das Badge aber nur
   bei aktivem Angebots-/Aktionspreis. Fehlt es, bleibt der Spacer als einziges
   wachsendes Flex-Item uebrig, frisst die Restbreite und drueckt den Preis an
   den rechten Rand - genau umgekehrt zur Absicht dieses Blocks.
   Gemessen 2026-07-27 auf mc.movetoshop.com: 0 von 1325 Produkten haben
   OldPrice>Price oder SpecialPrice, die Discount-Tabelle ist leer -> 100 % der
   PDPs standen rechtsbuendig (finalprice cx=1329 gegen Spalten-Mitte 1152).
   Der Defekt ist NICHT instanz-spezifisch: auf store.movetoshop.de ist er
   latent genauso vorhanden und nur durch 8 aktive Rabatt-Aktionen maskiert -
   entfernt man dort das Badge im DOM, springt der Preis ebenfalls nach rechts.
   Deshalb wird hier die Bedingung repariert und nicht die Instanz.
   Mobil (390px) galt dasselbe: 13 px Versatz gegen .pd-legalinfo, weil diese
   Regel in KEINER Media-Query liegt und die Mobil-Query nur text-align setzt -
   text-align positioniert keine Flex-Items. */
body.mts-pdp .pd-price-group:has(.pd-promobadges)::before {
    content: "" !important;
    order: 1 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
body.mts-pdp .pd-price-group .pd-finalprice {
    order: 2 !important;
    flex: 0 0 auto !important;
}
body.mts-pdp .pd-price-group .pd-promobadges {
    order: 3 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
body.mts-pdp .pd-price-group .pd-promoprice-group {
    order: 4 !important;
    flex-basis: 100% !important;
    margin-top: 2px !important;
}
.pd-promobadges .badge,
.pd-promobadges .badge-dark {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 10px !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 4px 13px 5px !important;
    border-radius: 999px !important;
    background: var(--mts-c-primary) !important;
    color: #fff !important;
    vertical-align: middle !important;
    height: auto !important;
    min-height: 0 !important;
}

/* --- Fix 2 (rev2): Add-to-Cart-Button - SOLID #5f8175 + weisser Text -------
   Live-Button: button.btn.btn-primary.btn-lg.btn-block.btn-add-to-cart.
   (a) HINTERGRUND: computed war ein gruener VERLAUF
       linear-gradient(135deg,#7d9c92,#5f8175) - kommt aus der .btn-add-to-cart-
       Regel der Stage-B-Overlays (layout-styles.html/apple-style.css), Stops
       ueber --mts-cta-grad-from/-to (auf gruen umdefiniert), Spezifitaet 0/2/2
       !important. Gefiel dem Nutzer nicht. Ersatz: SOLID #5f8175 (dunkleres
       Marken-Gruen, hebt sich staerker gegen die weisse Seite ab, besserer
       Weiss-Kontrast ~3.4:1). background-image explizit auf none. Hover etwas
       dunkler (#4f6d62). Direkt-Selektor 0/4/2 schlaegt die 0/2/2-Verlaufsregel.
   (b) TEXT weiss: die Schwarz-Schrift kam aus demselben Overlay via
       .btn-add-to-cart{ color:var(--mts-cta-text)!important } (0/2/2) mit
       :root{--mts-cta-text:#1a1a1a}. Fix: --mts-cta-text im Buybox-Container
       auf #fff umdefinieren (0/2/1 !important > :root 0/0/0; deckt Base+Hover;
       Disabled #777 bleibt) + direkte 0/4/2-Farbregel als Sicherung. */
body.mts-pdp .pd-offer-actions-container,
body.mts-pdp .pd-offer-actions {
    --mts-cta-text: #fff !important;
}
body.mts-pdp .pd-offer-actions-container .pd-offer-actions button.btn-add-to-cart,
body.mts-pdp .pd-offer-actions-container .pd-offer-actions a.btn-add-to-cart {
    background: var(--mts-c-primary) !important;
    background-image: none !important;
    background-color: var(--mts-c-primary) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 16px rgba(var(--mts-c-primary-shadow-rgb), 0.30) !important;
}
body.mts-pdp .pd-offer-actions-container .pd-offer-actions button.btn-add-to-cart:not([disabled]):hover,
body.mts-pdp .pd-offer-actions-container .pd-offer-actions a.btn-add-to-cart:not([disabled]):hover {
    background: var(--mts-c-primary-hover) !important;
    background-image: none !important;
    background-color: var(--mts-c-primary-hover) !important;
    box-shadow: 0 6px 22px rgba(var(--mts-c-primary-shadow-rgb), 0.42) !important;
}
body.mts-pdp .pd-offer-actions-container .pd-offer-actions button.btn-add-to-cart span,
body.mts-pdp .pd-offer-actions-container .pd-offer-actions button.btn-add-to-cart i {
    color: #fff !important;
}

/* --- Fix 3 (rev2): Galerie-Pfeile - dezente graue Affordanz statt weg -----
   Am vertikalen Thumbnail-Strip existieren ZWEI funktionale Pfeil-Familien
   (beide scrollen den Strip, live per Klick-Test verifiziert):
   (A) NATIV (Smartstore-Core-Smartgallery): btn.btn-secondary.btn-no-border.
       btn-icon.rounded-circle.btn-sm.gal-arrow.gal-prev|gal-next + fa-chevron.
       Das sind die PROMINENTEN (Kreis-)Buttons, die der Nutzer nicht wollte.
       Klick scrollt ~Seite (778px-Sprung). -> AUSBLENDEN.
   (B) MTS-EIGEN (pdp-countdown.html v6): .mts-gal-arrow-up/-down (SVG-Chevron,
       transparenter BG). Klick scrollt exakt 1 Thumbnail (142px), fein.
       -> WIEDER EINBLENDEN, aber DEZENT hellgrau + als absolute Overlays,
       damit sie KEINEN Platz reservieren (Thumbs bleiben unverschoben; im
       .mts-gal-stack-Flow wuerden 2x ~22px die Thumbs verschieben).
   Beide liegen im .gal-nav-cell (Thumb-Strip), nicht im .gal-cell (Hauptbild). */
/* (A) native prominente Pfeile -> aus */
.pd-data-col .gal-nav-cell .gal-arrow,
.pd-data-col .gal-nav-cell .gal-prev,
.pd-data-col .gal-nav-cell .gal-next,
.pd-data-col .gal-arrow,
.pd-data-col .gal-next,
.pd-data-col .gal-prev {
    display: none !important;
}
/* (B) MTS-Pfeile: Stack als Anker fuer die absolute Positionierung */
body.mts-pdp .pd-data-col .mts-gal-stack {
    position: relative !important;
}
/* MTS-Pfeile sichtbar, dezent hellgrau, als Overlay ueber Strip-Rand
   (out of flow -> kein reservierter Platz -> kein Thumbnail-Versatz) */
body.mts-pdp .pd-data-col .mts-gal-arrow-up,
body.mts-pdp .pd-data-col .mts-gal-arrow-down {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 4 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #c4c4c4 !important;
    opacity: 0.85 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: color 0.15s ease, opacity 0.15s ease !important;
}
body.mts-pdp .pd-data-col .mts-gal-arrow-up { top: -6px !important; bottom: auto !important; }
body.mts-pdp .pd-data-col .mts-gal-arrow-down { bottom: -6px !important; top: auto !important; }
body.mts-pdp .pd-data-col .mts-gal-arrow-up:not([disabled]):hover,
body.mts-pdp .pd-data-col .mts-gal-arrow-down:not([disabled]):hover {
    color: #8a8a8a !important;
    opacity: 1 !important;
}
body.mts-pdp .pd-data-col .mts-gal-arrow-up[disabled],
body.mts-pdp .pd-data-col .mts-gal-arrow-down[disabled] {
    opacity: 0.22 !important;
    cursor: default !important;
}
body.mts-pdp .pd-data-col .mts-gal-arrow-up svg,
body.mts-pdp .pd-data-col .mts-gal-arrow-down svg {
    width: 15px !important;
    height: 15px !important;
}

/* --- Fix 4 (rev4): oberes Review-Summary "erste Bewertung" ausblenden ------
   REVERT rev3: Die native Aktionsreihe "Merken / Fragen? / Weitersagen"
   (.pd-actions-container / .pd-actions / .pd-action-item) wurde in rev3
   FAELSCHLICH komplett ausgeblendet. Die display:none-Regel ist ENTFERNT ->
   die drei Aktionen (.action-add-to-wishlist / .action-ask-question /
   .action-bullhorn) sind wieder sichtbar.
   STATTDESSEN: das OBERE Review-Summary neben dem Produkttitel/Rating weg.
   Auf der PDP existieren ZWEI "Geben Sie die erste Bewertung ab"-Elemente:
   (a) OBEN, im .pd-section-top (Klasse admin-actions-container), neben dem
       Titel/Rating: div.pd-review-summary.pd-group > div.pd-review-link.link-dnu
       > a.link-dnu[href^="/product/reviews/"]. -> DIESES ausblenden.
   (b) UNTEN im Bewertungen-Tab (#pd-tabs-2 in section.pd-section-bottom):
       a.btn.btn-warning[href^="/product/reviews/"] -> bleibt (Fix 5, gruen).
   Nur den oberen Summary-Container ausblenden, streng auf .pd-section-top
   gescoped, damit der untere gruene Button (.pd-section-bottom) unberuehrt
   bleibt. */
body.mts-pdp .pd-section-top .pd-review-summary {
    display: none !important;
}

/* --- Fix 5 (rev3): Review-CTA "erste Bewertung" gruen statt orange --------
   Button im Bewertungen-Tab (section.pd-section-bottom > #pd-tabs) ist
   a.btn.btn-warning (Bootstrap-Orange #ee9b00). Recolor auf Marken-Gruen
   #5f8175 (wie Add-to-Cart), weisser Text, dunklerer Hover. Scope auf die
   PDP-Tab-Section, damit nicht globale .btn-warning betroffen sind. */
body.mts-pdp .pd-tabs .btn-warning,
body.mts-pdp .pd-section-bottom .btn-warning {
    background: var(--mts-c-primary) !important;
    background-image: none !important;
    background-color: var(--mts-c-primary) !important;
    border-color: var(--mts-c-primary) !important;
    color: #fff !important;
}
body.mts-pdp .pd-tabs .btn-warning:hover,
body.mts-pdp .pd-tabs .btn-warning:focus,
body.mts-pdp .pd-section-bottom .btn-warning:hover,
body.mts-pdp .pd-section-bottom .btn-warning:focus {
    background: var(--mts-c-primary-hover) !important;
    background-color: var(--mts-c-primary-hover) !important;
    border-color: var(--mts-c-primary-hover) !important;
    color: #fff !important;
}

/* --- Fix 6 (rev3): "Zuletzt angesehen"-Karten gleich hoch -----------------
   Recently-Viewed-Grid (.recently-viewed-product-grid, .mts-pcard-Karten).
   Karten-Hoehe variiert, weil Titel a.art-name-link mal 2, mal 3 Zeilen haben
   (line-height 1.35 = ~22.36px). Das bestehende mts-pcard-System setzt jedoch
   mit !important-Regeln HOEHERER Spezifitaet:
     - .artlist:not(.artlist-lines) .art .art-name-link { min-height:2.7em }  (0/4/0, 2 Zeilen)
     - .art.mts-pcard .mts-pcard__name a { -webkit-line-clamp:unset }          (0/3/1, kein Clamp)
   Daher reservieren Titel nur 2 Zeilen und ein 3-Zeilen-Titel macht seine
   Karte hoeher (434 vs 414). Fix: Titel IMMER 3 Zeilen reservieren
   (min-height 3x1.35em) und auf 3 klemmen. Selektor mit der vollen
   mts-pcard-Kette + recently-viewed-Scope => Spezifitaet 0/5/2, schlaegt die
   0/4/0- und 0/3/1-Ursprungsregeln. STRENG auf Recently-Viewed gescoped,
   normale Listing-Karten (.artlist-grid) bleiben unveraendert. */
body.mts-pdp .recently-viewed-product-grid .art.mts-pcard .mts-pcard__name a.art-name-link,
body.mts-pdp .recently-viewed-product-grid .art.mts-pcard .art-name a.art-name-link,
body.mts-pdp .recently-viewed-product-grid .mts-pcard__name a.art-name-link {
    /* -webkit-box + line-clamp fuer sauberes 3-Zeilen-Ellipsis (wenn es greift) */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    /* NACHTRAG 2026-08-26 – die feste Höhe ist weg, die Obergrenze bleibt.
       Der Grund für die feste Höhe war "alle Karten gleich hoch". Das löst
       seit dem 08.08. der Flex-Aufbau der Reihe: `.slick-track` ist
       `display:flex; align-items:stretch`, der Textkörper trägt `flex:1 1 auto`
       und die Preiszeile `margin-top:auto` (mts-theme-global.css, Block
       "gleiche Kartenhöhe, kein Schattenband"). Genau diese Mechanik benutzt
       auch die Kategorieliste. Die Reserve war damit doppelt gemoppelt – und
       sichtbar: bei einzeiligem Titel stand eine LEERE Zeile zwischen Titel und
       Verfügbarkeit, gemessen 3 Zeilen Reserve gegen höchstens 2 belegte.
       `max-height` + Klemmung bleiben als Überlaufschutz für sehr lange
       Titel – das war der zweite Zweck des Blocks und der trägt weiter. */
    box-sizing: content-box !important;
    line-height: 1.35 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(3 * 1.35em) !important;
}

/* --- Fix 7 (rev4): Header-Menue "Sale" als gruene Pille -------------------
   Der Sale-Menueeintrag ist bereits gruen + weiss (Quelle = DB-Topic-Regel
   `header#header ... ul#menu-main li a[href$="/sale/"]` mit
   background:var(--mts-accent)=#5f8175, color:#fff, border-radius:7px,
   padding:7px 24px - alles !important, Spezifitaet ~2/3/4). Er wirkt aber
   noch rechteckig (7px). Ziel: Pill-Form wie Deal-Badge/Add-to-Cart-CTA
   (border-radius:999px), Gruen bleibt, weisser Text, dezenteres Padding,
   dunklerer Hover (#4f6d62).
   Selektor href-basiert - die Menue-Item-id (main-nav-item-...258215) ist
   ueber Re-Imports INSTABIL. Spezifitaet 2/4/4 (#header + #menu-main = 2 IDs;
   .nav-link .menu-link [href] [role] = 4 Klassen/Attr; header ul li a = 4
   Typen) schlaegt die Quelle 2/3/4, und storefront.css laedt zuletzt =>
   gewinnt sicher. NUR der Sale-Eintrag, keine anderen Menuepunkte. */
header#header ul#menu-main li a.nav-link.menu-link[href$="/sale/"][role="menuitem"],
header#header ul#menu-main li a.nav-link.menu-link[href$="/sale"][role="menuitem"] {
    background: var(--mts-c-primary) !important;
    background-image: none !important;
    background-color: var(--mts-c-primary) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 7px 18px !important;
}
header#header ul#menu-main li a.nav-link.menu-link[href$="/sale/"][role="menuitem"]:hover,
header#header ul#menu-main li a.nav-link.menu-link[href$="/sale/"][role="menuitem"]:focus,
header#header ul#menu-main li a.nav-link.menu-link[href$="/sale"][role="menuitem"]:hover,
header#header ul#menu-main li a.nav-link.menu-link[href$="/sale"][role="menuitem"]:focus {
    background: var(--mts-c-primary-hover) !important;
    background-image: none !important;
    background-color: var(--mts-c-primary-hover) !important;
    color: #fff !important;
}

/* --- Fix 8 (rev5): Scroll-to-Top-Button nach UNTEN LINKS ------------------
   Smartstore-Core-Button `a#scroll-top.scrollto` (position:fixed, bottom:16px,
   right:16px, z-index:99998). Er lag unten RECHTS und ueberlappte den
   Bike-Chatbot-FAB (.mts-cb-root, ebenfalls unten rechts). Verschiebung nach
   unten LINKS: right:auto + left:16px (bottom bleibt 16px vom Core). #scroll-top
   ist ID-Selektor (Spez. 1/0/0) = gleiche Spez. wie die Core-Regel; storefront.css
   laedt zuletzt -> gewinnt; !important zusaetzlich gegen Spez.-Gleichstand. */
a#scroll-top,
#scroll-top.scrollto {
    right: auto !important;
    left: 16px !important;
}

/* --- Fix 9 (rev6): Vergleichs-Drawer UVP-Referenzpreis rot durchgestrichen -
   Der Post-Process in storefront.js baut die Preiszelle des Custom-Compare-
   Drawers zu <span.mts-compare-price-current> + <span.mts-compare-uvp> um.
   Der aktuelle Preis erbt das native .mts-compare-price-Styling (bold), der
   Referenzpreis wird als "UVP …" rot (#d0021b = rgb(208,2,27)) + durchge-
   strichen gesetzt, mit dezentem Abstand. Streng auf #mts-compare-drawer
   gescoped -> keine Wirkung auf Listing/PDP/Cart. */
#mts-compare-drawer .mts-compare-uvp {
    color: #d0021b !important;
    text-decoration: line-through !important;
    margin-left: 0.4em;
    white-space: nowrap;
}

/* --- Fix 10 (rev7, 2026-07-05): Globaler Orange-Sweep -> Marken-Gruen ------
   Das Flex-Theme hardcodet sein Warning-Orange #ee9b00 an interaktiven
   Elementen, die der Multicycle-Recolor (mts-theme-global) nicht abdeckt:
   Warning-Buttons ("Registrieren" auf /login, "Als Rechnungsanschrift
   festlegen" im Checkout-Adressbuch), Checkout-Step-Indikator (.costep),
   Auswahl-Badges (.choice-box), aktive Options-Kacheln (Versand-/Zahlart),
   Menue-Akzente. Zusaetzlich sind Radios/Checkboxen im Checkout noch im
   Theme-Default-Indigo #3f51b5. Alles auf Marken-Gruen #5f8175 (Hover
   #4f6d62 wie Fix 5/7). Semantische Warn-Texte/-Alerts (--warning,
   .text-warning, .alert-warning) bleiben BEWUSST amber - hier geht es nur
   um Akzent-/Interaktionsfarben.
   Mechanik: theme.css setzt die Farben als Button-/Badge-Custom-Props auf
   der Klasse; storefront.css laedt NACH theme.css -> gleiche Spezifitaet,
   spaeter gewinnt. Wo Literale statt Props verwendet werden (costep,
   choice-box, megamenu, list-group), gleiche/hoehere Selektoren + !important.
   Der aeltere PDP-Scope-Fix 5 bleibt als Doppelung stehen (harmlos). */

/* 10a: Warning-Buttons global (deckt "Registrieren", "Als Rechnungs-
   anschrift festlegen", Review-CTAs usw. ab). */
.btn-warning {
    --btn-color: #fff;
    --btn-bg: var(--mts-c-primary);
    --btn-border-color: var(--mts-c-primary);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: var(--mts-c-primary);
    --btn-disabled-border-color: rgba(89, 97, 103, 0.15);
}
.btn-warning, .btn-outline-warning {
    --btn-hover-color: #fff;
    --btn-hover-bg: var(--mts-c-primary-hover);
    --btn-hover-border-color: var(--mts-c-primary-hover);
    --btn-active-color: #fff;
    --btn-active-bg: var(--mts-c-primary-active);
    --btn-active-border-color: var(--mts-c-primary-active);
    --btn-focus-shadow-rgb: var(--mts-c-primary-rgb);
}
.btn-outline-warning {
    --btn-color: var(--mts-c-primary);
    --btn-border-color: var(--mts-c-primary);
    --btn-disabled-color: var(--mts-c-primary);
    --btn-disabled-border-color: var(--mts-c-primary);
}
.btn-3d.btn-warning, .btn-3d.btn-outline-warning {
    --shadow-color-rgb: var(--mts-c-primary-active-rgb);
}

/* 10b: Warning-Badges (z.B. Bestell-/Statusbadges). */
.badge-warning {
    --badge-base-rgb: var(--mts-c-primary-rgb);
    --badge-bg: var(--mts-c-primary);
    --badge-bg-rgb: var(--mts-c-primary-rgb);
    --badge-color: #fff;
}

/* 10c: Checkout-Step-Indikator (.costeps auf Cart + allen Checkout-Seiten):
   durchlaufene Schritte (visited) = gruen gefuellt inkl. Verbindungslinien,
   aktiver Schritt = gruener Ring. Quelle in theme.css nutzt Literale. */
.costep.visited:before,
.costep.visited:after,
.costep.active:before {
    background-color: var(--mts-c-primary) !important;
}
.costep.visited .costep-icon {
    border-color: var(--mts-c-primary) !important;
    background-color: var(--mts-c-primary) !important;
}
.costep.active .costep-icon {
    border-color: var(--mts-c-primary) !important;
    background-color: #fff !important;
}

/* 10d: Auswahl-Haekchen der Choice-Boxen (Varianten-/Checkout-Kacheln). */
.choice-box-content:after {
    background-color: var(--mts-c-primary) !important;
}

/* 10e: Aktive Options-Kachel (Versandart/Zahlart, .opt-list-item ist
   list-group-item): linke Akzentlinie war orange. */
.list-group .list-group-item.active:before {
    background: var(--mts-c-primary) !important;
}

/* 10f: Megamenu-/Offcanvas-Menue-Akzente + Tab-Unterstrich + Instasearch. */
.megamenu .nav-item.selected .nav-link:before,
.megamenu .nav-item.expanded .nav-link:before {
    background: var(--mts-c-primary) !important;
}
.nav-tabs-line {
    --nav-underline-active-color: var(--mts-c-primary);
}
#offcanvas-menu {
    --ocm-item-selected-color: var(--mts-c-primary);
}
.instasearch-term:is(.active) {
    outline-color: var(--mts-c-primary) !important;
    border-color: var(--mts-c-primary) !important;
}

/* 10g: Radios/Checkboxen (checked) vom Theme-Indigo #3f51b5 auf Gruen -
   sichtbar u.a. an der Versandart-/Zahlart-Auswahl im Checkout. */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--mts-c-primary) !important;
    border-color: var(--mts-c-primary) !important;
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--mts-c-primary) !important;
    border-color: var(--mts-c-primary) !important;
}

/* --- Fix 11 (rev7, 2026-07-05): Cart-Item-Aktionsreihe vereinheitlichen ----
   Auf /cart/ bestand die Aktionsreihe pro Artikel aus drei verschieden
   grossen Pillen: "Menge:"-Fake-Button (48px hoch - er erbt das grosse
   12px/28px-Padding der globalen .btn-secondary-Regel aus mts-theme-global),
   Papierkorb (36px) und "Auf die Wunschliste" (34px, eigene 4px/8px-Regel).
   Ziel: EINE Hoehe (38px) + EINE Schriftgroesse (0.85rem) fuer alle drei.
   ACHTUNG Body-Klasse: /cart/ traegt in dieser Instanz body.order-summary-page
   + body.checkout-page (NICHT shopping-cart-page - das nur zur Sicherheit
   mitgefuehrt). Spezifitaet body.x .cart-item-actions .btn.btn-secondary
   = (0,4,1) schlaegt sowohl .btn.btn-secondary (0,2,0 !important) als auch
   .shopping-cart-page .cart-item-actions .btn[data-action] (0,4,0 !important). */
body.order-summary-page .cart-item-actions .btn.btn-secondary,
body.shopping-cart-page .cart-item-actions .btn.btn-secondary {
    font-size: 0.85rem !important;
    padding: 8px 16px !important;
    min-height: 38px !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
}
/* Papierkorb bleibt kompakt-quadratisch in gleicher Hoehe. */
body.order-summary-page .cart-item-actions .btn.btn-secondary.btn-icon,
body.shopping-cart-page .cart-item-actions .btn.btn-secondary.btn-icon {
    padding: 8px 13px !important;
}
/* Menge-Fake-Button: nicht mehr full-width aufblasen, Label normalgewichtet. */
body.order-summary-page .cart-item-actions .mf-dropdown .btn.btn-secondary,
body.shopping-cart-page .cart-item-actions .mf-dropdown .btn.btn-secondary {
    width: auto !important;
    min-width: 108px !important;
    justify-content: space-between !important;
}
body.order-summary-page .cart-item-actions .btn.btn-secondary .fwn,
body.shopping-cart-page .cart-item-actions .btn.btn-secondary .fwn {
    font-size: 0.85rem !important;
}


/* ============================================================================
   TASK-450 (2026-07-06): UVP-Zeile auf der PDP in Rot.
   Das Label kommt serverseitig aus PriceLabel (DefaultRegularPriceLabelId ->
   Label "UVP"); hier nur die Farbe. Streichpreis bleibt durchgestrichen.
   Scoped auf body.mts-pdp - Listing-Karten (.mts-pcard__uvp) und Modals
   (.mts-bt-uvp) haben ihr eigenes UVP-Styling.
   ============================================================================ */
body.mts-pdp .pd-promoprice-group .pd-promoprice-label,
body.mts-pdp .pd-promoprice-group .pd-promoprice {
    color: #b91c1c !important;
}
body.mts-pdp .pd-promoprice-group .pd-promoprice {
    text-decoration: line-through !important;
    font-weight: 600 !important;
}
body.mts-pdp .pd-promoprice-group .pd-promoprice-tip {
    color: #b91c1c !important;
    opacity: 0.75;
}

/* TASK-450 Nachtrag (2026-07-06): Native Sekundaer-Aktionen "Merken",
   "Fragen?", "Weitersagen" auf der PDP ausblenden (User-Auftrag). Nur CSS,
   damit der __mtsPdpCtaReorder-Anchor (MtsLayoutScripts) im DOM bleibt.
   Das eigene Vergleichen-Item (.mts-compare-action-item) bleibt sichtbar
   und rueckt zentriert in die Reihe. */
body.mts-pdp .pd-actions .pd-action-item:has(.action-add-to-wishlist),
body.mts-pdp .pd-actions .pd-action-item:has(.action-ask-question),
body.mts-pdp .pd-actions .pd-action-item:has(.action-bullhorn) {
    display: none !important;
}
/* Vergleichen-Button wird vom MtsPdpFulfillment-Widget aus dieser Row in
   die CTA-Row (zwischen Leasing und Bestpreis) umgehaengt - danach ist die
   Row leer, Container komplett ausblenden. initCompare (mts-theme-global.js)
   injiziert weiterhin hierher (display:none stoert DOM-Inserts nicht). */
body.mts-pdp .pd-actions-container {
    display: none !important;
}
/* Der Sibling-Trennstrich aus MtsPdpCountdown (.pd-action-item + .pd-action-item::before)
   matcht weiter gegen die per display:none versteckten Items -> am freistehenden
   Vergleichen-Item unterdruecken. */
body.mts-pdp .pd-actions .pd-action-item + .pd-action-item::before {
    content: none !important;
}
/* Codex-F4: Fehlermeldung des PDP-CTA-Reservierungs-Pfads (reserveProduct
   ohne Drawer-Karte) - sitzt unter dem Menge/Warenkorb-Container. */
body.mts-pdp .pd-offer-actions-container .mts-cta-err {
    flex-basis: 100%;
    margin-top: 8px;
    text-align: center;
}

/* --- PDP Rahmenform-Switcher (TASK-451) ------------------------------- */
/* Wird von storefront.js oberhalb der Varianten-/Groessenauswahl injiziert
   (Aequivalent zur Smartstore-Zone productdetails_attrs_top). Zentriert,
   KEIN Rahmen/Border, KEIN grauer Hintergrund. Header nur "Rahmenform"
   (Typografie wie natives .choice-label). Icons = lizenzierte Bidex-FT-Glyphen
   (lokal gehosteter Icon-Font), schwarz. Aktive Form: fett + Primaerfarbe. */
@font-face {
    font-family: 'bidex';
    font-weight: 400;
    font-style: normal;
    src: url('/Modules/MoveToShop.Connector/fonts/bidex.woff') format('woff');
    font-display: swap;
}
.mts-fsw {
    margin: 0 0 0.9rem;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: center;
}
.mts-fsw-head {
    display: block;
    margin-bottom: 8px;
    line-height: 1.2;
}
.mts-fsw-head-label {
    font-size: 14px; font-weight: 600; letter-spacing: 0.28px;
    color: #1d1d1f;
}
.mts-fsw-chips {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.35rem;
    justify-content: center; align-items: flex-start;
}
.mts-fsw-chip {
    display: inline-flex; flex-direction: column; align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.1rem;
    background: transparent;
    border: 0;
    color: #1d1d1f;
    text-decoration: none !important;
}
a.mts-fsw-chip { cursor: pointer; }
a.mts-fsw-chip:hover .mts-fsw-label { color: var(--mts-accent-text); }
a.mts-fsw-chip:focus-visible { outline: none; }
a.mts-fsw-chip:focus-visible .mts-fsw-label { text-decoration: underline; }
.mts-fsw-chip.is-active { cursor: default; }
/* Bidex-FT-Icon-Glyph pro Chip (PUA-Codepoints) - klar SCHWARZ, deutlich sichtbar. */
.mts-fsw-ic {
    font-family: 'bidex';
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    font-size: 36px;
    display: inline-block;
    color: #1d1d1f;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.mts-fsw-ic::before { display: inline-block; }
.mts-fsw-ic--diamant::before    { content: '\F009'; }
.mts-fsw-ic--trapeze::before    { content: '\F002'; }
.mts-fsw-ic--easy-entry::before { content: '\F005'; }
.mts-fsw-ic--wave::before       { content: '\F004'; }
.mts-fsw-ic--damen::before      { content: '\F001'; }
.mts-fsw-label {
    font-size: 13px; font-weight: 500; line-height: 1.15;
    color: #1d1d1f; text-align: center;
}
/* Text auf hellem Grund -> Textton (2026-08-15). --mts-c-primary ist der
   FLÄCHENton und trägt auf Weiß nur 3,68:1. */
.mts-fsw-chip.is-active .mts-fsw-label { font-weight: 700; color: var(--mts-accent-text); }
@media (max-width: 480px) {
    .mts-fsw-chips { gap: 0.4rem 1rem; }
    .mts-fsw-ic { font-size: 32px; }
    .mts-fsw-label { font-size: 12px; }
}

/* ===========================================================================
   110 %-DARSTELLUNG (TASK-578)
   ===========================================================================
   Ziel: der Shop soll bei 100 % Browser-Zoom so aussehen wie bisher bei 110 %.

   WARUM `zoom` und nicht die rem-Basis: das sichtbare Design liegt nicht im
   Bootstrap-Theme, sondern im zuletzt geladenen Overlay mts-theme-global.css -
   und das ist zu 88,7 % px-basiert (1.139 px-Laengen gegen 70 rem) mit 2.825
   !important. Gemessen: `html{font-size:17.6px}` laesst den Header bei exakt
   1,000x und waechst nur die Seitenhoehe um 1,8 % - also praktisch wirkungslos.
   `transform: scale(1.1)` scheidet ebenfalls aus (gemessen 672 px horizontaler
   Ueberlauf, sticky Header loest sich um 60 px vom Rand). `zoom` erfasst als
   einziges auch px und laesst position:fixed/sticky und die Slick-Rechnungen
   intakt (gemessen: Header-Delta 0,8 px, .slick-track 1376 -> 1375,99 px).

   NICHT global: die Regel haengt an .mts-zoom-110 am <html>. mts-*.css ist die
   gemeinsame Schicht des Moduls MoveToShop.Connector und wird auch von
   store.movetoshop.de geladen - ohne diese Klasse aendert sich dort nichts.
   Gesetzt wird sie instanz-lokal (Topic MtsZoom110, head_html_tag).

   BEWUSSTE NEBENWIRKUNG: der nutzbare CSS-Raum sinkt auf V/1,1, die
   Media-Queries feuern aber weiter beim echten Viewport V. Je Breakpoint B
   entsteht dadurch ein Band [B, B*1,1), in dem das groessere Layout auf
   weniger Platz sitzt: lg 992-1091, xl 1200-1320, xxl 1400-1540 px.
   Vom Nutzer am 2026-07-27 ausdruecklich in Kauf genommen.
   =========================================================================== */
html.mts-zoom-110 {
    --mts-zoom: 1.1;
    /* Viewport-Einheiten kennen den Zoom NICHT: unter zoom:1.1 ist 100vw die
       volle Bildschirmbreite in CSS-px, gerendert also 110 % davon. Jede
       vw/vh-Angabe braucht deshalb eine Gegenrechnung. */
    --mts-vw: calc(1vw / 1.1);
    --mts-vh: calc(1vh / 1.1);
}
html.mts-zoom-110 body { zoom: var(--mts-zoom); }

/* --- 1) Full-Bleed-Sections ------------------------------------------------
   13 Stueck allein auf der Startseite (.mts-bleed aus storefront/mts-home-sections.css
   bzw. den PageBuilder-Stories). Ohne Gegenrechnung gemessen: width 1584 px bei
   left -72 px, also links UND rechts je 72 px Beschnitt - body{overflow-x:hidden}
   verschluckt es lautlos. Nach dem Fix gemessen: alle 13 auf 1440 px / left 0. */
html.mts-zoom-110 .mts-bleed {
    width: calc(100 * var(--mts-vw)) !important;
    margin-left: calc(-50 * var(--mts-vw)) !important;
    margin-right: calc(-50 * var(--mts-vw)) !important;
}
/* Der Kategorie-Hero im Topic MtsThemeGlobal zentriert ANDERS (calc(50% - 50vw)
   statt left:50% + negative Margin). Der 50%-Term muss stehen bleiben - laesst
   man ihn weg, springt der Hero bei 1440 um rund 590 px nach links.
   Spezifitaet ist hier entscheidend: das Original steht als INLINE-Stilblock im
   Topic MtsThemeGlobal und rendert damit NACH dieser Datei. Bei gleicher
   Spezifitaet gewinnt das Original. Der Selektor muss den vollen Original-Pfad
   (body.mts-cat-page ...) tragen, sonst ist die Regel ein stiller No-Op. */
html.mts-zoom-110 body.mts-cat-page .mts-cat-hero-banner,
html.mts-zoom-110 body.mts-cat-page .mts-cat-hero {
    width: calc(100 * var(--mts-vw)) !important;
    max-width: calc(100 * var(--mts-vw)) !important;
    margin-left: calc(50% - 50 * var(--mts-vw)) !important;
    margin-right: calc(50% - 50 * var(--mts-vw)) !important;
}

/* --- 2) Modale, Drawer, Offcanvas -----------------------------------------
   Jeder Wert einzeln gegengerechnet, NICHT auf einen gemeinsamen Nenner
   gebracht - die Originale sind bewusst verschieden (85/88/90/92/94/100vh),
   und ein Einheitswert waere eine als Fix getarnte Design-Regression. */
/* Deckt auch den breiten Anfrage-Dialog ab: .mts-pd-modal--split ist ein
   Modifikator AN .mts-pd-modal, diese Regel greift also mit. Nur die Höhe
   braucht die Gegenrechnung - die Breite nicht: 980 px CSS werden unter
   zoom:1.1 zu 1078 px, und die Zoom-Klasse hängt an einer Media-Query ab
   1600 px (dort stehen 1600/1,1 = 1454 CSS-px zur Verfügung). Geprüft
   2026-08-15, kein Zusatz nötig. */
html.mts-zoom-110 .mts-pd-modal            { max-height: calc(90 * var(--mts-vh)) !important; }
html.mts-zoom-110 #filter-widget.offcanvas-bottom { max-height: calc(92 * var(--mts-vh)) !important; }
html.mts-zoom-110 .mts-compare-drawer__panel { max-height: calc(92 * var(--mts-vh)) !important; }
html.mts-zoom-110 .mts-modal-card          { max-height: calc(88 * var(--mts-vh)) !important; }
html.mts-zoom-110 .extra-modal-box         { max-height: calc(94 * var(--mts-vh)) !important; }
html.mts-zoom-110 .extra-modal-body        { max-height: calc(85 * var(--mts-vh)) !important; }
/* Bootstrap-Offcanvas (die Warenkorb-Schublade) -- der Nachzuegler in dieser
   Liste, gefunden erst am 2026-08-10 durch eine Nutzermeldung von einem
   27-Zoll-Monitor.

   Bootstrap gibt .offcanvas-start/-end `height: 100%`; bei position:fixed loest
   das gegen den Viewport auf, und der zoom rendert es anschliessend ein Zehntel
   groesser. Gemessen bei 2560x1329: CSS 1328,99px -> gerendert 1462px, also
   133px unterhalb der Fensterkante.

   Warum das schlimmer ist als ein Anschnitt: dort unten sitzt der Fuss mit
   Zwischensumme, "Zum Warenkorb" und "Zur Kasse" -- und die Kette vom Fuss bis
   zur Schublade ist durchgehend position:absolute. Es entsteht deshalb KEIN
   Scrollbereich (gemessen: scrollHeight === clientHeight ueber alle sieben
   Vorfahren). Der Fuss war nicht abgeschnitten, sondern unerreichbar: der Kunde
   konnte nichts in den Warenkorb legen und dann zur Kasse gehen.

   Warum es so lange unbemerkt blieb: die Zoom-Klasse haengt an einer
   Media-Query ab 1600px. Auf 1366/1440/1536 ist der Faktor 1,0 und alles sitzt
   richtig -- also auf jedem gewoehnlichen Notebook, auf dem geprueft wurde.
   Wer diesen Block erweitert: die Schwelle ist die Testbedingung, nicht das
   Element. */
html.mts-zoom-110 .offcanvas.offcanvas-start,
html.mts-zoom-110 .offcanvas.offcanvas-end { height: calc(100 * var(--mts-vh)) !important; }
/* Der innere Traeger rechnet NOCHMALS gegen den Viewport (gemessen: 1328,99px
   bei einer Schublade von bereits korrekten 1208,18px). Die Schublade allein zu
   korrigieren reicht deshalb nicht -- der Fuss blieb danach unveraendert bei
   1380px. Hier kein zweites calc, sondern schlicht 100%: so folgt der Traeger
   der Schublade, egal was oben eingestellt ist, und die Rechnung steht nur an
   einer Stelle. */
html.mts-zoom-110 .offcanvas.offcanvas-start > .offcanvas-content,
html.mts-zoom-110 .offcanvas.offcanvas-end   > .offcanvas-content { height: 100% !important; }
@media (max-width: 749px) {
    html.mts-zoom-110 .mts-compare-drawer__panel { max-height: calc(100 * var(--mts-vh)) !important; }
}
@media (max-width: 991px) {
    html.mts-zoom-110 .mts-modal-card { max-height: calc(92 * var(--mts-vh)) !important; }
}

/* --- 2b) SmartFit-Modal: das einzige Fremdelement in dieser Liste ----------
   Das SmartFit-Widget hängt sein Modal als natives <dialog class="oz-dialog">
   direkt an den <body> und öffnet es per showModal() im Top-Layer. Die
   zugehörige Regel steht in einem zur Laufzeit vom Vendor-Skript injizierten
   <style> (cdn.prod.smartfit.online) und ist damit nicht editierbar:

       .oz-dialog { all: revert; display: none; flex-flow: row nowrap;
                    justify-content: center; align-items: center;
                    width: 100vw;  height: 100dvh;
                    max-width: 100vw; max-height: 100vh; margin: 0; ... }

   Genau diese vier Viewport-Längen sind unter `zoom` falsch - dasselbe Muster
   wie bei .mts-bleed oben. Der Dialog sitzt korrekt bei left:0; er ist nur
   10 % zu breit, und `justify-content: center` zentriert den iframe daraufhin
   in einem zu großen Kasten. Gemessen auf mc.movetoshop.com, PDP
   /cube-kathmandu-hybrid-ex-800-2025/, geöffnetes Modal:

       Viewport   dialog-Breite   Mitte iframe   Soll     Versatz
       1920        2112 px         1056 px        960      +96 px
       1600        1760 px          880 px        800      +80 px
       1599        1599 px          799,5 px      799,5      0     (Zoom aus)
       1024        1024 px          512 px        512        0     (Zoom aus)
        390         390 px          195 px        195        0     (Zoom aus)

   Der Versatz ist exakt Viewport/20 und setzt punktgenau an der Gate-Grenze
   1600 px des Topics MtsZoom110 ein - er gehört also zum Verfahren, nicht zum
   Widget und nicht zur Instanz: store.movetoshop.de misst bei 1920 denselben
   Wert (+96). Senkrecht steckt derselbe Fehler drin, 1188 statt 1080 px, der
   iframe saß 54 px zu tief (y 280,5 statt 226,5) - deshalb sind beide Achsen
   gegengerechnet. Nach dem Fix gemessen: 1920x1080, Mitte 960, Versatz 0,
   iframe y = 226,5.

   KEIN !important, anders als der Rest dieses Blocks: `html.mts-zoom-110
   .oz-dialog` ist (0,2,1) gegen (0,1,0) der Vendor-Regel. Im Browser
   gegengeprobt mit dem Stylesheet als ERSTEM Kind von <head>, also in der
   ungünstigsten denkbaren Ladereihenfolge - die Werte setzen sich trotzdem
   durch. Das `all: revert` der Vendor-Regel ändert daran nichts, es zählt in
   der Kaskade pro Eigenschaft mit der Spezifität seiner eigenen Regel.

   Warum --mts-vh und nicht dvh, obwohl der Vendor `height: 100dvh` setzt:
   der Zoom-Block ist erst ab 1600 px aktiv, und dort gibt es keine ein- und
   ausblendende Browserleiste, die dvh von vh trennen würde - gemessen
   100vh = innerHeight = 1080 px. Eine eigene --mts-dvh wäre eine Variable
   ohne Unterschied. */
html.mts-zoom-110 .oz-dialog {
    width: calc(100 * var(--mts-vw));
    max-width: calc(100 * var(--mts-vw));
    height: calc(100 * var(--mts-vh));
    max-height: calc(100 * var(--mts-vh));
}

/* --- 3) Header: die Suche darf nicht zerquetscht werden --------------------
   Die .menubar ist nowrap (mts-theme-global.css:6896). Ihre vier Gruppen sind
   inhaltsbreit und wachsen sauber mit (gemessen 643,4/167,4/200,5/111,3 ->
   707,4/184/220,5/122,4 = exakt 1,1x). Das Suchfeld ist das EINZIGE flexible
   Element und traegt damit das gesamte Platzdefizit: gemessen 201,3 -> 78,2 px.

   Wichtig: dieser Zustand entsteht erst, NACHDEM die IIFE
   __mtsMoveSearchToMenubar (mts-theme-global.js:4088) das Suchfeld in die
   Menubar gehoben und .mts-menubar-search gesetzt hat. Davor - und unterhalb
   992 px, wo der Mover frueh aussteigt - skaliert die Suche sauber 1,1x und
   hat gar kein Platzproblem. Die Regel haengt deshalb an genau dieser Klasse
   und nicht an einer festen Pixelbreite fuer irgendeinen DOM-Zustand.
   Loesung: Umbruch erlauben statt schrumpfen. Passt die Suche in die Zeile,
   bleibt alles wie gehabt; passt sie nicht, faellt sie in voller Breite in
   eine zweite Zeile - das ist die freundlichere Degradation als ein auf 78 px
   zusammengeschobenes Eingabefeld. */
html.mts-zoom-110 header#header .menubar {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
}
html.mts-zoom-110 header#header .menubar .shopbar-col.shopbar-search.mts-menubar-search {
    flex: 0 0 auto !important;
    min-width: 200px !important;
}

/* --- 4) Popper-Overlays: Tooltip und Popover ------------------------------
   Nachgetragen 2026-07-29 (Nutzer-Meldung: der Groessen-Tooltip auf der PDP
   steht weit rechts neben der Box statt mittig darueber; auf der Demo ohne
   Zoom sitzt er korrekt).

   URSACHE. Bootstrap 4.6.2 haengt den Tip bei `container: false` an
   `document.body` (bootstrap.js `_getContainer()`), also MITTEN IN den
   gezoomten Teilbaum. Popper 1.16.1 berechnet die Position aus
   `getBoundingClientRect()` - das liefert bereits GERENDERTE, also mit 1,1
   skalierte Koordinaten - und schreibt sie als CSS-Laenge zurueck, die der
   Browser im gezoomten Kontext ein ZWEITES Mal mit 1,1 multipliziert.

   Gemessen auf mc, Verhaeltnis gerendert/CSS in 21 von 21 Messungen exakt
   1,1. Der Fehler ist damit `left * 0,1` und waechst linear nach rechts - die
   Groessen-Boxen sitzen ganz rechts in der Buybox, dort ist er maximal:
   162 px bei 1680, 120 px bei 1280, 75 px bei 900. Bei 1680 stand der Tip
   komplett ausserhalb des Viewports und trieb `scrollWidth` auf 1806 px, es
   gab also eine horizontale Scrollleiste, solange er sichtbar war. Vertikal
   gilt dasselbe (`top * 0,1`), was bei gescrollter Seite auffaellt.

   LOESUNG. Gegenzoom am Overlay selbst: `zoom` skaliert auch `left`/`top` im
   Koordinatensystem des Elternknotens, der doppelte Faktor hebt sich also
   exakt auf. Nachgemessen: Verhaeltnis faellt auf 1,0, Restversatz <= 1,3 px
   auf allen drei Breiten, und der Tip steht wieder ueber der Box. Er rendert
   dadurch ungezoomt - das sind exakt die Masse der Demo-Referenz (33 x 40 px,
   Schrift 14 px), nicht etwa "zu klein".

   VERWORFENE WEGE, damit sie niemand erneut probiert:
   - `container: 'html'` (Tip aus dem Zoom holen): positioniert genauso gut,
     ist aber nicht haltbar. Smartstore initialisiert die Tooltips DELEGIERT
     und lazy (`public.common.js`, eine Instanz auf `body` mit `selector`);
     nach dem AJAX-Rerender der Buybox sind alle Toggles neue Knoten ohne
     Instanz und der Versatz ist zurueck. Ein einmaliges Neu-Init traegt nicht.
   - Popper-Modifier via `popperConfig`: greift beim Seitenaufruf gar nicht
     (`_getDelegateConfig()` kopiert das alte `null` in die Kind-Config) und
     laesst selbst gepatcht einen systematischen Rest von 7,3 px horizontal
     und 4,2 px vertikal stehen - Popper mischt intern `offsetWidth`
     (ungezoomt) mit `getBoundingClientRect` (visuell). Rein numerisch nicht
     aufloesbar; hier gilt nach dem Gegenzoom wieder `offsetWidth == Rect`.

   Bewusst nur `.tooltip`/`.popover` als direkte Body-Kinder: die uebrigen
   Overlays der Seite sind NICHT Popper-positioniert und daher unauffaellig
   (Header- und Megamenue-Dropdowns rein per CSS, `left: 0`, Versatz 0,00 px;
   der Filial-Waehler ist ein Vollbild-`.mts-modal` mit `position: fixed`). */
html.mts-zoom-110 body > .tooltip,
html.mts-zoom-110 body > .popover {
    zoom: calc(1 / var(--mts-zoom));
}

/* ====================================================================
   DESIGN-SCHICHT FUER NATIVE PAGEBUILDER-BLOECKE (TASK-526, Sitzung 07)
   ====================================================================

   Die Startseite wird von handgeschriebenen `code`-Bloecken auf native
   PageBuilder-Bloecke gehoben, damit ein Designer sie ohne HTML pflegen
   kann. Ein nativer Block rendert dieselbe Sektion in einem anderen
   Geruest; dieser Block schliesst die Luecken, die dabei WIRKLICH
   entstehen - gemessen am 2026-07-31 auf der Demo, Preview gegen Preview,
   fuenf Breiten, Story 14 (code) gegen Story 25 (nativ).

   WAS HIER BEWUSST NICHT STEHT
   Die grosse Haelfte des gemessenen Bedarfs - Schriftgroessen (56
   Abweichungen), Ausrichtung (40), Lauftext-Groesse und -Farbe (je 55) -
   gehoert NICHT in eine CSS-Schicht. Sie entsteht, weil der Emitter die
   alte Traegerkette (`.mts-wrap` > `.mts-shead`) fallen laesst. Traegt er
   sie stattdessen als `ContentCssClass` nach - sie landet laut 03/F1 auf
   `.g-block-content` -, greifen die BESTEHENDEN Regeln unveraendert
   weiter. Nachgemessen: dieser Weg drueckt dieselben vier Zahlen auf
   5 / 0 / 5 / 5, ohne eine einzige neue Regel. Ein CSS-Nachbau waere eine
   zweite Quelle fuer dieselbe Typografie und driftet ab dem ersten Tag.

   Er haette ausserdem ein Nebenproblem, das Sitzung 09 unabhaengig
   benannt hat: die Sollgroesse einer der Sektionen (`mts-section--tight`,
   Markenlogos) ist gar keine Regel des Gestaltungssystems, sondern ein
   Inline-Style an genau einer Ueberschrift genau einer Instanz. Als
   `.mts-section--tight .g-heading h2` in die GETEILTE Modul-CSS
   geschrieben, wuerde die Ad-hoc-Wahl eines Shops zur Regel fuer jede
   kuenftige Box (Memory `feedback_instanzgebundene_assets_nicht_paketieren`).
   Die Traegerkette hat das Problem nicht: sie schreibt keinen Wert, sie
   haengt die vorhandenen Traeger wieder an - die Sektion bekommt damit die
   Systemgroesse statt der Ad-hoc-Groesse.
   Beleg: `smartstore/docs/plans/07-ergebnisse-design-schicht.md`.

   --- 1) Bandkopf und Bandfuss: Padding-Aufhebung -------------------
   Ein Produktband sind drei Bloecke (Kopf, productlist, Fuss). Damit sie
   EIN Band bilden, hebt der Fundamentblock das Padding zwischen ihnen
   auf - ueber ATTRIBUTSELEKTOREN:
       .mts-store [data-mts-band-head] { padding-bottom: 0 }
       .mts-store [data-mts-band-foot] { padding-top: 0 }
   Ein nativer Block hat fuer ein `data-`-Attribut keinen Traeger:
   `CssClass`, `RootCssClass` und `HtmlId` tragen Klassen bzw. Ids. Ohne
   Ersatz waechst jedes Band um 280 px, die Startseite um 560 px
   (gemessen: 4 Abweichungen je Breite, in allen fuenf Breiten dieselben).

   NAMENSRAUM - UMGESTELLT AM 2026-08-03 (TASK-619 #2). Der Emitter schreibt
   ab sofort `mts-a-<name>` plus `mts-a-<name>--<wert>`. Die erste
   Selektorzeile ist damit die TRAGENDE, nicht mehr die vorsorgliche.
   Kollisionsprobe am selben Tag wiederholt: 0 Treffer fuer `mts-a-` in
   storefront.css (ausser diesen Regeln), mts-theme-global.css,
   chatbot.css, smartfit.css und in den ausgelieferten Startseiten beider
   Instanzen; Positivkontrolle `mts-section*` im selben Lauf: 33 Treffer.

   DIE ZWEITE ZEILE (`[class*="mts-attr-mts-band-*"]`) IST NOCH NICHT TOT,
   und das ist gemessen, nicht vermutet. TASK-619 #6 verlangt ihre
   Entfernung, "sobald der Emitter mts-a-* schreibt". Der Emitter schreibt
   sie - aber die Klasse steht nicht im Emitter, sie steht in der DB der
   Instanz. Am 2026-08-03 an der ausgelieferten Startseite von
   mc.movetoshop.com nachgezaehlt: 24 `g-block-html`, und die vier
   Band-Traeger heissen dort `mts-attr-mts-band-head-featured-cube`,
   `-foot-featured-cube`, `-head-featured-race-gravel`,
   `-foot-featured-race-gravel`. Kein einziges `mts-a-`. Diese Datei wird
   auf BEIDE Instanzen ausgeliefert; ein Deploy ohne die zweite Zeile
   verlaengert die Startseite der Kundeninstanz um 560 px, ohne dass hier
   irgendetwas rot wird.

   ENTFERNUNGSBEDINGUNG, damit sie nicht ewig stehen bleibt: die zweite
   Zeile jeder Regel faellt, sobald die Startseiten-Story der Box aus dem
   heutigen Emitter neu importiert ist und
       grep -oE 'mts-attr-[a-z0-9-]+' <ausgelieferte Startseite>
   auf beiden Instanzen 0 Treffer liefert. Dasselbe gilt fuer den
   `mts-attr-`-Zweig der Rueckuebersetzung in storefront.js.

   WARUM DIESE REGELN NEBEN DER RUECKUEBERSETZUNG AUS 09 STEHEN BLEIBEN.
   09 schlaegt vor, die Klassen zur Laufzeit wieder in `data-`-Attribute zu
   uebersetzen (`anlagen/09-attr-rehydrat.js`, eingehaengt ueber das
   defer-geladene `storefront.js`). Das ist der bessere Weg und deckt mehr
   ab als diese zwei Regeln: es holt auch die VERHALTENSSEITE zurueck - die
   Carousel-Pfeile beider Produktbaender, Parallax und CTA-Hintergrund
   haengen an denselben Attributen und entstehen sonst gar nicht.
   Trotzdem bleibt das hier stehen, und zwar nicht aus Bequemlichkeit: eine
   Layout-Zusage darf nicht von JavaScript abhaengen. Faellt das Skript aus,
   fehlen mit diesen Regeln die Pfeile - ohne sie waechst die Startseite
   zusaetzlich um 560 px. Doppelung ist hier der guenstigere Fehlerfall. */
.mts-store .mts-a-band-head,
.mts-store [class*="mts-attr-mts-band-head"] { padding-bottom: 0; }

.mts-store .mts-a-band-foot,
.mts-store [class*="mts-attr-mts-band-foot"] { padding-top: 0; }

/* --- 2) Grid-Sicherung, generisch ----------------------------------
   `.g-story` ist ein CSS-Grid mit einem `1fr`-Track. `1fr` ist
   `minmax(auto, 1fr)`; der `auto`-Anteil folgt dem groessten
   Min-Content-Beitrag seiner Items. Ein einziger breiter Block zieht
   damit die GANZE Seite nach rechts - am 2026-07-29 auf mc passiert,
   alle Bleed-Sektionen sassen bei `left: 52`.

   Die ausgelieferte Sicherung in `import/pagebuilder/band-assets.js`
   zaehlt Blocktypen auf und deckt nur die productlist-Kette ab. Gegen
   einen `html`-Block ist sie WIRKUNGSLOS - und genau davon bringt die
   native Story 17 Stueck mit. Gemessen am 2026-07-31 auf der
   Demo-Startseite, acht Breiten, mit einem `html`-Sondenblock
   (Min-Content 2.960 px, nur im DOM, keine DB-Zeile):

     Zustand      1920 1680 1440 1280 1100 1024  900  768
     IST             0    0    0    0    0    0    0    0
     DEFEKT        739  823  792  872  962 1000 1062 1128
     AUFZAEHLUNG   739  823  792  872  962 1000 1062 1128   <- deckungsgleich
     GENERISCH       0    0    0    0    0    0    0    0

   Gemessen wurde die x-POSITION, nicht `scrollWidth`: `body{overflow-x:
   hidden}` verschluckt den Ueberhang, `scrollWidth` meldete in allen acht
   Breiten IST == DEFEKT, waehrend die Sektionen bis zu 1.128 px daneben
   sassen. Wer ueber `scrollWidth` prueft, sieht gruen.

   PREIS, beziffert: ein Block, der von seinem Min-Content lebt, wird auf
   die Trackbreite beschnitten (Sonde: Inhalt 2.960 px, Box 704 bis
   1.778 px). Bestehende Bloecke sind NICHT betroffen - alle 24 Bloecke
   der Startseite sind unter IST und GENERISCH in allen acht Breiten
   breitengleich. Braucht ein Block spaeter mehr, bekommt er gezielt
   `min-width: auto` zurueck; die Regel wird deswegen nicht weggelassen.

   `!important` ist nicht dekorativ: die Regel muss eine gleich
   spezifische Deklaration schlagen koennen, die weiter unten im Dokument
   geladen wird - ein Story-Block kann eigenes CSS im Body mitbringen, und
   Body laedt nach Head.

   Die Aufzaehlung in `band-assets.js` bleibt bis zum Cutover als
   Doppelung stehen (fremdes Revier, S0 §2). */
.mts-store .g-story > .g-block,
.mts-store .g-story > .g-block > .g-block-inner,
.mts-store .g-story > .g-block > .g-block-inner > .g-block-content { min-width: 0 !important; }

/* === Ghost-Knopf: Randfarbe gegen die eigene Basisregel behaupten ==========
   Symptom (gemeldet 2026-07-31): "Beratung buchen" im Hero und die gleichen
   Knoepfe in den anderen Sektionen zeigen ihren weissen Rand erst beim
   Ueberfahren mit der Maus, nicht davor.

   Ursache, gemessen an der ausgelieferten Seite - eine Namenskollision:
   das Modul benennt seine eigenen Varianten mit EINEM Bindestrich
   (.mts-btn-ghost, .mts-btn-primary, .mts-btn-current), die Story-Bloecke der
   Startseite mit ZWEI (.mts-btn--ghost, .mts-btn--primary, .mts-btn--link).
   Geteilt ist nur die Basisklasse .mts-btn - und deren
   `border: 1px solid transparent` (oben) trifft damit auch die Story-Knoepfe.

   Warum die Basisregel gewinnt, obwohl beide Selektoren gleich spezifisch
   sind: DIESE Datei wird als <link> NACH </head> geladen (einziger echter
   Link der Seite; die frueheren Treffer im Quelltext sind Kommentare). Sie
   ist damit das zuletzt geladene Stylesheet und schlaegt den <style>-Block
   des Fundaments ueber die Reihenfolge. Sichtbar wurde der Rand nur noch
   durch `.mts-btn--ghost:hover` - die Pseudoklasse hebt die Spezifitaet an
   und gewinnt unabhaengig von der Reihenfolge. Genau das ergibt
   "Rand erst beim Drueberwischen".

   Warum NUR die Randfarbe und NUR --ghost:
   Der naheliegende Weg `.mts-btn:not([class*="mts-btn--"])` behebt die
   Kollision zwar allgemein, nimmt aber --primary und --link ihren 1px-Rand,
   weil das Fundament dort `border: 0` setzt. Am 2026-07-31 auf mc gemessen:
   vier Knoepfe schrumpfen dadurch von 41 auf 39 px - die Box rechnet als
   content-box. --primary und --link SOLLEN keinen sichtbaren Rand haben;
   transparent ist dort das richtige Ergebnis. Diese Fassung aendert
   ausschliesslich die Farbe und kann deshalb keine Geometrie verschieben.

   Die Hover-Regel des Fundaments (`.mts-btn--ghost:hover { border-color:#fff }`)
   bleibt wirksam - hoehere Spezifitaet. Der Rand wird beim Ueberfahren also
   weiterhin voll weiss, nur eben aus einem sichtbaren Zustand heraus. */
.mts-btn--ghost { border-color: rgba(255, 255, 255, 0.5); }

/* ==========================================================================
   Senkrechte Zentrierung nativer Sektionen (Sitzung 10, 2026-07-31)
   ==========================================================================
   `.mts-section` zentriert ihren Inhalt senkrecht: die Sektion ist ein
   Flex-Container, und im code-Block ist `.mts-wrap` ihr Flex-Kind - ein Kasten
   mit Inhaltshoehe, der sich zentrieren laesst.

   Beim nativen Block schiebt der PageBuilder seine eigene Kette dazwischen
   (`.g-block-content > section.g-block-html-outer > .g-block-html-inner >
   .g-html-content`). Flex-Kind ist jetzt `.g-block-content`, und das fuellt die
   volle Hoehe - die Zentrierung verliert ihren Gegenstand, der Inhalt haengt
   oben am Innenabstand.

   Gemessen am 2026-07-31 auf mc, dunkle Sektion "Persoenlich beraten"
   (Preview gegen Preview, 768 px):

     Vorlage (code):  .mts-shead  660x188  bei y426  -> senkrecht mittig
     nativ (html):    .g-html-content 704x347 bei y140 -> oben am Innenabstand

   Automatische Aussenabstaende schlagen in Flexbox `align-items` - deshalb
   `margin-block: auto` und nicht `align-self: center`: es wirkt in beiden
   Flex-Richtungen und braucht keine Annahme darueber, welche gerade gilt.

   Wirkung, Preview gegen Preview ueber zwei Breiten, Anteil geaenderter Pixel:

     Sektion  2   8,36 %  ->  6,61 %
     Sektion  4   6,20 %  ->  5,02 %
     Sektion  7   9,78 %  ->  9,61 %
     Sektion 10   5,92 %  ->  5,74 %

   Der geaenderte Bereich rutscht dabei nach unten und wird kuerzer: der obere
   Teil der Gruppe deckt sich danach. Der Rest sind die Abstaende innerhalb der
   Gruppe; die loest der Emitter, indem er die Traegerkette genau EINMAL setzt.

   DIE REGEL HAT EINE ZWEITE, EBENSO WICHTIGE WIRKUNG - und deshalb steht hier
   auch `.mts-section--tight`, wo gar nichts zu zentrieren ist:

   Die Traegerkette landet auf `.g-block-content`, also ueber der ganzen Gruppe.
   Sie bringt den Aussenabstand ihrer Vorlage mit (`.mts-shead` hat
   `margin-bottom: 64px`). In der Vorlage sitzt dieser Abstand INNERHALB der
   Sektion - zwischen Textgruppe und Knopfreihe bzw. Markenraster - und die
   leere Huelle, die im Body stehen bleibt, traegt ihn dort auch nativ. Auf
   `.g-block-content` wuerde er ein ZWEITES Mal am unteren Rand der Sektion
   auftauchen. Gemessen an der Markenlogo-Sektion (`--tight`): 865 -> 929 px.

   `margin-block: auto` nimmt ihn in beiden Faellen zurueck, ohne einen Wert zu
   wiederholen: im Flex-Container (`.mts-section`) verteilt `auto` den freien
   Raum und zentriert damit, im normalen Blockfluss (`.mts-section--tight`)
   rechnet sich ein senkrechtes `auto` zu 0.

   Zur Abgrenzung aus TASK-594: der Selektor zielt auf Kern-Markup
   (`.g-block-content`), ist aber an eigenem Markup verankert (`.mts-store`,
   `.mts-section`) und ohne das Modul vollstaendig inert. Dasselbe Muster steht
   mit der generischen Grid-Sicherung bereits in dieser Datei.
   ========================================================================== */
.mts-store .g-block-inner.mts-section > .g-block-content,
.mts-store .g-block-inner.mts-section--tight > .g-block-content {
  flex: 0 0 auto;
  margin-block: auto;
}


/* ==========================================================================
   TRUST-BADGES IN DER MENUBAR – GRÖSSER, NUR AUF DER MULTICYCLE-BOX
   ==========================================================================
   AUFTRAG (Nutzer, 2026-08-05): die vier Badges über dem Logo
   ("Abholung in deiner Filiale" / "Eigene Werkstatt" / "Probefahrt vor Ort" /
   "Sicher bezahlen") sollen etwas größer sein.

   DAS IST DIE RÜCKNAHME EINER FRÜHEREN ENTSCHEIDUNG – und zwar einer
   begründeten. Am 2026-07-28 wurden dieselben Badges auf Nutzerwunsch von
   14px/gap 6/Icon 18px auf 12px/gap 4/Icon 14px verkleinert
   (mts-theme-global.css, Block "Trust-Badges + Filial-Pill"). Der Grund stand
   dort: die vier Badges belegten 594 px der Menubar-Zeile und schoben das
   Suchfeld so weit nach rechts, dass es nicht mehr über der Kategorie-Nav
   zentriert werden konnte.

   WARUM DER GRUND HEUTE NICHT MEHR TRÄGT. Das Suchfeld sitzt auf mc nicht mehr
   in der Menubar-Zeile. Gemessen an der ausgelieferten Startseite
   (2026-08-05): `header#header .menubar` enthält genau drei Gruppen –
   `.menubar-group.ml-0` (Ziel der Trust-Leiste), `.ml-auto` (Kontakt +
   Service) und `--special` (Filial-Pill). Kein `instasearch`, kein
   `shopbar-search`. Der Platzdruck, gegen den verkleinert wurde, existiert in
   dieser Zeile nicht mehr.

   WARUM MARKEN-SCOPE UND NICHT DIE QUELLE IN mts-theme-global.css. Diese Datei
   und mts-theme-global.css gehen an JEDE Instanz. Auf store.movetoshop.de
   (data-mts-brand="bidex") liegt das Suchfeld weiterhin in der Menubar-Zeile,
   und der Bidex-Marken-Layer hebt die Badges dort bewusst erst ab 1600 px auf
   14px an (storefront/brand/bidex/parts/10-header.css, Block A – die
   Abwägung Badge-Größe gegen Suchfeld-Breite ist dort ausgeschrieben). Ein
   Eingriff an der gemeinsamen Quelle würde genau diese Abwägung still
   überschreiben. `[data-mts-brand="multicycle"]` ist der dafür vorgesehene
   Anker (MtsBrandKey.cs) und wird von MtsAssets synchron im <head> gesetzt,
   also VOR dem storefront.css-<link> – kein Aufblitzen der kleinen Größe.

   SPEZIFITÄT. Die zu schlagende Quelle ist
     header#header .mts-trustbar .mts-trust-badge      (1,2,1) !important
     header#header .mts-trustbar .mts-trust-badge svg  (1,2,2) !important
   in mts-theme-global.css. Die Selektoren hier liegen mit dem zusätzlichen
   Attribut je eine Stufe darüber (1,3,2 bzw. 1,3,3) und gewinnen unabhängig
   von der Ladereihenfolge.

   DAS SUCHFELD SITZT DOCH IN DIESER ZEILE – und deshalb steht unten eine
   zweite Regel. Die ausgelieferte HTML-Quelle zeigt in `.menubar` nur die drei
   Gruppen; das Suchfeld wird per JS nachträglich in dieselbe Zeile gehängt und
   nimmt sich den Rest über `flex: 1 1 auto`. Wer nur die Quelle liest, hält
   die Zeile für leer – gemessen wird sie im Browser. Der Preis der größeren
   Badges ist damit real und wurde A/B am laufenden Shop gemessen (dieselbe
   Seite, meine Regel per addStyleTag neutralisiert und wieder freigegeben):

     Viewport   Leiste 12px -> 14px    Suchfeld 12px -> 14px
       1600         582 -> 688              360 -> 394    (Zoom 110 aktiv)
       1500         529 -> 625              371 -> 275
       1440         529 -> 625              312 -> 215
       1366         529 -> 625              238 -> 141   <- zu schmal

   Bei 1366 px – einer sehr verbreiteten Laptop-Breite – bliebe vom Suchfeld
   ein 141-px-Stummel. Das ist genau die Abwägung, wegen der am 2026-07-28
   verkleinert wurde, und sie einfach zu ignorieren hieße, denselben Fehler
   noch einmal zu machen.

   LÖSUNG: nicht die Badges kleiner, sondern EINEN Badge weniger. Die
   bestehende Reduktionsstufe im Topic MtsThemeGlobal (4 -> 3 ab 1340 px) ist
   auf die 12-px-Breiten geeicht; die Leiste ist um 96 px gewachsen, also
   wandert die Stufe um denselben Betrag nach oben. Gemessen, was das bringt:

     Viewport   Badges   Leiste   Suchfeld
       1500       4        625      275     <- bleibt bei vier
       1500       3        488      413
       1366       3        488      279     <- BREITER als die 238 px von heute

   Unterhalb von 1500 px ist das Suchfeld damit sogar breiter als vor dieser
   Änderung, und die Badges sind trotzdem überall größer. Die beiden übrigen
   Stufen des Topics (3 -> 2 ab 1140 px, ganz aus unter 992 px) bleiben
   unangetastet – dort stehen ohnehin nur noch zwei bzw. keine Badges.

   ZURÜCKNEHMEN heißt: diesen Block löschen. Es bleibt kein Rückstand, weil
   hier nichts abgeschaltet, sondern nur überschrieben wird.
   ========================================================================== */
html[data-mts-brand="multicycle"] header#header .mts-trustbar .mts-trust-badge {
  font-size: 14px !important;
  gap: 6px !important;
}
html[data-mts-brand="multicycle"] header#header .mts-trustbar .mts-trust-badge svg,
html[data-mts-brand="multicycle"] header#header .mts-trustbar .mts-trust-badge img {
  width: 18px !important;
  height: 18px !important;
}
/* Die 4 -> 3-Stufe des Topics um das Wachstum der Leiste nach oben gezogen.
   1499.98 statt 1500, damit exakt 1500 px noch alle vier Badges zeigt – bei
   1500 ist das Suchfeld mit 275 px gemessen ausreichend breit. */
@media (max-width: 1499.98px) {
  html[data-mts-brand="multicycle"] header#header .mts-trustbar .mts-trust-badge:nth-child(n+4) {
    display: none !important;
  }
}

/* Filial-Galerie auf der Detailseite -------------------------------------
   Die Bilder je Filiale kommen aus MtsBranchMediaFiles (Band 10..89, siehe
   Views/MtsStorefront/Detail.cshtml). Die Anzahl schwankt zwischen 6 und 7,
   deshalb ein fliessendes Raster statt fester Spalten - eine feste Zahl
   liesse in der letzten Zeile Luecken. */
.mts-detail-gallery { margin-top: 3rem; }
.mts-detail-gallery-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
    color: #0f172a;
}
.mts-detail-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.mts-detail-gallery-item {
    margin: 0;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    border-radius: var(--mts-radius-lg);
    background: #eef2f0;
}
.mts-detail-gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.mts-detail-gallery-item:hover img { transform: scale(1.04); }

/* ==========================================================================
   Filial-Wähler: Öffnungszeit und Aktionszeile          (Nutzer, 2026-08-09)
   ==========================================================================
   Die Aktionszeile steht als GESCHWISTER des <button>, nicht darin - ein <a>
   in einem <button> ist ungültiges Markup und der Klick landete je nach
   Browser mal auf dem Link, mal auf der Filialwahl. Deshalb bekommt das <li>
   hier seinen eigenen Aufbau. */
.mts-modal-branch-item { display: flex; flex-direction: column; }
.mts-modal-branch-item .mts-modal-branch-btn { flex: 1 1 auto; }

/* Heutige Öffnungszeit. Grün heisst offen, grau geschlossen - die Farbe trägt
   dieselbe Aussage wie der Text und ist deshalb kein alleiniger Träger. */
.mts-modal-branch-hours {
    display: inline-flex; align-items: center; gap: 0.34rem;
    margin-top: 0.32rem;
    font-size: 0.8rem; font-weight: 600;
    letter-spacing: -0.005em;
}
.mts-modal-branch-hours::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}
.mts-modal-branch-hours.is-open   { color: #1a7f5a; }
.mts-modal-branch-hours.is-closed { color: var(--mts-ink-muted, #6b7280); }

/* ROUTE UND E-MAIL NEBENEINANDER, TELEFON DARUNTER (Nutzer 2026-08-09).
   Als Raster statt als umbrechende Zeile: `flex-wrap` haette die Aufteilung der
   Textlaenge ueberlassen - eine lange Rufnummer haette die Mail mal mit nach
   oben genommen, mal nicht, und die Kacheln saehen untereinander verschieden
   aus. Die Rufnummer bekommt ihre eigene Zeile ueber die MODIFIKATOR-Klasse und
   nicht ueber `:nth-child(3)`: nicht jede Filiale hat alle drei Handlungen,
   eine Positionsregel waere dann auf die falsche Schaltflaeche gefallen.
   Sie ist ausserdem die laengste der drei - allein auf einer Zeile muss sie
   nicht gekuerzt werden. */
.mts-modal-branch-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem;
    padding: 0.55rem 0.7rem 0.15rem;
    align-items: start;
}
.mts-modal-branch-action--tel { grid-column: 1 / -1; justify-self: start; }
.mts-modal-branch-action {
    /* Der Knopf ist so breit wie sein Text, nicht so breit wie seine Spalte.
       Ohne diese Zeile greift `justify-self: stretch` (Vorgabe im Raster) und
       die E-Mail-Schaltflaeche zieht sich ueber die ganze `1fr`-Spalte, obwohl
       nur "E-Mail" darin steht (Nutzer-Meldung 2026-08-09). `minmax(0, 1fr)`
       bleibt bewusst stehen: die Spalte darf weiterhin schrumpfen, damit die
       Ellipse in `> span` bei engen Kacheln greift. */
    justify-self: start;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem; font-weight: 600;
    color: var(--mts-ink-muted, #6b7280);
    background: var(--mts-c-surface-alt, #f4f6f5);
    border-radius: 9999px;
    text-decoration: none !important;
    transition: background 0.16s ease, color 0.16s ease;
    max-width: 100%;
}
.mts-modal-branch-action > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mts-modal-branch-action svg { flex: 0 0 auto; }
.mts-modal-branch-action:hover,
.mts-modal-branch-action:focus-visible {
    background: var(--mts-c-primary-tint, #e7efec);
    color: var(--mts-c-primary-dark, #3f5a4f);
}
.mts-modal-branch-action:focus-visible {
    outline: 2px solid var(--mts-c-primary, #6d8c80);
    outline-offset: 2px;
}
/* Auf der breiten Kachel der eigenen Filiale steht die Zeile mit derselben
   linken Kante wie der Text darüber, nicht am Bildrand. */
.mts-modal-branch-item.is-current .mts-modal-branch-actions { padding-left: 0.7rem; }

/* ==========================================================================
   Filial-Wähler: eigene Filiale dreispaltig, Scrollbalken   (Nutzer 2026-08-09)
   ==========================================================================
   ROUTE, TELEFON UND E-MAIL STEHEN JETZT NEBEN DER ANSCHRIFT, nicht darunter.

   Das <li> der eigenen Filiale enthält zwei Geschwister: den <button> (Bild +
   Anschrift + Öffnungszeit) und die Handlungsleiste. Bisher lagen sie
   untereinander, weil `.mts-modal-branch-item` eine Spalte ist. Für die eigene
   Filiale wird daraus eine Zeile - der Knopf nimmt den Rest, die Handlungen
   bekommen eine feste Spalte rechts.

   Warum das erst mit dem breiteren Modal geht: bei 1040px blieben für die drei
   Spalten (Bild 38 %, Text, Handlungen) unter 200px je Spalte übrig. Mit
   1280px trägt es. Unterhalb von 900px klappt es wieder untereinander - dort
   ist Nebeneinander keine Ordnung mehr, sondern Gedränge. */
.mts-modal-branch-item.is-current { flex-direction: row; align-items: stretch; }
.mts-modal-branch-item.is-current .mts-modal-branch-btn { flex: 1 1 auto; min-width: 0; }
.mts-modal-branch-item.is-current .mts-modal-branch-actions {
    flex: 0 0 auto;
    /* Hier bewusst wieder EINE Spalte: neben dem Textblock ist untereinander
       die ruhigere Ordnung, und der Platz dafuer ist da. */
    display: flex; grid-template-columns: none;
    flex-direction: column; justify-content: center;
    /* Auch hier: Breite aus dem Text, nicht aus der Spalte. `stretch` hat alle
       drei Knoepfe auf die vollen 15rem gezogen, obwohl "Route" und "E-Mail"
       kurz sind - die Rufnummer bestimmt jetzt die sichtbare Breite, die
       anderen beiden bleiben kompakt (Nutzer-Meldung 2026-08-09).
       `width` wird dabei zur Obergrenze statt zur Vorgabe: die Kachel der
       eigenen Filiale gibt es nur EINMAL in der Liste, es gibt also keine
       Zeile darunter, zu der eine feste Spaltenbreite passen muesste. Der
       freiwerdende Platz geht an den Textblock. */
    align-items: flex-start;
    gap: 0.4rem;
    width: auto;
    max-width: 15rem;
    /* Kein eigener Aussenabstand mehr: das <li> polstert jetzt. Nur links ein
       Abstand zum Textblock. */
    padding: 0 0 0 1rem;
}
.mts-modal-branch-item.is-current .mts-modal-branch-action {
    justify-content: flex-start;
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
}
@media (max-width: 900px) {
    .mts-modal-branch-item.is-current { flex-direction: column; }
    .mts-modal-branch-item.is-current .mts-modal-branch-actions {
        flex-direction: row; flex-wrap: wrap; width: auto;
        /* Die 15rem-Obergrenze der Spaltenfassung MUSS hier zurueckgenommen
           werden: unter 900px liegen die drei Knoepfe in einer Zeile, und eine
           Deckelung auf 15rem wuerde sie ohne Not umbrechen lassen. */
        max-width: none;
        justify-content: flex-start;
        padding: 0.55rem 0.7rem 0.15rem;
    }
}

/* Scrollbalken der Kachelliste: heller Lauf, Griff in der Hausfarbe.
   `scrollbar-color` deckt Firefox ab, die ::-webkit-Regeln die übrigen -
   beide nötig, keine ersetzt die andere. Nur im Modal, damit der Rest des
   Shops den Systembalken behält. */
#mts-modal-branch-picker .mts-modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--b365-accent, var(--mts-accent)) #f1f3f2;
}
#mts-modal-branch-picker .mts-modal-body::-webkit-scrollbar { width: 10px; }
#mts-modal-branch-picker .mts-modal-body::-webkit-scrollbar-track {
    background: #f1f3f2; border-radius: 999px;
}
#mts-modal-branch-picker .mts-modal-body::-webkit-scrollbar-thumb {
    background: var(--b365-accent, var(--mts-accent));
    border-radius: 999px;
    border: 2px solid #f1f3f2;
}
#mts-modal-branch-picker .mts-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--mts-c-primary-dark, #3f5a4f);
}

/* === TASK-740: Feature-Gates fuer abschaltbare Storefront-Bausteine ======

   DIE RICHTUNG IST FAIL-CLOSED. Jede Regel hier greift, wenn das Attribut
   FEHLT (`html:not([data-mts-feat-...])`). Gesetzt wird es serverseitig in
   MtsAssetsViewComponent aus den Modul-Einstellungen, synchron im Kopf der
   Seite - also bevor die erste Regel geladen ist und damit ohne Aufblitzen.

   WARUM ES DIESE REGELN UEBERHAUPT BRAUCHT. Die betroffenen Bausteine
   stehen NICHT im Modul, sondern als festes Markup in DB-Topics
   (MtsPdpActions) bzw. werden vom Kern gerendert (Reiter "Bewertungen").
   Das Modul kann sie also nicht weglassen - es kann sie nur verdecken. Der
   Schalter EnableBestpreis existierte seit Langem in den Settings und hat
   bis 2026-08-11 nichts bewirkt; das Modul-JS baute die Schaltflaeche im
   Kommentar ausdruecklich "immer".

   `display: none` und nicht `visibility: hidden`: der Baustein soll keinen
   Platz belegen. Die CTA-Reihe ist ein Grid und richtet sich selbst neu aus.

   `!important` ist Pflicht: die Regeln, die diese Schaltflaechen gestalten,
   stehen im Topic MtsPdpCountdown und tragen es selbst (dort Zeile 319ff.).
   Ohne !important verliert das Gate gegen die Gestaltung. */

html:not([data-mts-feat-bestpreis]) .mts-pdp-cta-btn--bestpreis,
html:not([data-mts-feat-bestpreis]) .mts-pd-cta-btn--bestpreis,
html:not([data-mts-feat-bestpreis]) [data-mts-bestpreis] {
    display: none !important;
}

/* Der Reiter "Bewertungen" und sein Inhalt. Der Anker ist ein
   data-Attribut, das mts-theme-global.js am Reiter setzt, nachdem es ihn
   INHALTLICH erkannt hat - der Index #pd-tabs-2 ist NICHT stabil, er
   verschiebt sich bei Produkten ohne Merkmale. Begruendung dort. */
html:not([data-mts-feat-reviewtab]) [data-mts-review-tab],
html:not([data-mts-feat-reviewtab]) [data-mts-review-pane] {
    display: none !important;
}

/* Der Weg "Jetzt anfragen" bei fehlendem Bestand. Zusaetzlich an das
   Pairing gebunden (siehe MtsAssetsViewComponent): ohne Mandant und
   Dashboard-Basis gibt es kein Postfach, in dem die Anfrage landen koennte. */
html:not([data-mts-feat-inquiry]) .mts-pd-inquiry,
html:not([data-mts-feat-inquiry]) .mts-pd-inquiry-btn {
    display: none !important;
}

/* --- Gestaltung des Anfrage-Wegs ------------------------------------- */
/* Optisch bewusst NICHT wie ein Kauf-Knopf: der Kunde soll sehen, dass er
   eine Frage stellt und keine Bestellung ausloest. Umrandet statt gefuellt,
   in der Hausfarbe statt im Kauf-Gruen. */
.mts-pd-inquiry {
    margin: 10px 0 4px;
    /* EINBLENDEN, NICHT ERSCHEINEN. Der Kasten wird per JS in die Kaufzeile
       gesetzt, nachdem der Server geantwortet hat - ohne Bewegung springt er
       an einer Stelle ins Bild, an der eben noch ein Kaufknopf stand, und das
       liest sich als Fehler statt als Antwort.

       Als `animation` und nicht als `transition`: eine Ueberblendung braucht
       einen Ausgangswert am selben Element, den ein frisch eingefuegter Knoten
       nicht hat. Die Bewegung laeuft deshalb genau EINMAL, beim Einfuegen.
       Beim Wechsel zwischen zwei leeren Groessen bleibt der Kasten stehen und
       wird nur neu beschriftet - dort soll sie ausdruecklich NICHT erneut
       laufen, sonst flackert jede Groessenwahl. */
    animation: mts-inq-in .3s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes mts-inq-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hier stand bis 2026-08-15 eine Überblendung, die .pd-offer-actions-container,
   .mts-pd-ff und .mts-pd-cd-stable im Anfrage-Fall ausgeblendet hat (opacity +
   `display` via allow-discrete). Sie ist ersatzlos entfallen, weil die drei
   Bausteine ab jetzt STEHEN BLEIBEN - Begründung weiter unten am Block
   "Nicht mehr ausblenden, sondern ehrlich beschriften". Ohne Ausblendung gibt
   es nichts zu überblenden. */

/* Wer Bewegung abgestellt hat, bekommt sie nicht. Das Ergebnis ist identisch,
   nur ohne Weg dorthin. */
@media (prefers-reduced-motion: reduce) {
    .mts-pd-inquiry { animation: none; }
}
.mts-pd-inquiry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 12px 18px;
    border: 1px solid var(--mts-c-primary, #3f5b73);
    border-radius: 12px;
    background: #fff;
    /* Beschriftung auf weißer Fläche -> Textton (2026-08-15). */
    color: var(--mts-accent-text, #33485c);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.mts-pd-inquiry-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.mts-pd-inquiry-btn:hover,
.mts-pd-inquiry-btn:focus-visible {
    background: var(--mts-c-primary, #3f5b73);
    color: var(--mts-c-primary-onbg, #fff);
    box-shadow: 0 8px 18px -6px rgba(var(--mts-c-primary-rgb, 63, 91, 115), .45);
    transform: translateY(-1px);
}
.mts-pd-inquiry-btn:active {
    transform: translateY(0);
}
/* Unter dem Knopf steht nur noch der GRUND, keine Achsen mehr
   (Nutzerentscheidung 2026-08-15). Farbe und Größe stehen zwei Zeilen darüber
   an der Auswahlleiste und im Dialog noch einmal in der Produktkarte - dreimal
   dieselbe Angabe auf engem Raum. Die Regeln für .mts-pd-inquiry-variant und
   ihre Zeilen sind mit dem Markup entfallen; wer sie wieder braucht, findet sie
   in der Historie (Commit d850cb61). */
.mts-pd-inquiry-note {
    margin: 8px 0 0;
    text-align: center;
}
.mts-pd-inquiry-hint {
    display: block;
    color: var(--mts-c-text-muted, #6e6e73);
    font-size: 13px;
    line-height: 1.45;
}

/* Der Anfrage-Knopf AN DER STELLE DES KAUFKNOPFS (TASK-780, Tausch statt
   Ausblenden). Er muss dessen Geometrie treffen, sonst springt die Kaufzeile
   beim Variantenwechsel in der Höhe: der Smartstore-Knopf misst am Livestand
   58 px bei 390 px Fensterbreite und trägt border-radius: 999px (aus
   mts-theme-global.css .btn-primary, dort mit !important). Beides hier
   nachgezogen - nicht geraten, sondern am gerenderten Knopf abgelesen.

   Optisch bleibt er bewusst KEIN Kauf-Knopf: umrandet statt gefüllt, in der
   Hausfarbe statt im Kauf-Grün (Begründung bei .mts-pd-inquiry oben). Der
   Kunde soll sehen, dass er eine Frage stellt und keine Bestellung auslöst.

   ACHTUNG beim Bauen des Knopfes: er darf KEINE .btn-primary/.btn-secondary
   tragen. Diese beiden Klassen setzen in mts-theme-global.css Hintergrund,
   Farbe und Polsterung mit !important und würden den Anfrage-Knopf wieder in
   einen Kaufknopf verwandeln. */
.mts-pd-inquiry-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 58px;
    padding: 12px 24px;
    border: 1px solid var(--mts-c-primary, #3f5b73);
    border-radius: 999px;
    background: #fff;
    /* Beschriftung auf weißer Fläche -> Textton (2026-08-15). */
    color: var(--mts-accent-text, #33485c);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.mts-pd-inquiry-cta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.mts-pd-inquiry-cta:hover,
.mts-pd-inquiry-cta:focus-visible {
    background: var(--mts-c-primary, #3f5b73);
    color: var(--mts-c-primary-onbg, #fff);
    box-shadow: 0 8px 18px -6px rgba(var(--mts-c-primary-rgb, 63, 91, 115), .45);
}

/* --- Nicht mehr ausblenden, sondern ehrlich beschriften ----------------
   (Nutzerentscheidung 2026-08-14, löst die Fassung vom 2026-08-11 ab)

   Führt keine Filiale die gewählte Größe, setzt mts-theme-global.js an
   .pd-offer das Attribut data-mts-inquiry-active - nachdem der Server
   variantengenau geantwortet hat.

   BIS ZUM 14.08. hat dieser Block daraufhin die halbe Kaufzeile abgeräumt:
   .pd-offer-actions-container, den Zustellwege-Wähler .mts-pd-ff und den
   Countdown .mts-pd-cd-stable. Der Befund, der dazu geführt hat, gilt
   unverändert - nur die Antwort darauf ist eine andere.

   DER BEFUND (am Browser gemessen 2026-08-11, jeweils für eine Größe, die
   in keiner Filiale liegt):
     - Der Zustellwege-Wähler aus dem Topic MtsPdpFulfillment meldete in
       grüner Schrift "Online bestellen - Verfügbar", während die Karte
       daneben im selben Kasten korrekt "Derzeit nicht reservierbar" sagte.
     - Der Lieferzeit-Countdown versprach unmittelbar über dem Anfrage-Knopf
       "Bestelle in den nächsten 17 Std 11 min für Lieferung am Freitag,
       14. August". Er rechnet aus Versand- und Zustelltagen und weiß vom
       Bestand nichts - er kann diesen Widerspruch nicht selbst bemerken.
   Das ist nicht bloß ein zweiter Kaufweg, sondern eine falsche
   Verfügbarkeitsaussage direkt neben dem Satz, der das Gegenteil behauptet.

   DIE ANTWORT AB JETZT: stehen lassen und richtig beschriften. Wer die Zeile
   abräumt, macht die Fehlaussage unsichtbar, nicht richtig - und nimmt dem
   Kunden zugleich Menge, Preisbezug und die Orientierung, wo auf der Seite er
   überhaupt steht. Getauscht wird deshalb nur der Knopf: mts-theme-global.js
   setzt .mts-pd-inquiry-cta an die Stelle des Warenkorb-Knopfs und markiert
   das verdrängte Original samt Mengenwähler mit data-mts-inquiry-hidden="1".
   Die Umbeschriftung der beiden Fehlaussagen sitzt an ihrer Quelle: der
   Zustellwege-Wähler in mts-theme-global.js, der Liefertermin im Topic
   MtsPdpCountdown.

   DIE BEIDEN FILIAL-CTAS BLEIBEN AUSGEBLENDET. "In der Filiale reservieren"
   ist eine Handlung, die im Anfrage-Fall zwingend scheitert - aus einem
   Bestand, den es nirgends gibt, lässt sich nichts reservieren. Ein Knopf,
   der nur eine Fehlermeldung erzeugen kann, ist kein Angebot.

   WARUM DER ANFRAGE-WEG ÜBERHAUPT NÖTIG IST: der Kern ließe hier weiter
   bestellen. Alle publizierten Produkte dieser Instanz fahren Bestands-
   führung auf Produktebene mit erlaubter Nachbestellung - der Kaufknopf ist
   also nie wegen fehlendem Bestand gesperrt, auch dann nicht, wenn die
   gewählte Größe nirgends liegt.

   KEIN AUFBLITZEN, und zwar von der anderen Seite als sonst: das Attribut wird
   ERST nach der Serverantwort gesetzt, nie vorher. Bis dahin sieht der Kunde
   die normale Seite. Der Anfrage-Weg kann damit bei lagernder Ware zu keinem
   Zeitpunkt erscheinen - er wird erst gebaut, wenn die Antwort "nirgends
   vorrätig" lautet. */
.pd-offer[data-mts-inquiry-active] .mts-pdp-cta-btn--filiale,
.pd-offer[data-mts-inquiry-active] .mts-pd-cta-btn--filiale {
    display: none !important;
}
/* Der Tausch an Ort und Stelle. Die Markierung sitzt am verdrängten Original
   (Warenkorb-Knopf) und am Mengenwähler, NICHT an der Kaufzeile: so behält
   die Zeile ihre Geometrie und der Anfrage-Knopf setzt sich hinein, statt sie
   zu ersetzen. Der Träger des Attributs ist mts-theme-global.js. */
.pd-offer[data-mts-inquiry-active] [data-mts-inquiry-hidden="1"] {
    display: none !important;
}

/* --- KEIN "AUSVERKAUFT" NEBEN "JETZT ANFRAGEN" (2026-08-24) -------------
   BETREIBER-VORGABE, woertlich: "kein ausverkauft wir zeigen dann an jetzt
   anfragen".

   WOHER DAS WORT KAM. Das Topic 24 (MtsPdpFulfillment) baut einen eigenen
   Ausverkauft-Block: einen Knopf `.mts-pd-soldout__btn` in die Kaufzeile und
   einen Status `.mts-pd-soldout-status` neben den Preis. Sein Gate ist
   `isSoldOut()`, und das prueft NICHT den Bestand, sondern ob der Kern einen
   Kaufknopf gerendert hat.

   Solange alle Produkte `BackorderModeId = 1` fuhren, rendert der Kern IMMER
   einen Knopf - das Gate war strukturell false und der Block erreichte das DOM
   nie. Mit der Abschaltung der Nachbestellung am 24.08. wird es wahr, und der
   Block erscheint. Gemessen an Produkt 2304, live: zwei Knoepfe nebeneinander,
   "Ausverkauft" und "Jetzt anfragen".

   Beides ist falsch. Zwei Handlungsangebote fuer denselben Zustand, und das
   staerkere Wort ist das unzutreffende: der Artikel ist beschaffbar, nur nicht
   heute bestellbar. Dieselbe Unterscheidung trifft mts-theme-global.js schon
   fuer die Versandkarte (`FF_SHIP_UNAVAILABLE = 'derzeit nicht bestellbar'` -
   "bewusst nicht Ausverkauft").

   WARUM CSS UND NICHT JS: das Topic baut seinen Block bei jeder DOM-Aenderung
   neu, unser Skript ebenso. Wer ihn per JS entfernt, laeuft ein Wettrennen mit
   sichtbarem Flackern. Eine Regel greift dagegen im selben Frame, in dem der
   Block entsteht - er wird nie gezeigt.

   AN `[data-mts-inquiry-active]` GEBUNDEN, nicht unbedingt: faellt der
   Anfrage-Weg je aus (Feature aus, Instanz ungepairt), kommt "Ausverkauft" als
   Rueckfall zurueck. Ein Zustand ohne jede Aussage waere schlechter als das
   unschoene Wort. */
.pd-offer[data-mts-inquiry-active] .mts-pd-soldout,
.pd-offer[data-mts-inquiry-active] .mts-pd-soldout-status {
    display: none !important;
}

/* --- "Antwort steht aus" (2026-08-19) ----------------------------------
   GEMELDET: nach der Größenwahl stand für etwa eine Sekunde wieder "In den
   Warenkorb" in der Zeile, erst danach "Jetzt anfragen".

   URSACHE: .pd-offer-actions-container trägt data-partial="OfferActions" - der
   Kern baut ihn bei jeder Größenwahl neu. Der Anfrage-Knopf ist damit weg und
   der originale Kaufknopf unmarkiert wieder da. Neu markiert wurde er bisher
   erst, wenn /MtsStorefront/BranchAvailability geantwortet hatte - bei einer
   noch nie gewählten Größe also einen ganzen Netzlauf später. Genau diese
   Wartezeit hat der Kunde gesehen.

   DAS MERKMAL: mts-theme-global.js setzt an derselben .pd-offer zusätzlich
   data-mts-inquiry-pending="1", solange eine Antwort aussteht, und trägt den
   zuletzt bestätigten Zustand so über den Netzlauf. Es BEHAUPTET nichts - es
   wird nur gesetzt, wenn data-mts-inquiry-active schon stand. Auf einer
   lagernden Variante kann der Anfrage-Knopf deshalb zu keinem Zeitpunkt
   aufblitzen; der Übergang ist in beide Richtungen genau ein Wechsel.

   ZWEITES SCHLOSS, mit Absicht. Weil die Überbrückung nur fortsetzt, steht
   data-mts-inquiry-pending heute nie ohne data-mts-inquiry-active - die beiden
   Regeln unten sind also für sich genommen wirkungslos. Sie stehen trotzdem
   hier, damit das Verstecken an dem Merkmal hängt, das die Wartezeit
   beschreibt, und nicht daran, dass zufällig auch das Bestätigungs-Merkmal
   noch steht. Wer sie als tote Regeln entfernt, macht die Überbrückung von
   einer zweiten, an anderer Stelle gesetzten Bedingung abhängig.

   display: none und nicht visibility/opacity - ein nur optisch verdeckter
   Kaufknopf bliebe in der Tabulator-Reihenfolge und ließe sich blind
   auslösen. Dieselbe Begründung wie beim Block darüber. */
.pd-offer[data-mts-inquiry-pending="1"] .mts-pdp-cta-btn--filiale,
.pd-offer[data-mts-inquiry-pending="1"] .mts-pd-cta-btn--filiale,
.pd-offer[data-mts-inquiry-pending="1"] [data-mts-inquiry-hidden="1"] {
    display: none !important;
}

/* --- Anfrage-Formular im Dialog ---------------------------------------
   Die Huelle (.mts-pd-modal-backdrop / .mts-pd-modal) kommt aus
   mts-theme-global.css und ist am Livestand geladen; hier stehen nur die
   Felder. */
.mts-inq__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 650;
    color: var(--mts-c-text, #1d1d1f);
}
.mts-inq__intro {
    margin: 0 0 14px;
    color: var(--mts-c-text-muted, #6e6e73);
    font-size: 14px;
    line-height: 1.5;
}
/* Hier stand bis 2026-08-15 .mts-inq__product - ein grauer Kasten mit
   Artikelname und Variantenkurztext über dem Formular. Er ist ersatzlos
   entfallen (Nutzervorgabe: keine graue Füllung) und in der Produktspalte
   .mts-inq__aside aufgegangen, die dasselbe zeigt, nur mit Bild, Achsen und
   Preis. Bewusst KEINE leere Hülle stehen gelassen: eine Regel ohne Wirkung
   liest der Nächste als "war mal wichtig" und traut sich nicht daran.
   Wer den Kasten im Markup lässt, bekommt die Angabe ab jetzt doppelt. */
.mts-inq__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}
.mts-inq__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--mts-c-text-muted, #6e6e73);
}
.mts-inq__field--wide,
.mts-inq__branch,
.mts-inq__actions,
.mts-inq__status {
    grid-column: 1 / -1;
}
.mts-inq__field input,
.mts-inq__field textarea,
.mts-inq__field select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--mts-c-border, #d2d2d7);
    border-radius: 9px;
    font-size: 15px;   /* unter 16px zoomt iOS beim Fokus in das Feld hinein */
    font-family: inherit;
    color: var(--mts-c-text, #1d1d1f);
    background: #fff;
}
.mts-inq__field input:focus,
.mts-inq__field textarea:focus,
.mts-inq__field select:focus {
    outline: none;
    border-color: var(--mts-c-primary, #3f5b73);
    box-shadow: 0 0 0 3px rgba(var(--mts-c-primary-rgb, 63, 91, 115), .18);
}
/* Die nachgefragte Achse (im Regelfall die Größe). Sie steht nur da, wenn der
   Kunde den Anfrage-Weg VOR der ersten Größenwahl betritt - auf mc ist das der
   Normalfall, weil die Größe auf 88 Prozent der Produktseiten nicht vorbelegt
   ist. Höhe wie die übrigen Felder, aber mit 44 px Mindestmaß: es ist auf dem
   Telefon das erste Bedienelement, das der Kunde im Dialog trifft. */
.mts-inq__axis select {
    min-height: 44px;
    cursor: pointer;
}
.mts-inq__field textarea {
    resize: vertical;
    min-height: 72px;
}
/* Der Honigtopf. Bewusst NICHT display:none - einfache Ausfuellroboter
   ueberspringen ausdruecklich versteckte Felder, ein aus dem Sichtfeld
   geschobenes fuellen sie aus. Fuer Vorleseprogramme traegt der Kasten
   aria-hidden. */
.mts-inq__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.mts-inq__actions {
    margin-top: 6px;
}
.mts-inq__actions .mts-pd-inquiry-btn {
    width: 100%;
}
.mts-inq__status:empty {
    display: none;
}
.mts-inq__status {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--mts-c-danger, #b3261e);
}
.mts-inq__number {
    margin-top: 10px;
    font-weight: 600;
}
@media (max-width: 560px) {
    .mts-inq__form { grid-template-columns: 1fr; }
}

/* --- Wunschfiliale: Knopf statt Auswahlfeld ---------------------------
   Bis 2026-08-15 stand hier ein <select> mit allen Filialen. Das Auswahlfeld
   kannte nur Namen und Ort - es konnte nicht zeigen, welche Filiale die
   gefragte Ware führt, wie weit sie weg ist und wann sie offen hat. Genau
   das zeigt die Seitenleiste des Reserve-Wegs bereits, und sie ist ab jetzt
   auch von hier aus erreichbar (Modus 'inquiry'): der Knopf öffnet sie, die
   Auswahl kommt als Ereignis mts:inquiry-branch-selected zurück.

   Die Gestaltung des <select> ist ersatzlos entfallen. Sie wird nicht
   gebraucht: mts-theme-global.css gestaltet `select` ohnehin global
   (border-radius 14px, Polsterung, Fokusring, alle mit !important). Bliebe
   das Feld doch irgendwo stehen, sieht es also weiterhin richtig aus. */
.mts-inq__branch {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--mts-c-text-muted, #6e6e73);
}
/* Sieht aus wie ein Eingabefeld, verhält sich wie ein Knopf - das ist
   beabsichtigt: an dieser Stelle im Formular erwartet der Kunde ein Feld, und
   der Pfeil rechts sagt ihm, dass hier noch etwas aufgeht. 44 px Mindesthöhe,
   damit er sich am Telefon treffen lässt.
   `font: inherit` VOR den Einzelwerten: Knöpfe erben die Schriftfamilie des
   Formulars sonst nicht, und ein Systemfont mitten im Formular fällt auf. */
.mts-inq__branch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--mts-c-border, #d2d2d7);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 15px;   /* unter 16px zoomt iOS beim Antippen in den Dialog hinein */
    color: var(--mts-c-text, #1d1d1f);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mts-inq__branch-btn:hover,
.mts-inq__branch-btn:focus-visible {
    outline: none;
    border-color: var(--mts-c-primary, #3f5b73);
    box-shadow: 0 0 0 3px rgba(var(--mts-c-primary-rgb, 63, 91, 115), .18);
}
.mts-inq__branch-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--mts-c-text-muted, #6e6e73);
}
/* Der gewählte Name trägt das Gewicht; solange nichts gewählt ist, steht
   dort die Aufforderung und darf gedämpft bleiben. */
.mts-inq__branch-name {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* "Ohne Filiale fortfahren" ist ein Rückweg, kein Angebot - deshalb als
   Textlink und nicht als zweiter Knopf. Die Polsterung ist Trefferfläche,
   nicht Optik: ohne sie wäre die Zeile rund 16 px hoch. */
.mts-inq__branch-clear {
    align-self: flex-start;
    /* Die Polsterung ist Trefferfläche, nicht Optik - deshalb das negative
       Margin, das sie optisch wieder herausrechnet. 13 px oben und unten plus
       die Zeilenhöhe ergeben die 44 px, die diese Runde überall sonst auch
       getroffen hat; mit 8 px waren es rund 34. Dieser Ausgang ist der einzige
       Weg, eine gewählte Wunschfiliale wieder abzuwählen. */
    margin: -9px 0;
    padding: 13px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    color: var(--mts-c-primary-dark, #33485c);
    text-decoration: underline;
    cursor: pointer;
}
.mts-inq__hintline {
    margin-top: 4px;
    color: var(--mts-c-text-muted, #6e6e73);
    font-size: 12px;
    line-height: 1.4;
}

/* --- Zweispaltiger Anfrage-Dialog (2026-08-15) -------------------------
   Vorbild ist die Leasing-Anfrage: Formular links, Produktbild groß rechts.
   Übernommen ist die Anordnung, NICHT die Klassennamen. .leasing-modal-layout
   hängt an vier konkurrierenden Topic-Definitionen (MtsLayoutStyles.html:384,
   :1003, :1212 und MtsPdpCountdown.html:774), die per !important gegeneinander
   arbeiten - wer sie mitbenutzt, erbt diesen Streit. Eigene Klassen reisen mit
   dem Modul und nicht mit der Datenbank.

   980 px ist gerechnet, nicht gegriffen: der Dialog polstert mit 32 px je
   Seite (mts-theme-global.css .mts-pd-modal), es bleiben 916 px Inhalt. Davon
   340 px Produktspalte und 28 px Rinne lassen 548 px für das Formular - genug
   für dessen zwei Spalten (Vorname/Nachname) mit je rund 260 px. Nach außen
   kommen 20 px Backdrop-Polsterung je Seite dazu; ab 1020 px Fensterbreite
   steht der Dialog also in voller Breite, darunter schrumpft ihn width: 100 %.

   Spezifität: .mts-pd-modal.mts-pd-modal--split (0,2,0) schlägt die
   Basisregel .mts-pd-modal (0,1,0) in mts-theme-global.css; storefront.css
   lädt außerdem später. Kein !important nötig. */
.mts-pd-modal.mts-pd-modal--split {
    max-width: 980px;
}
/* Schmal zuerst: eine Spalte, Produktkarte OBEN. Der Kunde soll am Telefon
   zuerst sehen, worum es geht, und dann tippen - nicht umgekehrt. */
.mts-inq__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}
/* ALLES UNTER DEM BILD ZENTRIERT (Nutzerentscheidung 2026-08-15). Die Spalte
   ist schmal (340 px) und ihr Inhalt kurz: Titel, zwei Achsenzeilen, Preis.
   Linksbündig entsteht darunter eine ausgefranste rechte Kante neben einem
   Bild, das die volle Breite füllt - zentriert liest sich der Block als
   Bildunterschrift, was er ja auch ist. `align-items: center` statt
   `text-align` allein: die Achsenzeilen sind Flex-Zeilen und würden sonst über
   die volle Spaltenbreite laufen, obwohl ihr Inhalt viel kürzer ist. */
.mts-inq__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    order: -1;
    min-width: 0;
    text-align: center;
}
/* Das Bild bleibt volle Breite - es ist der Grund, warum die Spalte existiert. */
.mts-inq__aside > .mts-inq__pimg { align-self: stretch; }
.mts-inq__main {
    min-width: 0;
}
@media (min-width: 900px) {
    .mts-inq__split {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 28px;
        align-items: start;
    }
    /* Beide Spalten ausdrücklich platziert statt über die Quelltext-
       Reihenfolge: das Markup baut mts-theme-global.js, und eine Umstellung
       dort darf die Spalten hier nicht vertauschen. Nur die SPALTE ist
       festgenagelt, nicht die Zeile - so bleibt Platz für Überschrift und
       Einleitung, falls sie mit in die Hülle wandern. */
    .mts-inq__main  { grid-column: 1; }
    .mts-inq__aside { grid-column: 2; order: 0; }
}
/* Das Bild ist die Produktaussage - deshalb groß. `contain` statt `cover`:
   ein beschnittenes Rad ist bei einer Anfrage nach einer bestimmten Variante
   irreführend, der Kunde prüft hier gerade die Farbe. Die Höhendeckel
   halten den Dialog davon ab, bei einem Hochformat aus dem Fenster zu wachsen. */
.mts-inq__pimg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
}
@media (min-width: 900px) {
    .mts-inq__pimg { max-height: 260px; }
}
.mts-inq__ptitle {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--mts-c-text, #1d1d1f);
}
/* Trägt je nach Markup ul/dl/div - deshalb Listenschmuck und Polsterung
   ausdrücklich zurückgesetzt statt auf den Browser-Default zu vertrauen. */
.mts-inq__pattrs {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mts-inq__pattr {
    display: flex;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
}
.mts-inq__pattr-key {
    flex: 0 0 auto;
    color: var(--mts-c-text-muted, #6e6e73);
}
.mts-inq__pattr-val {
    min-width: 0;
    color: var(--mts-c-text, #1d1d1f);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.mts-inq__pprice {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mts-c-text, #1d1d1f);
}
/* Der Streichpreis MUSS spurlos verschwinden können: auf mc hat keine
   einzige Produktseite einen (0 von 157 geprüft). Eine Zeile, die sich nur
   leert, hält in einer Flex-Spalte trotzdem ihre Rinne - dann sitzt unter dem
   Preis ein Loch ohne Inhalt. Beide Wege sind abgedeckt, weil beide
   vorkommen: leergeräumt (textContent = '') und ausgeblendet ([hidden]).
   Wer den Knoten stattdessen mit einem Leerzeichen füllt, fällt durch
   :empty durch - dann bleibt die Lücke. */
.mts-inq__puvp {
    margin: 0;
    font-size: 13px;
    color: var(--mts-c-text-muted, #6e6e73);
    text-decoration: line-through;
}
.mts-inq__puvp:empty,
.mts-inq__puvp[hidden] {
    display: none;
}

/* ==========================================================================
   Mobile Produktseite - Bedienbarkeit (gemessen 2026-08-14 auf mc)
   ==========================================================================
   Fünf Befunde aus der Messung am Telefon-Viewport. Was hier NICHT steht, ist
   Absicht: die Produktseite hat KEINEN waagerechten Überlauf (gemessen
   scrollWidth === clientWidth bei 390, 360 und 768 px). Da ist nichts zu
   reparieren.

   SCHUTZREGEL für jeden, der diesen Block erweitert: `overflow-x` an <body>
   oder #content-wrapper NICHT von `clip` auf `hidden` zurücknehmen und keine
   neue overflow:hidden-Ebene zwischen .pd-section-top und .pd-data-col-inner
   einziehen. `hidden` erzeugt einen Scroll-Container, und position:sticky
   stirbt an der nächsten Vorfahrenebene mit Scroll-Container - dann hängt
   die Galerie auf dem Desktop nicht mehr mit.
   ========================================================================== */

/* --- (a) Galerie-Blätterpunkte: Trefferfläche vom Aussehen trennen -------
   Gemessen: sechs bis sieben Punkte a 10x10 px, ohne vergrößernde
   Trefferfläche - das sind rund 5 % der Fläche, die ein Daumen braucht.
   Der Punkt bleibt 10x10, die anklickbare Zelle wird 44x44; gezeichnet wird
   ab jetzt in button::before, weil der Knopf selbst die Trefferfläche ist
   und keine Farbe mehr tragen darf.

   NUR innerhalb #pd-gallery: dasselbe .slick-dots-Markup trägt auch die
   Startseiten- und "Zuletzt angesehen"-Karussells, und dort ist die
   Punktreihe kein Bedienelement in Daumenreichweite.

   Ohne Media-Query, weil das Theme die Punkte selbst nur dort zeigt, wo die
   Thumbnail-Spalte fehlt (theme.css: `.gal .slick-dots{display:none}` ab
   576 px bis 767,98 px und wieder ab 992 px). Außerhalb dieser Bänder
   rendert die Regel gar nichts.

   Rinne auf 0: das Theme setzt gap:12px, gedacht für 10-px-Punkte. Mit
   44-px-Zellen betrüge die Reihe 7*44+6*12 = 380 px und würde bei 360 px
   umbrechen. Ohne Rinne sind es 7*44 = 308 px - der optische Abstand
   entsteht ohnehin aus den 34 px Luft um jeden Punkt. flex-wrap des Themas
   bleibt als Ventil für Galerien mit mehr als sieben Bildern stehen. */
#pd-gallery .slick-dots {
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}
#pd-gallery .slick-dots li {
    width: 44px;
    height: 44px;
    margin: 0;
}
#pd-gallery .slick-dots li > button {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#pd-gallery .slick-dots li > button::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border: 1px solid #b0bac3;
    border-radius: 50%;
    background: #dee2e6;
    opacity: 1;
}
#pd-gallery .slick-dots li.slick-active > button::before {
    border-color: var(--mts-c-primary, #3f5b73);
    background: var(--mts-c-primary, #3f5b73);
}

/* --- (b) Vergleichsleiste verdeckt das Seitenende -------------------------
   #mts-compare-bar ist position:fixed und im eingeblendeten Zustand 87 px
   hoch (81 px bei 768 px Fensterbreite, wo die Leiste noch einzeilig sitzt).
   Sie liegt über den untersten 87 px der Seite, und nichts gleicht das aus -
   auf der Produktseite verschwindet dort der Reiterbereich, im Katalog die
   letzte Kachelreihe. Weiterscrollen hilft nicht: das Dokument endet vorher.

   Gegenstück zum vorhandenen Muster in chatbot.css:101-103, das den
   Chat-Anreißer aus demselben Grund anhebt. Von dort auch das env(): die
   gemessenen Höhen stammen aus einem Fenster ohne Sicherheitsabstand, auf
   dem Gerät kommt der unten noch dazu.

   Die Schwelle ist 750 px und nicht 768 px: genau dort wechselt die Leiste in
   mts-theme-global.css:6584 von einzeilig auf gestapelt, und daher kommt der
   Höhenunterschied. Der 768-px-Messwert liegt im oberen Band.

   :has() ohne Rückfall, weil chatbot.css genau dieselbe Konstruktion bereits
   produktiv fährt - ein zusätzlicher Klassen-Rückfall wäre eine zweite
   Wahrheit über denselben Zustand. */
body:has(.mts-compare-bar.is-visible) {
    /* DIE HÖHE MELDET DIE LEISTE SELBST (--mts-comparebar-h, gesetzt in
       mts-theme-global.js). Die festen Zahlen darunter sind nur der Rückfall:
       sie gelten für die LEERE Leiste, und die ist es nie, wenn sie sichtbar
       ist. Am Telefon mit einer Kachel gemessen: 131 px statt 92 - mit einer
       festen Zahl blieben rund 39 px verdeckt, und mit einem längeren
       Produktnamen wäre es wieder eine andere. Fehlt die Custom Property, weil
       ein Besucher noch das alte JS im Cache hat, greift der bisherige Wert. */
    padding-bottom: calc(var(--mts-comparebar-h, 92px) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 750px) {
    body:has(.mts-compare-bar.is-visible) {
        padding-bottom: calc(var(--mts-comparebar-h, 86px) + env(safe-area-inset-bottom, 0px));
    }
}

/* --- (c) "In den Warenkorb" bei 320 px --------------------------------
   Gemessen: der Knopf ist 135 px breit, seine Beschriftung braucht 159 px
   (scrollWidth) - sie wird also hart abgeschnitten. Ursache ist die
   Aufteilung der Zeile: Mengenwähler und Knopf teilen sich eine Zeile, die
   .row.flex-nowrap heißt.

   Was mts-theme-global.css:3830 bereits tut, reicht hier nicht: dort wird ab
   900 px zwar umgebrochen, der Mengenwähler behält aber max-width: 50 % und
   bleibt damit neben dem Knopf. Diese Regeln geben BEIDEN Zellen die volle
   Breite - die Spezifität 0,2,0 (.pd-offer-actions > .col-auto) schlägt die
   0,1,0 von .pd-offer-action-qty, beide !important.

   Nur bis 359 px: ab 360 px reicht die Breite, und der Mengenwähler neben
   dem Knopf ist die kompaktere Zeile. */
@media (max-width: 359px) {
    .pd-offer-actions {
        flex-wrap: wrap !important;
    }
    .pd-offer-actions > .col-auto,
    .pd-offer-actions > .col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* --- (d) + (e) Reste aus dem Desktop-Layout und zu kleine Tap-Ziele ------ */
@media (max-width: 900px) {
    /* (d) .pd-data-col-inner ist auch bei 390 px position:sticky (theme.css:
       `position:sticky;top:4px`). Dort gibt es 20 px Weg - die Klebrigkeit
       ist wirkungslos, macht aber einen eigenen Stapelkontext auf und kostet
       jede künftige Fehlersuche in dieser Spalte Zeit. `static` statt
       `relative`, damit auch der Kontext verschwindet und nicht nur der
       Effekt. Spezifität 0,2,0 gegen 0,1,0; storefront.css lädt zusätzlich
       nach theme.css. */
    .pd-data-col .pd-data-col-inner {
        position: static;
    }

    /* (e) Drei Tap-Ziele unter 44 px Höhe. Alle drei bekommen die Fläche
       über Polsterung, nicht über Schriftgröße oder Zeilenhöhe - das
       Schriftbild der Seite bleibt unverändert.

       Bei den beiden Textlinks steht der Polsterung eine gleich große
       negative Außenkante gegenüber: die Randbox eines inline-block zählt
       für die Zeilenhöhe mit, ohne sie wächst die Zeile um 30 px und der
       Preisblock rutscht. Getroffen wird trotzdem die volle Polsterung. */

    /* "Versandkosten" im Rechtshinweis: gemessen 101x15 px in einem 74 px
       hohen Behälter - der Platz ist da, er wurde nur nicht genutzt.
       Waagerecht bewusst nichts: der Link steht am Zeilenende hinter "zzgl.",
       eine negative linke Außenkante würde ihn sichtbar heranziehen. */
    .pd-legalinfo a {
        display: inline-block;
        padding: 15px 0;
        margin: -15px 0;
    }

    /* "Mehr anzeigen" unter der Beschreibung: gemessen 362x23 px. Breite
       reicht längst, nur die Höhe fehlt. */
    a.btn-text-expander {
        display: inline-block;
        padding: 11px 0;
        margin: -11px 0;
    }

    /* Die Reiter (Produktdetails / Merkmale / Bewertungen): mit der
       Mobil-Polsterung aus mts-theme-global.css:3860 (10px 16px) rund 40 px
       hoch. min-height statt mehr Polsterung, weil die Polsterung dort
       !important trägt und die Reiterreihe waagerecht scrollt - zusätzliche
       Polsterung würde die Reihe verlängern, min-height nicht.
       #pd-tabs (1,1,0) schlägt .pd-tabs .nav-link (0,2,0). */
    #pd-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* === SALE im Kopfband als Pille (TASK-Designer, 2026-08-23) ===============
   Die Vorlage www.multicycle.at hebt genau diesen einen Menüpunkt als
   farbige Pille hervor (dort per JS in den Slot #btnAktion eingehängt,
   Klassen `bg-primary text-white rounded-5 py-1 px-3 px-lg-5`). Hier wird
   derselbe Effekt rein über CSS am regulären Menüknoten erzeugt - der
   SALE-Eintrag ist eine Wurzelkategorie ohne Kinder und rendert deshalb
   ohne Klappfläche, also ohne dropdown-toggle und ohne data-target.

   WARUM DER PFAD DER ANKER IST
   Die li-/a-Kennungen (`main-nav-item-link-210284`) sind Laufzeitnummern
   des Menü-Neuaufbaus und wechseln bei jedem Import; am 2026-08-23 wurde
   für denselben Eintrag erst 708807, nach einem Neustart 210284 gemessen.
   Ein aus dem Katalog abgeleiteter Menüknoten hat auch kein CssClass-Feld,
   an das sich eine eigene Klasse hängen ließe. Bleibt die URL: der Slug
   `sale` steht im UrlRecord und ist die stabilste Grösse am Element.
   Bewusst `[href="/sale/"]` und nicht `[href$="/sale/"]` - der Suffix-Test
   würde eine spätere Unterkategorie wie /winter/sale/ mitfärben.

   WARUM KEIN `header#header`-PRÄFIX
   Auf dieser Instanz ist `#header` ein DIV (`div#header.container`), und
   das umschliessende `<header>` trägt gar keine Kennung. `header#header`
   trifft damit NICHTS. Drei ältere Anläufe hängen genau an diesem Präfix
   und sind deshalb wirkungslos, obwohl sie ausgeliefert werden:
     - mts-theme-global.css: "SALE!-Menueintrag rot (Iter 19)"
     - mts-theme-global.css: "SALE-Kategorie mit multicycle-gruenem Hintergrund"
     - diese Datei, "Fix 7 (rev4)" weiter oben
   Sie bleiben unangetastet (fremder Arbeitsstand), sind aber gemessen inert:
   der Selektor `header#header ul#menu-main li a` liefert 0 Treffer.

   SPEZIFITÄT
   Der schärfste Gegenspieler ist `.megamenu .nav-item .nav-link
   { background-color: transparent !important }` (0,3,0) in
   mts-theme-global.css; Polsterung und Radius kommen aus
   `.megamenu .nav-link, .megamenu .nav-item > a` (0,2,1, ebenfalls
   !important). Der Selektor hier liegt bei (1,2,2) und schlägt beide,
   `!important` deckt den Gleichstand ab. storefront.css ist ausserdem das
   zuletzt eingebundene Stylesheet der Seite (gemessen: Position hinter
   theme.css und mts-theme-global.css).

   FARBE
   Die Vorlage nimmt ihren --bs-primary #6d8c80 mit weisser Schrift. Das
   sind 3,7:1 - unter der Schwelle 4,5:1 für 16px-Fettschrift. Genommen
   wird deshalb die nächstdunklere Stufe derselben Markenfamilie,
   --mts-c-primary-dark #5b776c: 4,9:1, optisch derselbe Ton.

   HÖHE (Begründung korrigiert 2026-08-24)
   Die frühere Annahme, die geringere senkrechte Polsterung (6+6 statt
   10+10) werde durch einen gleich grossen Aussenabstand (4+4) ausgeglichen,
   war falsch: die Höhe des Links hängt gar nicht an seiner Polsterung. Das
   Theme streckt ihn auf die Zeilenhöhe (gemessen 49,8px), der Aussenabstand
   addiert sich also einfach oben drauf. Die Unterkante lag damit bei
   4 (Innenabstand der Liste) + 4 (Aussenabstand) + 50 = 58px gegen 57px
   Innenhöhe - ein Pixel Überhang. Weil `div.nav-slider` auf
   `overflow-y:auto` steht, war das ein sichtbarer Rollbalken im Kopfband.
   `height:auto` nimmt die Streckung zurück: die Pille misst dann ihren
   Inhalt (29px Zeile + 6+6 Polsterung = 41px), sitzt mit dem 4px-Aussen-
   abstand mittig in der 49px hohen Zeile und endet bei 49px. Kein Überhang,
   und die Pille wirkt flacher - das war zusätzlich gewünscht.
   `margin-block` fasst nur oben/unten an; der rechte Abstand von 20px
   kommt aus dem Theme und bleibt stehen. */
#menu-main > li > a.nav-link[href="/sale/"],
#menu-main > li > a.nav-link[href="/sale"] {
    background: var(--mts-c-primary-dark, #5b776c) !important;
    background-color: var(--mts-c-primary-dark, #5b776c) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 6px 18px !important;
    margin-block: 4px !important;
    height: auto !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Der Beschriftungstext liegt in einem eigenen <span>; ohne diese Zeile
   gewinnt für ihn die Theme-Regel `#header .megamenu-container .nav-link`
   und er bliebe dunkel auf der grünen Fläche. */
#menu-main > li > a.nav-link[href="/sale/"] > span,
#menu-main > li > a.nav-link[href="/sale"] > span {
    color: #fff !important;
}

/* Ab 1400px gönnt das Theme allen Menüpunkten mehr Polsterung (10px -> 16px
   waagerecht, gemessen). Die Pille zieht mit, damit sie im breiten Kopfband
   nicht schmal wirkt. 2026-08-24 von 26px auf 34px verbreitert (Pille 90 ->
   106px) - gewünscht war eine breitere, flachere Form. Der Platz trägt das:
   bei 1440px bleiben danach 137px frei, bei 1920px 337px.
   BEWUSST NUR HIER: zwischen 992px und 1400px gibt es keine Reserve - bei
   1200px sind es 43px, und bei 1024px läuft die Leiste schon ohne unser
   Zutun um 133px über (bestehender Zustand, nicht von dieser Regel). Dort
   bleibt es deshalb bei den 18px aus der Regel weiter unten. */
@media (min-width: 1400px) {
    #menu-main > li > a.nav-link[href="/sale/"],
    #menu-main > li > a.nav-link[href="/sale"] {
        padding: 6px 34px !important;
    }
}

/* Ohne diese Regel färbt `.megamenu .nav-link:hover` die Schrift auf den
   Akzentton um - grün auf grün. Der Zeiger-Zustand wird stattdessen über
   die Fläche gezeigt. */
#menu-main > li > a.nav-link[href="/sale/"]:hover,
#menu-main > li > a.nav-link[href="/sale/"]:focus,
#menu-main > li > a.nav-link[href="/sale"]:hover,
#menu-main > li > a.nav-link[href="/sale"]:focus {
    background: var(--mts-c-primary-active, #516a60) !important;
    background-color: var(--mts-c-primary-active, #516a60) !important;
    color: #fff !important;
}
#menu-main > li > a.nav-link[href="/sale/"]:hover > span,
#menu-main > li > a.nav-link[href="/sale/"]:focus > span,
#menu-main > li > a.nav-link[href="/sale"]:hover > span,
#menu-main > li > a.nav-link[href="/sale"]:focus > span {
    color: #fff !important;
}

/* Tastaturfokus: auf der farbigen Fläche ist der Theme-Ring nicht mehr zu
   sehen, deshalb ein eigener Rahmen mit Abstand zur Pille. */
#menu-main > li > a.nav-link[href="/sale/"]:focus-visible,
#menu-main > li > a.nav-link[href="/sale"]:focus-visible {
    outline: 2px solid var(--mts-c-primary-active, #516a60) !important;
    outline-offset: 3px !important;
}

/* Nachtrag zur Pille, gemessen statt geschätzt: zwischen 992px und 1399.98px
   greift im Theme
     `#header header #nav-kategorien ul.navbar-nav .nav-link
        { padding-inline: 10px !important }`
   mit Spezifität (2,2,2). Der Selektor oben liegt bei (1,2,2) und verliert
   damit trotz !important - die Pille war bei 1260px nur 58px breit, während
   sie ab 1400px 90px misst. Hier stehen deshalb drei stabile Struktur-IDs
   in der Kette (3,3,2). Alle drei sind Theme-Markup und keine rotierenden
   Menü-Laufzeitnummern: #header ist der Kopfbereich, #nav-kategorien das
   Ziel des Hamburger-Knopfes, #menu-main das Menü mit dem Systemnamen
   "main". Der Fensterbereich ist bewusst derselbe wie in der Theme-Regel,
   damit sich beide nicht an einer anderen Kante überholen. */
@media only screen and (min-width: 992px) and (max-width: 1399.98px) {
    #header #nav-kategorien #menu-main > li > a.nav-link[href="/sale/"],
    #header #nav-kategorien #menu-main > li > a.nav-link[href="/sale"] {
        padding-inline: 18px !important;
    }
}

/* Auf der Seite /sale/ bekommt das li die Klasse `selected`, und
     `.megamenu .nav-item.selected .nav-link::before`
   zeichnet den grünen Aktiv-Balken. Er ist absolut positioniert mit
   width:100% und misst dadurch die Breite des li, nicht die des Links -
   gemessen 110px unter einer 90px breiten Pille. Der Balken läuft damit
   seitlich aus der Pille heraus und schneidet ihre untere Rundung an.
   Für die Pille wird er abgeschaltet: die gefüllte Fläche IST bereits die
   Hervorhebung, ein zweiter Marker darunter sagt nichts Zusätzliches.
   Spezifität (1,2,3) gegen (0,3,2) der Theme-Regel. Nur dieser eine
   Eintrag - die sechs anderen Menüpunkte behalten ihren Balken. */
#menu-main > li > a.nav-link[href="/sale/"]::before,
#menu-main > li > a.nav-link[href="/sale"]::before {
    display: none !important;
    content: none !important;
}
