/* ============================================================
   Schrauberkontor — App-Styles (Design V1)
   Single Source of Truth sind die Design-Tokens in static/design/*.css
   (1:1-Kopien aus design/tokens/). Design-Update = Dateien erneut aus
   design/tokens/ nach static/design/ kopieren — diese Datei nutzt NUR
   var(--…)-Tokens, keine Hardcodes.

   ⚠️ fonts.css: beide Fassungen sind byte-identisch und SELF-HOSTED
   (lokale @font-face aus static/fonts/). Sie waren zeitweise
   auseinandergelaufen — die Vorlage hielt noch den Google-@import,
   sodass ein Kopieren nach Vorschrift das Self-Hosting still
   zurückgedreht und die DSGVO-Frage neu aufgeworfen hätte. Beim
   Aktualisieren der Schriften daher NIE auf fonts.googleapis.com
   zurückstellen, sondern tools/fetch_fonts.py nutzen.
   Palette V1: Cloud Dancer · Blue Fusion · Golden Mist.
   ============================================================ */
@import "design/fonts.css";
@import "design/colors.css";
@import "design/typography.css";
@import "design/spacing.css";
@import "design/elevation.css";

/* --- Kompatibilitäts-Aliase ------------------------------------
   Alte App-/Inline-Variablen auf V1-Tokens mappen, damit verbliebene
   inline style="var(--blue-dark)"-Stellen automatisch korrekt aussehen. */
:root{
  /* Oswald = kondensierte Versal-Headline (Hero der Startseite); Rest bleibt Jost. */
  --font-oswald: "Oswald", "Jost", system-ui, sans-serif;
  --blue-dark: var(--ink);
  --blue:      var(--fusion);
  --rust:      var(--fusion);          /* V1-Primäraktion = Blue Fusion */
  --sand:      var(--gold-soft);
  --muted:     var(--text-muted);
  --line:      var(--border-default);
  --bg:        var(--surface-app);
  --card:      var(--surface-card);
  --green:     var(--success);   --green-bg:  var(--success-soft);
  --yellow:    var(--warning);   --yellow-bg: var(--warning-soft);
  --grey:      var(--taupe-deep); --grey-bg:  var(--taupe-soft);
  --red:       var(--danger);    --red-bg:    var(--danger-soft);
}

/* --- Basis ----------------------------------------------------- */
*{box-sizing:border-box}
/* `overflow-x:hidden` macht Body/Html zum Scroll-Container und setzt damit
   JEDES position:sticky auf der Seite ausser Kraft -- das Vergleichspanel
   erschien dadurch am Anfang der Trefferliste statt neben der geklickten
   Kachel. `clip` schneidet genauso ab, erzeugt aber keinen Scroll-Container. */
html,body{max-width:100%;overflow-x:clip}
/* Hoehe des klebenden Seitenkopfs -- alles, was sich unter ihm festsetzt
   (derzeit das Vergleichspanel), rechnet damit. */
:root{--kopf-h:73px}
body{margin:0;font-family:var(--font-sans);color:var(--text-body);
  background:var(--surface-app);line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--text-link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
::selection{background:var(--gold-soft);color:var(--ink)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}

h1,h2,h3{font-family:var(--font-display);color:var(--text-strong);
  font-weight:var(--fw-semibold);line-height:var(--lh-snug);
  letter-spacing:var(--tracking-snug);margin:0 0 .5em;text-wrap:balance}

/* Mono-Helfer für Teilenummern / Preise */
.pn,.sk-mono,.ralfs-code{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* --- Header (helle Cloud-Dancer-Leiste, sticky) ---------------- */
header.site{position:sticky;top:0;z-index:20;
  background:color-mix(in oklab, var(--paper-bright) 90%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft)}
header.site .wrap{display:flex;align-items:center;gap:20px;min-height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:30px;width:auto;display:block}
header.site form{flex:1;max-width:560px;display:flex;align-items:center;gap:6px;
  background:var(--paper-bright);border:1.5px solid var(--line-strong);
  border-radius:var(--radius-pill);padding:5px 5px 5px 16px;
  box-shadow:var(--shadow-inset)}
header.site form:focus-within{border-color:var(--fusion);box-shadow:var(--focus-ring)}
header.site input[type=search]{flex:1;border:0;background:transparent;outline:none;
  font-family:var(--font-sans);font-size:var(--text-sm);color:var(--ink);padding:6px 0}
/* Inneren Focus-Ring unterdruecken -- aeusserer Rahmen kommt von form:focus-within. */
header.site input[type=search]:focus,
header.site input[type=search]:focus-visible{box-shadow:none}
header.site button{flex:none;border:0;background:var(--fusion);color:var(--text-on-color);
  height:var(--control-md);padding:0 22px;border-radius:var(--radius-pill);
  font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:var(--text-sm);cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard)}
header.site button:hover{background:var(--fusion-deep)}

/* --- Hero (Home) ----------------------------------------------- */
.hero{background:linear-gradient(180deg,var(--paper-bright) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line-soft);text-align:center}
.hero .wrap{max-width:880px;padding-block:var(--space-9) var(--space-8)}
.hero .wordmark{height:46px;width:auto;max-width:90%;margin:0 auto 22px;display:block}
.hero .eyebrow{font-family:var(--font-display);font-size:var(--text-xs);
  font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:14px}
.hero h1{font-size:var(--text-3xl);font-weight:var(--fw-bold);line-height:var(--lh-tight);
  letter-spacing:.01em;text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.hero p.lead{font-size:var(--text-md);line-height:var(--lh-normal);color:var(--text-body);
  max-width:600px;margin:0 auto 28px}
.hero .searchbox{display:flex;align-items:center;gap:6px;max-width:680px;margin:0 auto;
  background:var(--paper-bright);border:1.5px solid var(--line-strong);
  border-radius:var(--radius-pill);padding:7px 7px 7px 20px;box-shadow:var(--shadow-md)}
.hero .searchbox:focus-within{border-color:var(--fusion);box-shadow:var(--focus-ring)}
.hero .searchbox input{flex:1;border:0;background:transparent;outline:none;
  font-family:var(--font-sans);font-size:var(--text-md);color:var(--ink);padding:10px 0}
/* Inneren Focus-Ring des Feldes unterdruecken -- der aeussere Rahmen kommt von
   .searchbox:focus-within; der globale :focus-visible-Ring wirkt sonst doppelt. */
.hero .searchbox input:focus,
.hero .searchbox input:focus-visible{box-shadow:none}
.hero .searchbox button{flex:none;border:0;background:var(--fusion);color:var(--text-on-color);
  height:var(--control-lg);padding:0 28px;border-radius:var(--radius-pill);
  font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--fw-semibold);cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard)}
.hero .searchbox button:hover{background:var(--fusion-deep)}
.models{margin-top:20px;color:var(--text-muted);font-size:var(--text-sm)}
.trust{margin-top:14px;font-size:var(--text-xs);color:var(--text-faint);letter-spacing:.4px}

/* --- Fahrzeugleiste (Sand-Band) -------------------------------- */
.vehiclebar{background:var(--gold-soft);
  border-bottom:1px solid color-mix(in oklab, var(--gold) 30%, var(--line))}
.vehiclebar .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-block:12px}
.vehiclebar b{font-family:var(--font-display);font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  font-size:var(--text-sm);color:var(--ink)}
/* Auslöser: „Fahrzeug wählen"-Pille (auch auf der Startseiten-Karte) */
.vb-pill{appearance:none;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;
  border-radius:var(--radius-pill);border:1.5px solid color-mix(in oklab,var(--fusion) 45%,var(--line));
  background:var(--paper-bright);color:var(--fusion-deep);font-family:var(--font-sans);
  font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer;box-shadow:var(--shadow-xs);
  transition:background var(--dur-fast)}
.vb-pill:hover{background:var(--fusion-soft)}
.vb-pill svg{flex:none}
/* Startseiten-Karte: Pille exakt wie das Suchfeld (.entry-search) einfaerben —
   Cloud Dancer (--paper) + kraeftiger Rand, damit sie sich von der Karte abhebt. */
.veh-pick .vb-pill{background:var(--paper);border-color:var(--line-strong)}
.veh-pick .vb-pill:hover{background:var(--paper-sunken)}
/* Gewähltes Fahrzeug (Chip + Ändern) */
.vb-selected{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;
  background:var(--fusion-deep);border-radius:var(--radius-pill);color:var(--text-on-color);max-width:100%}
.vb-selected svg{flex:none}
.vb-sel-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.vb-sel-name{font-family:var(--font-display);font-size:14.5px;font-weight:var(--fw-semibold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-sel-range{font-family:var(--font-mono);font-size:10.5px;opacity:.78;white-space:nowrap}
.vb-sel-x{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;
  border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-on-color);cursor:pointer}
.vb-sel-x:hover{background:color-mix(in oklab,var(--ink-invert) 18%,transparent);text-decoration:none}
.vb-change{height:38px;padding:0 14px;border-radius:var(--radius-pill);
  border:1px solid color-mix(in oklab,var(--fusion) 28%,transparent);background:transparent;
  color:var(--fusion-deep);font-family:var(--font-sans);font-size:13.5px;font-weight:var(--fw-medium);cursor:pointer}
.vb-change:hover{background:var(--paper-bright)}
.vb-hint{color:var(--text-muted);font-size:var(--text-xs)}

/* --- Kontextleiste (Handoff 3.5) -------------------------------
   Erbt das Sand-Band von .vehiclebar. Links die aktiven Filter als entfernbare
   Chips, rechts (auf breiten Schirmen abgesetzt) nur die noch offenen Wege. */
.kontextleiste .wrap{gap:12px}
.kl-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.kl-wege{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.kl-chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 6px 0 12px;
  background:var(--paper-bright);border:1px solid var(--line);border-radius:var(--radius-pill);
  color:var(--ink);max-width:100%}
.kl-chip svg{flex:none;color:var(--fusion-deep)}
/* Die Art des Filters klein und ruhig, der Wert traegt die Information. */
.kl-art{font-family:var(--font-display);font-size:var(--text-2xs);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--text-muted);flex:none}
.kl-wert{font-size:var(--text-sm);font-weight:var(--fw-semibold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Herkunftsvermerk am Fahrzeug-Chip (Fahrzeug kam aus dem Suchtext) */
.kl-quelle{font-size:var(--text-2xs);color:var(--text-muted);white-space:nowrap;flex:none}
.kl-x{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;
  border-radius:var(--radius-pill);color:var(--text-muted);
  transition:background var(--dur-fast),color var(--dur-fast)}
.kl-x:hover{text-decoration:none;background:var(--danger-soft);color:var(--danger)}
.kl-weg{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;
  appearance:none;border:1px dashed color-mix(in oklab,var(--fusion) 40%,var(--line));
  border-radius:var(--radius-pill);background:transparent;color:var(--fusion-deep);
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-medium);cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast)}
.kl-weg:hover{text-decoration:none;background:var(--fusion-soft);border-style:solid}

/* --- Teilen-Button (Handoff 3.5) -------------------------------
   Steht im Kopf der Teileseite neben der Ueberschrift. Beschriftung immer im
   Klartext neben dem Icon -- ein nacktes Symbol muss man raten. */
