/* FF-WHEELS KONFIGURATOR — Card-Based Dashboard */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

:root {
  --bg: #f7f7f5;
  --card: #ffffff;
  --card-inner: #F5F5F7;
  --text: #171717;
  --text2: #6E6E73;
  --text3: #86868B;
  --accent: #111111;
  --border: rgba(0,0,0,.06);
  --r: 18px;
  --r-lg: 18px;
  --shadow: 0 2px 12px rgba(0,0,0,.06);
  --shadow-hover: 0 8px 30px rgba(0,0,0,.1);
  --sidebar-w: 380px;
  --bar-h: 80px;
  --gap: 16px;
  --edge: clamp(16px, 3vw, 40px);
  --max: 1440px;
}

/* ═══ LAYOUT ═══ */
/* Tokens fest auf .kfg — nicht von V2 design.css / data-theme erben. */
.kfg {
  --bg: #f7f7f5;
  --card: #ffffff;
  --card-inner: #F5F5F7;
  --text: #171717;
  --text2: #6E6E73;
  --text3: #86868B;
  --accent: var(--ff-accent, #111111);
  --border: rgba(0,0,0,.06);
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--gap);
  padding: calc(64px + 24px) var(--edge) var(--gap);
  max-width: var(--max);
  margin: 0 auto;
  font-family: 'Inter', -apple-system, sans-serif;
}
/* min-height only on Konfigurator, not Live-Preview */
body:not(.page-template-page-live-preview):not(.page-live-preview) .kfg {
  min-height: 100vh;
}
.kfg * { box-sizing: border-box; }

/* ═══ CARD BASE ═══ */
.kfg__card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Sidebar card — spans both rows, scrolls independently */
.kfg__side {
  grid-row: 1 / 3;
  position: sticky;
  top: calc(64px + 24px);
  height: calc(100vh - 64px - 24px - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 24px 24px 100px;
  display: flex; flex-direction: column; gap: 32px;
  min-width: 0;
  /* Fade edges via mask — no extra elements, no z-index issues */
  --fade-h: 52px;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    black var(--fade-h),
    black calc(100% - var(--fade-h)),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    black var(--fade-h),
    black calc(100% - var(--fade-h)),
    transparent 100%);
}
/* At very top: no top fade */
.kfg__side.at-top {
  -webkit-mask-image: linear-gradient(to bottom,
    black 0,
    black calc(100% - var(--fade-h)),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    black 0,
    black calc(100% - var(--fade-h)),
    transparent 100%);
}
/* At very bottom: no bottom fade */
.kfg__side.at-bottom {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    black var(--fade-h),
    black 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    black var(--fade-h),
    black 100%);
}
/* At both top and bottom (short content): no fades */
.kfg__side.at-top.at-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}
.kfg__side::-webkit-scrollbar { width: 4px; }
.kfg__side::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 2px; }

/* — Remove old fade overlay rules — */
.kfg__side-fade-top, .kfg__side-fade-bot, .kfg__side-wrap { display: none !important; }

/* Video card — top right */
.kfg__viz {
  position: relative;
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #0A0A0A;
}

/* Products card — bottom, full width */
.kfg__products-card {
  grid-column: 2;
  padding: 32px;
}
.kfg__products-card.is-fullwidth {
  grid-column: 1 / -1;
}

/* ═══ STEP SECTIONS ═══ */
.kfg__step-num { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.kfg__step-title-row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; gap: 8px; }
.kfg__step-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0; flex: 1; }
/* Compact 'ändern' button — top right of step title */
.kfg__step-change-btn {
  flex-shrink: 0; display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--accent); background: none;
  border: 1px solid rgba(184,134,11,.25); border-radius: 8px; padding: 5px 10px;
  cursor: pointer; font-family: inherit; transition: all .2s; white-space: nowrap;
}
.kfg__step-change-btn:hover { background: rgba(184,134,11,.07); }
.kfg__step-change-btn .material-symbols-rounded { font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400; }

/* Sub-steps (progressive reveal within a step) */
.kfg__substep { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.kfg__substep:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.kfg__substep.is-hidden { display: none; }
.kfg__substep-label {
  font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 10px;
}
.kfg__substep-unit {
  font-weight: 500; color: var(--text3); letter-spacing: 0; text-transform: none; font-size: 11px;
}

/* ── Wheel model cards ── */
.kfg__wheel-model-list { display: flex; flex-direction: column; gap: 8px; }
.kfg__wheel-model-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card-inner); cursor: pointer; transition: all .18s;
}
.kfg__wheel-model-card:hover { border-color: rgba(0,0,0,.18); background: #fff; }
.kfg__wheel-model-card img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #fff; }
.kfg__wheel-model-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
/* Name und Preis weichen dem Schild, statt es aus der Karte zu draengen. */
.kfg__wheel-model-name, .kfg__wheel-model-price { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfg__wheel-model-name { font-size: 14px; font-weight: 600; color: var(--text); }
.kfg__wheel-model-price { font-size: 12px; color: var(--text3); }
.kfg__wheel-model-arrow { font-size: 18px; color: var(--text3); flex-shrink: 0; }

/* ── Tag-style pills — full-width row, content-dependent sizing ── */
.kfg__wheel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.kfg__wheel-chip {
  flex: 1 1 auto;
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--card-inner);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  font-family: inherit;
  text-align: center;
  white-space: nowrap;
  line-height: 1.3;
}
.kfg__wheel-chip:hover {
  border-color: rgba(0,0,0,.22);
  color: var(--text);
  background: #fff;
}
/* Active: gold border + light tint — matches brand-btn, list-item, color-row active style */
.kfg__wheel-chip.is-active {
  border-color: var(--accent);
  background: rgba(184,134,11,.08);
  color: var(--accent);
  font-weight: 600;
}
/* Icon+text in season pills — fuer jede Saison-Pille (Konfigurator +
   Produktseite), Icon vertikal mittig zum Text */
.kfg__season-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.kfg__season-pill .material-symbols-rounded {
  font-size: 15px; line-height: 1; display: block;
  font-variation-settings: 'FILL' 1, 'wght' 300;
  flex-shrink: 0;
}

/* ── Color rows ── */
.kfg__wheel-color-list { display: flex; flex-direction: column; gap: 6px; }
.kfg__wheel-color-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card-inner); cursor: pointer; transition: all .15s;
}
.kfg__wheel-color-row:hover { border-color: rgba(0,0,0,.18); background: #fff; }
.kfg__wheel-color-row.is-active { border-color: var(--accent); background: rgba(184,134,11,.04); }
/* Nicht waehlbar heisst nicht unsichtbar. Bei 35 % sah die Zeile aus wie
   ein Darstellungsfehler — die FF03 in Silber stand da und wurde als "gibt
   es nicht" gelesen, obwohl sie nur nicht als Satz von vier lieferbar ist.
   Mit 58 % bleibt sie lesbar, der Klartext daneben sagt den Grund. */
.kfg__wheel-color-row.is-oos { opacity: .58; pointer-events: none; cursor: default; }
.kfg__wheel-color-row.is-oos .kfg__wheel-color-label { text-decoration: none; }
.kfg__wheel-color-hint { font-size: 11px; font-weight: 500; opacity: .75; }
.kfg__wheel-color-label { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; text-transform: capitalize; }
.kfg__wheel-color-thumb { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; }

/* ── Wheel summary ── */
.kfg__wheel-summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px; background: var(--card-inner); border-radius: 12px;
  border: 1px solid var(--border); margin-top: 12px;
}
.kfg__wheel-summary-img img { width: 52px; height: 52px; object-fit: contain; }
.kfg__wheel-summary-info { flex: 1; }
.kfg__wheel-summary-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kfg__wheel-summary-name { font-size: 14px; font-weight: 600; color: var(--text); }
.kfg__wheel-summary-color { font-size: 12px; font-weight: 400; color: var(--text2); }
.kfg__wheel-summary-sub { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }

/* ── Grid card selected highlight — single 2px border, no outline duplication ── */
/* Handled at line 493 via .kfg__pcard.is-selected { border-color } */

