/* SmartFit Online-Sizing — Storefront-Overlay-Styles (store.movetoshop.de).
 * Platzhalter-Button (Click-to-Load) + Banner-Templates (CI).
 * PDP-Regeln (Task 12); Category-Sizing (Task 18) am Dateiende.
 */
/* Platzierung: oben RECHTS im Rahmenform-Block (.mts-fsw, TASK-451).
 * Bewusst absolut: .mts-fsw zentriert Kopf + Chips (text-align/justify-content
 * center). Ein Flex-/Flow-Geschwister wuerde diese Zentrierung verschieben —
 * Vorgabe ist aber "Rahmenform bleibt zentriert, nichts anderes bewegt sich".
 * Absolut = wir nehmen keinen Platz im Flow ein. */
.mts-fsw { position: relative; }
.mts-fsw > .mts-sf-section { position: absolute; top: 0; right: 0; margin: 0; z-index: 2; }

/* Alternativen-Zustand (TASK-734): "Deine Größe: 58 cm - Alternativen anzeigen"
 * ist 320-352 px breit. Neben der zentrierten Kopfzeile sind selbst bei 1920 px
 * Fensterbreite nur ~320 px frei — gemessen ueberlappt der Text bei JEDER Breite
 * von 768 bis 1920 sowohl "Rahmenform" als auch die Chips. Deshalb hier kein
 * Ausweichen per Breitenregel, sondern zustandsgebunden: raus aus der absoluten
 * Ecke, in den Fluss ueber den Block (die Sektion wird dafuer in placeSection()
 * als erstes Kind eingehaengt). Hoehere Spezifitaet als die Regel darueber UND
 * als die 575.98px-Media-Query weiter unten, damit die Reihenfolge im Stylesheet
 * keine Rolle spielt. */
.mts-fsw > .mts-sf-section.mts-sf-section--above {
  position: static;
  margin: 0 0 .7rem;
  text-align: center;
}

/* ZWEI SPALTEN statt Ecke (Nutzer 2026-08-22) — der Rahmenform-Block bekommt
 * dieselbe Zweispaltigkeit wie die Varianten-Zeile DIREKT DARUNTER:
 *
 *     Rahmenform   |   Größenberater + Rahmengeometrie
 *     ------------------------------------------------
 *     Farbe        |   Größe
 *
 * Die Spaltengeometrie ist bewusst NICHT frei gewählt, sondern die der
 * `.pd-variants` — und die kommt live NICHT aus diesem Stylesheet, sondern aus
 * einem Topic-Inline-Block (am gerenderten DOM abgelesen, mc 2026-08-22):
 *     @media (min-width: 768px) {
 *       body .pd-variants { display:flex; flex-flow:wrap; gap:8px; width:100% }
 *       body .pd-variants .form-group.choice { flex:1 1 0; min-width:140px }
 *     }
 * Die Modul-Regel in mts-theme-global.css (gap:28px) verliert dagegen. Wer die
 * Spaltenbreite hier nachzieht, muss also den INLINE-Block prüfen, nicht das
 * Modul-CSS — sonst stehen die Spalten sichtbar versetzt zur Zeile darunter.
 * Deshalb `minmax(140px, 1fr)` + `column-gap: 8px`: bei 640 px Blockbreite
 * ergibt das 2 × 316 px, exakt bündig mit "Farbe" und "Größe".
 *
 * `:has()` statt einer JS-Klasse: smartfit.js hängt die Sektion an mehreren
 * Stellen ein und wieder um (placeSection, Umzugs-Observer, AJAX-Rerender).
 * Eine Klasse müsste an jeder dieser Stellen mitgeführt werden; die
 * Struktur-Bedingung "es hängt eine Sektion drin" ist immer richtig — und wird
 * automatisch falsch, wenn kein Größenberater existiert (Nicht-Rad, kein
 * SmartFit-Support). Dann bleibt der Block vollbreit zentriert wie bisher.
 *
 * Ohne Rahmenform-Switcher greift diese Regel gar nicht: dort gibt es kein
 * .mts-fsw, die Sektion trägt --standalone und steht zentriert über den
 * Größen (Vorgabe unverändert).
 *
 * Die Spalte ist explizit gesetzt (grid-area), nicht der Quelltext-Reihenfolge
 * überlassen. Damit ist es egal, ob placeSection() die Sektion als erstes
 * (--above) oder letztes Kind einhängt — sie landet in beiden Fällen rechts.
 * `--above` wird dadurch im Split-Layout gegenstandslos; die zugehörige
 * Platzmessung schaltet sich in smartfit.js selbst ab (s. dort
 * `istZweiSpalten`). Der Grund für das ganze Ausweichmanöver war die absolute
 * Positionierung, und die gibt es hier nicht mehr: was zu breit ist, bricht in
 * seiner Spalte um, statt die Kopfzeile zu überlagern.
 *
 * `position: relative`, NICHT static — dieselbe Falle wie in der 575.98px-Regel
 * weiter unten: im Einschwingzustand ist `sf-product-sizing` absolut gesetzt und
 * braucht die Sektion als Containing Block. Mit static hinge der Ladebalken am
 * nächsten positionierten Vorfahren und liefe quer über die PDP.
 *
 * Nur ab 768 px: darunter stapelt `.pd-variants` Farbe/Größe untereinander
 * (max-width:767px -> display:block), eine Zweispaltigkeit darüber wäre dann
 * genau die Inkonsistenz, die hier beseitigt werden soll. */