.detail-kopf{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
/* min-width:0 laesst den Titel unter seine Inhaltsbreite schrumpfen -- ohne
   break-word laeuft ein langes Wort ("Zuendkerzenstecker") dann unter den
   Teilen-Knopf statt umzubrechen. */
.detail-kopf h1{flex:1;min-width:0;margin-bottom:0;overflow-wrap:break-word}
.share-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;flex:none;
  appearance:none;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--paper-bright);color:var(--fusion-deep);
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.share-btn:hover{background:var(--fusion-soft);border-color:var(--fusion)}
.share-btn .share-ic{display:inline-flex;align-items:center;flex:none}
.share-btn .share-ic-ok{display:none}
/* Quittung: Flaeche und Rand gehen auf Gruen, das Symbol wird zum Haekchen */
.share-btn.ok{background:var(--success-soft);border-color:var(--success);color:var(--success)}
.share-btn.ok .share-ic{display:none}
.share-btn.ok .share-ic-ok{display:inline-flex}

/* Rueckmeldung nach dem Entfernen eines Filters */
.filter-note{background:var(--info-soft);border-bottom:1px solid color-mix(in oklab,var(--info) 30%,var(--line))}
.filter-note .wrap{display:flex;align-items:center;gap:12px;padding-block:10px;
  font-size:var(--text-sm);color:var(--ink-2)}
.filter-note b{font-weight:var(--fw-semibold);color:var(--ink)}
.filter-note-x{appearance:none;border:0;background:transparent;cursor:pointer;margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;
  border-radius:var(--radius-pill);color:var(--text-muted)}
.filter-note-x:hover{background:var(--paper-bright);color:var(--ink)}

/* Schmal: Knopf unter den Titel statt daneben -- nebeneinander bleibt fuer den
   Titel zu wenig Platz, und der Knopf soll seine 44px Zielflaeche behalten. */
@media(max-width:560px){
  .detail-kopf{flex-direction:column;align-items:stretch;gap:10px}
  .detail-kopf .share-btn{justify-content:center}
}

@media(max-width:720px){
  .kl-wege{margin-left:0;width:100%}
  .kl-wert{max-width:52vw}
}
.chip{display:inline-flex;align-items:center;min-height:34px;
  background:var(--paper-bright);border:1px solid color-mix(in oklab,var(--fusion) 26%,var(--line));
  color:var(--fusion-deep);border-radius:var(--radius-pill);padding:5px 14px;
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-medium);
  transition:background var(--dur-fast),border-color var(--dur-fast)}
.chip:hover{text-decoration:none;background:var(--fusion-soft)}
.chip.active{background:var(--fusion);border-color:var(--fusion);color:var(--text-on-color)}
.chip.clear{border-color:var(--border-strong);color:var(--text-muted);background:transparent}

/* --- Fahrzeug-Auswahl (Popover Desktop / Bottom-Sheet Mobil) ----- */
.vb-pop{display:none;position:fixed;inset:0;z-index:80}
.vb-pop.open{display:block}
.vb-pop-panel{position:absolute;display:flex;flex-direction:column;overflow:hidden;
  width:min(680px,calc(100vw - 28px));max-height:calc(100vh - 40px);
  background:var(--paper-bright);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.vb-sheet-head{display:none}
.vb-pop-body{display:flex;align-items:stretch;flex:1;min-height:0}
.vb-col{display:flex;flex-direction:column;min-width:0}
.vb-col-modell{width:260px;border-right:1px solid var(--line-soft)}
.vb-col-baureihe{flex:1}
.vb-col-title{padding:14px 18px 8px;font-family:var(--font-display);font-size:12px;
  font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--gold-deep)}
.vb-col-list{display:flex;flex-direction:column;gap:1px;padding:0 8px 10px;overflow-y:auto}
.vb-model{appearance:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;
  border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer;text-align:left;
  color:var(--text-body);text-decoration:none;transition:background var(--dur-fast)}
.vb-model:hover{background:var(--paper-sunken);text-decoration:none}
.vb-model.active{background:var(--fusion-soft)}
.vb-model.active .vb-model-name{color:var(--fusion-deep);font-weight:var(--fw-semibold)}
.vb-model-name{flex:1;font-size:14.5px;font-weight:var(--fw-medium);color:inherit}
.vb-model-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute);white-space:nowrap}
.vb-model-caret{flex:none;display:inline-flex;color:var(--ink-mute)}
.vb-series{display:none;flex-direction:column;gap:1px;padding:0 8px 10px;overflow-y:auto}
.vb-series.active{display:flex}
/* cursor:pointer explizit -- auf der Teileseite tragen die nicht passenden
   Eintraege data-href statt href (s. _veh_picker.html), und ohne href gibt der
   Browser einem <a> keinen Zeigefinger mehr. */
.vb-serie{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px;padding:0 12px;
  border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;transition:background var(--dur-fast)}
.vb-serie:hover{background:var(--fusion-soft);text-decoration:none}
.vb-serie-name{font-size:14.5px;font-weight:var(--fw-medium);color:var(--ink)}
.vb-serie-range{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);white-space:nowrap}
/* Platzhalter, solange der Fensterinhalt noch laedt (s. _veh_picker.html). */
.vb-laedt{flex:1;display:flex;align-items:center;justify-content:center;padding:34px 24px;
  font-size:13px;color:var(--text-muted)}
.vb-series-empty{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;
  font-size:13.5px;color:var(--ink-mute);text-align:center}
.vb-pop.has-model .vb-series-empty{display:none}
.vb-ampel{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--paper-sunken);
  border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--text-muted)}
.vb-ampel-dots{display:inline-flex;gap:4px;flex:none}
.vb-ampel-dots i{width:8px;height:8px;border-radius:50%}
.vb-ampel-dots .ok{background:var(--success)}
.vb-ampel-dots .warn{background:var(--warning)}
.vb-ampel-dots .bad{background:var(--danger)}
/* --- Browser-Bildschirme der Startseite (Handoff 3.3 / 3.4) ----- */
/* Fahrzeug (zwei Spalten) und Kategorie (drei) tauschen den Bildschirm mit dem
   Kachelraster -- kein Popover. Gemeinsamer Rahmen .hs-*, Zeilen .kb-*. */
.home-screen{width:100%;max-width:1180px;margin-inline:auto;
  display:flex;flex-direction:column;gap:16px}
.home-screen[hidden]{display:none}
.hs-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hs-zurueck{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;
  appearance:none;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--paper-bright);color:var(--ink-2);cursor:pointer;
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-semibold);
  transition:background var(--dur-fast),border-color var(--dur-fast)}
.hs-zurueck:hover{background:var(--paper-sunken);border-color:var(--fusion)}
.hs-pfad{font-size:var(--text-sm);color:var(--ink-3)}
.hs-meta{margin-left:auto;font-size:var(--text-sm);color:var(--ink-3)}
.hs-spalten{display:grid;gap:18px;align-items:start}
.hs-zwei{grid-template-columns:1fr 1fr}
.hs-drei{grid-template-columns:1fr 1fr 1fr}
/* Eigenstaendige Karten statt eines Panels mit Trennlinien -- und sie enden
   dort, wo ihr Inhalt endet (align-items:start), statt sich auf die Hoehe der
   laengsten Spalte zu strecken. */
.hs-karte{border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  background:var(--paper-bright);overflow:hidden;min-width:0}
.hs-karte.aktiv{border-color:var(--fusion);box-shadow:0 8px 22px rgba(42,38,32,.10)}
.hs-kopfzeile{display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--paper-sunken);border-bottom:1px solid var(--line-soft)}
.hs-badge{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  border-radius:var(--radius-pill);background:var(--fusion-deep);color:var(--text-on-color);
  font-family:var(--font-mono);font-size:11px;font-weight:700}
.hs-titel{flex:1;min-width:0;font-family:var(--font-display);font-size:12px;
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--ink-2)}
.hs-rechts{flex:none;font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.hs-liste{display:flex;flex-direction:column;padding:6px}
.hs-fuss{margin:0;padding:9px 14px;border-top:1px solid var(--line-soft);background:var(--paper);
  font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.hs-fuss strong{font-weight:var(--fw-semibold);color:var(--fusion-deep)}

.kb-eintrag{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  appearance:none;border:0;background:transparent;text-align:left;cursor:pointer;
  border-radius:9px;text-decoration:none;color:var(--text-body);
  transition:background var(--dur-fast)}
.kb-eintrag:hover{background:var(--paper-sunken);text-decoration:none}
.kb-eintrag.aktiv{background:var(--fusion-soft)}
.kb-eintrag.aktiv .kb-name{color:var(--fusion-deep);font-weight:var(--fw-semibold)}
.kb-name{flex:1;min-width:0;font-size:14px;font-weight:var(--fw-medium);color:inherit}
.kb-n{flex:none;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.kb-ic{flex:none;color:var(--ink-mute)}
/* Gerader Pfeil = diese Zeile fuehrt ins Ergebnis; Chevron = sie fuellt nur die
   naechste Spalte. Der Unterschied ist die einzige Vorwarnung, die der Nutzer
   vor dem Klick bekommt. */
.kb-ic.ziel{color:var(--fusion)}
/* Der Ausstieg auf die naechsthoehere Ebene -- ohne ihn bleiben 35 % des
   Bestands ueber den Browser unerreichbar (8.775 von 25.046 Teilen haengen an
   keiner Ebene-3-Kategorie). Deshalb hervorgehoben und immer zuoberst. */
.kb-alle{margin-bottom:5px;padding:11px 12px;
  border:1px solid var(--fusion-soft);background:var(--fusion-soft)}
.kb-alle .kb-name{color:var(--fusion-deep);font-weight:var(--fw-semibold)}
.kb-alle .kb-n{color:var(--fusion-deep)}
.kb-alle:hover{background:var(--fusion-soft);border-color:var(--fusion)}
/* Leere Kategorien: sichtbar, aber kein Link und nicht klickbar (Handoff,
   verbindlich) -- so entsteht auch kein Crawl-Pfad auf eine leere Seite. */
.kb-eintrag.leer{opacity:.5;cursor:default}
.kb-eintrag.leer:hover{background:transparent}
.kb-eintrag.leer .kb-name{font-weight:var(--fw-regular);color:var(--ink-3)}
.kb-pill-leer{flex:none;font-size:10px;color:var(--ink-mute);white-space:nowrap;
  border:1px solid var(--line-soft);border-radius:var(--radius-pill);padding:2px 7px}
.kb-pill-direkt{flex:none;display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:var(--fw-semibold);color:var(--fusion-deep);
  background:var(--fusion-soft);border-radius:var(--radius-pill);padding:3px 9px;white-space:nowrap}
.kb-pill-direkt .kb-ic{width:12px;height:12px}
.kb-gruppe{display:flex;flex-direction:column}
/* `display:flex` schlaegt das hidden-Attribut (das ist nur eine
   Browser-Grundregel) -- ohne diese Zeile stehen ALLE Gruppen untereinander
   in der Spalte, gemessen 16.914 px hoch. */
.kb-gruppe[hidden]{display:none}
.kb-hinweis{margin:0;padding:20px 16px;font-size:13px;color:var(--ink-3)}
.kat-screen.hat-e1 [data-kb-hinweis="2"],
.kat-screen.hat-e2 [data-kb-hinweis="3"],
.veh-screen.hat-e1 [data-vs-hinweis]{display:none}

@media(max-width:720px){
  /* Zwei Schritte: Baugruppen bzw. Baureihen, dann die zweite Spalte. Bei den
     Kategorien haengt JS die Kategorienliste unter die Bereichszeile -- deshalb
     hat Spalte 3 hier nichts mehr zu tun. */
  .hs-spalten{grid-template-columns:1fr}
  .hs-meta{margin-left:0;flex-basis:100%}
  .kat-screen .kb-s2,.kat-screen .kb-s3,.veh-screen .vs-s2{display:none}
  .kat-screen.step-2 .kb-s1,.veh-screen.step-2 .vs-s1{display:none}
  .kat-screen.step-2 .kb-s2,.veh-screen.step-2 .vs-s2{display:block}
  .kb-eintrag{min-height:52px;border-radius:var(--radius-md)}
  .kb-eintrag.offen{background:var(--fusion-soft)}
  .kb-eintrag.offen .kb-ic{transform:rotate(90deg)}
  .kb-ic{transition:transform var(--dur-base)}
  /* Fuehrungslinie: die eingerueckte Liste gehoert sichtbar zur Zeile darueber.
     Bewusst --line-strong statt --line: `--line` loest derzeit ins Leere auf
     (Kreisbezug style.css:34 <-> colors.css:89), damit faellt die ganze
     border-Deklaration weg. Siehe docs/design-abweichungen.md F1. */
  .kb-gruppe.eingerueckt{margin:2px 0 6px 22px;padding-left:10px;
    border-left:2px solid var(--line-strong)}
  .kb-hinweis{display:none}
}
@media(prefers-reduced-motion:reduce){.kb-ic{transition:none}}

@media(max-width:720px){
  body.vb-pop-lock{overflow:hidden}
  .vb-pop.open{background:color-mix(in oklab,var(--ink) 38%,transparent)}
  .vb-pop-panel{position:fixed;left:0!important;right:0;top:auto!important;bottom:0;width:auto!important;
    max-height:85vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  .vb-sheet-head{display:flex;align-items:center;gap:8px;padding:12px 12px 10px}
  .vb-sheet-back{display:none;width:40px;height:40px;flex:none;align-items:center;justify-content:center;
    border:0;border-radius:var(--radius-pill);background:transparent;color:var(--fusion-deep);cursor:pointer}
  .vb-pop.step-2 .vb-sheet-back{display:inline-flex}
  .vb-sheet-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:16px;
    letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fusion-deep)}
  .vb-sheet-step{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-mute);flex:none}
  .vb-sheet-close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
    border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-muted);cursor:pointer}
  .vb-pop-body{flex-direction:column;overflow-y:auto}
  .vb-col-title{display:none}
  .vb-col-modell{width:auto;border-right:0}
  .vb-col-baureihe{display:none}
  .vb-pop.step-2 .vb-col-modell{display:none}
  .vb-pop.step-2 .vb-col-baureihe{display:flex}
  .vb-series-empty{display:none}
  .vb-model{min-height:52px;padding:0 14px;border-radius:var(--radius-md)}
  .vb-serie{min-height:52px;padding:0 14px;border-radius:var(--radius-md)}
  .vb-ampel{padding:12px 18px 18px}
}