/* HSN/TSN Input */
.kfg__hsn-row { display: flex; gap: 10px; max-width: 100%; }
.kfg__input {
  flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px;
  font-size: 14px; font-family: inherit; background: var(--card-inner);
  transition: border-color .2s; outline: none; color: var(--text);
}
.kfg__input:focus { border-color: var(--accent); }
.kfg__input::placeholder { color: var(--text3); }
.kfg__btn {
  padding: 12px 16px; border: none; border-radius: 12px; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit;
  flex-shrink: 0;
}
.kfg__btn--primary { background: var(--text); color: #fff; }
.kfg__btn--primary:hover { background: #333; }
.kfg__btn--secondary { background: var(--card-inner); color: var(--text); border: 1px solid var(--border); }
.kfg__btn--secondary:hover { border-color: rgba(0,0,0,.15); }
.kfg__btn--accent { background: var(--accent); color: #fff; }
.kfg__btn--accent:hover { filter: brightness(1.1); }
.kfg__btn:disabled { opacity: .4; cursor: not-allowed; }

.kfg__divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  font-size: 12px; color: var(--text3); font-weight: 500;
}
.kfg__divider::before, .kfg__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Brand Picker */
.kfg__brand-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-height: none; overflow-y: visible; padding-right: 0;
}
.kfg__brand-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card-inner); cursor: pointer; transition: all .2s; font-family: inherit;
}
.kfg__brand-btn:hover { border-color: rgba(0,0,0,.15); background: #eee; }
.kfg__brand-btn.is-active { border-color: var(--accent); background: rgba(184,134,11,.06); }
.kfg__brand-btn img { width: 32px; height: 32px; object-fit: contain; }
.kfg__brand-btn span { font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Series / Variant list */
.kfg__list { display: flex; flex-direction: column; gap: 6px; }
.kfg__list-item {
  padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card-inner); cursor: pointer; transition: all .2s; font-size: 13px;
  color: var(--text); font-weight: 500; display: flex; justify-content: space-between; align-items: center;
}
.kfg__list-item:hover { border-color: rgba(0,0,0,.12); background: #eee; }
.kfg__list-item.is-active { border-color: var(--accent); background: rgba(184,134,11,.06); }
.kfg__list-item small { color: var(--text3); font-weight: 400; }

/* Family accordion: grouped model families */
.kfg__list-item--family {
  font-weight: 600; position: relative;
}
.kfg__list-item--family::after {
  content: 'expand_more'; font-family: 'Material Symbols Rounded'; font-size: 18px;
  color: var(--text3); transition: transform .25s ease;
}
.kfg__list-item--family.is-expanded::after { transform: rotate(180deg); }
.kfg__list-item--family.is-expanded { border-color: var(--accent); background: rgba(184,134,11,.04); }

.kfg__family-gens {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 0 4px 12px; margin-bottom: 4px;
  border-left: 2px solid var(--border);
  margin-left: 16px;
}
.kfg__list-item--gen {
  padding: 10px 14px; font-size: 12px; font-weight: 400;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--text2);
}
.kfg__list-item--gen:hover { background: var(--card-inner); border-color: var(--border); color: var(--text); }

/* Search inside steps */
.kfg__search {
  width: 100%; padding: 10px 14px 10px 36px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px; background: var(--card-inner) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2386868B' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") 12px center no-repeat;
  font-family: inherit; outline: none; transition: border-color .2s; margin-bottom: 10px;
  color: var(--text);
}
.kfg__search:focus { border-color: var(--accent); }

/* Vehicle Info (shown after selection) */
.kfg__vehicle-info {
  background: var(--card-inner); border-radius: 12px; padding: 14px; border: 1px solid var(--border);
}
.kfg__vehicle-info-inner {
  display: flex; align-items: center; gap: 14px;
}
.kfg__vehicle-logo-wrap {
  width: 52px; height: 52px; border-radius: 10px;
  background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.kfg__vehicle-logo-wrap img,
.kfg__vehicle-logo { width: 36px; height: 36px; object-fit: contain; }
.kfg__vehicle-info-body { min-width: 0; flex: 1; }
.kfg__vehicle-name {
  font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kfg__vehicle-specs { display: flex; flex-wrap: wrap; gap: 5px; }
.kfg__vehicle-tag {
  font-size: 11px; font-weight: 600; color: var(--text2); background: #fff;
  padding: 3px 9px; border-radius: 7px; white-space: nowrap;
}
.kfg__vehicle-reset {
  display: none; /* hidden — use .kfg__step-change-btn in HTML instead */
}

/* ── Ausfuehrung (Vor-Facelift / Facelift) ──
   Sitzt in der Fahrzeugkarte und erscheint nur, wenn die Schluesselnummer
   wirklich auf mehrere Varianten zeigt. Bewusst zurueckhaltend: eine
   optionale Praezisierung, kein Pflichtschritt im Ablauf. */
.kfg__variant {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.kfg__variant-label {
  font-size: 11px; font-weight: 600; color: var(--text2);
  margin-bottom: 7px;
}
/* Kurzer Hinweis, wenn jemand die Ausfuehrung ueberspringen will: ein Klick
   ins gesperrte Felgenraster fuehrt hierher und markiert die Stelle fuer
   anderthalb Sekunden. Kein Dauerzustand — die gesperrten Schritte sagen
   schon, dass es nicht weitergeht. */
@keyframes kfg-variant-wink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,134,11,0); }
  35%      { box-shadow: 0 0 0 5px rgba(184,134,11,.20); }
  70%      { box-shadow: 0 0 0 0 rgba(184,134,11,0); }
}
.kfg__variant.is-wink {
  border-radius: 10px;
  animation: kfg-variant-wink .8s ease 2;
}
@media (prefers-reduced-motion: reduce) {
  .kfg__variant.is-wink { animation: none; box-shadow: 0 0 0 4px rgba(184,134,11,.2); border-radius: 10px; }
}
/* Immer untereinander, eine Ausfuehrung je Zeile.
   Nebeneinander umbrachen sie je nach Anzahl und Textlaenge unterschiedlich:
   bei drei Ausfuehrungen standen zwei oben und eine allein darunter, bei
   zweien nebeneinander. Die Schaltflaechen wurden dadurch verschieden breit,
   und die Unterzeile — genau der Teil, der die Ausfuehrungen unterscheidet —
   bekam mal mehr, mal weniger Platz. Untereinander hat jede dieselbe Breite,
   und die Liste liest sich wie die Auswahl darueber und darunter. */
.kfg__variant-opts { display: flex; flex-direction: column; gap: 6px; }
.kfg__variant-btn {
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px; border-radius: 9px;
  border: 1.5px solid var(--border); background: #fff;
  font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.kfg__variant-btn:hover { border-color: var(--text3); }
.kfg__variant-btn.is-active {
  border-color: var(--accent, #B8860B);
  background: rgba(184, 134, 11, .05);
}
.kfg__variant-btn-name {
  font-size: 12px; font-weight: 700; color: var(--text);
}
.kfg__variant-btn-sub {
  font-size: 10px; font-weight: 500; color: var(--text3);
  /* Zwei Zeilen statt einer: die Unterzeile traegt jetzt die Motorbeschreibung
     ("2,0l A4 Allroad 2.0 TFSI Quattro 165 kW"), und genau der Teil, der die
     Ausfuehrungen trennt, stand bei einer Zeile hinter den Puenktchen.
     Der vollstaendige Text haengt zusaetzlich im title der Schaltflaeche. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}
.kfg__variant-hint {
  font-size: 10px; color: var(--text3); margin-top: 6px;
}

/* ═══ TIRE SECTION (Step 3) ═══ */
.kfg__tire-section { display: none; }
.kfg__tire-section.is-visible { display: block; margin-top: 16px; }

/* ── Tire substep chips use same base tag style — no overrides needed ── */

/* ── Tire axle divider ── */
.kfg__tire-divider {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text3);
  padding: 10px 0 4px; border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Tire list */
.kfg__tire-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: none; overflow-y: visible; padding-right: 0;
}
.kfg__tire-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card-inner); cursor: pointer; transition: all .2s; font-family: inherit;
}
.kfg__tire-item:hover { border-color: rgba(0,0,0,.15); }
.kfg__tire-item.is-selected { border: 2px solid var(--accent); background: rgba(184,134,11,.04); padding: 11px 13px; /* compensate 1→2px border */ }
.kfg__tire-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--card-inner);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.kfg__tire-item.is-selected .kfg__tire-icon { background: rgba(184,134,11,.12); }
.kfg__tire-info { flex: 1; min-width: 0; }
.kfg__tire-size { font-size: 14px; font-weight: 600; color: #1D1D1F; }
.kfg__tire-meta { font-size: 11px; color: #6E6E73; margin-top: 2px; }
/* tire-check dot removed — active state shown via border only */
.kfg__tire-empty { font-size: 13px; color: #86868B; text-align: center; padding: 20px 0; }
.kfg__tire-source { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); padding: 0 0 8px; }

/* Tire badges row wrapper */
.kfg__tire-badges { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; vertical-align: middle; }

/* Tire badges — identical style to Passend/Compat pill in product grid */
.kfg__tire-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  border-radius: 980px; line-height: 1; padding: 3px 9px 3px 7px;
  cursor: default;
}
.kfg__tire-badge::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
/* Empfehlung: amber dot + text only (no star) */
.kfg__tire-badge--rec { background: rgba(184,134,11,.13); color: #9A6700; }
.kfg__tire-badge--rec::before { background: #B8860B; }
/* Zugelassen: green dot + text */
.kfg__tire-badge--ok  { background: rgba(27,138,58,.13);  color: #1B8A3A; }
.kfg__tire-badge--ok::before  { background: #1B8A3A; }
/* Mit Eintragung: amber dot + text */
.kfg__tire-badge--warn { background: rgba(245,158,11,.13); color: #9A6700; }
.kfg__tire-badge--warn::before { background: #F59E0B; }

.kfg__tire-item.is-recommended {
  border-color: rgba(184,134,11,.35);
  background: rgba(184,134,11,.04);
}

/* ── Status Swatches (RDKS + Mischbereifung) ── */
.kfg__status-swatches {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.kfg__swatch {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1 1 0; min-width: 0;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card-inner);
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--text2); cursor: pointer;
  transition: all .18s; line-height: 1;
  justify-content: center;
}
.kfg__swatch:hover {
  border-color: rgba(0,0,0,.18); background: #fff;
}
.kfg__swatch.is-active {
  border-color: var(--accent); background: rgba(184,134,11,.06);
  color: var(--accent);
}
.kfg__swatch.is-active-green {
  border-color: rgba(27,138,58,.35); background: rgba(27,138,58,.05);
  color: #1B8A3A;
}
.kfg__swatch-icon {
  font-size: 16px; opacity: .6;
  font-variation-settings: 'FILL' 0, 'wght' 400;
}
.kfg__swatch.is-active .kfg__swatch-icon,
.kfg__swatch.is-active-green .kfg__swatch-icon { opacity: 1; }
.kfg__swatch-label { white-space: nowrap; }
.kfg__swatch-edit {
  font-size: 12px; opacity: .35;
  font-variation-settings: 'FILL' 0, 'wght' 300;
  margin-left: 2px;
}
.kfg__swatch:hover .kfg__swatch-edit { opacity: .6; }

/* ═══ MAIN AREA ═══ */
/* Video card */
.kfg__viz-video {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  transition: opacity .5s ease;
}
.kfg__viz-video video {
  position: absolute;
  top: 50%; left: 50%;
  width: 300px;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
  object-fit: cover;
}
/* Car image layer — shown at vehicle step, fades out when wheel video starts */
.kfg__viz-car-img {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: 0;
  transition: opacity .5s ease;
}
.kfg__viz-car-img.is-visible { opacity: 1; }
.kfg__viz-car-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 65%;
  /* Transition set inline by JS per camera shot */
  will-change: transform, filter;
}
/* Morph: blur during image swap (color/serie change) */
.kfg__viz-car-img.is-morphing img {
  filter: blur(8px) brightness(1.08);
}
/* Cinematic shot fade: blur + darken between camera cuts */
.kfg__viz-car-img.is-shot-fade img {
  filter: blur(12px) brightness(.7);
}
/* Konfigurator-Bilder (Fahrzeug-Header, Felgen + Konfigurator):
   Card-Hoehe, Crossfade-Buehne mit Kamerafahrten, Perspektiven-Navigation
   und Farb-Piller mit Popover. Heller Rand statt var(--border) — die Karte
   liegt auf dunklem Video/Bild, nicht auf hellem Hintergrund wie im Shop. */

/* Card waechst sanft, sobald ein echtes Fahrzeugbild da ist. */
.kfg__viz, #ff-hero-card {
  transition: min-height .5s cubic-bezier(.4,0,.2,1);
}
/* Grundhoehe der Felgenuebersicht-Karte — stand vorher inline im Template
   und hat dadurch die Wachstumsregel unten ausgehebelt. */
#ff-hero-card { min-height: 300px; }

/* Ohne Fahrzeug: Audi mit Felgen unter dem Platzhalter (wie Home). */
.kfg__viz-hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.kfg__viz.ff-cfgviz-tall .kfg__viz-hero-fallback,
.kfg__viz.is-has-vehicle .kfg__viz-hero-fallback {
  opacity: 0;
}

.kfg__viz.ff-cfgviz-tall, #ff-hero-card.ff-cfgviz-tall {
  min-height: 460px;
}
@media (max-width: 768px) {
  /* Die Karte folgt dem Format des Fotos statt einer festen Hoehe.
     Die Fahrzeugbilder sind quer; bei 320 px Hoehe und rund 340 px Breite
     war die Karte fast quadratisch, und weil das Bild mit 'cover' gefuellt
     wird, schnitt sie das Auto an beiden Enden ab — genau das Gegenteil von
     dem, wofuer die Fotos da sind. Mit 16:10 stehen rund 212 px, und das
     Fahrzeug steht ganz im Bild.

     ── Warum hier gerechnet statt 'aspect-ratio' ──
     'aspect-ratio' laesst sich nicht animieren, 'min-height' schon. Mit
     beiden zusammen gewinnt immer der groessere Wert, und das war das
     Seitenverhaeltnis: die Hoehe sprang in einem einzigen Bild auf den
     Endwert, waehrend die Ueberblendung von 'min-height' unsichtbar
     darunter weiterlief. Auf /felgen lag die Grundhoehe mit 300 px sogar
     UEBER dem Ziel — die Karte stand also erst zu hoch und sackte dann
     ueber eine halbe Sekunde auf 212 px zusammen. Genau das "geht hoch und
     wieder zurueck".

     Die Rechnung ergibt dieselbe Hoehe (Kartenbreite ist die Schirmbreite
     abzueglich 2x10 px Seitenrand, mal 10/16) und laeuft als eine Groesse
     sauber durch die Ueberblendung. */
  .kfg__viz.ff-cfgviz-tall, #ff-hero-card.ff-cfgviz-tall {
    min-height: calc((100vw - 20px) * 0.625);
    aspect-ratio: auto;
  }
  /* Und die Grundhoehe der Felgenuebersicht-Karte gleichzieht: sie stand als
     einzige noch bei 300 px, waehrend die Konfiguratorkarte laengst bei
     190 px liegt. Erst dadurch waechst die Karte beim Eintreffen der Bilder
     nach OBEN — vorher schrumpfte sie. */
  #ff-hero-card { min-height: 190px; }
}

/* Zwei uebereinanderliegende Bilder fuer den weichen Uebergang zwischen
   Ansichten/Farben. Die Kamerafahrt selbst steht NICHT hier, sondern als
   Web-Animation in configurator-viz.js (startKenBurns) — die CSS-Fassung
   musste dem ausgehenden Bild beim Wechsel die Animationsklasse entziehen,
   wodurch dessen Zoom sichtbar zurueckgesprungen ist.
   Kein 'will-change': Chrome kompositiert Transform-/Opacity-Animationen von
   sich aus, und zwei dauerhaft befoerderte Vollbild-Ebenen kosten nur
   Grafikspeicher. */
.ff-cfgviz-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 60%;
  opacity: 0; z-index: 0;
  transition: opacity .7s ease;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ff-cfgviz-frame.is-front { opacity: 1; z-index: 1; }
/* Kurzer Wechsel statt langer Ueberblendung — gesetzt von crossfadeTo(),
   wenn sich die FARBE aendert und nicht die Ansicht. Bei gleicher
   Silhouette in zwei Lacken ist eine halbe Sekunde Ueberblendung eine
   halbe Sekunde Mischfarbe. */
.ff-cfgviz-frame.is-schnell { transition-duration: .2s; }

/* Hintergrundvideo: sobald ein echtes Fahrzeugbild da ist, angehalten UND
   ausgeblendet — sonst blitzt es waehrend des Crossfades unter den (halb-
   transparenten) Bildern durch. */
.ff-cfgviz-video-hidden { opacity: 0 !important; transition: opacity .5s ease; }

/* ── Kein Weichzeichner ueber dem bewegten Bild ──
   Ueber der Karte liegen mehrere Glaselemente: die vier Fahrzeug-Chips, der
   Zurueck-Knopf und die Trefferzahl. Jedes davon zeichnet mit
   'backdrop-filter' seinen Hintergrund weich — und muss ihn deshalb, solange
   sich darunter etwas bewegt, in JEDEM Frame der Kamerafahrt neu abtasten und
   weichzeichnen. Sechs solcher Bereiche kosten mehr als die Fahrt selbst und
   waren der Hauptgrund fuer das Stocken.
   Nur abgeschaltet, solange ein Fahrzeugbild laeuft; auf dem normalen
   Videokopf (ohne gewaehltes Fahrzeug) bleibt der Glaseffekt. Das etwas
   kraeftigere Schwarz ersetzt optisch, was der Weichzeichner beigetragen hat. */
.kfg__viz.ff-cfgviz-tall .kfg__viz-chip,
.kfg__viz.ff-cfgviz-tall .kfg__viz-back,
.kfg__viz.ff-cfgviz-tall .kfg__viz-count,
#ff-hero-card.ff-cfgviz-tall .kfg__viz-chip,
#ff-hero-card.ff-cfgviz-tall .kfg__viz-back,
#ff-hero-card.ff-cfgviz-tall .kfg__viz-count {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: rgba(0,0,0,.42);
  border-color: rgba(255,255,255,.18);
}

/* Bedienleiste unten rechts: Farbwahl und Perspektiven-Navigation stehen
   nebeneinander in derselben Ecke. Die Farbwahl lag vorher unter den
   Fahrzeug-Chips unten links und war dort zu praesent — sie ist Beiwerk zum
   Bild, kein Teil der Fahrzeugangaben.
   Alle Pillen bewusst OHNE backdrop-filter: sie liegen ueber dem bewegten
   Bild, und ein Weichzeichner muesste seinen Hintergrund in jedem einzelnen
   Frame der Kamerafahrt neu abtasten. Etwas kraeftigeres Schwarz sieht
   praktisch gleich aus und kostet nichts. */
.ff-cfgviz-controls {
  position: absolute; right: 16px; bottom: 16px; z-index: 4;
  display: flex; align-items: center; gap: 8px;
}
.ff-cfgviz-nav {
  display: flex; align-items: center; gap: 2px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.ff-cfgviz-nav.is-visible { opacity: 1; pointer-events: auto; }
.ff-cfgviz-navbtn {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent;
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease; padding: 0;
}
.ff-cfgviz-navbtn:hover { background: rgba(255,255,255,.16); }
.ff-cfgviz-navbtn .material-symbols-rounded { font-size: 20px; }

/* ── Der eine Knopf ──
   Frueher standen hier zwei: eine Pille "Anpassen", die ein Menue
   aufklappte, und daneben eine Lupe fuer die Bilder. Beide zeigten
   dieselbe Auswahl. Geblieben ist einer — er oeffnet den Dialog, in dem
   die Ansichten gross UND die Auswahl stehen. */
.ff-cfgviz-anpassen {
  display: none; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px 0 11px; flex-shrink: 0;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
.ff-cfgviz-anpassen:hover { border-color: rgba(255,255,255,.4); background: rgba(0,0,0,.68); }
.ff-cfgviz-anpassen .material-symbols-rounded { font-size: 19px; opacity: .8; }
/* Nur zeigen, wenn auf der Karte wirklich Fahrzeugbilder laufen. */
.ff-cfgviz-tall .ff-cfgviz-anpassen { display: flex; }

.ff-cfgviz-swatch__dot {
  width: 16px; height: 16px; border-radius: 50%; display: block; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 1.5px rgba(255,255,255,.5);
}
.ff-cfgviz-gruppe {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 132px; padding: 0 12px;
  /* Bei 6-8 Farben pro Gruppe wird die Spalte hoeher als die Karte —
     jede Spalte scrollt dann fuer sich, statt das ganze Popover zu strecken. */
  max-height: min(260px, 50vh); overflow-y: auto;
}
.ff-cfgviz-gruppe:first-child { padding-left: 2px; }
.ff-cfgviz-gruppe:last-child  { padding-right: 2px; }
.ff-cfgviz-gruppe + .ff-cfgviz-gruppe {
  border-left: 1px solid rgba(0,0,0,.08);
}

.ff-cfgviz-gruppe-titel {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(0,0,0,.4); padding: 3px 8px 4px;
}

/* ── Mobil: Farbwahl nach oben rechts ──
   Auf dem Telefon ist die Karte niedrig, und unten rechts draengen sich
   Farbwahl und Navigation auf derselben schmalen Zeile. Die Farbwahl wandert
   deshalb in die obere rechte Ecke — auf den Platz der Trefferzahl, die dort
   nichts mehr beitraegt, sobald ein konkretes Fahrzeug zu sehen ist (die Zahl
   steht ohnehin in der Liste darunter).
   Umgesetzt ueber die Bedienleiste selbst: sie spannt sich ueber die ganze
   Karte auf und verteilt ihre beiden Kinder auf oben und unten. 'pointer-events'
   nimmt sie dabei aus dem Weg, damit die Flaeche dazwischen bedienbar bleibt. */
@media (max-width: 768px) {
  .kfg__viz.ff-cfgviz-tall .kfg__viz-count,
  #ff-hero-card.ff-cfgviz-tall .kfg__viz-count { display: none !important; }

  .ff-cfgviz-tall .ff-cfgviz-controls {
    inset: 12px; right: 12px; left: 12px;
    flex-direction: column; align-items: flex-end;
    justify-content: space-between;
    gap: 0; pointer-events: none;
  }
  /* Die Leiste selbst nimmt keine Klicks an (sie spannt sich ueber die
     ganze Karte, damit ihre beiden Gruppen oben und unten sitzen) — jede
     Bedienung darin muss sie sich einzeln zurueckholen. */
  .ff-cfgviz-tall .ff-cfgviz-knoepfe,
  .ff-cfgviz-tall .ff-cfgviz-anpassen,
  .ff-cfgviz-tall .ff-cfgviz-nav { pointer-events: auto; }

  /* Der Name bleibt auch am Telefon stehen: seit es nur noch EINEN Knopf
     gibt, ist der Platz da — und "Anpassen" sagt, was passiert, waehrend
     ein Zahnrad allein geraten werden muss. Nur etwas kompakter. */
  .ff-cfgviz-tall .ff-cfgviz-anpassen {
    height: 34px; padding: 0 12px 0 9px; gap: 5px; font-size: 12px;
  }
  .ff-cfgviz-tall .ff-cfgviz-anpassen .material-symbols-rounded { font-size: 17px; }

  /* Video und Fahrzeugbild klemmen sich an den runden Ecken selbst ab
     ('border-radius: inherit' holt sich den Radius der Karte). */
  .kfg__viz-video, .kfg__viz-car-img, .kfg__viz-overlay {
    border-radius: inherit; overflow: hidden;
  }
  /* Die Abschnitte stapeln sich — also auch ihre Reihe. Diese Regel stand
     zuerst ausserhalb der Medienabfrage und hat damit AM SCHREIBTISCH alles
     untereinander geworfen: '.ff-cfgviz-tall' haengt an der Karte, sobald
     Fahrzeugbilder laufen, nicht an der Bildschirmbreite. */
  .ff-cfgviz-tall .ff-cfgviz-reihe { flex-direction: column; gap: 4px; }
  .ff-cfgviz-tall .ff-cfgviz-gruppe {
    max-height: none; overflow: visible;
    min-width: 0; width: 100%;
    padding: 0;                     /* die Spaltenpolsterung gilt nur nebeneinander */
  }
  /* Gestapelt steht der Knopf unter dem Text, nicht daneben. */
  .ff-cfgviz-tall .ff-cfgviz-fussleiste { flex-direction: column; align-items: stretch; gap: 8px; }
  .ff-cfgviz-tall .ff-cfgviz-uebernehmen { width: 100%; }
  .ff-cfgviz-tall .ff-cfgviz-gruppe + .ff-cfgviz-gruppe {
    padding-left: 0; border-left: none;
    padding-top: 6px; margin-top: 2px;
    border-top: 1px solid rgba(0,0,0,.08);
  }
  .ff-cfgviz-tall .ff-cfgviz-option { white-space: normal; }
}
.ff-cfgviz-option {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px;
  border: none; background: none; cursor: pointer; font-size: 12px; font-weight: 600;
  color: #333; font-family: var(--font); white-space: nowrap;
}
.ff-cfgviz-option:hover { background: rgba(0,0,0,.05); }
.ff-cfgviz-option.is-active { background: rgba(184,134,11,.1); color: var(--accent, #B8860B); }
/* Dark overlay for readability */
.kfg__viz-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 100%);
  transition: background .6s ease;
  pointer-events: none; /* never block Anpassen / nav / lack */
}
/* Konfigurator-Bilder: die diagonale Verdunklung passt fuer Video/Platzhalter,
   deckt aber ein echtes Fahrzeugfoto in der Mitte zu stark ab — Lackfarben
   wirken dann blass. Nur bei aktivem Fahrzeugfoto (ff-cfgviz-tall) auf eine
   Vignette umschalten: Mitte klar, nur die Kartenraender abgedunkelt (fuer
   Lesbarkeit von Kopf- und Fusszeile). */
.kfg__viz.ff-cfgviz-tall .kfg__viz-overlay,
#ff-hero-card.ff-cfgviz-tall .kfg__viz-overlay {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 38%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.5) 100%);
}
.kfg__viz-placeholder {
  position: relative;
  z-index: 2;
  text-align: center;
  color: rgba(255, 255, 255, .85);
  padding: 0 20px;
  max-width: 420px;
  margin: 0 auto;
}
.kfg__viz-placeholder > .material-symbols-rounded {
  font-size: 52px;
  color: rgba(255, 255, 255, .4);
  display: block;
  margin: 0 auto 10px;
  font-variation-settings: 'FILL' 0, 'wght' 200;
}
.kfg__viz-placeholder p {
  font-size: 14px;
  max-width: 300px;
  margin: 0 auto;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
/* Die Ueberschrift der Konfiguratorseite. Bewusst zurueckhaltend gesetzt — sie
   liegt ueber dem Video und soll den Platzhalter nicht dominieren; die
   Standardgroesse einer H1 waere hier deutlich zu laut.
   color explizit mit hoher Spezifitaet: globale H1-/Dark-Mode-Regeln
   sonst schwarz auf dem dunklen Hero. */
.kfg__viz-placeholder .kfg__viz-placeholder-titel,
h1.kfg__viz-placeholder-titel {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #fff !important;
  margin: 0 auto 10px;
  max-width: 340px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.kfg__viz-placeholder-mobil { display: none; }
.kfg__viz-placeholder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 22px;
  border: none;
  border-radius: 12px;
  background: #fff;
  color: #0a1017;
  font: 700 14px/1 var(--font, Inter, system-ui, sans-serif);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.kfg__viz-placeholder-btn .material-symbols-rounded {
  font-size: 18px !important;
  color: #0a1017 !important;
  display: inline-block !important;
  margin: 0 !important;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 500;
}
.kfg__viz-placeholder-btn:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
}
.kfg__viz-placeholder-btn:active {
  transform: translateY(0);
}
@media (max-width: 960px) {
  .kfg__viz-placeholder-links { display: none; }
  .kfg__viz-placeholder-mobil { display: block; }
}

/* ── Vehicle info — bottom-left prominent ── */
.kfg__viz-vehicle {
  position: absolute; bottom: 20px; left: 20px; z-index: 3;
  display: none;
  flex-direction: column; gap: 4px;
}
.kfg__viz-vehicle.is-visible { display: flex; }
.kfg__viz-vehicle-name {
  font-size: 20px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.4); line-height: 1.2;
}
.kfg__viz-vehicle-sub {
  font-size: 12px; color: rgba(255,255,255,.7);
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.kfg__viz-vehicle-chips {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
.kfg__viz-chip {
  background: rgba(255,255,255,.15); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px; padding: 4px 10px;
  font-size: 11px; font-weight: 600; color: #fff;
  text-shadow: none;
}

/* ── Step progress overlay (top-left) ── */
.kfg__viz-steps {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
}
.kfg__viz-back {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.15); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.25);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; transition: background .2s;
}
.kfg__viz-back.is-visible { display: flex; }
.kfg__viz-back:hover { background: rgba(255,255,255,.28); }
.kfg__viz-back .material-symbols-rounded { font-size: 16px; }
.kfg__viz-step-dots {
  display: flex; gap: 5px; align-items: center;
}
.kfg__viz-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.35); transition: all .25s;
}
.kfg__viz-dot.is-active {
  width: 20px; border-radius: 3px; background: #fff;
}
.kfg__viz-step-label {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85);
  letter-spacing: .02em; text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ── Passende Felgen count (top-right of viz card) ── */
.kfg__viz-count {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: none;
  background: rgba(255,255,255,.12); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9);
  letter-spacing: .01em;
}
.kfg__viz-count.is-visible { display: block; }
.kfg__viz-count.is-warn {
  background: rgba(230, 126, 34, .85);
  border-color: rgba(230, 126, 34, .4);
  color: #fff;
}