@media (min-width: 768px) {
  .mts-fsw:has(> .mts-sf-section) {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr);
    column-gap: 8px;
    align-items: center;
  }
  .mts-fsw:has(> .mts-sf-section) > .mts-fsw-head  { grid-area: 1 / 1 / 2 / 2; align-self: start; }
  .mts-fsw:has(> .mts-sf-section) > .mts-fsw-chips { grid-area: 2 / 1 / 3 / 2; }
  /* Beide Zustände in EINER Regel: --above darf hier nichts mehr verschieben.
   * Die Sektion füllt beide Zeilen der rechten Spalte und zentriert sich darin
   * vertikal — bei zwei wie bei fünf Rahmenform-Chips steht sie damit optisch
   * auf der Mitte des Blocks statt oben in der Ecke zu schweben. */
  .mts-fsw:has(> .mts-sf-section) > .mts-sf-section,
  .mts-fsw:has(> .mts-sf-section) > .mts-sf-section.mts-sf-section--above {
    grid-area: 1 / 2 / 3 / 3;
    align-self: center;
    position: relative;
    top: auto; right: auto;
    margin: 0;
    text-align: center;
    z-index: 2;
  }
}

/* Ohne Rahmenform-Switcher (Singleton-Modell): im Flow, ueber den Groessen,
 * ZENTRIERT (Nutzer 2026-07-17: bei nur einer Rahmenform soll das Widget mittig
 * stehen, nicht rechtsbuendig). Mit Switcher bleibt es rechts oben
 * (.mts-fsw > .mts-sf-section, absolut). */
/* Die Platzhalter-Reserve teilt sich die Aussenabstaende mit der echten
   Sektion — BEWUSST in derselben Regel, damit beide nicht auseinanderlaufen.
   Sonst kollabiert der Reserve-Rand anders als der der Sektion gegen
   .pd-variants-container (margin-top 6px) und der Tausch versetzt das Layout
   um die Differenz (gemessen: 6 px). */
.mts-sf-section--standalone,
.mts-sf-reserve { margin: 0 0 .9rem; text-align: center; }