/* --- Main / Section -------------------------------------------- */
main{padding:var(--space-6) 0 var(--space-9)}
h2.section{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-snug);text-transform:uppercase;color:var(--ink);margin:0 0 16px}

/* --- Trefferkarte ---------------------------------------------- */
.partcard{background:var(--surface-card);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);margin:0 0 18px;overflow:hidden;box-shadow:var(--shadow-xs);
  transition:box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base),transform var(--dur-base)}
.partcard:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong);transform:translateY(-2px)}
.partcard.top{border-color:color-mix(in oklab,var(--fusion) 45%,var(--line));box-shadow:var(--shadow-md)}
.partcard .head{display:flex;gap:14px;padding:16px;align-items:flex-start}
.partcard .schematic{width:64px;height:64px;flex:0 0 64px;background:var(--paper-sunken);
  border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  font-size:28px;color:var(--text-faint)}
.partcard .meta{flex:1;min-width:0}
.partcard .pn{color:var(--text-muted);font-size:var(--text-xs);letter-spacing:.01em}
.partcard h3{margin:3px 0 5px;font-size:var(--text-lg);font-weight:var(--fw-semibold)}
.partcard h3 a{color:var(--ink)}
.partcard.dim{opacity:.72}
.partcard.dim h3{font-size:var(--text-md)}
.partcard .head .price{text-align:right}
.partcard .head .price small{font-size:var(--text-xs);color:var(--text-muted)}
.best-total-val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--text-lg);font-weight:var(--fw-bold);color:var(--ink)}
/* "ab X €"-Zusatz, wenn der guenstigste Preis einen manuellen Rabattcode braucht
   (Gutschein-Preis-Plan): macht den bedingten Preis im Karten-Header ehrlich. */
.best-code-hint{display:block;font-size:var(--text-2xs);font-weight:var(--fw-semibold);
  color:var(--gold-deep)}

/* Heritage-/Original-Tag */
.tag-original{display:inline-block;background:var(--gold-soft);color:var(--gold-deep);
  border:1px solid color-mix(in oklab,var(--gold) 40%,transparent);
  border-radius:var(--radius-pill);padding:1px 10px;font-size:var(--text-2xs);
  font-weight:var(--fw-semibold);letter-spacing:.03em;text-transform:uppercase}

/* --- Pass-Ampel ------------------------------------------------ */
.ampel{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-xs);
  font-weight:var(--fw-semibold);border-radius:var(--radius-pill);padding:3px 11px}
.ampel .dot{width:9px;height:9px;border-radius:50%}
.ampel.gruen{background:var(--success-soft);color:var(--success)} .ampel.gruen .dot{background:var(--success)}
.ampel.gelb{background:var(--warning-soft);color:var(--warning)} .ampel.gelb .dot{background:var(--warning)}
.ampel.grau{background:var(--taupe-soft);color:var(--taupe-deep)} .ampel.grau .dot{background:var(--taupe-deep)}
.ampel.rot{background:var(--danger-soft);color:var(--danger)} .ampel.rot .dot{background:var(--danger)}
.ampel-note{font-size:var(--text-xs);color:var(--text-muted);margin-top:4px}
/* Ohne Fahrzeug im Kontext gibt es keinen Badge, sondern den Hinweis, was fehlt.
   Bewusst KEINE Ampelfarbe -- hier wird nichts bewertet. */
.ampel-hinweis{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-xs);
  color:var(--text-muted);background:var(--paper-sunken);border:1px dashed var(--line);
  border-radius:var(--radius-pill);padding:4px 12px}

/* --- Filter-/Sortier-Controls ---------------------------------- */
.results-controls{display:flex;gap:24px;margin:0 0 16px;align-items:center;flex-wrap:wrap}
.ctrl-group{display:flex;align-items:center;gap:8px}
.ctrl-label{font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--fw-semibold)}
.seg-toggle{position:relative;display:inline-flex;background:var(--fusion-soft);
  border:1px solid color-mix(in oklab,var(--fusion) 30%,var(--line));
  border-radius:var(--radius-pill);padding:3px}
.seg-slider{position:absolute;top:3px;bottom:3px;left:3px;width:0;background:var(--fusion);
  border-radius:var(--radius-pill);transition:left var(--dur-base),width var(--dur-base);z-index:0}
.seg-opt{position:relative;z-index:1;border:0;background:transparent;color:var(--fusion-deep);
  padding:5px 14px;font-size:var(--text-xs);font-weight:var(--fw-semibold);cursor:pointer;
  white-space:nowrap;transition:color var(--dur-base);font-family:var(--font-sans)}
.seg-opt.active{color:var(--text-on-color)}
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.switch-track{position:absolute;inset:0;background:var(--fusion);border-radius:var(--radius-pill);transition:.2s}
.switch input:not(:checked)+.switch-track{background:var(--border-strong)}
.switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--paper-bright);
  border-radius:50%;transition:.2s;box-shadow:var(--shadow-xs)}
.switch input:checked+.switch-track .switch-thumb{transform:translateX(20px)}
.switch-state{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--fusion-deep);min-width:34px}

/* --- Anbieter-Zeilen ------------------------------------------- */
.offers{border-top:1px solid var(--line-soft);background:var(--paper)}
.offer{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-soft)}
.offer:last-child{border-bottom:0}
/* Anbieter-Reduktion: per offers-collapse.js ausgeblendete Anbieter (ueber TOP_N). */
.offer.sc-collapsed{display:none}
/* Nebentreffer: Nummer matcht, Titel nicht (Zubehoer/Reparaturteil). Steht (per
   nebentreffer-Sortierung) ganz unten, ohne Preis, dezent abgesetzt. */
.offer.neben{opacity:.82}
.offer.neben .product-photo{filter:grayscale(.4)}
.neben-hint{font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);
  background:var(--paper-sunken);border:1px dashed var(--line);border-radius:var(--radius-xs);
  padding:2px 8px;white-space:nowrap;cursor:help;text-align:center}
/* "+ N weitere Anbieter anzeigen" / "weniger anzeigen" -- volle Kartenbreite unter den Angeboten. */
.offers-toggle{display:block;width:100%;border:0;border-top:1px dashed var(--line-soft);
  background:var(--paper-sunken);color:var(--blue,var(--ink-2));font-family:var(--font-display);
  font-weight:var(--fw-semibold);font-size:var(--text-sm);padding:10px 16px;cursor:pointer;text-align:center}
.offers-toggle:hover{background:var(--paper-bright);color:var(--ink)}
.offers-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.offers-toggle[hidden]{display:none}
.product-photo{height:64px;width:64px;object-fit:contain;border-radius:var(--radius-sm);
  background:var(--paper-bright);flex-shrink:0}
.offer .shop{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--ink);min-width:140px}
/* Die Meta-Spalte mischt Text und Chips (Fabrikat/Ralfs-Code, Variante,
   Artikelnummer, Zustand, Rabattcode). Als Fliesstext brachen die Chips
   zwischen die Textteile -- bei Ralfs' langen Nummern
   ("11.125-00.011.40/01.4.B1") stand "· Art." auf der einen und die Nummer auf
   der naechsten Zeile, das "neu" mittendrin. Als umbrechende Flex-Reihe bleibt
   jedes Stueck zusammen und die Zeilen liegen sauber untereinander. */
/* flex-basis 10rem statt 0 (frueher `flex:1`, Walter 2026-08-11): mit Basis 0
   schrumpfte die Meta-Spalte in schmalen Fenstern auf 0-18 px zusammen, weil der
   Preis-Block mit der Rabattcode-Zeile ("ab 23,75 € mit Rabattcode (−5 %)")
   seine volle max-content-Breite behauptete. Die Basis gibt der Spalte einen
   Boden; wo Platz ist, waechst sie unveraendert auf den ganzen Rest. */
.offer .fab{color:var(--text-muted);font-size:var(--text-sm);flex:1 1 10rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;min-width:0}
/* Eine Zeile, gekuerzt mit "…", sobald der Platz nicht reicht (Walter,
   2026-08-11). Nur Ralfs Nummern werden lang (bis 44 Zeichen,
   "11.133-10.001.40/01.Nebel.rund.Chrom.gelb.B1"); mit overflow-wrap:break-word
   brachen sie auf dem Telefon zeichenweise um -- die Nummer stand als senkrechte
   Buchstabensaeule und blies die Angebotszeile auf ueber 400 px auf. Gekuerzt
   wird ausschliesslich, wenn es sonst ueberlaeuft: ab ~900 px Fensterbreite
   bleibt auch die laengste Nummer vollstaendig stehen. Der ungekuerzte Wert
   steht im title-Attribut (s. part_detail.html) -- bestellt wird mit ihm.
   Farbe unveraendert aus dem frueheren inline-Style uebernommen. */