/* Empty state for no matching wheels */
.kfg__products-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px; gap: 8px;
  background: var(--card-inner); border: 2px dashed var(--border);
  border-radius: 16px; min-height: 280px;
}
.kfg__products-empty h3 {
  font-size: 18px; font-weight: 700; color: var(--text); margin: 8px 0 0;
}
.kfg__products-empty p {
  font-size: 14px; color: var(--text2); max-width: 400px; margin: 0; line-height: 1.5;
}
.kfg__products-empty .kfg__btn--primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 24px; border-radius: 10px; font-size: 14px; font-weight: 600;
  background: var(--accent); color: #fff; text-decoration: none;
  transition: all .2s; border: none; cursor: pointer;
}
.kfg__products-empty .kfg__btn--primary:hover {
  background: #a07615; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184,134,11,.3);
}

/* ═══ PRODUCTS CARD ═══ */
.kfg__products {
  display: none;
}
.kfg__products.is-visible { display: block; }
.kfg__products-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.kfg__products-head-left { display: flex; align-items: center; gap: 10px; }
.kfg__products-head-right { display: flex; align-items: center; gap: 12px; }
.kfg__products-title { color: var(--text); margin: 0; font-size: 1.1rem; font-weight: 700; }
.kfg__products-fuer { font-weight: 500; color: var(--text2); }
.kfg__back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--card-inner); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; transition: all .2s;
  flex-shrink: 0;
}
.kfg__back-btn:hover { background: var(--border); }
.kfg__back-btn .material-symbols-rounded { font-size: 20px; }

/* ── View toggle ── */
.kfg__view-toggle {
  display: flex; gap: 4px;
  background: var(--card-inner); border-radius: 10px; padding: 3px;
}
.kfg__view-btn {
  height: 32px; border: none; border-radius: 7px; background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 10px; cursor: pointer;
  color: var(--text3); transition: background .15s, color .15s;
}
.kfg__view-btn .material-symbols-rounded { font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 300; }
.kfg__view-btn-label { font-size: 12px; font-weight: 500; }
.kfg__view-btn:hover { color: var(--text); }
.kfg__view-btn.is-active { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* ── Desktop-only grid heading ── */
.kfg__grid-heading {
  margin-bottom: 20px;
}
.kfg__grid-heading-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
}

/* ── Gestapelt (default): Serien-Karten, 3-Spalten ── */
.kfg__products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kfg__pcard--stacked { display: block; }