.mts-sf-btn {
  display: inline-flex; align-items: stretch; width: auto; padding: 0;
  /* Kein Rahmen (Nutzer-Entscheid 2026-07-17, Variante A): der fruehere
   * 1px-solid-#fff-Rahmen war auf weissem Grund unsichtbar und erzeugte auf
   * jedem anderen Hintergrund (Kategorie-Karten, Bilder) einen sinnlosen
   * weissen Ring. Optik auf Weiss unveraendert. */
  border: none; border-radius: 6px;
  background: var(--mts-accent, #6d8c80); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  cursor: pointer; overflow: hidden; text-align: left;
}
.mts-sf-btn[disabled] { opacity: .6; cursor: default; }
/* Der Platzhalter ist optisch identisch — er wird beim Klick 1:1 durch den
 * SmartFit-Button ersetzt und darf keinen sichtbaren Sprung erzeugen. */
.mts-sf-placeholder { background: var(--mts-accent, #6d8c80); color: #fff; }

/* Einschwingphase (Teil A, 2026-07-17): bis das finale Label feststeht
 * (activity-Ergebnis, select oder Timeout — smartfit.js settle()), traegt der
 * PLATZHALTER den Zustand. Der echte SmartFit-Button — und damit auch sein
 * Shadow-Ladebalken (oz-loading-wrapper UM den Button) — bleibt solange
 * unsichtbar. Bewusst nur der Button, NICHT sf-product-sizing selbst: unter
 * dem Widget-Element haengt auch der Modal-/iframe-Aufbau, der weiterlaufen
 * und im Klick-Pfad sichtbar oeffnen koennen muss. */
.mts-sf-section.is-settling sf-product-sizing > button,
.mts-sf-section.is-settling sf-product-sizing .mts-sf-btn { display: none; }

/* ...den Button zu verstecken reicht aber NICHT: das Host-Element behaelt
 * seinen Shadow-Ladebalken (live gemessen 64x24) und stand als inline-block
 * NEBEN dem Platzhalter in derselben Zeile. text-align:center zentrierte dann
 * die GANZE Zeile (Platzhalter 148px + Widget 64px) -> der sichtbare Button sass
 * ~32px zu weit links und sprang beim settle() in die Mitte zurueck
 * (Nutzer-Report + Messung 2026-07-20). Deshalb das Widget solange ganz aus dem
 * Fluss nehmen; dann bestimmt allein der Platzhalter die Position.
 * Bewusst position:absolute und NICHT display:none: das Element bleibt
 * gerendert, der Modal-/iframe-Aufbau laeuft weiter und openModal() kann
 * seinen (versteckten) Button klicken. */
.mts-sf-section { position: relative; }
.mts-sf-section.is-settling > sf-product-sizing {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
}
/* Platzhalter UND echter Button muessen dieselbe Hoehe belegen, sonst versetzt
 * settle() (Platzhalter raus, Widget zurueck in den Fluss) das halbe Angebot.
 *
 * Die Mindesthoehe gehoert auf den BUTTON, nicht auf den Host. Beide tragen die
 * Klasse .mts-sf-btn: unser Platzhalter (smartfit.js, placeholder.className) und
 * der Button, den SmartFit aus unserem <template> klont (btnMarkup) — der landet
 * im LIGHT-DOM, nicht im Shadow-DOM. Belege dafuer, falls es wieder jemand
 * anders vermutet: die Regel `.mts-sf-section.is-settling sf-product-sizing
 * .mts-sf-btn` weiter oben greift nachweislich (sie erzeugt den is-settling-
 * Zustand), und whenButtonReady() findet den Button per
 * widget.querySelector('button, a') — beides waere im Shadow-DOM unmoeglich.
 *
 * HISTORIE (2026-07-21, damit der Fehler nicht wiederkommt): Hier stand kurzzeitig
 * `min-height` auf dem HOST <sf-product-sizing>. Das hielt zwar die Sektionshoehe
 * konstant, blies aber den Host ueber die Naturhoehe des sichtbaren Buttons hinaus
 * — die Differenz landete als TOTRAUM unter dem Button und addierte sich zum
 * margin-top des Geometrie-Links. Ergebnis: Button wirkte flacher, Abstand zur
 * "Rahmengeometrie" groesser (exakter Nutzer-Report). Die damalige Begruendung
 * ("Button liegt im Shadow-DOM") war falsch, und die 20px-Messung, auf der sie
 * beruhte, wurde WAEHREND is-settling gemacht — also mit per CSS ausgeblendetem
 * Button. Kein gueltiger Kalibrierwert.
 *
 * Gilt bewusst fuer PDP UND Kategorie-Listing (dort dieselbe Platzhalter-Klasse),
 * sonst tritt derselbe Sprung pro Produktkarte auf. */
.mts-sf-btn { min-height: 32px; }

/* Den Host normalisieren statt auf SmartFits Fremd-CSS zu vertrauen: dort kommt
 * das inline-block her, auf dem die Ausrichtung stillschweigend beruht. Analog
 * zu `.mts-sf-geo sf-geometry-display` weiter unten. Ein Bundle-Update von
 * Radlabor kippt die Annahme sonst lautlos. */
.mts-sf-section > sf-product-sizing { display: inline-flex; vertical-align: top; }

.mts-sf-btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem .45rem; background: #1d1d1f; flex: 0 0 auto;
  color: #fff;            /* die SVG-Pfade zeichnen mit fill="currentColor" */
}
/* Seitenverhaeltnis des Icons: 17.068 x 25.683 (~0.665) — nicht verzerren. */
.mts-sf-btn__icon svg { display: block; width: 12px; height: 18px; }
.mts-sf-btn__label { display: inline-flex; align-items: center; padding: .38rem .6rem; }

/* Ladezustand: der Platzhalter BLEIBT waehrend des Ladens stehen (sonst klafft
 * bis status OK eine Luecke). Nutzer-Vorgabe 2026-08-17: das Laden soll NICHT
 * MEHR sichtbar sein (weder das "Lädt ..."-Label aus smartfit.js noch dieser
 * Spinner) — nur `cursor:progress` bleibt als dezenter Hinweis, das Icon
 * bleibt unveraendert stehen. Das eigentliche Laden (ensureWidget() im
 * Hintergrund) ist davon unberuehrt, nur die Anzeige ist stumm geschaltet.
 * WAR: Icon ausgeblendet + rotierender Ring per ::after (mts-sf-spin). */
.mts-sf-btn.is-loading { cursor: progress; }

/* Schmale Viewports: absolute Platzierung wuerde die Chips ueberlagern. */
@media (max-width: 575.98px) {
  .mts-fsw > .mts-sf-section {
    /* relative statt static: im Layout identisch (kein Offset gesetzt), aber es
     * bleibt der Containing Block fuer das im Einschwingzustand absolut
     * gesetzte sf-product-sizing. Mit static haenge das Widget am naechsten
     * positionierten Vorfahren und truege seinen Ladebalken quer ueber die PDP. */
    position: relative; margin: .6rem 0 0; text-align: right;
  }
}

.mts-sf-hint { margin: .4rem 0 0; font-size: .78rem; line-height: 1.35; opacity: .7; }

/* ---- Geometrie-Display (TASK-457.10) -----------------------------------
 * Bewusst KEIN zweiter Button: der Groessen-Button ist der Call-to-Action,
 * direkt darunter steht der Warenkorb. Ein zweiter gefuellter Button wuerde
 * mit beiden konkurrieren (Vorgabe Bjoern 09.07.: "dezenter Link, nicht vom
 * Warenkorb weg"). Deshalb reiner Textlink in Akzentfarbe.
 * Der Link erscheint an ZWEI Stellen mit identischer Optik: als unser
 * Platzhalter (vor dem Klick, ohne SmartFit-Kontakt) und als geklonter
 * Template-Button IM sf-geometry-display — der Wechsel darf nicht sichtbar
 * springen. */
/* min-height: derselbe Hoehen-Guard wie beim Groessen-Button weiter oben, nur
 * fuer den Geometrie-Block — und aus demselben Grund noetig.
 *
 * Beim settle() des Geo-Blocks faellt der Platzhalter-Link weg und das echte
 * <sf-geometry-display> kommt aus position:absolute zurueck in den Fluss. Live
 * gemessen 2026-07-21: Platzhalter-Link 15,59 px, echter Host 15,0 px, Wrapper
 * dadurch 16,59 -> 15,0 px. Der Link selbst bleibt dabei stehen (er sitzt oben
 * im Wrapper), aber ALLES DARUNTER — Farb-/Groessenwahl und der ganze Rest des
 * Angebots — verschiebt sich um die Differenz. Exakt der Nutzer-Report:
 * "Rahmengeometrie veraendert sich nicht, aber der Block darunter rutscht".
 *
 * Der Guard sitzt bewusst auf dem WRAPPER, nicht auf den beiden Innenelementen:
 * Platzhalter-Link und Fremd-Host sind verschiedene Elementtypen mit eigenem
 * Box-Verhalten, der Wrapper ist der einzige gemeinsame Nenner, den wir voll
 * kontrollieren. 18px liegt knapp ueber dem hoeheren der beiden Zustaende
 * (16,59) — der Aufschlag ist unsichtbar, die Hoehe dafuer invariant.
 *
 * Nebeneffekt, der die Reserve mit repariert: erst wenn Button UND Geo-Block
 * ueber den Settle hinweg konstant sind, ist die Sektionshoehe invariant — und
 * damit ist auch der gelernte Reservewert (mts-sf-skel2) immer derselbe, egal
 * in welchem Zustand gemessen wurde. Gegengeprueft: Versatz darunter 0px statt
 * -1,59px. */
.mts-sf-geo { margin: .45rem 0 0; line-height: 1; position: relative; min-height: 18px; }
/* Einschwingphase des Geometrie-Links — exakt dieselbe Falle wie oben beim
 * Groessenberater: solange unser Platzhalter UND das aufgebaute
 * sf-geometry-display beide im Fluss stehen, zentriert text-align:center die
 * ganze Zeile und der sichtbare Link sitzt zu weit links. Die Klasse setzt
 * smartfit.js und nimmt sie zurueck, sobald der echte Button da ist. */
.mts-sf-geo.is-settling > sf-geometry-display {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
}
/* Farbe: --mts-accent-TEXT, nicht --mts-accent. Seit 2026-08-15 sind das
 * zwei verschiedene Toene (Flaeche #6d8c80 / Text #4d6b60, Begruendung im
 * Brand-Block von storefront.css). Dieser Link ist 12-px-Text auf Weiss -
 * mit dem Flaechenton kaeme er auf 3,68:1 und waere schlechter lesbar als
 * vorher. Der Fallback traegt denselben Wert fuer den Fall, dass eine
 * Fremd-Instanz das Token nicht setzt. */
.mts-sf-geolink {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 0; border: none; background: none;
  color: var(--mts-accent-text, #4d6b60);
  font-size: 12px; font-weight: 600; line-height: 1.3;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.mts-sf-geolink:hover { text-decoration-thickness: 2px; }
.mts-sf-geolink[disabled] { opacity: .6; cursor: progress; }
/* Waehrend des Ladens: dezenter Punkt-Spinner statt Layout-Sprung. */
.mts-sf-geolink.is-loading::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .18); border-top-color: currentColor;
  animation: mts-sf-spin .7s linear infinite;
}
/* Keyframe frueher auch von .mts-sf-btn.is-loading genutzt — der Ring dort
   ist seit 2026-08-17 neutralisiert (Nutzer-Vorgabe, kein sichtbares Laden
   mehr), diese Definition bleibt fuer den Geometrie-Link hier stehen. */
@keyframes mts-sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mts-sf-geolink.is-loading::after { animation-duration: 2s; }
}
/* sf-geometry-display ist per Shadow-CSS inline-block/100% breit — ohne das
 * hier dehnt sich der Link im standalone-Fall ueber die volle Spaltenbreite
 * und die Unterstreichung laeuft ins Leere. */
.mts-sf-geo sf-geometry-display { display: inline-block; width: auto; height: auto; }

/* ---- Category-Sizing (Task 18 / TASK-457.09) ----------------------------
 * Button-Bar ueberm Listing + Banner auf der Karte. Der Banner-Host
 * (.mts-pcard__media bzw. .art-picture-block) ist position:relative
 * (mts-theme-global.css:363-372). Position OBEN RECHTS (Vorgabe 2026-07-17);
 * oben links sitzt bereits das Sale-Badge (.mts-pcard__badge, top/left 14px)
 * — 14px-Abstand hier gespiegelt.
 *
 * NACHTRAG 2026-08-10: Die alte Deckelung auf `calc(60% - 14px)` hat die Pille
 * ab zwei Groessen zweizeilig gemacht ("Deine Größe" / "56 cm 58 cm"). Der
 * Bedarf ist gemessen 212px bei zwei, 273px bei drei Groessen; 60% reichen
 * dafuer erst ab 377px Kachelbreite — die Grid-Kacheln liegen bei 406px
 * (knapp drueber), die Carousel-Baender ("Zuletzt angesehen", Empfehlungen)
 * aber bei 315px und darunter. Genau dort brach es.
 * Die Deckelung liegt jetzt bei `calc(100% - 78px)`: 14px rechter Rand +
 * 52px fuer den Vergleichs-Button oben links (14px Offset + 38px breit,
 * live gemessen) + 12px Luft. Das Sale-Badge sitzt seit TASK-435c NICHT mehr
 * oben links, sondern oben zentriert (mts-theme-global.css:6813) — der obige
 * Satz beschreibt einen ueberholten Stand und bleibt nur als Historie stehen.
 * Der aeussere Umbruch (flex-wrap: wrap) bleibt bewusst als Notnagel: auf sehr
 * schmalen Kacheln (Mobil-Listing zweispaltig, ~154px) bricht die Pille weiter
 * um, statt abgeschnitten zu werden. */
.mts-sf-catbar { margin: 0 0 1rem; }
.mts-sf-catbar .mts-sf-btn { width: auto; }
/* Der cache-first gerenderte Badge-Host (.mts-sf-cardbadge-host, ohne
 * SmartFit-Kontakt) sitzt an DERSELBEN Position wie das Live-Banner. */
.artlist .art .mts-pcard__media sf-category-sizing-banner,
.artlist .art .art-picture-block sf-category-sizing-banner,
.artlist .art .mts-pcard__media .mts-sf-cardbadge-host,
.artlist .art .art-picture-block .mts-sf-cardbadge-host {
  position: absolute; top: 14px; right: 14px; left: auto; bottom: auto; z-index: 3;
  display: block; max-width: calc(100% - 78px); text-align: right;
}

/* Custom-Slot-Templates (Light-DOM, von unserem CSS direkt stylebar; laut
 * SmartFit-Doku nur Nachfahren-Selektoren, keine Kind-Kombinatoren).
 * Look = Home-Pill des Sale-Badges (mts-theme-global.css:6581-6586),
 * Groessen-Items mit Haekchen (lieferbar) / Kreuz (ausverkauft) als
 * Inline-SVG — keine Emojis (Hard-Rule). */
.artlist .art .mts-sf-cardbadge {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
  background: #fff; color: var(--mts-text, #1d1d1f);
  padding: 6px 11px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08); line-height: 1;
}
/* KEIN text-transform: uppercase — das macht aus "Größe" browserkonform
 * "GRÖSSE" (ß -> SS), Nutzer will "Deine Größe" (2026-07-17). */