.offer .artnr{color:#aaa;min-width:0;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offer .cond{font-size:var(--text-2xs);background:var(--paper-sunken);border-radius:var(--radius-xs);
  padding:1px 7px;color:var(--ink-2)}
.ralfs-code{position:relative;display:inline-block;background:var(--gold-soft);color:var(--gold-deep);
  border-radius:var(--radius-xs);padding:1px 7px;font-size:var(--text-2xs);font-weight:var(--fw-semibold);cursor:help}
/* Varianten-Chip (Bug-Fix Mehrqualitaet/-farbe/-seite, s. seed_from_crm.py Ralfs-Block):
   dezent, nur lesbar -- kein Ranking-Signal wie .ralfs-code, nur Klartext-Unterscheidung. */
.variante{display:inline-block;border:1px solid var(--line);border-radius:var(--radius-xs);
  padding:1px 7px;font-size:var(--text-2xs);color:var(--ink-2);background:var(--paper-sunken)}
/* Tooltip: dekodierter Ralfs-Code bei Hover (Desktop) / Tap=:focus (Mobil).
   title bleibt als Fallback; data-tip speist die formatierte Bubble. */
.ralfs-code:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ralfs-code::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 6px);z-index:30;
  width:max-content;max-width:min(260px,72vw);white-space:normal;text-align:left;
  background:var(--ink);color:var(--paper);font-family:var(--font-sans);font-weight:var(--fw-regular);
  font-size:var(--text-2xs);line-height:1.4;padding:7px 9px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(2px);
  transition:opacity var(--dur-base),transform var(--dur-base),visibility var(--dur-base)}
.ralfs-code:hover::after,.ralfs-code:focus::after{opacity:1;visibility:visible;transform:translateY(0)}
/* Gutscheincode-Chip (Partner-Shops): gestrichelt wie ein Coupon, Klick kopiert.
   Bricht um, statt aus der Meta-Spalte herauszuragen (Walter 2026-08-11): mit
   `white-space:nowrap` war der Chip 218 px breit und stand auf dem Telefon 100 px
   ueber seiner 118-px-Spalte -- er legte sich quer ueber den Preis. `flex-wrap`
   verteilt Symbol/„Rabattcode"/„−5 %"/„kopieren" auf mehrere Zeilen, `max-width`
   haelt ihn in der Spalte. Wo Platz ist, steht er unveraendert einzeilig. */
.gutschein-chip{display:inline-flex;align-items:center;gap:5px;margin-left:6px;
  background:var(--gold-soft);color:var(--gold-deep);cursor:pointer;font-family:inherit;
  border:1px dashed color-mix(in oklab,var(--gold) 55%,var(--line));
  border-radius:var(--radius-xs);padding:2px 8px;font-size:var(--text-2xs);
  font-weight:var(--fw-semibold);white-space:normal;flex-wrap:wrap;row-gap:1px;
  max-width:100%;vertical-align:middle}
.gutschein-chip:hover{border-style:solid}
.gutschein-chip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.gutschein-chip .gc-code{font-family:var(--font-mono);letter-spacing:.4px}
/* "-5%"-Badge eigenstaendig hervorheben, sonst geht sie im Code-Text unter. */
.gutschein-chip .gc-rabatt{display:inline-block;background:var(--paper,#fff);
  color:var(--success);font-weight:var(--fw-bold);padding:0 4px;border-radius:var(--radius-xs)}
/* „kopieren" sagt, was der Klick tut -- eine Spur leiser als das Wort
   „Rabattcode", damit der Chip nicht wie zwei gleichrangige Angaben liest. */
.gutschein-chip .gc-tun{font-weight:var(--fw-semibold);opacity:.8}
/* Kopier-Zeichen und Haken stehen beide im Markup, umgeblendet wird per Klasse
   (Entwurf Z. 1176-1183; gleiches Muster wie .share-ic beim Teilen-Knopf).
   Bewusst KEIN `hidden`-Attribut: eine Klassenregel mit `display:` schlaegt es
   -- die Hausfalle dieses Stylesheets, s. docs/design-abweichungen.md F3. */
.gutschein-chip .gc-ic{display:inline-flex;align-items:center;flex:none}
.gutschein-chip .gc-ic-ok,.gutschein-chip .gc-ok{display:none}
.gutschein-chip.copied .gc-ic,.gutschein-chip.copied .gc-code,
.gutschein-chip.copied .gc-rabatt,.gutschein-chip.copied .gc-tun{display:none}
.gutschein-chip.copied .gc-ic-ok{display:inline-flex}
.gutschein-chip.copied .gc-ok{display:inline;font-weight:var(--fw-semibold)}
.gutschein-chip.copied{background:var(--success-soft);color:var(--success);
  border:1px solid var(--success);cursor:default}
.gutschein-chip.copied .gc-rabatt{background:transparent;color:inherit}
/* Eingepreister Partner-Rabatt (Gutschein-Plan Schritt 2, Auto-Einloesung). */
.price-old{text-decoration:line-through;color:var(--text-muted);font-weight:var(--fw-regular);
  font-size:var(--text-2xs);margin-right:2px}
/* Betrag und Euro-Zeichen bleiben zusammen: in der schmalen Preis-Spalte brach
   sonst "23,75 €" um und das € stand allein in der naechsten Zeile. */
.offer .price .price-net,.offer .price .price-old{white-space:nowrap}
.price-net.price-deal{color:var(--success)}
/* Preis mit manuellem Rabattcode (Gutschein-Preis-Plan): Gold statt Gruen, weil
   der Rabatt NICHT automatisch drin ist -- der Kunde muss den Code noch eintragen. */
.price-net.price-deal-code{color:var(--gold-deep)}
.rabatt-note-code{display:block;font-weight:var(--fw-regular);font-size:var(--text-2xs);color:var(--gold-deep)}
.rabatt-note{display:block;font-weight:var(--fw-regular);font-size:var(--text-2xs);color:var(--gold-deep)}
/* Toter Shop-Link (Nicht-Partner, Gutschein-Plan Schritt 4): ausgegraut, kein href. */
.btn.btn-dead{background:var(--paper-sunken);color:var(--text-muted);
  border:1px solid var(--line);cursor:not-allowed;opacity:.75;font-family:inherit}
.btn.btn-dead:hover{background:var(--paper-sunken);color:var(--text-muted);
  transform:none;box-shadow:none}
.offer .price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight:var(--fw-bold);font-size:var(--text-md);color:var(--ink);min-width:90px;text-align:right}
.offer .price small{display:block;font-weight:var(--fw-regular);font-size:var(--text-2xs);color:var(--text-muted)}
.offer .price.unavailable{font-weight:var(--fw-semibold);font-size:var(--text-sm);color:var(--text-muted)}
/* Platzhalter-Preis im Shop -> gar kein Preis. Eigene Klasse statt .unavailable: das Teil
   ist lieferbar, nur der Preis steht nicht fest (s. docs/preis-auf-anfrage-plan.md). */
.offer .price.on-request{font-weight:var(--fw-semibold);font-size:var(--text-sm);
  color:var(--text-muted);white-space:nowrap;cursor:help}
/* Staffelpreis-Hinweis: sitzt dank .fab{flex:1} rechts nahe am Preis (Nutzer-Wunsch 2026-07-08).
   Vergleich/Ranking laeuft ueber den Einzelpreis; die Staffel ist nur ein Zusatzhinweis. */
.offer .staffel{font-size:var(--text-2xs);color:var(--gold-deep);background:var(--gold-soft);
  border-radius:var(--radius-xs);padding:2px 8px;white-space:nowrap;line-height:1.35;cursor:default}
.offer .staffel b{font-weight:var(--fw-semibold)}

/* --- Buttons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  background:var(--fusion);color:var(--text-on-color);border-radius:var(--radius-md);
  padding:7px 16px;font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:var(--text-sm);
  white-space:nowrap;transition:background var(--dur-base),transform var(--dur-fast)}
.btn:hover{text-decoration:none;background:var(--fusion-deep)}
.btn:active{transform:scale(.99)}
.loadmore{background:var(--fusion);color:var(--text-on-color);border:0;border-radius:var(--radius-md);
  padding:11px 28px;font-size:var(--text-base);font-weight:var(--fw-semibold);cursor:pointer;
  font-family:var(--font-sans);min-height:44px;transition:background var(--dur-base)}
.loadmore:hover{background:var(--fusion-deep)}

/* --- Detailseite ----------------------------------------------- */
.detail{background:var(--surface-card);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-xs)}
.detail .pn{font-family:var(--font-mono);color:var(--text-muted);font-size:var(--text-sm)}
.detail h1{margin:6px 0 12px;font-size:var(--text-2xl)}
/* Gruppiert nach Baureihe (nur Einzelseite): links die Baureihe, rechts die
   Varianten als umbrechende Chips. Grid statt Flex, damit die Chip-Spalten
   ueber alle Gruppen buendig stehen -- bei 9 Gruppen ist das der halbe
   Lesegewinn. Unter 560px kippt die Spalte unter die Baureihe. */
.fitfacts{background:var(--vista-soft);border-left:3px solid var(--vista-deep);
  border-radius:var(--radius-sm);padding:10px 14px;margin:14px 0;font-size:var(--text-sm)}
/* Zusammenfassung ist zugleich der Schalter: eigener Pfeil statt des
   Browser-Dreiecks, Zielflaeche 44px, damit sie am Daumen sicher trifft. */
.ff-kopf{margin:0;color:var(--ink);font-weight:var(--fw-semibold);cursor:pointer;
  display:flex;align-items:center;gap:7px;min-height:44px;list-style:none}
.ff-kopf::-webkit-details-marker{display:none}
.ff-kopf:hover{color:var(--vista-deep)}
.ff-kopf:focus-visible{outline:2px solid var(--vista-deep);outline-offset:3px;
  border-radius:var(--radius-sm)}
.ff-titel{flex:1;min-width:0}
.ff-pfeil{display:inline-flex;flex:none;color:var(--vista-deep);
  transition:transform var(--dur-base)}
details.fitfacts[open] > .ff-kopf .ff-pfeil{transform:rotate(180deg)}
.ff-check{color:var(--vista-deep);font-weight:700}
/* Zugeklappt traegt die Box nur die Kopfzeile -- ohne das haengt unten Luft. */
details.fitfacts:not([open]){padding-block:2px}
details.fitfacts[open] > .ff-body{margin-top:8px}
@media(prefers-reduced-motion:reduce){.ff-pfeil{transition:none}}
.ff-body{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline}
.fitfacts .ff-gruppe{display:contents;margin:0}
.ff-reihe{color:var(--ink-2);font-weight:var(--fw-medium);white-space:nowrap}
.ff-chips{display:flex;flex-wrap:wrap;gap:5px}
.ff-chip{display:inline-flex;flex-direction:column;
  background:var(--surface-card);border:1px solid var(--line-soft);
  border-radius:999px;padding:2px 10px;color:var(--ink-2);
  font-size:var(--text-xs);line-height:1.5}