/* ── Raster: Einzelne Produkte (eine Karte pro Farbe), 4-Spalten ── */
.kfg__products-grid.is-flat { grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* In Raster-Modus: die gruppierten Karten komplett ausblenden */
.kfg__products-grid.is-flat .kfg__pcard--stacked { display: none; }
/* Einzelne Produkt-Karten nur im Raster-Modus anzeigen */
.kfg__pcard--single { display: none; }
.kfg__products-grid.is-flat .kfg__pcard--single { display: block; }

/* Product card inside configurator */
.kfg__pcard {
  background: #fff; border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  border: 2px solid transparent; transition: all .25s; text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
}
.kfg__pcard:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.kfg__pcard.is-selected { border-color: var(--accent); background: rgba(184,134,11,.02); }
.kfg__pcard.is-compat  { border-color: #1B8A3A; } /* passend: green border, no extra outline */
.kfg__pcard.is-selected.is-compat { border-color: var(--accent); } /* selected wins over compat */

.kfg__pcard-img { aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 5%; position: relative; }
.kfg__pcard-img img { width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; padding: 5%; opacity: 0; transition: opacity .3s ease; }
.kfg__pcard-img img.is-active { opacity: 1; }
.kfg__pcard-badge {
  position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px); padding: 4px 10px;
  border-radius: 980px; color: var(--text);
}
/* ── Passend badge: pill with dot (no ✓ icon) ── */
.kfg__pcard-compat {
  position: absolute; top: 10px; right: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 9px 3px 7px; border-radius: 980px;
  display: flex; align-items: center; gap: 5px;
}
.kfg__pcard-compat::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.kfg__pcard-compat--ok   { background: rgba(27,138,58,.13); color: #1B8A3A; }
.kfg__pcard-compat--ok::before   { background: #1B8A3A; }
.kfg__pcard-compat--warn { background: rgba(245,158,11,.13); color: #9A6700; }
.kfg__pcard-compat--warn::before { background: #F59E0B; }
.kfg__pcard-body { padding: 14px 16px 16px; color: #1D1D1F; border-top: 1px solid rgba(0,0,0,.06); }
.kfg__pcard-series { font-size: 11px; font-weight: 600; color: #B8860B; letter-spacing: .04em; text-transform: uppercase; }
.kfg__pcard-name { font-size: 14px; font-weight: 600; margin: 4px 0 6px; color: #1D1D1F; }
.kfg__pcard-price { font-size: 13px; color: #6E6E73; }
.kfg__pcard-price strong { color: #1D1D1F; }

/* Kartenfuss: Konfigurieren als eigentlicher Knopf (primaere Aktion),
   Details bleibt Textlink (sekundaer) — bisher beide gleich unauffaellig.
   '.kfg__pcard-actions' selbst ist schon weiter unten definiert. */
.kfg__pcard-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--text);
  padding: 7px 14px; border-radius: 980px; text-transform: uppercase; letter-spacing: .03em;
  text-decoration: none; cursor: pointer; transition: background .15s, transform .15s;
}
.kfg__pcard-cta:hover { background: #333; transform: translateY(-1px); }
.kfg__pcard-details {
  font-size: 12px; font-weight: 600; color: #6E6E73;
  text-transform: uppercase; letter-spacing: .03em; text-decoration: none; cursor: pointer;
}
.kfg__pcard-details:hover { color: #1D1D1F; }

/* Color swatches in card */
/* Zoll size tags — clickable, same visual pattern as /felgen */
.kfg__pcard-sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.kfg__pcard-size-tag {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  line-height: 1.6;
}
.kfg__pcard-size-tag:hover { border-color: var(--accent); color: var(--accent); }
.kfg__pcard-size-tag.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(178,152,118,.08);
}
.kfg__pcard-size-tag.is-oos {
  opacity: .4;
  text-decoration: line-through;
  cursor: default;
  pointer-events: none;
}

/* Card actions bar */
.kfg__pcard-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.kfg__pcard-action {
  font-size: 12px; font-weight: 600; color: var(--text3);
  text-decoration: none; text-transform: uppercase; letter-spacing: .03em;
  margin-left: auto;
  transition: color .15s;
}
.kfg__pcard-action:hover { color: var(--text); }

/* "Reifen wählen →" CTA — always visible like /felgen "Konfigurieren →" */
.kfg__pcard-tire-btn {
  font-size: 13px; font-weight: 600;
  color: var(--ff-btn-ink, #111);
  border: 1px solid var(--ff-btn, #111);
  background: var(--ff-btn, #111);
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 1 1 auto;
}
.kfg__pcard-tire-btn:hover {
  background: var(--ff-accent, #e8941a);
  border-color: var(--ff-accent, #e8941a);
  color: #fff;
}
.kfg__pcard-swatches { display: flex; gap: 6px; margin-top: 10px; align-items: center; overflow: visible; max-width: 100%; padding: 3px 2px; }
.kfg__pcard-swatch {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid transparent;
  cursor: pointer; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 0 transparent;
  transition: box-shadow .15s, transform .15s;
}
.kfg__pcard-swatch:hover { transform: scale(1.1); }
.kfg__pcard-swatch.is-active {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,0,0,.55);
  transform: scale(1.05);
}
.kfg__pcard-swatch-label { font-size: 11px; color: var(--text3); margin-left: 2px; }

/* ═══ STICKY CHECKOUT BAR ═══ */
.kfg__bar {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--bar-h);
  background: rgba(255,255,255,.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border); z-index: 100;
  transform: translateY(100%); transition: transform .4s cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center; justify-content: center;
}
.kfg__bar-inner {
  width: 100%; max-width: var(--max); padding: 0 40px;
  display: flex; align-items: center; gap: 32px;
}
.kfg__bar.is-visible { transform: translateY(0); }
.kfg__bar-summary { flex: 1; }
.kfg__bar-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.kfg__bar-price { font-size: 24px; font-weight: 800; color: var(--text); margin-top: 2px; }
.kfg__bar-price small { font-size: 14px; font-weight: 500; color: var(--text2); }
/* Quantity stepper */
.kfg__bar-qty {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: var(--card-inner); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 12px;
}
.kfg__bar-qty-btn {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; cursor: pointer; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; color: var(--text); line-height: 1;
}
.kfg__bar-qty-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.kfg__bar-qty-val { font-size: 18px; font-weight: 800; color: var(--text); min-width: 22px; text-align: center; }
.kfg__bar-qty-lbl { font-size: 11px; font-weight: 600; color: var(--text3); }
.kfg__bar-actions { display: flex; gap: 10px; }
.kfg__bar-btn {
  padding: 14px 32px; border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; border: none; transition: all .2s; font-family: inherit;
  display: flex; align-items: center; gap: 8px;
}
.kfg__bar-btn--cart { background: var(--text); color: #fff; }
.kfg__bar-btn--cart:hover { background: #333; }
.kfg__bar-btn--save { background: var(--card-inner); color: var(--text); border: 1px solid var(--border); }

/* ═══ LOADING / STATES ═══ */
.kfg__loading { text-align: center; padding: 24px; color: var(--text3); font-size: 13px; }
.kfg__loading::before { content: ''; display: block; width: 24px; height: 24px; margin: 0 auto 8px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: kfg-spin .6s linear infinite; }
@keyframes kfg-spin { to { transform: rotate(360deg); } }

/* Inline loading spinner (for buttons) */
.kfg__btn-loading { pointer-events: none; opacity: .7; position: relative; }
.kfg__btn-loading .kfg__btn-label { visibility: hidden; }
.kfg__btn-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: kfg-spin .6s linear infinite;
}

/* Product grid loading overlay */
.kfg__products-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 48px 0; color: var(--text3); font-size: 13px; font-weight: 600;
}
.kfg__products-loading::before {
  content: ''; width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: kfg-spin .6s linear infinite;
}

/* Tire catalog spinner (reuse same pattern) */
.kfg__tire-catalog-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 40px 0; color: var(--text3); font-size: 13px; font-weight: 600;
}
.kfg__tire-catalog-loading::before {
  content: ''; width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: kfg-spin .6s linear infinite;
}

/* Ladezustaende an Ort und Stelle ─────────────────────────────────
   Bewusst getrennt vom Schild "Freigabe wird geprüft": das ist eine
   ANTWORT der Schnittstelle (Pruefung offen), waehrend hier noch gar
   keine Antwort da ist. Beides gleich zu beschriften hiess, dass man
   das Warten nicht vom Ergebnis unterscheiden konnte. */
.kfg__pcard-compat--laden {
  background: rgba(0,0,0,.05); color: #6b7280;
  display: inline-flex; align-items: center; gap: 5px;
}
.kfg__pcard-compat--laden::before {
  content: ''; width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%;
  background: none; border: 1.5px solid rgba(0,0,0,.15);
  border-top-color: var(--accent); animation: kfg-spin .7s linear infinite;
}

/* Serienliste in der Seitenleiste */
.kfg__wheel-model-fit--laden {
  background: rgba(0,0,0,.05); color: #6b7280;
  display: inline-flex; align-items: center; gap: 5px;
}
.kfg__wheel-model-fit--laden::before {
  content: ''; width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.15); border-top-color: var(--accent);
  animation: kfg-spin .7s linear infinite;
}

/* Kaskade im Fahrzeugdialog: wartendes Feld vs. gesperrtes Feld */
.kfg__variant-btn.is-laden,
.ff-modal-ss__trigger.is-laden {
  position: relative; padding-right: 34px;
}
.kfg__variant-btn.is-laden::after,
.ff-modal-ss__trigger.is-laden::after {
  content: ''; position: absolute; right: 12px; top: 50%; margin-top: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.12); border-top-color: var(--accent);
  animation: kfg-spin .7s linear infinite;
}
/* Ein wartendes Feld darf nicht so blass sein wie ein gesperrtes —
   sonst liest man es als "noch nicht dran". */
.ff-modal-ss__trigger.is-laden[disabled] { opacity: .8; }
/* Laden fehlgeschlagen: bedienbar, rot umrandet — ein Tipp laedt erneut. */
.ff-modal-ss__trigger.is-fehler {
  border-color: #c62828 !important; color: #c62828; cursor: pointer;
}
/* Offene Wahl: der Hinweis traegt die Akzentfarbe, solange nichts
   gewaehlt ist — er ist dann eine Aufforderung, keine Fussnote. */
.kfg__variant-hint.is-offen { color: var(--accent, #B8860B); font-weight: 600; }

.kfg__variant-btn:disabled { cursor: default; }
/* Waehrend des Wechsels: der gedrueckte Schalter bleibt kraeftig und
   traegt den Kreisel, die uebrigen treten zurueck. */
.kfg__variant-btn:disabled:not(.is-laden) { opacity: .45; }
.kfg__variant-btn.is-laden {
  opacity: 1; border-color: var(--accent, #B8860B);
  background: rgba(184, 134, 11, .05);
}

@media (prefers-reduced-motion: reduce) {
  .kfg__pcard-compat--laden::before,
  .kfg__wheel-model-fit--laden::before,
  .kfg__variant-btn.is-laden::after,
  .ff-modal-ss__trigger.is-laden::after,
  .kfg__loading::before,
  .kfg__btn-loading::after,
  .kfg__products-loading::before,
  .kfg__tire-catalog-loading::before { animation-duration: 2.4s; }
}

.kfg__empty { text-align: center; padding: 24px; color: var(--text3); font-size: 13px; }

/* Hidden */
.kfg__step[data-state="locked"] {
  opacity: .18;
  pointer-events: none;
  filter: saturate(0) blur(0px);
  transition: opacity .4s ease, filter .4s ease;
}
.kfg__step[data-state=""] { transition: opacity .4s ease, filter .4s ease; }
.kfg__step[data-state="done"] .kfg__step-num { color: #1B8A3A; }

/* ═══ TOAST NOTIFICATION ═══ */
.kfg__toast {
  position: fixed;
  bottom: 88px; /* above sticky bar */
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  z-index: 9999;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.kfg__toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.kfg__toast--warn {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(178,152,118,.07);
}

/* ═══ RESPONSIVE ═══ */
/* ═══ RESPONSIVE — TABLET ═══ */
@media (max-width: 1024px) {
  .kfg__products-grid { grid-template-columns: repeat(2, 1fr); }
  .kfg__bar { padding: 0 20px; }
}

/* ═══ RESPONSIVE — MOBILE ═══ */
@media (max-width: 768px) {
  /* ─ Layout: single column, no sidebar ─ */
  .kfg {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    /* Unten so viel Platz, dass die letzte Karte (Farbfelder, "Details")
       ueber der festen Leiste ganz erreichbar bleibt — plus Home-Balken. */
    padding: calc(56px + 12px) 10px calc(var(--mob-bar-h) + 32px + env(safe-area-inset-bottom, 0px));
  }
  /* Reset grid-column so viz + products card stack correctly in 1-column grid */
  .kfg__viz,
  .kfg__products-card { grid-column: 1 !important; }
  .kfg__products-card { padding: 12px 12px 20px; }
  .kfg__side { display: none !important; }
  .kfg__side-fade-top,
  .kfg__side-fade-bot { display: none !important; }
  /* Product grid → 1 column both modes */
  .kfg__products-grid,
  .kfg__products-grid.is-flat { grid-template-columns: 1fr !important; gap: 8px; }
  /* Grid heading — desktop only */
  .kfg__grid-heading { display: none; }
  /* Tire heading — desktop only */
  .kfg__tire-heading { display: none; }
  /* Die Bildkarte etwas flacher: die Fahrzeugfotos sind quer (16:9), bei
     220 px Hoehe und voller Breite blieb oben und unten schwarzer Rand.
     Bei 190 px fuellt das Foto die Karte, ohne beschnitten zu werden. */
  .kfg__viz { min-height: 190px; }

  /* "Anpassen" und die Ansichts-Schalter auf die Groesse des Zurueck-Pfeils
     links (32 px) bringen. Sie standen mit 40 px deutlich ueber ihm und
     wirkten dadurch wichtiger als das Bild, auf dem sie liegen. */
  .ff-cfgviz-controls { right: 10px; bottom: 10px; gap: 6px; }
  .ff-cfgviz-nav { padding: 3px; }
  .ff-cfgviz-navbtn { width: 28px; height: 28px; }
  .ff-cfgviz-navbtn .material-symbols-rounded { font-size: 18px; }

  /* Hoechstens drei Merkmale. Die vierte und fuenfte Angabe (Antrieb,
     Hybridart) brach in eine zweite Zeile um und schob den Fahrzeugnamen
     aus der Karte — vier Chips passen auf einem Telefon schlicht nicht
     nebeneinander. Die vollstaendigen Daten stehen in der Leiste. */
  .kfg__viz-vehicle-chips { flex-wrap: nowrap; overflow: hidden; }
  .kfg__viz-vehicle-chips > :nth-child(n+4) { display: none; }
  /* Checkout bar hidden on mobile (replaced by mob-bar) */
  .kfg__bar { display: none !important; }

  /* ─ Ueberschrift und Bedienung in ZWEI Zeilen ─
     Die Ueberschrift war auf dem Telefon ganz ausgeblendet, weil sie neben
     Zaehler und Umschalter keinen Platz hatte. Damit fehlte aber die
     Auskunft, worauf man gerade schaut — "Passende Felgen" bzw. "Passende
     Reifen" ist die Ueberschrift des ganzen Bereichs, nicht Zierde.

     Statt sie zu streichen, bekommt sie die erste Zeile fuer sich (beim
     Reifenschritt zusammen mit dem Zurueck-Pfeil, der dorthin gehoert), und
     Zaehler und Umschalter ruecken darunter. Zwei ruhige Zeilen statt einer
     ueberfuellten. */
  .kfg__products-head {
    padding: 0 0 8px;
    flex-wrap: wrap; gap: 8px;
    margin-bottom: 12px;
    justify-content: flex-start;
  }
  .kfg__products-title {
    display: block; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  /* Zeile 1: Zurueck-Pfeil + Ueberschrift */
  .kfg__products-head-left { flex: 1 1 100%; min-width: 0; }
  /* Im Felgenraster gibt es keinen Pfeil — dort steht die Ueberschrift
     selbst in der ersten Zeile. */
  .kfg__products-head > .kfg__products-title { flex: 1 1 100%; }
  /* Zeile 2: Filter ganz links, Umschalter ganz rechts.
     Der Filterknopf steht im Dokument zwischen Zaehler und Umschalter —
     hier zieht 'order' ihn nach vorn, und 'margin-right: auto' schiebt
     alles Uebrige an den rechten Rand. Ohne das sass er in der Mitte,
     und der Umschalter wurde aus der Zeile gedraengt. */
  .kfg__products-head-right {
    flex: 1 1 100%; min-width: 0;
    justify-content: flex-start; gap: 8px; flex-wrap: nowrap;
  }
  /* Dasselbe gilt fuer den Filterknopf im Reifenschritt: konfigurator-tire.js
     schiebt ihn am Telefon in genau diese Zeile. Ohne 'margin-right: auto'
     klebte er an "Auflagen" und "Legende" und sah aus wie ein dritter
     Schalter derselben Gruppe — gemeint ist: Filter links, Umschalter rechts. */
  .kfg__farb-btn,
  #kfg-tire-catalog .kfg__products-head-right > .kfg__tire-filter-toggle {
    order: -1; margin-right: auto; flex-shrink: 0;
  }
  .kfg__products-count { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kfg__products-head-right .kfg__view-toggle { flex-shrink: 0; }
  /* Toggle: always show both labels on mobile */
  .kfg__view-btn-label { display: inline; }
  .kfg__view-btn { padding: 0 10px; }

  /* ─ Product card: image fills full card width ─ */
  .kfg__pcard-img {
    height: auto !important;
    aspect-ratio: 4/3;
    width: 100%;
  }
  .kfg__pcard-img img { width: 100%; height: 100%; object-fit: contain; }
  .kfg__pcard-body { padding: 10px; }
  .kfg__pcard-name { font-size: 14px; }
  .kfg__pcard-price { font-size: 13px; }

  /* ─ Viz header ─ */
  .kfg__viz-name { font-size: 18px; }
  .kfg__viz-chip { font-size: 10px; padding: 3px 7px; border-radius: 6px; }

  /* Fahrzeugblock naeher an die Kante und enger gesetzt.
     20 px Abstand links und unten sind bei 340 px Kartenbreite spuerbar
     Platz, den der Fahrzeugname braucht; und die Merkmale standen mit
     Abstand unter dem Titel in der Mitte der Karte statt unten bei der
     Bedienleiste, mit der sie eine Zeile bilden sollen. */
  .kfg__viz-vehicle { bottom: 10px; left: 12px; right: 96px; gap: 1px; }
  .kfg__viz-vehicle-name { font-size: 17px; line-height: 1.15; }
  .kfg__viz-vehicle-sub { font-size: 11px; }
  .kfg__viz-vehicle-chips { gap: 4px; margin-top: 3px; }

  /* Die Sortierung und die drei Reifenfilter behalten ihre kleine Schrift.
     homepage.css setzt fuer JEDES select auf dem Telefon 16px !important —
     gedacht gegen das Hineinzoomen von Safari beim Antippen eines
     Eingabefelds. Fuer Textfelder ist das richtig und bleibt auch so; diese
     drei Auswahlpillen sind aber auf 12 px Schrift gebaut, und mit 16 px
     lief der Text aus seinem Rahmen ("Alle Marken" passte nicht mehr in ein
     Drittel der Zeile). Klasse schlaegt Elementselektor, deshalb greift das
     hier — das '!important' ist noetig, um das andere '!important'
     aufzuwiegen, nicht um jemanden auszustechen. */
  .kfg__tire-select { font-size: 12px !important; }
  .kfg__tire-toolbar-collapsible .kfg__tire-select { font-size: 11.5px !important; }
}

/* ─────────────────────────────────────────
   MOBILE BOTTOM BAR
───────────────────────────────────────── */
:root { --mob-bar-h: 72px; }

.kfg__mob-bar {
  display: none; /* shown only on mobile via media query */
}

@media (max-width: 768px) {
  .kfg__mob-bar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    /* Home-Balken (iPhone) mitrechnen: die Leiste waechst um den
       Sicherheitsabstand, der Inhalt bleibt oberhalb davon. */
    height: calc(var(--mob-bar-h) + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 0 12px env(safe-area-inset-bottom, 0px);
    gap: 8px;
  }
}

/* Left: price area (always visible) */
.kfg__mob-bar-price {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; min-width: 0;
}
.kfg__mob-bar-price-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kfg__mob-bar-price-amount {
  font-size: 15px; font-weight: 800; color: var(--text);
  white-space: nowrap;
}
.kfg__mob-bar-price-amount:empty::after {
  content: '–'; color: var(--text3); font-weight: 500;
}

.kfg__mob-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

/* Reset btn: subtle icon, hidden until has-product */
.kfg__mob-reset-btn {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text3); cursor: pointer;
  transition: all .2s;
}
.kfg__mob-reset-btn .material-symbols-rounded { font-size: 18px; }
.kfg__mob-reset-btn:active { background: var(--card-inner); }
.kfg__mob-bar.has-product .kfg__mob-reset-btn { display: flex; }

/* Config/Ansehen btn: default = primary (black), becomes secondary when has-product */
.kfg__mob-config-btn {
  display: flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 14px; border-radius: 10px;
  background: var(--text); border: none;
  font-size: 12px; font-weight: 700; color: #fff;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: all .2s;
}
.kfg__mob-config-btn .material-symbols-rounded { font-size: 16px; }
/* When complete config (wheel+tire): config btn becomes the "Vorschau" —
   deutlich als Knopf erkennbar (Flaeche + Rand), Symbol gross genug */
.kfg__mob-bar.has-complete .kfg__mob-config-btn {
  background: var(--card-inner, #f2f2f4); border: 1.5px solid rgba(0,0,0,.16); color: var(--text);
  width: 44px; height: 44px; padding: 0; justify-content: center;
}
.kfg__mob-bar.has-complete .kfg__mob-config-btn .material-symbols-rounded { font-size: 21px; color: var(--text); }
/* Icon swap: default=tune, complete=visibility */
.kfg__mob-bar.has-complete .kfg__mob-icon-default { display: none !important; }
.kfg__mob-bar.has-complete .kfg__mob-icon-view { display: inline !important; }

/* Cart btn: black CTA, hidden until product configured */
.kfg__mob-cart-btn {
  display: none; align-items: center; gap: 5px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  background: var(--text); color: #fff; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: all .2s;
}
.kfg__mob-bar.has-product .kfg__mob-cart-btn {
  display: flex;
}
/* Kaufen: gleich hoch wie die Vorschau, etwas kraeftiger */
.kfg__mob-bar.has-complete .kfg__mob-cart-btn { height: 44px; padding: 0 16px; font-size: 13.5px; gap: 6px; border-radius: 12px; }
.kfg__mob-bar.has-complete .kfg__mob-reset-btn { width: 40px; height: 44px; }

/* Config modal card images — responsive */
.cfg-modal-img {
  width: 72px; height: 72px; border-radius: 10px;
  background: var(--card-inner); flex-shrink: 0;
  overflow: hidden; display: flex;
  align-items: center; justify-content: center;
}
@media (max-width: 600px) {
  .cfg-modal-img { width: 52px; height: 52px; border-radius: 8px; }
}

/* ─────────────────────────────────────────
   MOBILE BACKDROP
───────────────────────────────────────── */
.kfg__mob-backdrop {
  display: none; position: fixed; inset: 0; z-index: 299;
  background: rgba(0,0,0,.45); opacity: 0;
  transition: opacity .3s ease;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.kfg__mob-backdrop.is-open {
  display: block; opacity: 1;
}

/* ─────────────────────────────────────────
   MOBILE BOTTOM SHEET
───────────────────────────────────────── */
.kfg__mob-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  /* 'dvh' statt 'vh': auf dem iPhone rechnet 'vh' die Adressleiste mit, das
     Blatt ragte dadurch unter den Bildschirmrand und der Knopf am Fuss war
     nicht erreichbar. */
  height: 90dvh;
  max-height: 90dvh;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.15);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.32,1,.3,1);
  touch-action: pan-y;   /* iOS: allow vertical pan on the whole sheet */
  /* Unterer Rand: Geraete mit Home-Balken (iPhone) — sonst liegt der
     Fuss der Schublade hinter dem Balken. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Waehrend die Schublade faehrt (380 ms) oder geschlossen ist, nimmt sie
   keine Tipps an — sonst landet ein Tipp auf Inhalt, der sich gerade
   bewegt. Offen bleibt sie normal bedienbar. */
.kfg__mob-sheet:not(.is-open) { pointer-events: none; }
.kfg__mob-sheet.is-open {
  transform: translateY(0);
  pointer-events: auto;
}

/* Handle + header */
.kfg__mob-sheet-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kfg__mob-sheet-handle {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.12);
}
.kfg__mob-sheet-title {
  flex: 1; font-size: 15px; font-weight: 700; color: var(--text);
}
.kfg__mob-sheet-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--card-inner); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2);
}
.kfg__mob-sheet-close .material-symbols-rounded { font-size: 18px; }

/* Scrollable body — flex:1 fills remaining height between header and footer */
.kfg__mob-sheet-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: scroll;             /* scroll not auto — required for iOS Safari */
  overflow-x: hidden;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;            /* tells iOS: this element handles vertical pan */
}
/* CRITICAL: sidebar is hidden on mobile via display:none!important.
   When physically moved into the sheet, this higher-specificity rule shows it.
   Must kill ALL desktop sidebar properties that break sheet scroll. */
.kfg__mob-sheet-body > .kfg__side,
.kfg__mob-sheet-body .kfg__side {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 16px 0 0 !important;
  /* Kill desktop mask-image fade — this hides content at top/bottom */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  /* Kill desktop grid placement */
  grid-row: auto !important;
  /* Kill sticky */
  top: auto !important;
}
/* Reset sidebar inner styles when rendered inside sheet */
.kfg__mob-sheet-body .kfg__step { margin-bottom: 24px; }
/* Let tire list scroll naturally with the sheet body — no height cap */
.kfg__mob-sheet-body .kfg__tire-list { max-height: none; }

/* Footer checkout strip — hidden until product is configured */
.kfg__mob-sheet-footer {
  display: none;         /* hidden by default */
  align-items: center; gap: 12px;
  padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); flex-shrink: 0;
  background: var(--card);
}
/* Show footer only when a product+price is ready */
.kfg__mob-sheet.has-product .kfg__mob-sheet-footer {
  display: flex;
}
.kfg__mob-footer-price { flex: 1; min-width: 0; }
.kfg__mob-footer-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); }
.kfg__mob-footer-amount {
  font-size: 15px; font-weight: 800; color: var(--text); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kfg__mob-footer-amount small {
  font-size: 10px; font-weight: 500; color: var(--text3);
  display: block; margin-top: 1px;
}
.kfg__mob-footer-cart {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 18px; border-radius: 12px;
  background: var(--text); color: #fff; border: none;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  flex-shrink: 0; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIRE CATALOG — List View in Products Card (Step 03)
   ═══════════════════════════════════════════════════════════════════════ */

/* Container wrapper */
.kfg__tire-catalog { display: none; }
.kfg__tire-catalog.is-visible { display: block; }

/* ── Tire legend panel ── */
.kfg__tire-legend {
  background: var(--card-inner); border-radius: 14px; padding: 20px;
  margin-bottom: 16px; border: 1px solid var(--border);
  animation: kfgFadeSlideDown .2s ease;
}
@keyframes kfgFadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kfg__tire-legend-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.kfg__tire-legend-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
/* Remove border on last row (items 5 & 6) */
.kfg__tire-legend-item:nth-last-child(-n+2) { border-bottom: none; }
/* Vertical divider via right border on odd (left) items */
.kfg__tire-legend-item:nth-child(odd) { border-right: 1px solid var(--border); }
.kfg__tire-legend-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 32px; min-height: 28px;
}
.kfg__tire-legend-label {
  font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px;
}
.kfg__tire-legend-desc {
  font-size: 11px; color: var(--text3); line-height: 1.5;
}

/* ── Filter toolbar ── */
.kfg__tire-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px;
}
/* On desktop, children flow flat into the toolbar row */
.kfg__tire-toolbar-always {
  display: contents;
}
.kfg__tire-toolbar-collapsible {
  display: contents;
}
/* Filter toggle button — hidden on desktop */
.kfg__tire-filter-toggle {
  display: none; align-items: center; gap: 4px;
  height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card-inner);
  color: var(--text); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.kfg__tire-filter-toggle .material-symbols-rounded { font-size: 16px; }
.kfg__tire-filter-toggle.is-active { background: var(--text); color: #fff; border-color: var(--text); }

/* Search */
.kfg__tire-search {
  flex: 1; min-width: 180px; max-width: 340px;
  padding: 9px 14px 9px 36px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; font-family: inherit;
  background: var(--card-inner) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2386868B' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") 12px center no-repeat;
  outline: none; color: var(--text); transition: border-color .2s;
}
.kfg__tire-search:focus { border-color: var(--accent); }

/* Select dropdowns */
.kfg__tire-select {
  padding: 8px 30px 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; font-weight: 500; font-family: inherit;
  background: var(--card-inner); color: var(--text);
  cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2386868B' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.kfg__tire-select:focus { border-color: var(--accent); }

/* Result count + sort row */
.kfg__tire-results-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 12px;
}
.kfg__tire-results-count {
  font-size: 12px; font-weight: 500; color: var(--text3);
}
.kfg__tire-results-count strong { color: var(--text); font-weight: 700; }

/* ── Tire list container ── */
.kfg__tire-catalog-list {
  display: flex; flex-direction: column; gap: 6px;
}

/* ── Individual tire row ── */
.kfg__tire-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px;
  background: #fff; cursor: pointer; transition: all .2s;
}
.kfg__tire-row:hover { border-color: rgba(0,0,0,.15); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.kfg__tire-row.is-selected { border-color: var(--accent); background: rgba(184,134,11,.03); }

/* ── Top recommendation badge row ── */
.kfg__tire-row--top {
  position: relative;
  padding-top: 22px; /* space for the badge */
}
.kfg__tire-row-badge {
  position: absolute; top: -9px; right: 16px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 10px; border-radius: 6px;
  display: inline-flex; align-items: center;
  box-shadow: 0 2px 6px rgba(184,134,11,.25);
  line-height: 1.4;
}
/* Brand initial / icon */
.kfg__tire-row-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--card-inner); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--text2);
  text-transform: uppercase;
}

/* Info block */
.kfg__tire-row-info { flex: 1; min-width: 0; }
.kfg__tire-row-brand {
  font-size: 11px; font-weight: 700; color: var(--accent);
  letter-spacing: .04em; text-transform: uppercase;
}
.kfg__tire-row-name {
  font-size: 14px; font-weight: 600; color: var(--text); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kfg__tire-row-spec {
  font-size: 12px; color: var(--text2); margin-top: 3px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kfg__tire-row-spec-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500; color: var(--text3);
}

/* ── EU Label badges ── */
.kfg__tire-eu-labels {
  display: flex; gap: 5px; flex-shrink: 0; align-items: center; align-self: center;
  width: 120px; justify-content: flex-end;
}
/* Season badge duplicate: hidden on desktop (shown on mobile via override) */
.kfg__tire-eu-labels .kfg__tire-season-badge { display: none; }
.kfg__tire-eu {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 24px; border-radius: 6px;
  font-size: 11px; font-weight: 700; padding: 0 5px;
  line-height: 1; position: relative;
}
.kfg__tire-eu-icon {
  position: absolute; top: -4px; right: -4px;
  width: 12px; height: 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; line-height: 1;
  box-shadow: 0 0 0 1.5px #fff;
}
.kfg__tire-eu--fuel .kfg__tire-eu-icon { background: #2E7D32; color: #fff; }
.kfg__tire-eu--grip .kfg__tire-eu-icon { background: #1565C0; color: #fff; }
/* Fuel efficiency */
.kfg__tire-eu--fuel { background: rgba(46,125,50,.1); color: #2E7D32; }
.kfg__tire-eu--fuel[data-grade="A"] { background: #1B5E20; color: #fff; }
.kfg__tire-eu--fuel[data-grade="B"] { background: #388E3C; color: #fff; }
.kfg__tire-eu--fuel[data-grade="C"] { background: rgba(46,125,50,.15); color: #2E7D32; }
.kfg__tire-eu--fuel[data-grade="D"],
.kfg__tire-eu--fuel[data-grade="E"] { background: rgba(245,124,0,.12); color: #E65100; }

/* Wet grip */
.kfg__tire-eu--grip { background: rgba(21,101,192,.1); color: #1565C0; }
.kfg__tire-eu--grip[data-grade="A"] { background: #0D47A1; color: #fff; }
.kfg__tire-eu--grip[data-grade="B"] { background: #1565C0; color: #fff; }
.kfg__tire-eu--grip[data-grade="C"] { background: rgba(21,101,192,.15); color: #1565C0; }

/* Noise */
.kfg__tire-eu--noise {
  background: rgba(0,0,0,.06); color: var(--text2);
  font-weight: 600; gap: 2px;
}
.kfg__tire-eu--noise .kfg__tire-eu-unit { font-size: 9px; font-weight: 400; }

/* ── Price + stock column ── */
.kfg__tire-row-price-col {
  text-align: right; flex-shrink: 0; width: 100px; align-self: center;
}
.kfg__tire-row-price {
  font-size: 16px; font-weight: 800; color: var(--text);
}
.kfg__tire-row-price-unit {
  font-size: 11px; font-weight: 400; color: var(--text3);
}
.kfg__tire-row-price-sub {
  font-size: 10px; color: var(--text3); margin-top: 1px;
}
.kfg__tire-row-stock {
  font-size: 10px; font-weight: 600; margin-top: 3px;
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
}
.kfg__tire-row-stock::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.kfg__tire-row-stock--high { color: #1B8A3A; }
.kfg__tire-row-stock--high::before { background: #1B8A3A; }
.kfg__tire-row-stock--low { color: #F59E0B; }
.kfg__tire-row-stock--low::before { background: #F59E0B; }

/* ── Season badge in row ── */
.kfg__tire-season-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 6px; display: inline-flex; align-items: center; gap: 4px;
}
.kfg__tire-season-badge--s { background: rgba(255,152,0,.1); color: #E65100; }
.kfg__tire-season-badge--w { background: rgba(33,150,243,.1); color: #0D47A1; }
.kfg__tire-season-badge--g { background: rgba(76,175,80,.1); color: #2E7D32; }

/* ── Pagination ── */
.kfg__tire-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.kfg__tire-page-btn {
  min-width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card-inner);
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: inherit; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.kfg__tire-page-btn:hover { border-color: rgba(0,0,0,.2); }
.kfg__tire-page-btn.is-active { background: var(--text); color: #fff; border-color: var(--text); }
.kfg__tire-page-btn:disabled { opacity: .3; cursor: default; }

/* ── Loading state ── */
.kfg__tire-catalog-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 0; color: var(--text3); font-size: 13px;
  flex-direction: column; gap: 12px;
}
.kfg__tire-catalog-loading::before {
  content: ''; width: 28px; height: 28px;
  border: 2.5px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: kfg-spin .6s linear infinite;
}

/* ═══ RESPONSIVE — TIRE CATALOG ═══ */
@media (max-width: 768px) {
  /* 1. Back arrow: force left-aligned */
  .kfg__products-head { justify-content: flex-start; gap: 10px; }
  /* Kein 'flex-shrink: 0' und kein 'margin-left: auto' mehr: beides stammt
     aus der einzeiligen Fassung und haette die neue Zweizeiligkeit wieder
     zusammengeschoben. */
  .kfg__products-head-left { min-width: 0; }

  /* 2. Collapsible filter toolbar */
  .kfg__tire-toolbar { flex-direction: column; }
  .kfg__tire-toolbar-always {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    width: 100%; overflow: hidden;
  }
  /* Der Knopf sitzt jetzt in der Kopfzeile neben "Auflagen" und "Legende"
     (verschoben in konfigurator-tire.js) — er traegt deren Groesse. */
  .kfg__tire-filter-toggle { display: inline-flex; flex-shrink: 0; height: 32px; padding: 0 10px; }

  /* Suche und Sortierung wandern mit in den Aufklappbereich.
     Sichtbar war bisher: [Filter] [Suche] [Sortierung] in einer engen Zeile,
     darunter beim Aufklappen drei weitere Felder. Fuenf Bedienelemente fuer
     eine Liste, von denen man selten mehr als eines braucht. Zugeklappt
     bleibt jetzt nichts davon stehen; der Filterknopf oben sagt, wo sie
     sind, und zaehlt mit, wenn etwas gesetzt ist.

     Seit der Filterknopf oben in der Kopfzeile sitzt, enthaelt diese Gruppe
     nur noch Suche und Sortierung — sie laesst sich deshalb als Ganzes
     schalten, statt ihre Kinder einzeln. Die beiden teilen sich die Zeile
     zur Haelfte. */
  .kfg__tire-toolbar-always { display: none; }
  .kfg__tire-toolbar.is-open .kfg__tire-toolbar-always {
    display: flex; gap: 6px; width: 100%;
  }
  .kfg__tire-toolbar.is-open .kfg__tire-search,
  .kfg__tire-toolbar.is-open .kfg__tire-toolbar-always .kfg__tire-select {
    flex: 1 1 0; width: auto; min-width: 0; max-width: none;
    height: 38px; box-sizing: border-box;
  }
  .kfg__tire-toolbar { gap: 6px; }
  /* Sortierung: volle Breite im Aufklappbereich, gleiche Hoehe wie die
     uebrigen Felder. Die fruehere Begrenzung auf 38vw stammt aus der Zeit,
     als sie sich die Zeile mit Suche und Filterknopf teilte. */
  .kfg__tire-toolbar-always .kfg__tire-select {
    padding: 0 26px 0 10px; font-size: 12px;
    background-position: right 8px center;
  }
  /* Die drei Filter nebeneinander, nicht gestapelt. Untereinander schoben
     sie die Reifenliste um gut 140 px nach unten — fuer drei Auswahlfelder,
     die zusammen bequem in eine Zeile passen. */
  .kfg__tire-toolbar-collapsible {
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px; width: 100%;
  }
  .kfg__tire-toolbar-collapsible.is-open {
    display: grid;
    animation: kfgFadeSlideDown .2s ease;
  }
  .kfg__tire-toolbar-collapsible .kfg__tire-select {
    width: 100%; min-width: 0;
    padding-left: 9px; padding-right: 22px;
    background-position: right 6px center;
    font-size: 11.5px;
  }

  /* 3. Tire row: grid layout with badges on own row */
  .kfg__tire-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    padding: 12px;
  }
  .kfg__tire-row-icon {
    grid-row: 1 / 3; grid-column: 1; align-self: center;
    width: 40px; height: 40px; font-size: 14px;
  }
  .kfg__tire-row-info { grid-row: 1; grid-column: 2; min-width: 0; }
  .kfg__tire-row-info .kfg__tire-row-name {
    font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .kfg__tire-row-price-col {
    grid-row: 1; grid-column: 3; align-self: center; min-width: 70px;
  }
  /* Hide season badge in spec row on mobile */
  .kfg__tire-row-spec .kfg__tire-season-badge { display: none; }
  /* Show duplicate season badge in EU labels row */
  .kfg__tire-eu-labels .kfg__tire-season-badge { display: inline-flex !important; }
  .kfg__tire-eu-labels {
    grid-row: 2; grid-column: 2 / 4;
    min-width: 0; justify-content: flex-start; gap: 4px;
  }
  .kfg__tire-eu { min-width: 24px; height: 20px; font-size: 10px; border-radius: 5px; }
  .kfg__tire-row-price { font-size: 14px; }

  .kfg__tire-legend-grid { grid-template-columns: 1fr; }
  .kfg__tire-legend-item:nth-child(odd) { border-right: none; }
  .kfg__tire-legend-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .kfg__tire-legend-item:last-child { border-bottom: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   RDKS MODAL
   ═══════════════════════════════════════════════════════════════════════ */
.rdks-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.rdks-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: rdksFadeIn .25s ease;
}
@keyframes rdksFadeIn { from { opacity: 0; } to { opacity: 1; } }

.rdks-modal__card {
  position: relative; z-index: 1;
  background: var(--card, #fff);
  border-radius: 20px;
  padding: 28px 28px 24px;
  max-width: 580px; width: 94%;
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  animation: rdksSlideUp .35s cubic-bezier(.32,1,.3,1);
}
@keyframes rdksSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rdks-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--card-inner, #f5f5f7); border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text3, #86868B); transition: all .15s;
}
.rdks-modal__close:hover { background: var(--border); color: var(--text); }
.rdks-modal__close .material-symbols-rounded { font-size: 18px; }

/* Header */
.rdks-modal__header {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 20px;
}
.rdks-modal__icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(184,134,11,.1), rgba(184,134,11,.05));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rdks-modal__icon .material-symbols-rounded {
  font-size: 22px; color: var(--accent, #B8860B);
}
.rdks-modal__title {
  font-size: 17px; font-weight: 700; color: var(--text, #1D1D1F);
  margin: 0 0 3px; line-height: 1.3;
}
.rdks-modal__subtitle {
  font-size: 13px; color: var(--text3, #86868B);
  margin: 0; line-height: 1.45;
}

/* Auto-detect badge */
.rdks-modal__detect {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(184,134,11,.06);
  font-size: 12px; font-weight: 600; color: var(--accent, #B8860B);
  margin-bottom: 16px;
  animation: rdksFadeIn .3s ease .1s both;
}

/* Options row */
.rdks-modal__options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 16px;
}

.rdks-modal__opt {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 0;
  border: 1.5px solid var(--border, #e5e5e7);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
  color: inherit;
  overflow: hidden;
}
.rdks-modal__opt:hover {
  border-color: rgba(0,0,0,.2);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.rdks-modal__opt.is-selected {
  border-color: var(--accent, #B8860B);
  box-shadow: 0 0 0 3px rgba(184,134,11,.15);
}

/* Image fills the card top — with padding so it doesn't touch the edges */
.rdks-modal__opt-icon {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
  padding: 10px 10px 0;
  box-sizing: border-box;
}
.rdks-modal__opt-icon img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 8px;
}
.rdks-modal__opt-icon svg {
  width: 100%; height: 100%;
  padding: 16px;
  color: var(--text2, #6E6E73);
}


.rdks-modal__opt-label {
  font-size: 14px; font-weight: 700; color: var(--text, #1D1D1F);
  margin-bottom: 4px;
  padding: 12px 14px 0;
}
.rdks-modal__opt-desc {
  font-size: 11px; color: var(--text3, #86868B);
  line-height: 1.45; margin-bottom: 8px;
  padding: 0 14px;
}
.rdks-modal__opt-price {
  font-size: 12px; font-weight: 700; color: var(--text2, #6E6E73);
  padding: 0 14px 14px;
}
.rdks-modal__opt-price--cost {
  color: var(--accent, #B8860B);
}
.rdks-modal__opt-price--cost span {
  font-weight: 500; font-size: 10px; color: var(--text3);
}

/* Check indicator */
.rdks-modal__opt-check {
  position: absolute; top: 10px; right: 10px;
  opacity: 0; transform: scale(.7);
  transition: opacity .2s, transform .2s;
  color: var(--accent, #B8860B);
}
.rdks-modal__opt-check .material-symbols-rounded {
  font-size: 22px;
  font-variation-settings: 'FILL' 1;
}
.rdks-modal__opt.is-selected .rdks-modal__opt-check {
  opacity: 1; transform: scale(1);
}

/* Info box */
.rdks-modal__info {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--card-inner, #f5f5f7);
  font-size: 11px; color: var(--text3, #86868B);
  line-height: 1.5; margin-bottom: 18px;
}

/* Actions */
.rdks-modal__actions {
  display: flex; gap: 10px;
}
.rdks-modal__btn {
  flex: 1; padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.rdks-modal__btn--skip {
  background: #fff;
  border: 1.5px solid var(--border, #e5e5e7);
  color: var(--text3, #86868B);
}
.rdks-modal__btn--skip:hover {
  border-color: rgba(0,0,0,.2); color: var(--text);
}
.rdks-modal__btn--confirm {
  background: var(--text, #1D1D1F);
  border: none; color: #fff;
}
.rdks-modal__btn--confirm:disabled {
  opacity: .35; cursor: not-allowed;
}
.rdks-modal__btn--confirm:not(:disabled):hover {
  background: #333;
}

/* ── RDKS line in Config Summary Modal ── */
.cfg-modal-rdks-line {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(184,134,11,.05);
  margin-bottom: 16px;
  border: 1px solid rgba(184,134,11,.12);
}
.cfg-modal-rdks-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(184,134,11,.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cfg-modal-rdks-icon .material-symbols-rounded {
  font-size: 15px; color: var(--accent, #B8860B);
}
.cfg-modal-rdks-text {
  flex: 1; font-size: 12px; font-weight: 600;
  color: var(--text, #1D1D1F); line-height: 1.3;
}
.cfg-modal-rdks-text small {
  display: block; font-size: 10px; font-weight: 400;
  color: var(--text3); margin-top: 1px;
}
.cfg-modal-rdks-price {
  font-size: 14px; font-weight: 700;
  color: var(--accent, #B8860B); flex-shrink: 0;
}

/* ── RDKS badge on bar ── */
.kfg__bar-rdks-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(184,134,11,.08);
  font-size: 10px; font-weight: 600;
  color: var(--accent, #B8860B);
  margin-left: 8px; vertical-align: middle;
}

/* ═══ RESPONSIVE — RDKS MODAL ═══ */
@media (max-width: 520px) {
  .rdks-modal__card { padding: 20px 14px 16px; border-radius: 16px; }

  /* Die beiden Moeglichkeiten bleiben NEBENEINANDER, auch auf dem Telefon.
     Untereinander waren es zwei hohe Karten mit Bild, Ueberschrift, Text und
     Preis — der Dialog reichte damit weit ueber den Bildschirm hinaus, und
     man musste scrollen, um ueberhaupt zu sehen, dass es eine zweite
     Moeglichkeit gibt. Genau das ist bei einer Wahl zwischen zwei Dingen der
     falsche Aufbau: man vergleicht sie, und vergleichen kann man nur, was
     gleichzeitig zu sehen ist.

     Statt zu stapeln wird deshalb der Inhalt kleiner. Beides passt bei
     360 px Breite mit rund 150 px je Karte nebeneinander. */
  .rdks-modal__options { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .rdks-modal__opt { text-align: center; border-radius: 12px; }
  .rdks-modal__opt-icon { aspect-ratio: 16/10; padding: 8px 8px 0; }
  .rdks-modal__opt-icon img { border-radius: 6px; }
  .rdks-modal__opt-label { font-size: 12.5px; padding: 9px 8px 0; margin-bottom: 3px; }
  .rdks-modal__opt-desc { font-size: 10.5px; line-height: 1.4; padding: 0 8px; margin-bottom: 6px; }
  .rdks-modal__opt-price { font-size: 11px; padding: 0 8px 10px; line-height: 1.35; }
  .rdks-modal__opt-price--cost span { display: block; font-size: 9.5px; }
  .rdks-modal__opt-check { top: 6px; right: 6px; }
  .rdks-modal__opt-check .material-symbols-rounded { font-size: 18px; }
  .rdks-modal__actions { flex-direction: column; }
}

/* Sehr schmale Geraete (iPhone SE und aehnliche): die Spalten bleiben, nur
   die Schrift geht noch eine Stufe zurueck. Zwei Karten nebeneinander sind
   dort immer noch besser lesbar als eine Liste, durch die man scrollt. */
@media (max-width: 360px) {
  .rdks-modal__card { padding: 18px 10px 14px; }
  .rdks-modal__options { gap: 6px; }
  .rdks-modal__opt-label { font-size: 12px; }
  .rdks-modal__opt-desc { font-size: 10px; padding: 0 6px; }
  .rdks-modal__opt-price { font-size: 10.5px; padding: 0 6px 9px; }
}

/* ── Subtle border blink for size-tag hint ── */
@keyframes ffPulse {
  0%, 100% { border-color: var(--border); }
  50% { border-color: var(--accent); }
}
.ff-pulse {
  animation: ffPulse .6s ease 3 !important;
}

/* ═══ BEREIFUNGSART SELECT (uniform vs. staggered) ═══ */
/* Gesperrte Moeglichkeit: sichtbar, aber erkennbar nicht waehlbar — mit
   Begruendung im Schild darunter. Verschwinden waere die schlechtere
   Auskunft, siehe updateTireModeSelect(). */
.kfg__tiremode-card.is-gesperrt {
  opacity: .45; cursor: default; filter: saturate(.3);
}
.kfg__tiremode-card.is-gesperrt:hover { border-color: var(--border); background: var(--card-inner); }
.kfg__tiremode-card.is-gesperrt .kfg__tiremode-badge { opacity: 1; filter: none; }

.kfg__tiremode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kfg__tiremode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 13px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.kfg__tiremode-card:hover { border-color: var(--text3); }
.kfg__tiremode-card.is-active {
  border-color: var(--accent);
  background: rgba(184,134,11,.06);
  box-shadow: var(--shadow);
}
.kfg__tiremode-icon {
  font-size: 22px;
  color: var(--text3);
  margin-bottom: 4px;
}
.kfg__tiremode-card.is-active .kfg__tiremode-icon { color: var(--accent); }
.kfg__tiremode-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.kfg__tiremode-desc {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.35;
}
.kfg__tiremode-badge {
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #1B8A3A;
}
.kfg__tiremode-badge--muted { color: var(--text3); font-weight: 500; }
.kfg__tiremode-check {
  position: absolute;
  top: 9px;
  right: 9px;
  font-size: 18px;
  color: var(--accent);
  opacity: 0;
  transition: opacity .15s;
}
.kfg__tiremode-card.is-active .kfg__tiremode-check { opacity: 1; }

/* ── Auflagen der Felge (Konfigurator, Reifenschritt) ──────────────────
   Aufmachung der Reifenlegende, aber als Liste statt Raster: die Texte
   sind Gutachtensprache und teils mehrere Zeilen lang. */
.kfg__auflagen { padding: 16px 18px; }
.kfg__auflagen-kopf {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text3);
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.kfg__auflagen-liste { display: flex; flex-direction: column; gap: 11px; }
.kfg__auflagen-gruppe {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text3); margin: 3px 0 -3px;
}
.kfg__auflage { display: flex; gap: 10px; align-items: flex-start; }
.kfg__auflage-code {
  flex-shrink: 0; margin-top: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px;
  background: var(--card); color: var(--text3);
  border: 1px solid var(--border);
}
.kfg__auflage-text { font-size: 12.5px; line-height: 1.55; color: var(--text2); }
.kfg__auflagen-fuss {
  margin: 14px 0 0; padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.55; color: var(--text3);
}
.kfg__auflagen-zahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 5px;
  border-radius: 9px; background: rgba(184,134,11,.15);
  color: var(--accent); font-size: 10.5px; font-weight: 700;
}
@media (max-width: 640px) {
  .kfg__auflagen { padding: 14px; }
  .kfg__auflage-text { font-size: 12px; }
}

/* ── Zoll-Chips mit Freigabe-Hinweis ───────────────────────────────────
   Zweizeilig: Zollgroesse gross, darunter klein der Klartext. Das
   Warndreieck allein war ohne Tooltip nicht zu deuten. Der Chip waechst
   in der Hoehe, nicht in der Breite — die Reihe bleibt damit unabhaengig
   von der Zahl der Groessen stabil. */
/* Volle Zeile statt nebeneinander: die Seitenleiste ist 380px breit, drei
   Chips nebeneinander lassen je rund 86px fuer Text — "ABE – Eintragungsfrei"
   braucht mehr. Als Liste steht die Zollgroesse links, die Freigabe rechts,
   und beides bleibt lesbar, egal wie viele Groessen zur Wahl stehen. */
.kfg__wheel-chip.is-frei,
.kfg__wheel-chip.is-warn,
.kfg__wheel-chip.is-offen,
.kfg__wheel-chip.is-oos {
  flex: 0 0 100%;
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 8px 12px; line-height: 1.3; text-align: left;
}
.kfg__wheel-chip-zoll { font-size: 13px; font-weight: 600; flex-shrink: 0; }
.kfg__wheel-chip-fit {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; opacity: .95;
}
.kfg__wheel-chip-fit .material-symbols-rounded { font-size: 13px; }
.kfg__wheel-chip.is-frei  .kfg__wheel-chip-fit { color: #1B8A3A; }
.kfg__wheel-chip.is-warn  .kfg__wheel-chip-fit { color: var(--accent, #B8860B); }
.kfg__wheel-chip.is-offen .kfg__wheel-chip-fit { color: var(--text3); }
/* Ohne Bestand: sichtbar, lesbar, aber nicht waehlbar. Die Groesse ganz
   wegzulassen hiesse "gibt es nicht" — sie ist aber nur gerade nicht da. */
.kfg__wheel-chip.is-oos {
  opacity: .55; cursor: not-allowed;
  background: var(--bg); border-color: var(--border);
}
.kfg__wheel-chip.is-oos:hover { background: var(--bg); border-color: var(--border); transform: none; }
.kfg__wheel-chip.is-oos .kfg__wheel-chip-zoll { text-decoration: line-through; }
.kfg__wheel-chip.is-oos .kfg__wheel-chip-fit  { color: var(--text3); }
/* Im aktiven Zustand traegt der Chip schon die Akzentfarbe — der Hinweis
   darunter darf dann nicht damit konkurrieren. */
.kfg__wheel-chip.is-active .kfg__wheel-chip-fit { opacity: .75; }
@media (max-width: 420px) {
  .kfg__wheel-chip-fit { font-size: 9.5px; }
  .kfg__wheel-chip-fit .material-symbols-rounded { font-size: 12px; }
}

/* Grund im Klartext ueber der Auflagenliste */
.kfg__auflagen-grund {
  display: flex; align-items: center; gap: 6px;
  margin: -4px 0 12px; padding: 8px 11px;
  border-radius: 8px; font-size: 12.5px; font-weight: 600;
}
.kfg__auflagen-grund .material-symbols-rounded { font-size: 15px; flex-shrink: 0; }
.kfg__auflagen-grund.is-frei { background: rgba(27,138,58,.10); color: #1B8A3A; }
.kfg__auflagen-grund.is-warn { background: rgba(184,134,11,.12); color: var(--accent, #B8860B); }
.kfg__auflagen-grund[hidden] { display: none; }

/* Schild "Freigabe wird geprueft" — neutral, solange die Gutachtenpruefung
   noch laeuft oder die API keine Aussage trifft. Frueher stand dort
   pauschal "Passend", auch bei ungeprueften Serien. */
.kfg__pcard-compat--pruef { background: rgba(0,0,0,.05); color: #6b7280; }
.kfg__pcard-compat--pruef::before { background: #9ca3af; }

/* Freigabe-Schild an den Serienkarten der Seitenleiste.
   Steht rechts in derselben Zeile, kurz vor dem Pfeil — nicht mehr unter
   dem Preis. Dort erzeugte es eine dritte Zeile je Karte, und bei vier
   Serien untereinander verschwand die letzte aus dem sichtbaren Bereich.
   Der Platz rechts war ohnehin leer. */
.kfg__wheel-model-fit {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 980px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  flex-shrink: 0; white-space: nowrap; align-self: center;
}
.kfg__wheel-model-fit::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.kfg__wheel-model-fit.kfg__pcard-compat--ok { background: rgba(27,138,58,.13); color: #1B8A3A; }
.kfg__wheel-model-fit.kfg__pcard-compat--ok::before { background: #1B8A3A; }
.kfg__wheel-model-fit.kfg__pcard-compat--pruef { background: rgba(0,0,0,.05); color: #6b7280; }
.kfg__wheel-model-fit.kfg__pcard-compat--pruef::before { background: #9ca3af; }

/* Nicht freigegeben — sichtbar, aber erkennbar nicht waehlbar.
   Ausblenden war die schlechtere Auskunft: bei einem Fahrzeug ohne eine
   einzige Freigabe blieb ein leeres Raster zurueck, und niemand konnte
   sehen, ob die Felgen nicht passen oder ob etwas kaputt ist. */
.kfg__pcard-compat--nein { background: rgba(220,38,38,.10); color: #dc2626; }
.kfg__pcard-compat--nein::before { background: #dc2626; }
.kfg__wheel-model-fit.kfg__pcard-compat--nein { background: rgba(220,38,38,.10); color: #dc2626; }
.kfg__wheel-model-fit.kfg__pcard-compat--nein::before { background: #dc2626; }

.kfg__pcard.is-unfit,
.kfg__wheel-model-card.is-unfit {
  opacity: .5;
  cursor: default;
  filter: saturate(.35);
}
.kfg__pcard.is-unfit:hover,
.kfg__wheel-model-card.is-unfit:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
/* Das Schild bleibt voll lesbar — es traegt ja die Begruendung. */
.kfg__pcard.is-unfit .kfg__pcard-compat,
.kfg__wheel-model-card.is-unfit .kfg__wheel-model-fit { opacity: 1; filter: none; }
/* Schalter auf einer nicht passenden Karte waeren eine Einladung. */
.kfg__pcard.is-unfit .kfg__pcard-tire-btn,
.kfg__pcard.is-unfit .kfg__pcard-cta,
.kfg__pcard.is-unfit .kfg__pcard-action { display: none; }

/* Unter 360 px wird es in einer Zeile eng: dann darf das Schild wieder
   umbrechen, statt Name und Preis auf Punkte zu kuerzen. */
@media (max-width: 360px) {
  .kfg__wheel-model-card { flex-wrap: wrap; }
  /* Alle vier ausdruecklich sortieren: ohne 'order' am Pfeil rutschte der
     mit seinem Vorgabewert 0 an den Anfang der Karte. */
  .kfg__wheel-model-card > img   { order: 1; }
  .kfg__wheel-model-info         { order: 2; }
  .kfg__wheel-model-arrow        { order: 3; }
  .kfg__wheel-model-fit          { order: 4; flex-basis: 100%; margin-left: 64px; }
}

/* ── Motorisierungen: zwei Zeilen statt einer gequetschten ─────────────
   Vorher stand Name links und "diesel · 02/12 - 04/13" rechts in EINER
   Zeile (space-between). In der 380 Pixel breiten Leiste brach der Name
   um, die Angaben rutschten darunter, und jede Zeile war unterschiedlich
   hoch — bei fuenfzehn Motorisierungen unlesbar.
   Jetzt: Motor und Leistung oben, Kraftstoff und Bauzeit darunter. Die
   Leistung steht rechtsbuendig mit Tabellenziffern, damit die Zahlen
   untereinander eine Spalte bilden — danach sucht man. */
.kfg__list-item.kfg__motor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 10px 14px;
}
.kfg__motor-zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.kfg__motor-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.kfg__motor-ps {
  flex-shrink: 0; font-size: 13.5px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kfg__motor-ps small { font-size: 10.5px; font-weight: 600; color: var(--text3); }

.kfg__motor-zeile--klein { align-items: center; }
.kfg__motor-meta {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
}
.kfg__motor-jahre {
  font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kfg__motor-kw {
  flex-shrink: 0; font-size: 11px; color: var(--text3);
  font-variant-numeric: tabular-nums;
}

/* Kraftstoff als kleines Schild. Eigene, gedeckte Farben — bewusst NICHT
   der Goldakzent, der gehoert der Auswahl. */
.kfg__motor-kraftstoff {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 980px; white-space: nowrap;
}
.kfg__motor-kraftstoff::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}
.kfg__motor-kraftstoff.is-diesel  { background: rgba(120,113,108,.14); color: #57534E; }
.kfg__motor-kraftstoff.is-benzin  { background: rgba(37,99,235,.11);   color: #1D4ED8; }
.kfg__motor-kraftstoff.is-hybrid  { background: rgba(13,148,136,.12);  color: #0F766E; }
.kfg__motor-kraftstoff.is-strom   { background: rgba(22,163,74,.12);   color: #15803D; }
.kfg__motor-kraftstoff.is-ethanol { background: rgba(101,163,13,.13);  color: #4D7C0F; }
.kfg__motor-kraftstoff.is-gas     { background: rgba(217,119,6,.12);   color: #B45309; }

/* ── Schritt 3: Baureihe und Ausfuehrung ──────────────────────────
   Gleicher Aufbau wie die Motorisierungen darunter: oben der Name mit der
   Bauzeit rechtsbuendig neben der Baureihe. Frueher stand sie zusammen mit
   der Zahl der Motorisierungen im Fliesstext und brach in der schmalen
   Leiste um; rechts in eigener Spalte bilden die Jahreszahlen eine Linie,
   an der man die Liste ueberfliegen kann. */
.kfg__gen-jahre {
  flex-shrink: 0; font-size: 11.5px; color: var(--text3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.kfg__list-item.kfg__motor.is-active .kfg__gen-jahre { color: var(--text2, #6b7280); }

/* Ausgewaehlt: der Name traegt die Akzentfarbe, die Angaben bleiben ruhig. */
.kfg__list-item.kfg__motor.is-active .kfg__motor-name,
.kfg__list-item.kfg__motor.is-active .kfg__motor-ps { color: var(--accent); }

@media (max-width: 420px) {
  .kfg__motor-name { font-size: 13px; }
  .kfg__motor-jahre { font-size: 10.5px; }
  .kfg__gen-jahre { font-size: 10.5px; }
}


/* ═══ DIALOGE AUF DEM TELEFON ═══
   Fahrzeug-Dialog: Kopfzeile war fuer den Desktop gebaut — 56-px-Symbolkachel,
   20-px-Titel und Schliessknopf nebeneinander. Auf 390 px brach der Titel
   in zwei Zeilen und die Reiter "HSN / TSN" und "Fahrzeug waehlen" standen
   ungleich hoch, weil der zweite umbrach. Alles eine Nummer kleiner und die
   Reiter gleich breit, einzeilig. */
@media (max-width: 600px) {
  #kfg-vehicle-modal .dm-modal__content { width: 94%; max-height: 90dvh; border-radius: 16px; }
  #kfg-vehicle-modal .dm-modal__header { padding: 14px 16px; gap: 12px; }
  #kfg-vehicle-modal .dm-modal__header-img { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
  #kfg-vehicle-modal .dm-modal__header-img .material-symbols-rounded { font-size: 22px !important; }
  #kfg-vehicle-modal .dm-modal__header-text > span { font-size: 10px !important; }
  #kfg-vehicle-modal #kfg-modal-title { font-size: 17px !important; line-height: 1.25; }
  #kfg-vehicle-modal .dm-modal__close { width: 30px; height: 30px; flex-shrink: 0; }
  #kfg-vehicle-modal .ff-modal-tabs { padding: 10px 16px; gap: 6px; }
  #kfg-vehicle-modal .ff-modal-tab {
    flex: 1 1 0; min-width: 0; padding: 9px 6px; font-size: 12.5px;
    white-space: nowrap; gap: 5px;
  }
  #kfg-vehicle-modal .ff-modal-tab .material-symbols-rounded { font-size: 16px; }
  #kfg-vehicle-modal .dm-modal__body { padding: 16px !important; }
  #kfg-vehicle-modal .dm-modal__body p { margin-bottom: 14px !important; }
  #kfg-vehicle-modal .dm-modal__content > div:last-child { padding: 0 16px 16px !important; }
  #kfg-vehicle-modal #kfg-modal-submit { padding: 12px !important; font-size: 13.5px !important; }
  #kfg-vehicle-modal #kfg-modal-hsn,
  #kfg-vehicle-modal #kfg-modal-tsn { font-size: 16px !important; } /* iOS zoomt bei < 16 px ins Feld */

  /* Konfigurations-Uebersicht */
  #kfg-config-modal > div { padding: 22px 16px 16px !important; width: 94% !important; border-radius: 16px !important; }
  #kfg-config-modal h3 { font-size: 16px !important; padding-right: 32px; }

  /* RDKS / Bereifungsart: Titel lief unter den Schliessknopf, Karte konnte
     auf kleinen Telefonen ueber den Rand hinausreichen. */
  .rdks-modal__card { max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rdks-modal__header { padding-right: 36px; gap: 10px; margin-bottom: 14px; }
  .rdks-modal__icon { width: 36px; height: 36px; border-radius: 10px; }
  .rdks-modal__icon .material-symbols-rounded { font-size: 20px !important; }
  .rdks-modal__title { font-size: 15px; }
  .rdks-modal__subtitle { font-size: 12px; }
  .rdks-modal__info { font-size: 11px; }
  .rdks-modal__btn--confirm { width: 100%; justify-content: center; }
}

/* ── Schliessknoepfe der Dialoge auf Touch-Geraeten ──
   homepage.css setzt unter '@media (hover: none)' .rdks-modal__close auf
   'position: relative', um per ::after eine 44-px-Tippflaeche zu bekommen.
   Damit verlor der Knopf sein 'absolute; top/right' und stand am Telefon
   als erstes Kind der Karte oben LINKS im Textfluss. Die Tippflaeche
   funktioniert mit 'absolute' genauso — also hier hoehere Spezifitaet. */
.rdks-modal .rdks-modal__close { position: absolute; top: 14px; right: 14px; z-index: 3; }
#kfg-config-modal #kfg-config-modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; }
#kfg-vehicle-modal .dm-modal__close { position: relative; margin-left: auto; }

/* ── Fahrzeug-Dialog: eckige Oberkante ──
   checkout.css macht die Kopfzeile 'sticky' mit eigenem weissem Hintergrund
   und der Inhalt ist 'overflow: visible' (Aufklappfelder). Die weisse
   Kopfzeile ragt damit ueber die runden Ecken der Karte — sichtbar als
   eckige Oberkante mit doppelter Kontur (Kartenrahmen + Kopfzeilen-Linie). */
#kfg-vehicle-modal .dm-modal__content { border: none; }
#kfg-vehicle-modal .dm-modal__header { position: static; border-radius: 16px 16px 0 0; }
#kfg-vehicle-modal .dm-modal__content > div:last-child { border-radius: 0 0 16px 16px; }


/* ═══ Farbfilter ueber dem Felgenraster ═══════════════════════════════
   Der Schalter sieht aus wie "Gruppiert"/"Einzeln" daneben — er gehoert
   zur selben Werkzeugreihe. Die Farbleiste klappt darunter auf. */
.kfg__farb-btn {
  position: relative;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card-inner); height: 32px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text);
  font-family: inherit; cursor: pointer; flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.kfg__farb-btn:hover { border-color: var(--text3); }
.kfg__farb-btn.is-active { border-color: var(--accent); background: rgba(184,134,11,.06); color: var(--accent); }
.kfg__farb-btn .material-symbols-rounded { font-size: 16px; }
/* Der Punkt zeigt die gewaehlte Farbe — kuerzer als ihr Name und in der
   Reihe neben den anderen Schaltern die einzige Angabe, die Platz hat. */
.kfg__farb-punkt {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 1.5px rgba(255,255,255,.6);
}
.kfg__farb-punkt[hidden] { display: none; }

.kfg__farbfilter {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 14px; padding: 10px 0 0;
  border-top: 1px solid var(--border);
  animation: kfgFadeSlideDown .2s ease;
}
.kfg__farbfilter[hidden] { display: none; }
.kfg__farb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 12px; font-weight: 600; color: var(--text2);
  font-family: inherit; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.kfg__farb-chip:hover { border-color: var(--text3); color: var(--text); }
.kfg__farb-chip.is-active {
  border-color: var(--accent); color: var(--accent);
  background: rgba(184,134,11,.07);
}
.kfg__farb-tupfen {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

/* Die Farbwahl blendet ueber ein eigenes Feld aus — nicht ueber
   'display', auf dem schon die Passform-Pruefung schreibt. So muessen
   beide Bedingungen erfuellt sein, damit eine Karte steht. */
.kfg__pcard[data-farbfilter="0"] { display: none !important; }

@media (max-width: 768px) {
  .kfg__farbfilter { gap: 5px; margin-bottom: 10px; }
  .kfg__farb-chip { font-size: 11.5px; padding: 5px 9px; }
}


/* ═══ Wegweiser auf "Konfigurieren" (nur Leerzustand) ═════════════════
   Ein Pfeil in der Akzentfarbe, der auf den Knopf daneben zeigt. Die
   Bewegung ist absichtlich klein: drei Pixel hin und zurueck, langsam,
   und sie haelt zwischendurch an. Etwas Blinkendes in einer festen Leiste
   am unteren Bildschirmrand wird binnen Sekunden zur Stoerung — es soll
   auffallen, wenn man sucht, und verschwinden, wenn man liest.

   Sichtbar nur, solange die Leiste keinen Zustand hat: sobald eine Felge
   gewaehlt ist ('has-product'), gibt es mehrere sinnvolle Wege. */
.kfg__mob-pfeil { display: none; }
.kfg__mob-bar .kfg__mob-pfeil {
  align-items: center; justify-content: center;
  color: var(--accent, #B8860B);
  flex-shrink: 0; margin-right: -2px;
  pointer-events: none;
}
/* Zwei schlanke Pfeilspitzen dicht hintereinander ergeben den Doppelpfeil,
   ohne ein Zeichen zu brauchen, das der Auszug nicht hat. Die zweite laeuft
   leicht versetzt — daraus entsteht die Richtung, ohne dass sich etwas weit
   bewegen muss.

   'keyboard_double_arrow_right' waere das passende Einzelzeichen, steht
   aber nicht in inc/tools/icons.txt und wurde deshalb als Text angezeigt.
   Der Auszug enthaelt genau die 336 benutzten Namen; neue kommen nur ueber
   inc/tools/subset_icons.py hinein. */
.kfg__mob-pfeil { gap: 0; }
.kfg__mob-pfeil .material-symbols-rounded {
  font-size: 20px;
  font-variation-settings: 'wght' 400;
  animation: kfgWink 1.8s ease-in-out infinite;
}
.kfg__mob-pfeil .material-symbols-rounded:first-child {
  margin-right: -7px;
  opacity: .55;
  animation-delay: -.18s;
}
.kfg__mob-bar:not(.has-product):not(.has-complete) .kfg__mob-pfeil { display: flex; }

@keyframes kfgWink {
  0%, 55%, 100% { transform: translateX(0); opacity: .8; }
  25%           { transform: translateX(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kfg__mob-pfeil .material-symbols-rounded { animation: none; opacity: .9; }
}


/* Sehr schmale Geraete: drei Bedienelemente plus Zaehler passen nicht in
   eine Zeile (Filter ~78 px, Zaehler ~70, Umschalter ~170, dazu Abstaende —
   bei rund 316 px nutzbarer Breite fehlen etwa zwanzig). Der Zaehler
   weicht als Erstes: direkt darueber steht "Passende Felgen", und die Zahl
   kommt ab 480 px und am Schreibtisch zurueck. Ein abgeschnittener
   Umschalter waere der schlechtere Tausch — den braucht man zum Bedienen,
   die Zahl nur zur Kenntnis. */
@media (max-width: 479px) {
  .kfg__products-head-right .kfg__products-count { display: none; }
}


/* Der erste Schritt in der Akzentfarbe — aber nur, solange er der EINZIGE
   ist. Sobald eine Felge gewaehlt ist, steht rechts daneben "Kaufen", und
   zwei farbige Vollflaechen nebeneinander heben sich gegenseitig auf: dann
   traegt der Knopf wieder seine ruhige Form, und die Farbe gehoert dem
   Kaufen. */
.kfg__mob-bar:not(.has-product):not(.has-complete) .kfg__mob-config-btn {
  background: var(--accent, #B8860B);
  border-color: var(--accent, #B8860B);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(184,134,11,.28);
}
.kfg__mob-bar:not(.has-product):not(.has-complete) .kfg__mob-config-btn .material-symbols-rounded { color: #fff; }


/* Sehr schmale Geraete: "Jetzt Konfigurieren" plus Doppelpfeil plus
   Preisblock werden eng. Der Pfeil weicht dann — er ist der Wegweiser, der
   Knopf ist das Ziel, und ein Wegweiser darf fehlen, wenn das Ziel ohnehin
   die halbe Leiste einnimmt und farbig ist. */
@media (max-width: 359px) {
  .kfg__mob-bar .kfg__mob-pfeil { display: none !important; }
  .kfg__mob-config-btn { padding: 0 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERKUNFTSHINWEIS ZU DEN FAHRZEUGDARSTELLUNGEN
   Ein 16-px-Zeichen, das erst auf Klick etwas sagt. Es sitzt in Zeilen, die
   es ohnehin gibt (der Schrittleiste oben links auf den Bildkarten), und
   nimmt mit 'position:absolute' fuer die Sprechblase keinen Platz im Fluss —
   die Karte sieht ohne den Klick genauso aus wie vorher.
   ═══════════════════════════════════════════════════════════════════════ */
.ff-bhw { position: relative; display: inline-flex; align-items: center; }
.ff-bhw__knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  height: 20px; padding: 0 5px 0 6px; border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; cursor: help;
  opacity: .45; transition: opacity .15s ease;
}
.ff-bhw__knopf:hover, .ff-bhw__knopf[aria-expanded="true"] { opacity: .9; }
.ff-bhw__knopf .material-symbols-rounded { font-size: 14px; line-height: 1; }
/* "AI (i)" — Kennzeichnung der KI-Darstellung, dezent wie das Zeichen daneben */
.ff-bhw__ai { font: 700 9.5px/1 var(--font, system-ui); letter-spacing: .06em; }

.ff-bhw__box {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  display: block; width: max-content; max-width: min(300px, 78vw);
  padding: 10px 12px; border-radius: 10px;
  background: #fff; color: var(--text, #1d1d1f);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  font-size: 11.5px; line-height: 1.45; font-weight: 500;
  text-align: left; white-space: normal; text-transform: none; letter-spacing: 0;
}
.ff-bhw__box[hidden] { display: none !important; }
/* Geoeffnet: am <body>, 'fixed' am Knopf (bild-hinweis.php, setzen()) */
.ff-bhw__box.is-schwebend { position: fixed; z-index: 10050; max-width: calc(100vw - 24px); }
.ff-bhw__box strong { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; }

/* Auf den dunklen Bildkarten ist das Zeichen weiss. */
.ff-bhw--hell .ff-bhw__knopf { color: #fff; opacity: .55; }
.ff-bhw--hell .ff-bhw__knopf:hover,
.ff-bhw--hell .ff-bhw__knopf[aria-expanded="true"] { opacity: 1; }

/* Steht das Zeichen am rechten Rand, klappt die Blase nach links auf. */
.ff-bhw--rechts .ff-bhw__box { left: auto; right: 0; }

/* Auf den Bildkarten nur zeigen, solange dort wirklich Fahrzeugbilder
   laufen — ueber dem Werbevideo waere der Hinweis sinnlos. */
.ff-bhw--viz { display: none; }
.ff-cfgviz-tall .ff-bhw--viz { display: inline-flex; }

/* ── "Anpassen": Ansehen und Auswaehlen sind zweierlei ──────────────────
   Ein Klick im Popover aendert nur das Bild. Erst die Fussleiste uebernimmt
   die Felge in die eigentliche Auswahl — vorher kostete ein neugieriger
   Klick die komplette bisherige Zusammenstellung. */
/* Das Popover ist jetzt zweizeilig: oben die Abschnitte nebeneinander,
   darunter die Fussleiste ueber die volle Breite. Als viertes Kind der
   Reihe waere der Knopf sonst eine weitere Spalte geworden — senkrecht
   neben den Listen statt darunter. */
.ff-cfgviz-reihe { display: flex; align-items: stretch; gap: 0; }

/* Die Spaltenbreiten nach Inhalt, nicht ueber einen Kamm.
   "Größe" traegt neben der Zollzahl die Freigabe ("ABE – Eintragungsfrei",
   "Gutachten (Auflagen)") — das ist der laengste Text der ganzen Auswahl
   und bekommt deshalb die breiteste Spalte. Modell steht am anderen Ende:
   dort stehen vier Kuerzel. */
.ff-cfgviz-gruppe--modell   { min-width: 112px; }
.ff-cfgviz-gruppe--felge    { min-width: 150px; }
.ff-cfgviz-gruppe--groesse  { min-width: 236px; }
.ff-cfgviz-gruppe--fahrzeug { min-width: 150px; }

/* In der breiten Spalte passt die Freigabe neben die Zollzahl statt
   darunter — eine Zeile je Groesse liest sich ruhiger. */
.ff-cfgviz-gruppe--groesse .ff-cfgviz-option { flex-wrap: nowrap; }
.ff-cfgviz-gruppe--groesse .ff-cfgviz-option-schild {
  margin-left: auto;
}
.ff-cfgviz-fussleiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.ff-cfgviz-fuss-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ff-cfgviz-fuss-was {
  font-size: 11px; font-weight: 600; color: rgba(0,0,0,.45); letter-spacing: .01em;
}
.ff-cfgviz-uebernehmen {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 10px 18px; border: none; border-radius: 980px;
  background: var(--accent, #B8860B); color: #fff;
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(184,134,11,.28);
  cursor: pointer; transition: filter .15s ease, transform .15s ease;
}
.ff-cfgviz-uebernehmen:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ff-cfgviz-uebernehmen.is-aus,
.ff-cfgviz-uebernehmen:disabled {
  background: rgba(0,0,0,.07); color: rgba(0,0,0,.38);
  box-shadow: none; cursor: not-allowed;
}
.ff-cfgviz-uebernehmen:disabled:hover { filter: none; transform: none; }
.ff-cfgviz-uebernehmen .material-symbols-rounded { font-size: 16px; }
.ff-cfgviz-hinweis {
  font-size: 10.5px; line-height: 1.35; color: rgba(0,0,0,.5); font-weight: 500;
}

/* Nicht lieferbar: sichtbar, aber erkennbar. Anklickbar bleibt es — das
   Bild darf man sich ansehen, uebernehmen laesst es sich nicht. */
.ff-cfgviz-option.is-oos { opacity: .5; }
.ff-cfgviz-option.is-oos .ff-cfgviz-option-text { text-decoration: line-through; }

/* Freigabe und Lieferbarkeit stehen am Eintrag selbst — die Entscheidung
   faellt hier, nicht erst zwei Schritte spaeter. Zweite Zeile statt
   Anhaengsel: die Spalte bleibt damit schmal.

   Als Schild mit Zeichen, nicht als nackter Text: genau so steht die
   Freigabe auf den Zoll-Chips der Seitenleiste, auf den Karten im Raster
   und im Banner. Ein blosses Wort an dieser einen Stelle waere der einzige
   Ort im Shop, an dem sie anders aussieht. */
.ff-cfgviz-option { flex-wrap: wrap; row-gap: 2px; }
.ff-cfgviz-option-schild {
  flex: 0 0 auto; padding: 2px 8px 2px 6px;
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600; line-height: 1.3;
  color: rgba(0,0,0,.5); background: rgba(0,0,0,.05);
  letter-spacing: .01em; white-space: nowrap;
}
.ff-cfgviz-option-schild .material-symbols-rounded { font-size: 13px; }
.ff-cfgviz-option-schild.is-frei  { color: #1B8A3A; background: rgba(27,138,58,.10); }
.ff-cfgviz-option-schild.is-warn  { color: var(--accent, #B8860B); background: rgba(184,134,11,.12); }
.ff-cfgviz-option-schild.is-weg   { color: #C23934; background: rgba(220,38,38,.08); }
.ff-cfgviz-option-schild.is-offen { color: rgba(0,0,0,.45); background: rgba(0,0,0,.05); }
.ff-cfgviz-option-schild.is-aus   { color: rgba(0,0,0,.45); background: rgba(0,0,0,.05); }

/* Der Zustand der Vorschau, direkt ueber dem Knopf. */
.ff-cfgviz-stand {
  display: block; font-size: 11px; font-weight: 700; line-height: 1.3;
  color: rgba(0,0,0,.55);
}
.ff-cfgviz-stand.is-frei  { color: #1B8A3A; }
.ff-cfgviz-stand.is-warn  { color: var(--accent, #B8860B); }
.ff-cfgviz-stand.is-weg   { color: #C23934; }
.ff-cfgviz-stand.is-offen { color: rgba(0,0,0,.5); }
.ff-cfgviz-stand.is-aus   { color: #b42318; }

/* Das Popover steht am Telefon in einer Spalte und scrollt als Ganzes —
   die Fussleiste muss dort mit hineinpassen. */
@media (max-width: 768px) {
  .ff-cfgviz-tall .ff-cfgviz-fussleiste { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ANPASSEN — der Dialog zur Bildkarte
   Ansichten gross, Auswahl daneben, Uebernahme am Fuss. Geoeffnet vom
   einen Knopf in der Bildkarte (.ff-cfgviz-anpassen, weiter oben).
   ═══════════════════════════════════════════════════════════════════════ */
.ff-fzgm { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ff-fzgm[hidden] { display: none !important; }
.ff-fzgm__hinter { position: absolute; inset: 0; background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ff-fzgm__box {
  position: relative; z-index: 1;
  /* Hoehe nach Inhalt, nur nach oben begrenzt. Eine feste Hoehe hatte die
     grosse Ansicht zwar gefuellt — aber gefuellt wurde sie mit Nichts: das
     Foto ist 16:9, der Platz war hoeher, und was blieb, waren zwei graue
     Streifen ueber und unter dem Auto. Lieber laesst die Box das Bild in
     seiner echten Form und richtet sich selbst danach. */
  width: min(1100px, 100%); height: auto;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column;
  background: var(--card, #fff); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.ff-fzgm__kopf {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.ff-fzgm__griff { display: none; }
/* Linksbuendig: mittig stand er ueber dem Bild in der Luft, waehrend der
   Schliessen-Knopf rechts sitzt — die Kopfzeile wirkte dadurch schief. */
.ff-fzgm__titel { flex: 1; margin: 0; font-size: 14px; font-weight: 700; color: var(--text); text-align: left; }
.ff-fzgm__zu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 980px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text2); cursor: pointer; flex-shrink: 0;
}
.ff-fzgm__zu:hover { color: var(--text); border-color: var(--text3); }
.ff-fzgm__zu .material-symbols-rounded { font-size: 18px; }

/* Der Streifen unter der grossen Ansicht: alle vier Perspektiven
   nebeneinander, die gezeigte markiert. */
.ff-fzgm__raster {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 0 16px 16px; flex: 0 0 auto;
}
.ff-fzgm__kachel {
  position: relative; padding: 0; overflow: hidden;
  border: 2px solid transparent; border-radius: 12px;
  background: #e1e3e3; aspect-ratio: 16 / 9; cursor: pointer;
  transition: border-color .15s ease, opacity .15s ease;
  opacity: .72;
}
.ff-fzgm__kachel:hover { opacity: 1; }
.ff-fzgm__kachel.is-active { border-color: var(--accent, #B8860B); opacity: 1; }
.ff-fzgm__kachel img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(1.016, 1.042); }
.ff-fzgm__label {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 7px; border-radius: 980px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 10.5px; font-weight: 600;
}
.ff-fzgm__laedt { grid-column: 1 / -1; padding: 48px 16px; text-align: center; font-size: 13px; color: var(--text3); }

/* Die grosse Ansicht in ihrem eigenen Mass; ist die Auswahl daneben
   laenger, steht sie mittig statt oben angeschlagen. */
.ff-fzgm__einzel {
  position: relative;
  display: flex; align-items: center;
  padding: 14px 16px 10px; flex: 0 0 auto; min-height: 0;
}
.ff-fzgm__buehne {
  flex: 1; margin: 0; min-width: 0;
  display: flex; flex-direction: column;
}
/* Die Hoehe gibt den Ton an, die Breite folgt dem Seitenverhaeltnis.
   Vorher war es umgekehrt: das Bild lief ueber die volle Breite, 'contain'
   liess oben und unten Luft, und die Hintergrundfarbe machte daraus zwei
   graue Balken — eine Flaeche, die so tut, als gehoere sie zum Foto.
   Ohne Fuellfarbe und mit passender Breite endet die Platte dort, wo das
   Foto endet. */
.ff-fzgm__buehne img {
  display: block; width: 100%; height: auto;
  max-height: calc(100vh - 300px);
  max-height: calc(100dvh - 300px);
  object-fit: contain; border-radius: 12px; background: none;
}
.ff-fzgm__buehne figcaption {
  flex: 0 0 auto; margin-top: 8px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--text2);
}
/* Die Pfeile liegen IM Bild, nicht daneben: als eigene Spalten nahmen sie
   links und rechts zusammen rund hundert Pixel, die dem Foto fehlten —
   und das auf der einen Seite, an der Platz knapp ist. Senkrecht mittig
   ueber der Bildflaeche, also ohne die Bildunterschrift darunter. */
.ff-fzgm__pfeil {
  position: absolute; z-index: 2;
  top: calc(50% - 15px); transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--text2); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition: background .15s ease, color .15s ease;
}
.ff-fzgm__pfeil--vor  { left: 22px; }
.ff-fzgm__pfeil--nach { right: 22px; }
.ff-fzgm__pfeil:hover { background: #fff; color: var(--text); }
.ff-fzgm__pfeil .material-symbols-rounded { font-size: 22px; }

/* ── Anpassen im Dialog ───────────────────────────────────────────────
   Gross angesehen wird ja, um zu entscheiden. Bisher endete der Dialog
   genau davor: wer die Farbe wechseln wollte, musste schliessen, unten in
   der Karte "Anpassen" oeffnen und erneut vergroessern.

   Am Schreibtisch steht die Auswahl deshalb als eigene Spalte neben den
   Bildern, am Telefon darunter. Die Eintraege selbst sind dieselben wie im
   Auswahl selbst (.ff-cfgviz-gruppe/-option) — hier stehen nur die
   Abweichungen: untereinander statt nebeneinander, volle Breite, und der
   Uebernehmen-Knopf bleibt beim Scrollen unten stehen. */
.ff-fzgm__inhalt { display: flex; flex: 1; min-height: 0; }
.ff-fzgm__bilder {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.ff-fzgm__anpassen {
  flex: 0 0 288px; display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--border); background: var(--bg);
}
.ff-fzgm__anpassen[hidden] { display: none !important; }
.ff-fzgm__anpassen-kopf {
  margin: 0; padding: 14px 16px 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text3);
}
.ff-fzgm__anpassen-inhalt {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 12px 12px; -webkit-overflow-scrolling: touch;
}
.ff-fzgm__anpassen .ff-cfgviz-reihe { flex-direction: column; gap: 4px; }
.ff-fzgm__anpassen .ff-cfgviz-gruppe {
  min-width: 0; width: 100%; max-height: none; overflow: visible; padding: 0;
}
.ff-fzgm__anpassen .ff-cfgviz-gruppe + .ff-cfgviz-gruppe {
  border-left: none; border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 4px; padding-top: 6px;
}
.ff-fzgm__anpassen .ff-cfgviz-option { white-space: normal; }

/* ── Fahrzeugfarben: Punkte statt Liste ──
   Acht Lackfarben untereinander waren die laengste Liste der Spalte und
   zugleich die, die am wenigsten zu lesen gibt — "Weiß" neben einem weissen
   Punkt sagt nichts, was der Punkt nicht schon sagt. Als Reihe von Punkten
   braucht dieselbe Auswahl zwei Zeilen statt acht, und darunter bleibt Platz
   fuer das, was wirklich Worte braucht (Freigabe, Lieferbarkeit).
   Der Name geht dabei nicht verloren: er steht am Element ('title') und wird
   nur nicht mehr gezeichnet. Die Felgenfarben bleiben bewusst eine Liste —
   dort ist der Name die Kaufentscheidung. */
.ff-fzgm__anpassen .ff-cfgviz-gruppe--fahrzeug {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px;
}
.ff-fzgm__anpassen .ff-cfgviz-gruppe--fahrzeug .ff-cfgviz-gruppe-titel {
  flex: 0 0 100%; padding-bottom: 0;
}
.ff-fzgm__anpassen .ff-cfgviz-gruppe--fahrzeug .ff-cfgviz-option {
  padding: 3px; border-radius: 50%; background: none;
  box-shadow: 0 0 0 1px transparent;
  transition: box-shadow .15s ease;
}
.ff-fzgm__anpassen .ff-cfgviz-gruppe--fahrzeug .ff-cfgviz-option:hover {
  background: none; box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.ff-fzgm__anpassen .ff-cfgviz-gruppe--fahrzeug .ff-cfgviz-option.is-active {
  background: none; box-shadow: 0 0 0 2px var(--accent, #B8860B);
}
.ff-fzgm__anpassen .ff-cfgviz-gruppe--fahrzeug .ff-cfgviz-option-text { display: none; }
/* Acht Farben, eine Reihe: die Spalte ist 288 px breit, abzueglich
   Polsterung bleiben rund 264 — bei 20 px Punkt, 3 px Rand und 2 px Abstand
   sind das 8 x 30 = 240. Enger als in einer Liste, aber ein Farbpunkt
   braucht keinen Abstand zum Lesen, nur zum Treffen. */
.ff-fzgm__anpassen .ff-cfgviz-gruppe--fahrzeug .ff-cfgviz-option {
  padding: 3px;
}
.ff-fzgm__anpassen .ff-cfgviz-gruppe--fahrzeug .ff-cfgviz-swatch__dot {
  width: 20px; height: 20px;
}
@media (max-width: 768px) {
  /* Am Telefon ist die Spalte so breit wie der Dialog — dort darf der
     Punkt wieder groesser sein, er wird mit dem Finger getroffen. */
  .ff-fzgm__anpassen .ff-cfgviz-gruppe--fahrzeug { gap: 6px; }
  .ff-fzgm__anpassen .ff-cfgviz-gruppe--fahrzeug .ff-cfgviz-swatch__dot {
    width: 24px; height: 24px;
  }
}
/* Die Freigabe steht bei der Zollzahl in derselben Zeile, rechtsbuendig —
   wie in der breiten Spalte des Popovers. Ein Versuch, sie hier in eine
   zweite Zeile zu setzen, sah aus wie ein Textfehler: das Wort stand weder
   unter der Zahl noch am Rand, sondern irgendwo dazwischen. Die Spalte ist
   mit 288 px breit genug fuer eine Zeile. */
.ff-fzgm__anpassen .ff-cfgviz-gruppe--groesse .ff-cfgviz-option {
  flex-wrap: nowrap; gap: 10px;
}
.ff-fzgm__anpassen .ff-cfgviz-gruppe--groesse .ff-cfgviz-option-text {
  flex: 0 0 auto;
}
.ff-fzgm__anpassen .ff-cfgviz-gruppe--groesse .ff-cfgviz-option-schild {
  margin-left: auto;
}
.ff-fzgm__anpassen .ff-cfgviz-fussleiste {
  position: sticky; bottom: 0; z-index: 2;
  flex-direction: column; align-items: stretch; gap: 8px;
  margin: 8px -12px 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg); border-top: 1px solid rgba(0,0,0,.08);
}
.ff-fzgm__anpassen .ff-cfgviz-uebernehmen { width: 100%; }

@media (max-width: 768px) {
  /* ── Am Telefon eine Schublade ──
     Gebaut wie die Schublade der Seitenleiste (.kfg__mob-sheet) und wie der
     Modellfilter: unten angeschlagen, Griff oben, von unten hereingefahren.
     Der Shop hat am Telefon EIN Muster dafuer; ein mittig schwebendes
     Fenster daneben liest sich wie ein Versehen — und auf schmalen Geraeten
     ist der Rand ringsum verschenkte Flaeche. */
  .ff-fzgm { padding: 0; align-items: flex-end; }
  /* Am Telefon richtet sich die Hoehe wieder nach dem Inhalt: Bilder und
     Auswahl stehen untereinander und scrollen gemeinsam.

     Gemessen in 'dvh', nicht in 'vh': '100vh' ist am Telefon die Hoehe OHNE
     eingeblendete Adressleiste — solange sie zu sehen ist, ragt ein
     Dialog mit 100vh unten heraus, und genau dort sitzen Kopfzeile des
     Bildes und der Uebernehmen-Knopf. 'dvh' misst, was gerade wirklich da
     ist. Die vh-Zeile bleibt als Rueckfall fuer aeltere Browser davor. */
  .ff-fzgm__box {
    width: 100%;
    height: auto;
    max-height: 92vh; max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Einfahren von unten — dieselbe Kurve wie bei der Seitenleiste. */
    transform: translateY(100%);
    transition: transform .38s cubic-bezier(.32,1,.3,1);
  }
  .ff-fzgm.is-offen .ff-fzgm__box { transform: translateY(0); }
  .ff-fzgm__kopf { padding: 18px 12px 12px 16px; }
  .ff-fzgm__griff {
    display: block;
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.12);
  }
  .ff-fzgm__titel { font-size: 15px; }
  /* Untereinander: eine 288-px-Spalte neben den Bildern liesse fuer beides
     zu wenig. Der Bildlauf wandert dabei nach aussen, damit nicht zwei
     Flaechen ineinander scrollen. */
  .ff-fzgm__inhalt { flex-direction: column; overflow-y: auto; }
  .ff-fzgm__bilder { flex: 0 0 auto; }
  .ff-fzgm__anpassen {
    flex: 0 0 auto; border-left: none; border-top: 1px solid var(--border);
  }
  .ff-fzgm__anpassen-inhalt { overflow: visible; }
  .ff-fzgm__einzel { flex: 0 0 auto; padding: 10px 8px 4px; gap: 2px; }
  .ff-fzgm__buehne { height: auto; }
  .ff-fzgm__buehne img {
    flex: 0 0 auto; width: 100%; height: auto;
    max-height: 44vh; max-height: 44dvh;
  }
  .ff-fzgm__buehne figcaption { margin-top: 6px; font-size: 12px; }
  .ff-fzgm__anpassen-kopf { padding: 12px 14px 4px; }
  .ff-fzgm__anpassen-inhalt { padding: 0 12px 10px; }
  /* Der Streifen bleibt vierspaltig — er ist die Navigation, nicht der
     Inhalt. Die Beschriftung passt auf so schmalen Kacheln nicht mehr
     hinein; welche Ansicht gerade laeuft, steht unter dem grossen Bild. */
  .ff-fzgm__raster { gap: 6px; padding: 0 8px 10px; }
  .ff-fzgm__label { display: none; }
  .ff-fzgm__pfeil { width: 34px; height: 34px; }
  .ff-fzgm__pfeil--vor  { left: 14px; }
  .ff-fzgm__pfeil--nach { right: 14px; }
  .ff-fzgm__pfeil .material-symbols-rounded { font-size: 19px; }
}

/* ── Ladezustand bei neuer Auswahl (configurator-viz.js / fahrzeugbilder-modal.js)
   Solange das Bild zur neuen Farbe/Groesse laedt, wird das alte leicht
   abgedunkelt und ein Kreisel gezeigt — statt 3–5 s lang ein Bild, das
   nicht zur Beschriftung passt. */
.kfg__viz-car-img.is-laedt::after,
.ff-fzgm__buehne.is-laedt::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: ffDreh .8s linear infinite;
}
.kfg__viz-car-img.is-laedt img.is-front,
.ff-fzgm__buehne.is-laedt img { filter: brightness(.7); transition: filter .2s; }
.ff-fzgm__buehne { position: relative; }
@keyframes ffDreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kfg__viz-car-img.is-laedt::after, .ff-fzgm__buehne.is-laedt::after { animation-duration: 2.4s; }
}

/* Preis im Anpassen-Dialog */
.ff-cfgviz-preis { display: block; font-size: 12px; font-weight: 600; color: #1D1D1F; margin-top: 2px; }

/* Kleiner Goldtext auf Weiss hatte ~3,2:1 — fuer Schrift der dunklere Ton */
.kfg__pcard-series { color: #8A6508; }

/* Trefferflaechen am Telefon: sichtbar klein, antippbar 44 px */
.ff-cfgviz-navbtn, .kfg__viz-back, .ff-cfgviz-anpassen, .kfg__pcard-swatch, .kfg__view-btn { position: relative; }
@media (pointer: coarse) {
  .ff-cfgviz-navbtn::after, .kfg__viz-back::after, .ff-cfgviz-anpassen::after,
  .kfg__pcard-swatch::after, .kfg__view-btn::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; min-width: 100%; min-height: 100%;
    transform: translate(-50%, -50%);
  }
}

/* Pfeile der Bildkarten auch bei Tastaturfokus zeigen */
.kfg__pcard:focus-within .ff-imgcycle-arrow { opacity: 1; }
/* Kreisel auch vor dem ersten Bild sichtbar (Behaelter steht sonst auf opacity 0) */
.kfg__viz-car-img.is-laedt { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   KONFIGURATOR-KAUFWEG (konfigurator.js / page-konfigurator.php):
   Dialog "Deine Konfiguration", Leiste, Rueckfragen, Auswahlpfad,
   Lade- und Fehlerhinweise. Der Dialog stand vorher komplett als
   Inline-Stil im HTML — Werte hier 1:1 uebernommen.
   ═══════════════════════════════════════════════════════════════════ */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cfg-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.cfg-modal-box {
  background: var(--card); border-radius: var(--r-lg); padding: 32px;
  max-width: 480px; width: 92%; position: relative;
  box-shadow: 0 24px 48px rgba(0,0,0,.15);
  max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cfg-modal-box:focus { outline: none; }
#kfg-config-modal #kfg-config-modal-close.cfg-modal-schliessen {
  top: 16px; right: 16px; background: none; border: none; cursor: pointer;
  color: var(--text3); font-size: 22px;
}
.cfg-modal-titel {
  font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.cfg-modal-titel .material-symbols-rounded { font-size: 22px; }
.cfg-modal-unterzeile { font-size: 12px; color: var(--text3); margin: 0 0 20px; }

.cfg-modal-karte {
  border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  background: #fff; margin-bottom: 12px;
}
.cfg-modal-karte--reifen { margin-bottom: 16px; }
.cfg-modal-karte.is-leer { border-color: rgba(0,0,0,.06); background: var(--card-inner); }
.cfg-modal-zeile { display: flex; gap: 14px; align-items: flex-start; }
.cfg-modal-img img { width: 100%; height: 100%; object-fit: contain; }
.cfg-modal-img--reifen img { object-fit: cover; border-radius: 8px; }
.cfg-modal-info { flex: 1; min-width: 0; }
.cfg-modal-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 3px;
}
.cfg-modal-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.cfg-modal-name--eng { margin-bottom: 2px; }
.cfg-modal-profil { font-size: 12px; color: var(--text3); margin-bottom: 6px; }
.cfg-modal-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cfg-modal-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 11px; font-weight: 500;
  color: var(--text); background: var(--card-inner); white-space: nowrap;
}
.cfg-modal-tupfen {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.cfg-modal-x {
  align-self: flex-start; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--text3); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s;
}
.cfg-modal-x .material-symbols-rounded { font-size: 16px; }
.cfg-modal-fuss {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}
.cfg-modal-menge { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cfg-modal-menge button {
  width: 30px; height: 28px; border: none; background: #fff; color: var(--text);
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.cfg-modal-menge button:disabled { opacity: .35; cursor: default; }
.cfg-modal-menge span {
  width: 28px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border); line-height: 28px;
}
.cfg-modal-betrag { text-align: right; }
.cfg-modal-summe, .cfg-modal-reifen-betrag { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }
.cfg-modal-stueck { font-size: 11px; color: var(--text3); }
.cfg-modal-reifen-label { font-size: 12px; color: var(--text3); }
.cfg-modal-eu { display: flex; gap: 6px; margin-top: 6px; }
.cfg-modal-eu-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
  border-radius: 6px; font-size: 10px; font-weight: 600;
}
.cfg-modal-eu-chip .material-symbols-rounded { font-size: 11px; }
.cfg-modal-eu-chip--fuel  { background: rgba(76,175,80,.1);  color: #2e7d32; }
.cfg-modal-eu-chip--grip  { background: rgba(33,150,243,.1); color: #1565c0; }
.cfg-modal-eu-chip--noise { background: rgba(0,0,0,.06);     color: var(--text3); }
.cfg-modal-leer { display: flex; align-items: center; gap: 10px; color: var(--text3); }
.cfg-modal-leer .material-symbols-rounded { font-size: 20px; opacity: .4; }
.cfg-modal-leer-titel { font-size: 13px; font-weight: 600; }
.cfg-modal-leer-text { font-size: 11px; font-style: italic; }
.cfg-modal-rdks-line--editable { cursor: pointer; }
.cfg-modal-rdks-line--gruen { background: rgba(27,138,58,.04); border-color: rgba(27,138,58,.1); }
.cfg-modal-rdks-line--gruen .cfg-modal-rdks-icon { background: rgba(27,138,58,.1); }
.cfg-modal-rdks-line--gruen .cfg-modal-rdks-icon .material-symbols-rounded,
.cfg-modal-rdks-line--gruen .cfg-modal-rdks-price { color: #1B8A3A; }
.cfg-modal-gesamt { padding: 0 2px 14px; }
.cfg-modal-gesamt-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cfg-modal-gesamt-label {
  font-size: 11px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .03em;
}
.cfg-modal-gesamt-menge { font-size: 10px; color: var(--text3); margin-top: 3px; }
.cfg-modal-gesamt-betrag { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.02em; white-space: nowrap; }
.cfg-modal-hinweis { margin: 6px 0 0; font-size: 11px; }
.cfg-modal-aktionen { display: flex; gap: 10px; }
.cfg-modal-btn {
  flex: 1; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cfg-modal-btn .material-symbols-rounded { font-size: 17px; }
.cfg-modal-btn--dunkel { border: none; background: var(--text); color: #fff; }

/* Leiste unten */
.kfg__bar-hinweis { margin-top: 2px; font-size: 11px; }
.kfg__bar-rdks-badge--misch { background: rgba(var(--accent-rgb),.1); color: var(--accent); }
.kfg__bar-qty-btn:disabled { opacity: .35; pointer-events: none; }
.kfg__bar-btn.is-laden { opacity: .6; pointer-events: none; }

/* RDKS: Grund der Vorauswahl */
.kfg__rdks-grund { margin: -2px 0 8px; font-size: 12px; line-height: 1.4; color: var(--text2); }

/* Rueckfrage im Seitenfluss (statt confirm()) */
.kfg-nachfrage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(184,134,11,.3); background: rgba(184,134,11,.06);
}
.kfg-nachfrage p { flex: 1 1 100%; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); }
.kfg-nachfrage button { padding: 8px 14px; border-radius: 10px; font: 600 13px/1.2 inherit; cursor: pointer; }
.kfg-nachfrage__ja { border: none; background: var(--text); color: #fff; }
.kfg-nachfrage__nein { border: 1px solid var(--border); background: #fff; color: var(--text); }
.kfg__mob-bar .kfg-nachfrage {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); margin: 0;
  background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Pfad der Fahrzeugauswahl: Alle Marken › BMW › X3 */
.kfg__pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 12px 0 4px; font-size: 12px; color: var(--text3); }
.kfg__pfad[hidden] { display: none; }
.kfg__pfad-teil { font: inherit; }
button.kfg__pfad-teil {
  background: none; border: none; padding: 2px 0; cursor: pointer;
  color: #8A6508; text-decoration: underline; text-underline-offset: 2px;
}
span.kfg__pfad-teil { color: var(--text); font-weight: 600; }

/* Fehler mit "Erneut versuchen" */
.kfg__erneut {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px auto 0;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--text); font: 600 13px/1 inherit; cursor: pointer;
}
.kfg__erneut .material-symbols-rounded { font-size: 16px; }

/* Meldungen im Platzhalter der Bildkarte (H1 und Knopf bleiben stehen) */
.kfg__viz-placeholder-status .kfg__loading,
.kfg__viz-placeholder-status .kfg__empty { color: rgba(255,255,255,.8); padding: 6px 0; }
.kfg__viz-placeholder.hat-status .kfg__viz-placeholder-links,
.kfg__viz-placeholder.hat-status .kfg__viz-placeholder-mobil { display: none; }

/* Zweite Preiszeile "ab … mit 4 Reifen" (kfgKartenPreise) */
.kfg__pcard-price--komplett { margin-top: 2px; }
.kfg__pcard-price--komplett[hidden] { display: none; }

/* "Nicht auf Lager" — klein neben dem Modell ueber dem Titel (ff_lager_schild) */
.ff-pcard-oos {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(0,0,0,.06); color: #6E6E73;
  font-size: 9.5px; font-weight: 600; letter-spacing: .02em; text-transform: none;
  white-space: nowrap;
}

/* Freigabe-Zeichen an den Zoll-Chips der Rasterkarten (ffFahrzeug.zollSchilder)
   — Felgenuebersicht (.ff-pcard-size) und Konfigurator (.kfg__pcard-size-tag).
   Gruen eintragungsfrei, orange mit Eintragung, sonst ausgegraut; kein Rot. */
.ff-pcard-size, .kfg__pcard-size-tag { display: inline-flex; align-items: center; gap: 3px; }
.ff-zoll-fit { font-size: 12px; line-height: 1; }
.is-fit-frei       { color: #15803d !important; border-color: rgba(22,163,74,.35) !important; background: rgba(22,163,74,.06) !important; }
.is-fit-eintragung { color: #b45309 !important; border-color: rgba(217,119,6,.4) !important; background: rgba(217,119,6,.07) !important; }
.is-fit-aus        { opacity: .4; }

/* "Am Fahrzeug ansehen" auf dem Foto der gewaehlten Karte (Felgenuebersicht) */
.kfg__pcard-img .ff-am-auto {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3;   /* ueber den Bildpunkten */
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 36px; padding: 0 14px; border-radius: 980px; border: 0;
  background: rgba(10,16,23,.86); color: #fff; cursor: pointer;
  font: 600 12px/1 var(--font, system-ui); box-shadow: 0 4px 14px rgba(0,0,0,.18);
  animation: ffAmAuto .2s ease;
}
.kfg__pcard-img .ff-am-auto .material-symbols-rounded { font-size: 16px; }
.kfg__pcard-img .ff-am-auto:hover { background: #0a1017; }
@keyframes ffAmAuto { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .kfg__pcard-img .ff-am-auto { animation: none; } }

/* Hinweiszeile "warn" (z. B. TUEV-Eintragung) — Gegenstueck zu --gruen */
.cfg-modal-rdks-line--warn { background: rgba(217,119,6,.06); border-color: rgba(217,119,6,.18); }
.cfg-modal-rdks-line--warn .cfg-modal-rdks-icon { background: rgba(217,119,6,.12); }
.cfg-modal-rdks-line--warn .cfg-modal-rdks-icon .material-symbols-rounded { color: #b45309; }

/* ── Lack: schnelle Fahrzeugfarbe an der Bildkarte (configurator-viz.js,
   lackZeichnen) — Pille neben "Anpassen", klappt eine kleine Farbliste auf.
   Aussehen wie die Anpassen-Pille; Liste als helle Karte. */
.ff-cfgviz-knoepfe { display: flex; align-items: center; gap: 8px; }
.ff-cfgviz-lack { position: relative; }
.ff-cfgviz-lack[hidden] { display: none; }
.ff-cfgviz-lack-knopf {
  display: flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 8px 0 12px; max-width: 190px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
  font: 600 13px/1 var(--font); white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
.ff-cfgviz-lack-knopf:hover,
.ff-cfgviz-lack-knopf[aria-expanded="true"] { border-color: rgba(255,255,255,.4); background: rgba(0,0,0,.68); }
.ff-cfgviz-lack-knopf .material-symbols-rounded { font-size: 18px; opacity: .7; transition: transform .15s ease; }
.ff-cfgviz-lack-knopf[aria-expanded="true"] .material-symbols-rounded { transform: rotate(180deg); }
.ff-cfgviz-lack-name { overflow: hidden; text-overflow: ellipsis; }
.ff-cfgviz-lack-menue {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 6;
  width: max-content; max-width: min(300px, calc(100vw - 48px));
  padding: 8px; border-radius: 14px; background: #fff; color: var(--text, #0a1017);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.ff-cfgviz-lack-menue[hidden] { display: none; }
.ff-cfgviz-lack-titel {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(0,0,0,.4); padding: 2px 6px 6px;
}
.ff-cfgviz-lack-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.ff-cfgviz-lack-farbe {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 7px 8px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font: 500 12.5px/1.2 var(--font); color: inherit; text-align: left;
}
.ff-cfgviz-lack-farbe:hover { background: rgba(0,0,0,.05); }
.ff-cfgviz-lack-farbe.is-active { background: rgba(0,0,0,.06); font-weight: 700; }
.ff-cfgviz-lack-farbe .ff-cfgviz-swatch__dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.ff-cfgviz-lack-farbe.is-active .ff-cfgviz-swatch__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent, #b8963e); }
.ff-cfgviz-lack-farbname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 768px) {
  /* Oben rechts links neben "Anpassen": nur Farbpunkt + Pfeil, die Liste
     klappt nach unten auf. Platz schafft die Schrittanzeige links, deren
     Titel mobil unter den Punkten steht (#kfg-viz-steps unten). */
  .ff-cfgviz-tall .ff-cfgviz-knoepfe { gap: 6px; pointer-events: auto; }
  .ff-cfgviz-tall .ff-cfgviz-lack { pointer-events: auto; }
  .ff-cfgviz-tall .ff-cfgviz-lack-knopf { height: 34px; padding: 0 5px 0 9px; gap: 3px; }
  .ff-cfgviz-tall .ff-cfgviz-lack-name { display: none; }
  .ff-cfgviz-tall .ff-cfgviz-lack-menue { bottom: auto; top: calc(100% + 6px); }

  /* Schrittanzeige mobil ohne Titel — nur Zurueck, Punkte und AI-Hinweis,
     damit rechts Lack + Anpassen Platz haben. */
  #kfg-viz-steps { gap: 8px; top: 12px; left: 12px; }
  #kfg-viz-steps .kfg__viz-step-label { display: none; }
  /* Felgenuebersicht: dort gibt es keine Punkte — "Felgenübersicht" weicht,
     sobald Fahrzeugbilder laufen und rechts Lack + Anpassen stehen; der
     Zurueck-Pfeil sagt dasselbe. */
  #ff-hero-card .kfg__viz-step-label { display: none; }
}

/* ── Anpassen-Dialog: Kopfzeile mit Fahrzeug, aktiver Felge und KI-Hinweis,
   Fahrzeugfarbe als Farbpunkte oben rechts im Bild (fahrzeugbilder-modal) */
.ff-fzgm__titelzeile { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ff-fzgm__titelzeile .ff-fzgm__titel { flex: 0 1 auto; }
.ff-fzgm__felge {
  padding-left: 10px; border-left: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text2); white-space: nowrap;
}
.ff-fzgm__felge:empty { display: none; }
.ff-fzgm__titelzeile .ff-bhw { margin-left: 0; }
.ff-fzgm__titelzeile .ff-bhw__knopf { color: var(--text2, #6e6e73); opacity: .7; }
.ff-fzgm__titelzeile .ff-bhw__knopf:hover, .ff-fzgm__titelzeile .ff-bhw__knopf[aria-expanded="true"] { opacity: 1; color: var(--text, #1d1d1f); }

.ff-fzgm__lack {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px;
  max-width: calc(100% - 20px); padding: 4px 6px; border-radius: 999px;
  background: rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.ff-fzgm__lack[hidden] { display: none; }
.ff-cfgviz-punkt {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ff-cfgviz-punkt .ff-cfgviz-swatch__dot { width: 18px; height: 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.ff-cfgviz-punkt:hover .ff-cfgviz-swatch__dot { transform: scale(1.1); }
.ff-cfgviz-punkt.is-active .ff-cfgviz-swatch__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent, #b8963e); }
@media (max-width: 768px) {
  .ff-fzgm__felge { padding-left: 0; border-left: 0; flex-basis: 100%; font-size: 12px; }
  .ff-fzgm__lack { top: 6px; right: 6px; padding: 3px 4px; }
  .ff-cfgviz-punkt { width: 22px; height: 22px; }
  .ff-cfgviz-punkt .ff-cfgviz-swatch__dot { width: 15px; height: 15px; }
}