/* 11-px-Label auf weisser Pille -> Textton, nicht Flaechenton (s. o. bei
 * .mts-sf-geolink). Bei 11 px ist der Unterschied zwischen 3,68:1 und
 * 5,85:1 nicht akademisch. */
.artlist .art .mts-sf-cardbadge__label {
  font-size: 11px; font-weight: 600;
  color: var(--mts-accent-text, #4d6b60);
}
/* Die Groessen-Items stecken im Custom-Element oz-banner-custom-frame-items
 * (SmartFit ersetzt unseren <slot name="items"/> dadurch) — das braucht
 * selbst flex + gap, sonst kleben mehrere Groessen aneinander
 * ("58cm[Haken]60cm[Haken]", Nutzer-Screenshot 2026-07-17). */
.artlist .art .mts-sf-cardbadge oz-banner-custom-frame-items {
  display: inline-flex; align-items: center; gap: 9px;
}
.artlist .art .mts-sf-cardsize {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 700;
}
/* Innerhalb der Pille wird nie umbrochen: weder das Label ("Deine Größe")
   noch eine Groessenangabe darf zwischen Zahl und Einheit reissen ("58 cm").
   Der Umbruch bleibt damit ausschliesslich dem aeusseren flex-wrap ueberlassen. */
.artlist .art .mts-sf-cardbadge__label,
.artlist .art .mts-sf-cardsize { white-space: nowrap; }
/* No-Fit-Pille: dezent grau, Kreuz-Icon in gleicher Tonlage. */
.artlist .art .mts-sf-cardbadge--nofit { gap: 5px; }
.artlist .art .mts-sf-cardbadge--nofit .mts-sf-cardbadge__label { color: #6b7280; }
.artlist .art .mts-sf-cardbadge--nofit svg { color: #9ca3af; display: block; }
/* Haekchen steht direkt neben dem Label und muss denselben Ton tragen -
 * zwei Gruens innerhalb einer Pille waeren genau der Fehler, den dieser
 * Durchgang beseitigt. */
.artlist .art .mts-sf-cardsize--in svg { color: var(--mts-accent-text, #4d6b60); }
.artlist .art .mts-sf-cardsize--out { color: #9ca3af; text-decoration: line-through; }
.artlist .art .mts-sf-cardsize--out svg { color: #9ca3af; }

/* Optik nur fuer den Dev-Stub — das echte v3-Banner bringt sein eigenes UI. */
sf-category-sizing-banner[data-sf-stub] {
  padding: .3rem .6rem; border-radius: 6px;
  /* Textton, nicht Flächenton: .72rem auf einer zu 92 % weissen Fläche ist
   * Fliesstext-Fall, dieselbe Begründung wie bei .mts-sf-geolink oben. */
  background: rgba(255, 255, 255, .92); color: var(--mts-accent-text, #4d6b60);
  font-size: .72rem; font-weight: 600; line-height: 1.3;
}

/* Platzhalter gegen Layout-Shift (CLS). Haelt exakt den Platz frei, den die
   SmartFit-Sektion beim letzten Aufruf auf diesem Geraet gebraucht hat — die
   Hoehe setzt smartfit.js inline (reserveSpace). Unsichtbar, nicht anklickbar,
   nicht im Accessibility-Tree (aria-hidden am Element). Ohne gelernte Hoehe
   wird das Element gar nicht erst erzeugt. */
.mts-sf-reserve { pointer-events: none; }