/* Grobzuordnung: die Aussage ist weiter, aber unschaerfer -- optisch leiser,
   nicht praeziser aussehend als ein echter Varianten-Chip. */
.ff-chip.grob{background:transparent;border-style:dashed;color:var(--muted);font-style:italic}
/* Baujahr-Einschraenkung aus dem Katalog (selten): gehoert an den Chip, nicht
   in eine Fussnote, sonst sucht der Leser die Zuordnung. */
.ff-chip .ff-bed{border-radius:0;padding:0;color:var(--muted);
  font-size:var(--text-2xs);font-style:italic;white-space:normal;max-width:34ch}
@media (max-width:560px){
  .ff-body{grid-template-columns:1fr;gap:2px}
  .fitfacts .ff-gruppe{display:block;margin:0 0 8px}
  .ff-reihe{display:block;margin-bottom:3px}
}

/* --- Ergebnisflaeche (3a, Masse aus `Kategorie - Kachelansicht.dc.html`) --- */
/* Kopfzeile: „Startseite" + Titel + Bestandsangabe (Z. 932-939). */
.erg-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:18px}
.erg-titel{font-family:var(--font-display);font-size:22px;font-weight:var(--fw-semibold);
  letter-spacing:.01em;color:var(--fusion-deep)}
.erg-meta{margin-left:auto;font-size:13px;color:var(--ink-3)}
/* Der Titel ist auf allen drei Flaechen die h1 (Walter, 2026-08-07) -- die
   Ueberschriften-Vorgaben aus base.css wuerden ihn sonst gross und mit eigenem
   Abstand setzen. */
h1.erg-titel{margin:0;font-size:22px}

/* Nachspann der Kategorieseiten: Einleitungstext, die Stufe darunter und das
   Raster aller Baugruppen stehen unter der Trefferflaeche statt darueber
   (Walter, 2026-08-07: „oben muss alles weg"). Alles bleibt -- der Text traegt
   SEO-Gewicht, die beiden Raster sind der Crawl-Pfad in die Stufen 2 und 3 und
   zwischen den 14 Baugruppen --, aber leiser.
   Die Breitenbegrenzung gilt nur dem Fliesstext; die Raster nutzen die ganze
   Spalte. */
.kat-nachspann{margin-top:38px;padding-top:20px;border-top:1px solid var(--line-soft)}
.kat-nachspann .cat-intro{font-size:var(--text-sm);color:var(--ink-3);max-width:78ch}
.catgrid-n{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--ink-3);
  white-space:nowrap}
.kat-nachspann-titel{margin:26px 0 12px;font-size:var(--text-sm);
  font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.catgrid-leise{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.catgrid-leise a{padding:9px 12px;font-size:var(--text-2xs);box-shadow:none;
  background:var(--paper);color:var(--ink-2)}
.catgrid-leise a:hover{transform:none;box-shadow:var(--shadow-xs)}

/* Kontextleiste: EINE goldene Karte (Z. 941-973). */
.kontextleiste{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0;
  padding:12px 14px;border:1px solid var(--line-soft);border-radius:14px;background:var(--gold-soft)}
.kl-aktiv{font-family:var(--font-display);font-size:12px;letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:var(--ink-2)}
.kl-chip{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:var(--radius-pill);
  background:var(--fusion-deep);color:var(--text-on-color);font-size:13px;font-weight:var(--fw-semibold)}
.kl-quelle{font-weight:var(--fw-regular);opacity:.78;font-size:11.5px}
.kl-x{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.18);color:inherit}
.kl-x:hover{background:rgba(255,255,255,.32)}
.kl-trenner{width:1px;height:22px;background:var(--line-strong)}
.kl-label,.kl-leer{font-size:13px;color:var(--ink-2)}
.kl-weg{display:flex;align-items:center;gap:8px;padding:7px 14px;appearance:none;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--paper-bright);color:var(--ink-2);cursor:pointer;
  font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-semibold)}
.kl-weg:hover{background:var(--paper-sunken);text-decoration:none}
/* Das Suchfeld steht in der Reihe der Knoepfe, mit demselben Abstand -- kein
   `margin-left:auto` mehr, das es an den rechten Rand drueckte und die Zeile
   sprengte (Walter, 2026-08-08). Es nimmt, was uebrig ist, und gibt beim
   Schrumpfen als Erstes nach; unter 150 px hoert es auf, dann kuerzt der
   Filter-Chip seinen Text mit „…". */
.kl-suche{display:flex;align-items:center;gap:8px;flex:1 1 150px;min-width:120px;
  padding:4px 4px 4px 14px;background:var(--paper-bright);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);color:var(--ink-mute)}
.kl-suche svg{flex:none}
/* Getippter Text laeuft IM Feld weiter (`min-width:0`), das Feld waechst nicht
   mit -- ueber die Knoepfe legen kann es sich also nicht, und eine Begrenzung
   der Zeichenzahl braucht es dafuer nicht. */
.kl-suche input{flex:1;min-width:0;border:0;outline:none;background:transparent;
  font-family:var(--font-sans);font-size:13px;color:var(--ink);padding:7px 0}

/* Ab Tabletbreite bleibt die Leiste EINE Zeile (Walter: „den Zeilenumbruch auf
   jeden Fall vermeiden"). Damit das aufgeht, darf nur nachgeben, was sich
   verkuerzen laesst: das Suchfeld bis 150 px, danach der Chip -- sein Wert ist
   schon auf eine Zeile mit „…" gestellt. Die Knoepfe behalten ihre Breite,
   ihre Beschriftung bricht nicht um.
   Am Telefon (unter 900 px) ist eine Zeile physisch nicht zu haben; dort
   staffelt sich die Leiste weiter. */
@media(min-width:901px){
  .kontextleiste{flex-wrap:nowrap}
  .kl-aktiv,.kl-trenner,.kl-label,.kl-weg{flex:none}
  .kl-weg{white-space:nowrap}
  /* Die Chips duerfen kuerzen (`min-width:0`), sonst stuende die Zeile ueber
     den Rand hinaus. Ein kleinerer flex-shrink haette sie laenger stehen
     lassen, liess die Leiste bei drei Filtern aber gemessen 76 px ueberlaufen
     -- Chrome friert geschrumpfte Nachbarn ein und verteilt den Rest nicht
     weiter. Also gleichmaessig. */
  .kontextleiste .kl-chip{min-width:0}
  .kontextleiste .kl-wert{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Steuerleiste (Z. 1018-1047): Hinweis rechts in DERSELBEN Zeile. */
.results-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  margin:0 0 14px;padding:11px 16px;border:1px solid var(--line-soft);
  border-radius:13px;background:var(--paper-bright)}
.ctrl-grund{margin-left:auto;font-size:12px;color:var(--ink-3)}
.seg-opt[disabled]{color:var(--ink-mute);cursor:default}

/* Raster links, mitlaufendes Panel rechts (Z. 1049-1050). */
.ergebnis{display:flex;align-items:stretch;gap:20px}
/* Spaltenzahl waechst mit dem Platz, statt fest bei drei zu stehen (Walters
   Entscheid 2026-08-07, F5). Drei feste Spalten neben der 380 px breiten
   Vergleichsspalte ergaben bei 1024 px Fensterbreite Kacheln von 183 px --
   schmaler als auf einem Telefon (171 px). Mit `auto-fill` sind es dort zwei
   Spalten zu 281 px; ab 1200 px passen wieder drei, dann exakt wie zuvor
   241 px. Untergrenze 210 px, weil darunter „N Anbieter" und der
   Vergleichsknopf nicht mehr nebeneinander stehen (s. @container weiter unten). */
.kachelraster{flex:1;min-width:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;align-content:start}
/* Die Vergleichsspalte steht immer -- sonst sind die Kacheln ohne Panel breiter
   und springen beim ersten Klick auf ihre schmalere Groesse. Ausserdem ist sie
   der Bezug fuer das sticky Panel: sie reicht ueber die ganze Trefferliste,
   dadurch bleibt das Panel beim Scrollen auf Augenhoehe statt am Listenanfang
   zu kleben. */
.vergleich-spalte{width:380px;flex:none}

/* --- Kachel (Z. 1052-1112) ----------------------------------------------- */
.kachel{display:flex;flex-direction:column;background:var(--paper-bright);
  border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;
  transition:box-shadow var(--dur-base),border-color var(--dur-base)}
.kachel[hidden]{display:none}
.kachel:hover{box-shadow:var(--shadow-md)}
.kachel.gewaehlt{border-color:var(--fusion);box-shadow:0 8px 22px rgba(42,38,32,.12)}
.kachel.dim{opacity:.72}
.k-oben{display:flex;flex-direction:column;flex:1;color:inherit}
.k-oben:hover{text-decoration:none}
.k-well{position:relative;display:flex;align-items:center;justify-content:center;
  height:132px;background:var(--paper-sunken);border-bottom:1px solid var(--line-soft);
  color:var(--ink-mute);overflow:hidden}
.k-well img{width:100%;height:100%;object-fit:contain}
/* Der „Kein Bild"-Kaefer ist ein Zeichen, kein Produktfoto -- er fuellt die
   Flaeche nicht aus, sondern steht ruhig in der Mitte (A7.13). */
.k-well img.k-leer{width:auto;height:62px;opacity:.62}
/* Bildquelle wird ausgewiesen -- das Bild kommt von einem Anbieter. */
/* Bildnachweis: NICHT dauerhaft eingeblendet (Walter, 2026-08-07 -- das Band
   verdeckte ein Drittel des Fotos). Er kommt bei Hover bzw. Tastaturfokus, haengt
   zusaetzlich als title am Bild und steht ausgeschrieben im Panel sowie unter
   /impressum#bildnachweis. */
.k-credit{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;
  background:rgba(42,38,32,.62);color:var(--text-on-color);font-size:10px;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:0;transition:opacity var(--dur-fast)}
.kachel:hover .k-credit,.kachel:focus-within .k-credit{opacity:1}
@media(hover:none){.kachel .k-credit{display:none}}
.k-ampel{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:6px;
  max-width:calc(100% - 16px);padding:4px 9px;border-radius:var(--radius-pill);
  background:var(--paper-bright);box-shadow:0 1px 3px rgba(42,38,32,.12);
  font-size:11px;font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-ampel .dot{width:7px;height:7px;flex:none;border-radius:var(--radius-pill)}
.k-ampel.gruen{color:var(--success)}
.k-ampel.gruen .dot{background:var(--success)}
.k-ampel.gelb{color:var(--gold-deep)}
.k-ampel.gelb .dot{background:var(--warning)}
.k-ampel.grau{color:var(--text-muted)}
.k-ampel.grau .dot{background:var(--text-muted)}
.k-ampel.rot{color:var(--danger)}
.k-ampel.rot .dot{background:var(--danger)}
.k-body{flex:1;display:flex;flex-direction:column;gap:4px;padding:12px 14px;min-width:0}
.k-pn{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute)}
.k-name{font-family:var(--font-display);font-size:16px;font-weight:var(--fw-medium);
  line-height:1.25;color:var(--fusion-deep);overflow-wrap:anywhere}
/* Preis und Fusszeile stehen in JEDER Kachel gleich hoch (Walter, 2026-08-07:
   „preis steht auf unterschiedlichen Höhen"). Der Titel laeuft ueber zwei bis
   vier Zeilen, und der Preis hing direkt darunter -- gemessen bis zu 35 px
   Versatz zwischen zwei Kacheln derselben Rasterzeile. Jetzt haengt er am
   unteren Ende des Textteils; die Luft sammelt sich zwischen Titel und Preis.
   Zusammen mit der gleich hohen Fusszeile (s. .k-fuss) ist der Versatz 0. */
.k-preis{margin-top:auto;display:flex;align-items:baseline;gap:6px;padding-top:6px}
.k-preis small{font-size:12px;color:var(--ink-3)}
.k-preis-wert{font-family:var(--font-mono);font-size:18px;font-weight:var(--fw-semibold);
  color:var(--fusion-deep);white-space:nowrap}
.k-abnote{font-size:11px;color:var(--ink-3)}
.k-anfrage{margin-top:auto;align-self:flex-start;display:flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:var(--radius-pill);background:var(--gold-soft);
  color:var(--gold-deep);font-size:12px;font-weight:var(--fw-semibold)}
.k-unavailable{font-weight:var(--fw-semibold);color:var(--text-muted)}
/* Fusszeile: Anbieterzahl + „vergleichen", bei einem Angebot Shop + Aktion. */
/* Beide Fusszeilen gleich hoch: „vergleichen" war 51 px, „zum Shop" 70 px --
   allein das verschob den Preis darueber um 19 px. */
.k-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-height:70px;padding:9px 14px;background:var(--paper);border:0;
  border-top:1px solid var(--line-soft);text-align:left;font-family:var(--font-sans)}
/* Die ganze Zeile bleibt klickbar, „vergleichen" ist darin ein eigener Knopf
   (Walter, 2026-08-07). Getoent statt gefuellt -- so ist der Unterschied zum
   „zum Shop"-Knopf auf einen Blick da: hier wird verglichen, dort geht es aus
   der Seite hinaus. Gezeichnet war an dieser Stelle nur farbiger Text (Z. 1105),
   der neben dem gefuellten Nachbarn unterging. */
.k-mehr{cursor:pointer;background:var(--paper)}
.k-mehr:hover{background:var(--paper-sunken)}
/* „N Anbieter" brach bei schmalen Kacheln in zwei Zeilen um („9" / „Anbieter"). */
.k-anbieter{font-size:12px;font-weight:var(--fw-semibold);color:var(--ink-2);
  white-space:nowrap}
.k-vergleichen{flex:none;display:flex;align-items:center;justify-content:center;gap:5px;
  white-space:nowrap;padding:8px 12px;border-radius:9px;
  background:var(--fusion-soft);color:var(--fusion-deep);
  font-size:13px;font-weight:var(--fw-semibold)}
.k-mehr:hover .k-vergleichen{background:color-mix(in oklab,var(--fusion) 22%,var(--paper-bright))}
.k-einzeln{padding:9px 12px 9px 14px}
.k-shop-block{min-width:0;display:flex;flex-direction:column}
.k-shop{font-size:12px;font-weight:var(--fw-semibold);color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-shop-note{font-size:11px;color:var(--ink-3)}
.k-cta{flex:none;padding:8px 13px;border:0;border-radius:9px;background:var(--fusion);
  color:var(--text-on-color);font-family:var(--font-sans);font-size:12px;
  font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap}
.k-cta:hover{background:var(--fusion-deep);text-decoration:none}
.k-cta.tot{background:var(--paper-sunken);color:var(--ink-mute);
  border:1px solid var(--line-soft);cursor:default}

/* --- Panel (Z. 1119-1215) ------------------------------------------------ */
/* Der Seitenkopf klebt selbst oben (72px + Hairline) und liegt mit z-index 20
   darueber -- bei top:20px verschwand der Panelkopf dahinter. Der Abstand
   rechnet den Kopf deshalb heraus. */
.vergleich{position:sticky;top:calc(var(--kopf-h) + 16px);
  max-height:calc(100vh - var(--kopf-h) - 32px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper-bright);border:1px solid var(--line-strong);
  border-radius:14px;box-shadow:0 6px 18px rgba(42,38,32,.08)}
.vergleich[hidden]{display:none}
/* Die Huelle, in die /vergleich/<slug> geladen wird. Sie hatte keine eigene
   Regel und war damit ein gewoehnlicher Block -- das unterbrach die Flex-Kette:
   Kopf, Liste und Fuss sind als „fest / waechst / fest" gebaut, ihr Elternteil
   war aber kein Flex-Container mehr. Die Liste schrumpfte deshalb nicht, der
   Inhalt lief ueber, und `overflow:hidden` schnitt ihn ab -- ohne dass sich
   etwas scrollen liess. Gemessen bei vier Angeboten: 151 px verloren auf dem
   Desktop, mobil bis zu 395 px (Walter, 2026-08-07). */
.vergleich-inhalt{display:flex;flex-direction:column;flex:1;min-height:0}
.vp-laedt{padding:22px 16px;font-size:13px;color:var(--text-muted);margin:0}
.vp-kopf{flex:none;padding:16px 18px;border-bottom:1px solid var(--line-soft);background:var(--paper)}
.vp-kopf-zeile{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.vp-titel{display:flex;flex-direction:column;gap:3px;min-width:0}
.vp-pn{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.vp-name{font-family:var(--font-display);font-size:19px;font-weight:var(--fw-medium);
  line-height:1.2;color:var(--fusion-deep);overflow-wrap:anywhere}
.vp-anbieter{font-size:13px;color:var(--ink-3)}
.vp-anbieter:hover{color:var(--fusion-deep)}
.vp-titel .share-btn{align-self:flex-start;margin-top:7px;min-height:36px;padding:0 13px;font-size:13px}
.vp-bild{width:72px;height:72px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-soft);border-radius:9px;background:var(--paper-sunken);
  color:var(--ink-mute);overflow:hidden}
.vp-bild img{width:100%;height:100%;object-fit:contain}
.vp-zu{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  appearance:none;border:0;border-radius:var(--radius-pill);background:transparent;
  color:var(--text-muted);cursor:pointer}
.vp-zu:hover{background:var(--paper-sunken);color:var(--ink)}
.vp-ampel-box{display:flex;flex-direction:column;gap:6px;margin-top:11px;padding:10px 12px;
  border:1px solid var(--line-soft);border-radius:10px;background:var(--paper-bright)}
.vp-ampel-grund{font-size:12px;line-height:1.5;color:var(--ink-2)}
.vp-ohne-fahrzeug{margin:10px 0 0;font-size:12px;color:var(--ink-3)}
.vp-credit{margin:9px 0 0;font-size:11px;color:var(--ink-3);line-height:1.5}
.vp-liste{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.vp-angebot{display:flex;flex-direction:column;gap:8px;padding:14px 18px;
  border-bottom:1px solid var(--line-soft)}
.vp-angebot.neben{opacity:.82}
.vp-a-kopf{display:flex;align-items:center;gap:10px}
/* Shop-Marke: Platzhalter fuer ein Logo, das es als Datei noch nicht gibt. */
/* 46x46 statt der gezeichneten 52x28: an dieser Stelle steht jetzt das Foto des
   Anbieters (A7.7). Der Kuerzel-Kasten bleibt als Rueckfall fuer Shops ohne
   Bildfreigabe und behaelt dasselbe Mass -- sonst springt die Namensspalte,
   wenn in einer Liste beides vorkommt (auf dem VPS der Normalfall: nur zwei
   Shops sind freigegeben). */
.vp-marke{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-soft);border-radius:5px;background:var(--paper);
  font-family:var(--font-mono);font-size:8px;color:var(--ink-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
/* Bild statt Kuerzel-Kasten (A7.7). Quadratisch und `contain`, weil hier ein
   Teile-Foto steht und kein Logo -- im gezeichneten 52x28-Kasten waere es
   gequetscht. Heller Grund, damit freigestellte Aufnahmen nicht im Papierton
   verschwimmen. */
.vp-marke.vp-foto{display:block;width:46px;height:46px;padding:3px;
  object-fit:contain;background:var(--paper-bright)}
.vp-shop{flex:1;min-width:0;font-size:14px;font-weight:var(--fw-semibold);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-badge{flex:none;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.vp-badge.gruen{background:var(--success-soft);color:var(--success)}
.vp-badge.gold{background:var(--gold-soft);color:var(--gold-deep)}
.vp-badge.grau{background:var(--paper-sunken);color:var(--ink-3)}
.vp-a-fuss{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.vp-a-meta{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px;color:var(--ink-3)}
.vp-a-preis{display:flex;align-items:center;gap:10px;flex:none}
.vp-preis-alt{font-family:var(--font-mono);font-size:12px;color:var(--ink-mute);
  text-decoration:line-through;white-space:nowrap}
.vp-preis-wert{font-family:var(--font-mono);font-size:16px;font-weight:var(--fw-semibold);
  color:var(--ink);white-space:nowrap}
.vp-preis-wert.deal{color:var(--success)}
.vp-preis-wert.code{color:var(--gold-deep)}
.vp-preis-tot{font-size:12px;color:var(--text-muted)}
.vp-cta{flex:none;padding:7px 14px;border:0;border-radius:9px;background:var(--fusion);
  color:var(--text-on-color);font-family:var(--font-sans);font-size:13px;
  font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap}
.vp-cta:hover{background:var(--fusion-deep);text-decoration:none}
.vp-cta.tot{background:var(--paper-sunken);color:var(--ink-mute);
  border:1px solid var(--line-soft);cursor:default}
.vp-fuss{flex:none;display:flex;flex-direction:column;gap:9px;padding:13px 18px;
  background:var(--paper);border-top:1px solid var(--line-soft)}
.vp-alle{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;
  border-radius:var(--radius-pill);background:var(--fusion-soft);color:var(--fusion-deep);
  font-size:13px;font-weight:var(--fw-semibold)}
.vp-alle:hover{text-decoration:none;background:color-mix(in oklab,var(--fusion) 18%,var(--paper-bright))}
.vp-hinweis{margin:0;font-size:11px;line-height:1.5;color:var(--ink-3)}
/* Platzhalter in der Vergleichsspalte, solange nichts gewaehlt ist. Klebt wie
   das Panel unter dem Seitenkopf, damit er beim Scrollen mitlaeuft und die
   Spalte nicht ins Leere laeuft. Gestrichelter Rahmen wie der Leerzustand im
   Entwurf (Z. 1002) -- er soll als Hinweis lesbar sein, nicht als Karte. */
.vergleich-platzhalter{position:sticky;top:calc(var(--kopf-h) + 16px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  padding:34px 22px;border:1px dashed var(--line-strong);border-radius:14px;
  background:var(--paper-bright);color:var(--ink-3)}
.vergleich-platzhalter[hidden]{display:none}
.vergleich-platzhalter b{font-family:var(--font-display);font-size:15px;
  font-weight:var(--fw-semibold);color:var(--ink-2)}
.vergleich-platzhalter span:last-child{font-size:12.5px;line-height:1.55;text-wrap:pretty}
.vp-ph-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:var(--radius-pill);background:var(--paper-sunken);color:var(--ink-mute)}
.vergleich-scrim{position:fixed;inset:0;z-index:70;background:rgba(42,38,32,.34)}
.vergleich-scrim[hidden]{display:none}

/* Fuehler am Listenende. Sichtbar nur, solange noch etwas kommt. */
.nachlader{display:flex;justify-content:center;padding:22px 0 6px}
.nachlader[hidden]{display:none}
.nachlader-text{font-size:12.5px;color:var(--text-muted)}

/* Blaetterung der Kategorieseiten. Bewusst leise: wer scrollt, braucht sie
   nicht -- sie steht fuer Crawler und fuer den, der gezielt springen will.
   Bis zu 147 Zahlen, deshalb umbruchfaehig und schmal gesetzt. */
.blaettern{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)}
.bl-stand{font-size:12.5px;color:var(--ink);font-weight:var(--fw-semibold);white-space:nowrap}
.bl-zahlen{display:flex;flex-wrap:wrap;gap:2px 6px;flex:1;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.9}
.bl-zahlen a{color:var(--text-muted);text-decoration:none;padding:0 3px;border-radius:3px}
.bl-zahlen a:hover{background:var(--paper-sunken);color:var(--ink);text-decoration:none}
.bl-hier{padding:0 3px;border-radius:3px;background:var(--fusion-soft);
  color:var(--fusion-deep);font-weight:var(--fw-semibold)}
.bl-pfeil{font-size:12.5px;color:var(--text-muted);text-decoration:none;white-space:nowrap}
.bl-pfeil:hover{color:var(--ink)}

/* Nachgeladenes Browser-Fenster auf der Trefferseite. */
.browser-overlay{position:fixed;inset:0;z-index:80;overflow-y:auto;
  background:rgba(42,38,32,.34);padding:24px 14px}
.browser-overlay[hidden]{display:none}
.browser-flaeche{max-width:1180px;margin-inline:auto;background:var(--paper);
  border-radius:16px;padding:18px;box-shadow:var(--shadow-lg)}

@media(max-width:900px){
  .kachelraster{grid-template-columns:repeat(2,1fr)}
  /* Mobil ist der Vergleich eine Seitenleiste ueber der Flaeche -- dann darf die
     Spalte keine Breite mehr belegen. */
  .vergleich-spalte{display:contents}
  .vergleich-platzhalter{display:none}
  .vergleich{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:71;
    width:86%;max-width:460px;max-height:none;border-radius:0;border-width:0 0 0 1px;
    transform:translateX(100%);transition:transform 280ms cubic-bezier(.32,.72,0,1)}
  .vergleich.offen{transform:none}
  /* Mobil scrollt das GANZE Panel wie eine Seite (Walters Entscheid
     2026-08-07). Kopf und Fuss stehen hier NICHT fest wie auf dem Desktop:
     bei 560 px Bildschirmhoehe blieben der Angebotsliste sonst 178 px --
     knapp anderthalb Angebotszeilen, waehrend Kopf (305) und Fuss (77) den
     Rest belegen. */
  .vergleich{overflow-y:auto;overscroll-behavior:contain}
  .vergleich-inhalt{display:block;flex:none}
  .vp-liste{flex:none;overflow:visible}
  /* Das × bekommt einen festen Platz, sonst scrollt der Schliessknopf davon.
     Die rechte Polsterung des Kopfes macht ihm Luft -- sonst laege es auf dem
     Teilefoto. (Zum Schliessen geht ausserdem ein Wisch nach rechts.) */
  .vp-kopf{padding-right:56px}
  .vp-zu{position:fixed;top:12px;right:12px;z-index:3;width:34px;height:34px;
    background:var(--paper-bright);border:1px solid var(--line-soft);
    box-shadow:0 1px 4px rgba(42,38,32,.12)}
  /* Lange Bezeichnungen fressen sonst den halben Schirm -- gemessen 244 px
     allein fuer den Namen. Vollstaendig steht er auf der Teile-Einzelseite,
     auf die Nummer, Name und Bild verlinken. */
  .vp-name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  body.vp-lock{overflow:hidden}
  /* Am Telefon bekommt das Feld seine eigene Zeile -- `flex-basis` muss das
     sagen, `width` allein setzt sich gegen die Basis aus der Grundregel nicht
     durch. */
  .kl-suche{margin-left:0;width:100%;flex-basis:100%}
  .erg-meta{margin-left:0;flex-basis:100%}
}
@media(max-width:560px){
  .kachelraster{grid-template-columns:repeat(2,1fr);gap:10px}
  .k-well{height:104px}
  .k-body{padding:10px 11px}
  .k-name{font-size:14px}
  .k-preis-wert{font-size:16px}
}

/* Zahl und Knopf nebeneinander brauchen 210 px Kachelbreite: „11 Anbieter" 62 +
   Knopf 112 + Abstand 8 + Polsterung 28. Darunter stehen sie uebereinander --
   Zahl oben, Knopf ueber die volle Breite. Beides bleibt einzeilig, und die
   Fusszeile passt weiter in ihre 70 px, damit der Preis darueber auf gleicher
   Hoehe bleibt.
   Container-Anfrage statt Bildschirmbreite, weil die Kachelbreite NICHT am
   Fenster haengt: bei 905 px Fensterbreite stehen drei Spalten neben der
   380-px-Vergleichsspalte, die Kachel ist dann 138 px schmal -- schmaler als auf
   dem Telefon (169 px). Eine Media-Query haette genau dort danebengegriffen. */
.kachel{container-type:inline-size}
@container (max-width:230px){
  .k-mehr{flex-direction:column;align-items:stretch;gap:6px;padding:8px 12px}
  .k-mehr .k-anbieter{font-size:11.5px}
  .k-mehr .k-vergleichen{padding:7px 10px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){.kachel,.vergleich{transition:none}}

/* --- Kategorie-Grid -------------------------------------------- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.catgrid a{background:var(--surface-card);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:18px;text-align:center;
  font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--ink);
  box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)}
.catgrid a:hover{text-decoration:none;box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--line-strong)}

/* --- Unterkategorie-Kacheln (Ebene 2/3) ------------------------- */
/* Breiter als .catgrid, weil die Eimernamen lang sind ("Reparaturbleche &
   Karosserieteile / Schweller, Seitenteile, Boden & Rahmen"). */
.subgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.subtile{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface-card);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:14px 16px;color:var(--ink);
  box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)}
.subtile:hover{text-decoration:none;box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--line-strong)}
.subtile-name{font-family:var(--font-display);font-weight:var(--fw-semibold);line-height:1.3}
.subtile-n{flex:0 0 auto;font-size:13px;color:var(--muted);
  background:var(--surface-sunken,rgba(0,0,0,.05));border-radius:999px;padding:2px 9px}
.btn-alle{display:inline-block;background:var(--surface-card);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:12px 20px;font-family:var(--font-display);
  font-weight:var(--fw-semibold);color:var(--ink);box-shadow:var(--shadow-xs)}
.btn-alle:hover{text-decoration:none;box-shadow:var(--shadow-md);border-color:var(--line-strong)}

/* --- Leerzustand / Footer -------------------------------------- */
.empty{background:var(--surface-card);border:1px dashed var(--border-default);
  border-radius:var(--radius-lg);padding:30px;text-align:center;color:var(--text-muted)}
/* Der Ausweg aus der leeren Trefferliste: kein Rand, gefuellt -- er soll das
   Erste sein, worauf der Blick faellt, wenn sonst nichts dasteht. */
.empty-wege{margin:16px 0 0}
.empty-knopf{display:inline-flex;align-items:center;padding:10px 18px;border-radius:10px;
  background:var(--fusion);color:var(--ink-invert);font-family:var(--font-sans);
  font-size:var(--text-sm);font-weight:var(--fw-semibold)}
.empty-knopf:hover{text-decoration:none;background:var(--fusion-deep)}
footer.site{border-top:1px solid var(--line-soft);padding:24px 0;color:var(--text-muted);
  font-size:var(--text-xs);text-align:center}
footer.site .foot-claim{margin:0 0 6px}
footer.site .foot-pangv{margin:0 auto 8px;max-width:640px;color:var(--text-faint);line-height:var(--lh-normal)}
.legal-links{display:flex;gap:8px;justify-content:center;align-items:center}
.legal-links a{color:var(--text-muted);text-decoration:none;font-family:var(--font-display);
  font-weight:var(--fw-medium)}
.legal-links a:hover{color:var(--ink);text-decoration:underline}

/* --- Rechtstext-Seiten (Impressum, Datenschutz) ----------------- */
main.legal{padding:32px 0 56px}
main.legal .prose{max-width:760px}
main.legal h1{font-family:var(--font-oswald);font-size:var(--text-2xl);margin:0 0 18px}
main.legal h2{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-semibold);
  margin:28px 0 8px}
main.legal p,main.legal li{font-size:var(--text-sm);line-height:var(--lh-relaxed);color:var(--text-body)}
main.legal ul{margin:8px 0;padding-left:22px}
main.legal li{margin:3px 0}
main.legal a{color:var(--blue,var(--ink));text-decoration:underline}
main.legal .legal-meta{margin-top:32px;color:var(--text-muted);font-size:var(--text-xs)}
/* Fussnoten-Hinweis im Fliesstext (z.B. MaxMind-Attribution, Datenschutz §4) —
   ersetzt frueheres Inline-style mit Hex-Farbe (war im Dark Mode unlesbar) */
main.legal .legal-note{display:block;margin-top:.5em;color:var(--text-muted);font-size:var(--text-xs)}
.bildnachweis-hint,.preisstand-hint{margin:10px 2px 0;color:var(--text-faint);font-size:var(--text-xs);line-height:var(--lh-normal)}
.bildnachweis-hint a{color:inherit;text-decoration:underline}
/* Preisstand steht direkt unter der Angebotsliste, nicht im Fussbereich: er
   gehoert zu den Zahlen darueber (golive-blocker-plan, GEO-Punkt 3). */
.preisstand-hint{margin-top:6px}

/* --- SEO/GEO: Answer-first, Beschreibung, FAQ, Kategorie-Intro ----------- */
.lead-answer{margin:6px 0 10px;font-size:var(--text-md,16px);line-height:var(--lh-normal);color:var(--text-muted)}
.lead-answer strong{color:var(--ink,inherit)}
.part-desc{margin:0 0 14px;max-width:720px;line-height:var(--lh-normal);color:var(--text-muted)}
.cat-intro{margin:6px 0 18px;max-width:720px;line-height:var(--lh-normal);color:var(--text-muted)}
.faq{margin-top:34px}
.faq-item{margin:0 0 14px;max-width:720px}
.faq-item h3{margin:0 0 4px;font-size:var(--text-md,16px)}
.faq-item p{margin:0;color:var(--text-muted);line-height:var(--lh-normal)}
.catgrid a.active{outline:2px solid var(--blue,currentColor);outline-offset:-2px}

/* --- Header: Suchicon, Fahrzeug-Chip, Nav, Avatar -------------- */
.search-ic{display:inline-flex;align-items:center;color:var(--text-faint);flex:none}
.veh-chip{display:inline-flex;align-items:center;gap:4px;flex:none;height:30px;padding:0 6px 0 12px;
  background:var(--gold-soft);border:1px solid color-mix(in oklab,var(--gold) 45%,var(--line));
  border-radius:var(--radius-pill);font-family:var(--font-display);font-size:var(--text-xs);
  font-weight:var(--fw-medium);color:var(--ink);white-space:nowrap}
.veh-chip-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  color:var(--gold-deep);border-radius:var(--radius-pill)}
.veh-chip-x:hover{text-decoration:none;background:color-mix(in oklab,var(--gold) 25%,transparent)}
.site-nav{display:flex;gap:2px;flex:none}
.navlink{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-medium);
  color:var(--text-muted);padding:7px 12px;border-radius:var(--radius-sm);white-space:nowrap;
  transition:background var(--dur-fast),color var(--dur-fast)}
.navlink:hover{text-decoration:none;background:var(--paper-sunken);color:var(--ink)}
.navlink.active{background:var(--paper-sunken);color:var(--ink)}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--paper-bright);color:var(--text-body)}
.avatar:hover{text-decoration:none;background:var(--paper-sunken)}

/* --- Startseite: Hero-Band ------------------------------------- */
.start-hero{background:linear-gradient(180deg,var(--paper-bright) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line-soft);text-align:center}
.start-hero .wrap{max-width:980px;padding-block:var(--space-8) var(--space-7)}
.start-hero h1{font-family:var(--font-oswald);font-weight:var(--fw-bold);font-size:var(--text-3xl);
  line-height:var(--lh-tight);letter-spacing:var(--tracking-snug);text-transform:uppercase;
  color:var(--ink);margin:0 0 12px}
.start-hero .lead{font-size:var(--text-md);color:var(--text-muted);max-width:700px;margin:0 auto}

/* --- Startseite: 3-Einstiege-Grid ------------------------------ */
/* align-items:stretch + height:100% -> die drei Karten sind gleich hoch, sonst
   wuerde der Schleier unterschiedlich hohe Bloecke betonen (Handoff 3.1). */
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
/* `display:grid` schlaegt das hidden-Attribut (das ist nur eine Browser-
   Grundregel, kein Autoren-Stil). Ohne diese Zeile bleiben die drei Kacheln
   stehen, wenn ein Browser-Bildschirm oeffnet -- der Bildschirm haengt dann
   darunter statt an ihrer Stelle. */
.entry-grid[hidden]{display:none}
/* Spalte statt Block, damit die Bestandszeile in Karte 3 per margin-top:auto
   unten buendig sitzt (so im Entwurf) -- die Karten sind ohnehin gleich hoch. */
.entry-card{background:var(--surface-card);border:1px solid var(--line-soft);
  border-radius:var(--radius-xl);padding:24px 22px;box-shadow:var(--shadow-xs);height:100%;
  display:flex;flex-direction:column}

/* --- Fokussierender Einstieg (Handoff 3.1) ---------------------
   Ein Klick (oder Tastaturfokus) macht eine Karte zur aktiven; die beiden
   anderen ruecken hinter einen Schleier -- zurueckgenommen, NICHT ausgeblendet:
   der Nutzer soll sehen, dass die anderen Wege weiter offen stehen.
   .is-focusing setzt start-entry.js; ohne JS bleiben alle Karten gleichwertig. */
.entry-card{transition:opacity var(--dur-slow) var(--ease-standard),
  filter var(--dur-slow) var(--ease-standard),
  border-color var(--dur-slow) var(--ease-standard),
  box-shadow var(--dur-slow) var(--ease-standard)}
.entry-grid.is-focusing .entry-card{opacity:.38;filter:saturate(.55) blur(.6px);
  border-color:var(--line-soft);box-shadow:var(--shadow-xs)}
.entry-grid.is-focusing .entry-card.active{opacity:1;filter:none;
  border-color:var(--fusion);box-shadow:0 10px 26px rgba(42,38,32,.12)}
/* Weichgezeichnete Flaechen sind fuer manche Nutzer unangenehm bis
   unbenutzbar -- Betonung bleibt, Unschaerfe und Bewegung fallen weg. */
@media(prefers-reduced-motion:reduce){
  .entry-card{transition:none}
  .entry-grid.is-focusing .entry-card{filter:none;opacity:.5}
}
.entry-card>p{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-normal);margin:0 0 16px}
.entry-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.entry-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  background:var(--fusion);color:var(--text-on-color);border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-xs)}
.entry-label{font-family:var(--font-display);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;font-size:var(--text-base);color:var(--ink)}
/* Panel 1 — Direkt suchen */
.entry-search{display:flex;align-items:stretch;background:var(--paper);border:1.5px solid var(--line-strong);
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-inset)}
.entry-search:focus-within{border-color:var(--fusion);box-shadow:var(--focus-ring)}
.entry-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--font-sans);font-size:var(--text-sm);color:var(--ink);padding:11px 14px}
.entry-search input:focus,.entry-search input:focus-visible{box-shadow:none}
.entry-search button{flex:none;border:0;background:var(--fusion);color:var(--text-on-color);padding:0 18px;
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-sm);cursor:pointer;
  transition:background var(--dur-base)}
.entry-search button:hover{background:var(--fusion-deep)}
.quick-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
/* Im Ruhezustand traegt Karte 1 nur das Suchfeld (Entwurf: sc-if sucheActive);
   die Chips kommen, sobald die Karte aktiv ist. Nur unter .js-aktiv verstecken
   -- ohne das Skript gaebe es keinen Weg, sie wieder hervorzuholen. */
.entry-grid.js-aktiv .quick-chips{display:none}
.entry-grid.js-aktiv .entry-card.active .quick-chips{display:flex}
/* Bestandszeile in Karte 3, unten buendig wie im Entwurf. */
/* Mit `.entry-card>p` im Selektor, sonst gewinnt dessen margin-bottom:16px und
   die Zeile schwebt ueber dem Kartenboden statt buendig zu sitzen. */
.entry-card>p.entry-bestand{margin:auto 0 0;padding-top:14px;
  font-size:var(--text-sm);color:var(--ink-3)}
.qchip{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:transparent;color:var(--text-muted);
  font-family:var(--font-sans);font-size:var(--text-xs);transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.qchip:hover{text-decoration:none;background:var(--paper-sunken);border-color:var(--line-strong);color:var(--ink)}
/* Panel 2 — Fahrzeug waehlen: ein Auslöser (.vb-pill) oeffnet den gemeinsamen
   Picker (_veh_picker.html). Styles s. Abschnitt „Fahrzeug-Auswahl" oben. */
.veh-pick{display:flex}
/* Panel 3 — Kategorie waehlen */
.cat-pick{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cat-pick a{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--paper-bright);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:background var(--dur-base),border-color var(--dur-base)}
.cat-pick a:hover{text-decoration:none;background:var(--paper-sunken);border-color:var(--line-strong)}
.cat-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;
  background:var(--fusion-soft);color:var(--fusion);border-radius:var(--radius-sm)}
.cat-name{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-xs);
  color:var(--ink);line-height:1.25}

@media(max-width:980px){.entry-grid{grid-template-columns:1fr;gap:14px;max-width:640px;margin-inline:auto}}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
.chip{min-height:34px}

@media(max-width:600px){
  header.site .wrap{flex-wrap:wrap;gap:10px;min-height:0;padding-block:10px}
  .brand img{height:26px}
  header.site form{order:3;flex-basis:100%;max-width:none}
  .site-nav,.avatar{display:none}
  .start-hero .wrap{padding-block:var(--space-4) var(--space-3)}
  .start-hero h1{font-size:var(--text-2xl);margin-bottom:6px}
  .start-hero .lead{font-size:var(--text-base)}
  main{padding-block:var(--space-4) var(--space-7)}
  .entry-grid{gap:12px}

  .hero .wordmark{height:32px;margin-bottom:18px}

  /* Fahrzeugleiste enger; Kategorie-Chips (results.html) scrollen horizontal. */
  .vehiclebar .wrap{gap:7px;padding-block:7px}
  .chip{white-space:nowrap;flex-shrink:0;font-size:var(--text-xs);padding:5px 12px}

  .hero .wrap{padding-block:var(--space-7) var(--space-6)}
  .hero h1{font-size:var(--text-2xl)}
  .hero p.lead{font-size:var(--text-base);margin-bottom:18px}
  .hero .searchbox{padding-left:14px}
  .hero .searchbox input{font-size:var(--text-base)}
  .hero .searchbox button{padding:0 18px;font-size:var(--text-sm)}

  .partcard .schematic{display:none}
  .partcard .head{flex-wrap:wrap;gap:8px;padding:12px}
  .partcard .head .price{width:100%;text-align:left!important;display:flex;align-items:baseline;gap:8px}
  .partcard h3{font-size:var(--text-base)}

  /* Dritte Spalte per fit-content gedeckelt (Walter 2026-08-11): mit `auto` zog
     die Rabattcode-Zeile im Preis-Block die Spalte auf ihre volle Textbreite
     (217 von 287 px) und die Meta-Spalte fiel auf 18 px -- genau die Zeile, in
     der Ralfs Artikelnummer senkrecht stand. Der Hinweis bricht jetzt lieber um. */
  .offer{display:grid;grid-template-columns:44px minmax(0,1fr) fit-content(40%);
    grid-template-areas:"photo shop price" "photo fab btn" "photo staffel staffel";
    column-gap:10px;row-gap:4px;align-items:center;padding:10px 12px}
  .offer .staffel{grid-area:staffel;justify-self:end}
  .product-photo{grid-area:photo;width:44px;height:44px;align-self:start}
  .offer .shop{grid-area:shop;min-width:0;font-size:var(--text-sm)}
  .offer .fab{grid-area:fab;min-width:0;font-size:var(--text-xs)}
  .offer .price{grid-area:price;min-width:0;text-align:right;font-size:var(--text-sm)}
  .neben-hint{grid-area:price;justify-self:end}
  .offer .btn{grid-area:btn;justify-self:end;padding:8px 12px;font-size:var(--text-xs);min-height:40px}
  /* Umgebrochener Gutschein-Chip: 2 px weniger Innenabstand/Abstand reichen, damit
     "−5 %" und "kopieren" gemeinsam auf die zweite Zeile passen (2 statt 3 Zeilen). */
  .gutschein-chip{gap:4px;padding:2px 6px}

  .results-controls{gap:12px}
  .ctrl-label{font-size:var(--text-2xs)}
  .seg-opt{padding:5px 10px;font-size:var(--text-2xs)}

  .detail{padding:14px}
  .detail h1{font-size:var(--text-xl)}
  h2.section{font-size:var(--text-lg);margin-bottom:10px}
  .wrap{padding-inline:12px}
}

@media(max-width:380px){
  .results-controls{flex-direction:column;align-items:flex-start;gap:10px}
}

/* --- „Nach oben" (Walter, 2026-08-07) --------------------------------------
   Die Trefferflaeche laedt beim Scrollen nach; nach ein paar Stapeln ist der
   Weg zum Kopf lang. Gleiche Anmutung wie der Teilen-Knopf, nur rund.
   Sichtbarkeit ueber `visibility` statt `hidden`: das Attribut verliert hier
   gegen `display:inline-flex` -- dieselbe Falle wie bei .kb-gruppe/.entry-grid.
   `visibility:hidden` nimmt den Knopf ausserdem aus der Tabreihenfolge. */
.nach-oben{position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;appearance:none;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--paper-bright);color:var(--fusion-deep);
  box-shadow:0 2px 10px rgba(42,38,32,.14);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--dur-fast),transform var(--dur-fast),
             background var(--dur-fast),border-color var(--dur-fast)}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:none}
.nach-oben:hover{background:var(--fusion-soft);border-color:var(--fusion)}
.nach-oben:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media(max-width:640px){
  .nach-oben{right:14px;bottom:14px;width:42px;height:42px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}