#ffb-wrap{margin:0 0 16px;}

/* ── Fahrzeugwahl: Schublade am Telefon, Fenster am Rechner ── */
#ffb-ov{display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.4);}
#ffb-dr{
  display:none;position:fixed;z-index:9999;background:#fff;
  width:100%;max-width:560px;overflow-y:auto;overscroll-behavior:contain;
  /* Telefon: von unten herein, oben abgerundet */
  left:50%;bottom:0;transform:translateX(-50%);
  border-radius:20px 20px 0 0;max-height:90dvh;
  box-shadow:0 -8px 40px rgba(0,0,0,.15);
}
@media (min-width:768px){
  #ffb-dr{
    /* Rechner: mittig. Eine Schublade am unteren Rand wirkt dort
       wie ein verrutschtes Fenster — der Blick liegt in der Mitte. */
    top:50%;bottom:auto;transform:translate(-50%,-50%);
    border-radius:18px;max-height:min(88vh,760px);
    box-shadow:0 24px 64px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.08);
  }
}

/* ── Fahrzeugzeile ────────────────────────────────────────────────
   Am Schreibtisch eine Zeile: Symbol + Name, Merkmale, Abstandhalter,
   die beiden Schalter. Am Telefon drei Gruppen untereinander, jede fuer
   sich vollstaendig — das ist der Unterschied zwischen "umgebrochen" und
   "gestaltet". */
#ffb-active{gap:10px;}
.ffb-kopf{
  /* NICHT wachsen. Mit 'flex:1 1 auto' hat die Gruppe den ganzen freien
     Platz geschluckt und die Merkmale (Lochkreis, Nabenbohrung) bis an den
     rechten Rand geschoben — sie gehoeren aber direkt neben den Namen.
     Das Schieben macht der Abstandhalter '.ffb-schub' dahinter. */
  display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;
}
#ffb-icon{font-size:18px;flex-shrink:0;color: var(--ff-gray);line-height:1;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-1.5px);} /* line-height 1 + optischer Ausgleich: Inter sitzt in der Zeile hoeher als die Icon-Glyphe */
#ffb-label{
  font-size:13px;font-weight:700;color:var(--text);
  min-width:0;line-height:1.35;
}
#ffb-tags{display:flex;gap:5px;align-items:center;flex-wrap:wrap;}
.ffb-schub{flex:1;}

@media (max-width:640px){
  /* Aus dem Abstandhalter wird ein Zeilenumbruch: volle Breite, keine
     Hoehe. Er schiebt hier nichts (auf einer umbrechenden Zeile gibt es
     nichts zu schieben), sorgt aber dafuer, dass die beiden Schalter
     verlaesslich eine eigene Zeile bekommen — unabhaengig davon, wie die
     Zeilen darueber ausfallen. */
  .ffb-schub{flex:0 0 100%;height:0;}
  /* KEINE feste volle Breite mehr fuer Name und Merkmale. Vorher bekam
     jedes von beiden 'flex:1 1 100%' und damit immer eine eigene Zeile —
     auch bei "Golf VIII", wo Lochkreis und Nabenbohrung muehelos daneben
     gepasst haetten. Mit 'flex:0 0 auto' nimmt der Name nur seine eigene
     Breite, die Merkmale ruecken neben ihn, und erst wenn es wirklich
     nicht reicht, rutschen sie von selbst eine Zeile tiefer.
     'flex-shrink:0' ist dabei der Punkt: mit Schrumpfen wuerde Flexbox
     lieber den Namen zusammenquetschen, als die Merkmale umbrechen zu
     lassen. 'max-width:100%' faengt den Fall ab, dass schon der Name
     allein breiter ist als die Zeile — dann bricht er innerhalb um. */
  /* Mittig, wie am Schreibtisch. Hier stand 'flex-start' — gedacht fuer den
     Fall, dass der Name ueber zwei Zeilen laeuft und das Symbol dann neben
     der ersten stehen soll. Der Normalfall ist aber der einzeilige Name,
     und dort standen Symbol (18px, Zeilenhoehe 24px) und Text (13px,
     Zeilenhoehe 18px) oben buendig statt auf einer Hoehe: der Name sass
     sichtbar zu hoch. Der einzeilige Fall wiegt schwerer. */
  .ffb-kopf{flex:0 0 auto;max-width:100%;align-items:center;}
  #ffb-tags{flex:0 1 auto;}
  /* Die beiden Schalter teilen sich die letzte Zeile. "Filter aufheben"
     ist der laengere Text und bekommt deshalb mehr Platz, bleibt aber
     einzeilig. */
  #ffb-btn-change,#ffb-btn-remove{
    flex:1 1 0;min-width:0;justify-content:center;
    padding:7px 8px;font-size:11.5px;
  }
  #ffb-active{padding:10px;gap:8px;}
}

/* Garage: "mehr laden" */
.ffb-mehr{
  width:100%;margin-top:2px;padding:9px;border-radius:10px;
  border:1px dashed rgba(0,0,0,.15);background:transparent;
  font-size:12px;font-weight:700;color:var(--text3,#86868B);
  cursor:pointer;font-family:var(--font);
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.ffb-mehr:hover{background:rgba(0,0,0,.03);color:var(--text,#1D1D1F);}
.ffb-mehr .material-symbols-rounded{font-size:15px;}
.ffb-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 12px;font-size:13px;font-weight:600;border:1px solid transparent;background:rgba(0,0,0,.04);color: var(--ff-gray);cursor:pointer;border-radius:10px;font-family:var(--font);}
.ffb-tab.is-active{color:#0a1017;background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 1px 4px rgba(0,0,0,.07);}
.ffb-tab .material-symbols-rounded{font-size:15px;}
.ffb-ss{position:relative;}
.ffb-ss-btn{width:100%;padding:10px 14px;border:1.5px solid rgba(0,0,0,.12);border-radius:10px;background:#fafafa;font-size:14px;text-align:left;cursor:pointer;font-family:var(--font);color:#333;}
.ffb-ss-btn:disabled{opacity:.4;cursor:default;}
/* Ladezustand einer Kaskadenstufe */
.ffb-ss-btn.is-laden{opacity:.75;position:relative;padding-right:38px;color:var(--text2,#6b7280);}
.ffb-ss-btn.is-laden::after{
  content:'';position:absolute;right:13px;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,#B8860B);
  animation:ffb-dreh .7s linear infinite;
}
@keyframes ffb-dreh{to{transform:rotate(360deg);}}
/* Warteschild in der Merkmalszeile — gleiche Groesse wie die Tags
   daneben, damit beim Umschalten nichts springt. */
.ffb-tag-laden{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;border:1.5px solid rgba(0,0,0,.1);background:rgba(0,0,0,.03);font-size:11px;font-weight:700;color: var(--ff-gray);white-space:nowrap;}
.ffb-kreisel{width:9px;height:9px;flex-shrink:0;border-radius:50%;border:1.5px solid rgba(0,0,0,.15);border-top-color:var(--accent,#B8860B);animation:ffb-dreh .7s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .ffb-ss-btn.is-laden::after{animation-duration:2.4s;}
  .ffb-kreisel{animation-duration:2.4s;}
}
.ffb-ss-drop{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1.5px solid rgba(0,0,0,.12);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:100;overflow:hidden;}
.ffb-ss-drop input{width:100%;padding:9px 14px;border:none;border-bottom:1px solid rgba(0,0,0,.08);font-size:13px;outline:none;box-sizing:border-box;color: var(--ff-ink);}
.ffb-ss-opts{max-height:180px;overflow-y:auto;}
.ffb-ss-opt{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;padding:11px 14px;font-size:13px;cursor:pointer;color: var(--ff-ink);}
.ffb-ss-opt:hover,.ffb-ss-opt:focus{background:rgba(0,0,0,.05);}
.ffb-ss.is-open .ffb-ss-drop{display:block;}
/* Auflagen — dezent, aufklappbar */
#ffb-auflagen{margin-top:8px;}
#ffb-auflagen-btn{
  display:flex;align-items:center;gap:7px;width:100%;
  padding:8px 12px;border-radius:9px;
  border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.02);
  font-family:var(--font);font-size:12.5px;font-weight:600;
  color:var(--text2,#6b7280);cursor:pointer;text-align:left;
}
#ffb-auflagen-btn:hover{background:rgba(0,0,0,.04);color:var(--text,#1D1D1F);}
#ffb-auflagen-btn .material-symbols-rounded{font-size:16px;flex-shrink:0;}
#ffb-auflagen-titel{flex:1;}
.ffb-auflagen-pfeil{transition:transform .18s;}
#ffb-auflagen-btn[aria-expanded="true"] .ffb-auflagen-pfeil{transform:rotate(180deg);}
#ffb-auflagen-liste{
  margin-top:6px;padding:12px 14px;border-radius:9px;
  border:1px solid rgba(0,0,0,.08);background:#fff;
  display:flex;flex-direction:column;gap:10px;
}
/* Das 'display:flex' oben schlaegt das display:none, das der Browser fuer
   [hidden] mitbringt — die Liste stand deshalb von Anfang an offen, obwohl
   das Attribut gesetzt war. */
#ffb-auflagen-liste[hidden]{display:none;}
.ffb-auflage{display:flex;gap:9px;align-items:flex-start;}
.ffb-auflage__code{
  font-family:ui-monospace,monospace;font-size:10.5px;font-weight:700;
  padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.05);
  color:var(--text2,#6b7280);flex-shrink:0;margin-top:1px;
}
.ffb-auflage__text{font-size:12.5px;line-height:1.5;color:var(--text2,#4b5563);}
.ffb-auflagen__gruppe{
  margin:0;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text3,#9ca3af);
}
.ffb-auflagen__gruppe:not(:first-child){margin-top:4px;}
.ffb-auflagen__fuss{
  font-size:11.5px;line-height:1.5;color:var(--text3,#9ca3af);
  border-top:1px solid rgba(0,0,0,.06);padding-top:9px;
}
@media (prefers-reduced-motion:reduce){.ffb-auflagen-pfeil{transition:none;}}
/* Status tag pill */
.ffb-tag{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;border:1.5px solid currentColor;line-height:1.3;}

/* ═══ Dunkelmodus: Fahrzeugleiste + Fahrzeug-Schublade ═══
   Viele Farben stehen inline (Template + fahrzeugleiste.js) → !important.
   Statusfarben setzt das JS als style.borderColor/color; die werden hier
   ueber den serialisierten Wert im style-Attribut aufgehellt. */
:root[data-theme="dark"] #ffb-dr { background: var(--card, #1a1a1c); color: var(--text, #f4f4f2); box-shadow: 0 24px 64px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.08); }
:root[data-theme="dark"] #ffb-ov { background: rgba(0,0,0,.6); }
:root[data-theme="dark"] #ffb-dr [style*="color:#0a1017"] { color: var(--text, #f4f4f2) !important; }
:root[data-theme="dark"] #ffb-dr [style*="color:rgba(0,0,0,.3)"],
:root[data-theme="dark"] #ffb-dr [style*="color:rgba(0,0,0,.4)"],
:root[data-theme="dark"] #ffb-dr [style*="color:rgba(0,0,0,.5)"],
:root[data-theme="dark"] #ffb-dr [style*="color:#6E6E73"],
:root[data-theme="dark"] #ffb-dr [style*="color:#666"] { color: var(--text3, #9b9ba1) !important; }
:root[data-theme="dark"] #ffb-dr [style*="border:1px solid rgba(0,0,0,.1)"],
:root[data-theme="dark"] #ffb-dr [style*="border:1px solid rgba(0,0,0,.08)"] { border-color: rgba(255,255,255,.12) !important; }
:root[data-theme="dark"] #ffb-dr [style*="background:rgba(0,0,0,.04)"],
:root[data-theme="dark"] #ffb-dr [style*="background:rgba(0,0,0,.05)"] { background: rgba(255,255,255,.07) !important; }
:root[data-theme="dark"] #ffb-dr [style*="background:#fff"] { background: var(--card-inner, #232326) !important; }
:root[data-theme="dark"] #ffb-dr button[style*="background:none"] { background: transparent !important; color: var(--text2, #b4b4ba) !important; border-color: rgba(255,255,255,.14) !important; }
:root[data-theme="dark"] #ffb-dr button[style*="background:var(--accent"] { background: #f4f4f2 !important; color: #111 !important; }
:root[data-theme="dark"] #ffb-dr input,
:root[data-theme="dark"] .ffb-ss-drop input { background: var(--card-inner, #232326) !important; color: var(--text, #f4f4f2) !important; border-color: rgba(255,255,255,.14) !important; }
:root[data-theme="dark"] #ffb-dr input::placeholder { color: #75757b; }
:root[data-theme="dark"] .ffb-tab { background: rgba(255,255,255,.05); color: var(--text3, #9b9ba1); }
:root[data-theme="dark"] .ffb-tab.is-active { background: var(--card-inner, #232326); color: var(--text, #f4f4f2); border-color: rgba(255,255,255,.14); box-shadow: none; }
:root[data-theme="dark"] .ffb-ss-btn { background: var(--card-inner, #232326); color: var(--text, #f4f4f2); border-color: rgba(255,255,255,.14); }
:root[data-theme="dark"] .ffb-ss-drop { background: var(--card-inner, #232326); border-color: rgba(255,255,255,.14); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
:root[data-theme="dark"] .ffb-ss-drop input { border-bottom-color: rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] .ffb-ss-opt { color: var(--text, #f4f4f2); }
:root[data-theme="dark"] .ffb-ss-opt:hover,
:root[data-theme="dark"] .ffb-ss-opt:focus { background: rgba(255,255,255,.07); }
:root[data-theme="dark"] .ffb-mehr { border-color: rgba(255,255,255,.18); }
:root[data-theme="dark"] .ffb-mehr:hover { background: rgba(255,255,255,.05); }
:root[data-theme="dark"] #ffb-mc-ok { background: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.35) !important; color: #86efac !important; }
:root[data-theme="dark"] #ffb-hsn-err,
:root[data-theme="dark"] #ffb-mc-err { color: #fca5a5 !important; }
/* Garage-Eintraege */
:root[data-theme="dark"] #ffb-garage-row [style*="background:var(--bg"] { background: var(--card-inner, #232326) !important; border-color: rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] #ffb-garage-row [style*="color:rgba(0,0,0"] { color: var(--text3, #9b9ba1) !important; }
:root[data-theme="dark"] #ffb-garage-row button[style*="background:#fff"] { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; }
/* Leiste selbst */
:root[data-theme="dark"] #ffb-active[style*="229, 231, 235"] { border-color: rgba(255,255,255,.12) !important; background: rgba(255,255,255,.03) !important; }
:root[data-theme="dark"] #ffb-wrap [style*="21, 128, 61"], :root[data-theme="dark"] #ffb-wrap [style*="#15803d"] { color: #86efac !important; }
:root[data-theme="dark"] #ffb-wrap [style*="180, 83, 9"],  :root[data-theme="dark"] #ffb-wrap [style*="#b45309"] { color: #fcd34d !important; }
:root[data-theme="dark"] #ffb-wrap [style*="220, 38, 38"]:not(#ffb-active):not(#ffb-no-fit-cta), :root[data-theme="dark"] #ffb-wrap [style*="#dc2626"] { color: #fca5a5 !important; }
:root[data-theme="dark"] #ffb-wrap [style*="107, 114, 128"], :root[data-theme="dark"] #ffb-wrap [style*="#6b7280"] { color: var(--text2, #b4b4ba) !important; }
:root[data-theme="dark"] #ffb-wrap [style*="209, 213, 219"], :root[data-theme="dark"] #ffb-wrap [style*="#d1d5db"],
:root[data-theme="dark"] #ffb-wrap [style*="229, 231, 235"]:not(#ffb-active) { border-color: rgba(255,255,255,.18) !important; }
:root[data-theme="dark"] .ffb-tag-laden { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--text2, #b4b4ba); }
:root[data-theme="dark"] #ffb-auflagen-btn { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] #ffb-auflagen-btn:hover { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] #ffb-auflagen-liste { background: var(--card-inner, #232326); border-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .ffb-auflage__code { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .ffb-auflagen__fuss { border-top-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] #ffb-no-fit-cta { background: rgba(220,38,38,.08) !important; border-color: rgba(248,113,113,.3) !important; }
:root[data-theme="dark"] #ffb-no-fit-cta [style*="#7f1d1d"], :root[data-theme="dark"] #ffb-no-fit-cta [style*="#991b1b"] { color: #fca5a5 !important; }

/* ── Ohne Fahrzeug: neutraler Zustand "Fahrzeug wählen" (21.10.26) ──
   Gleiche Farbe wie das Schild auf den Karten (--ff-fit-neutral). */
#ffb-wrap{position:relative;}
.ffb-leer{
  align-items:center;gap:10px;padding:10px 14px;border-radius:10px;
  border:1.5px solid var(--ff-line,#e7e7e3);background:var(--ff-fit-neutral-bg,rgba(0,0,0,.04));
}
.ffb-leer__icon{font-size:18px;flex-shrink:0;color:var(--ff-fit-neutral,#3f3f46);}
.ffb-leer__text{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ff-fit-neutral,#3f3f46);}
.ffb-leer__knopf{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;white-space:nowrap;
  padding:5px 12px;border-radius:999px;border:1.5px solid currentColor;background:transparent;
  font-family:inherit;font-size:12px;font-weight:700;line-height:1.2;color:var(--ff-fit-neutral,#3f3f46);cursor:pointer;
}
.ffb-leer__knopf .material-symbols-rounded{font-size:15px;}
.ffb-leer__knopf:hover{background:var(--ff-fit-neutral,#3f3f46);color:var(--ff-card,#fff);border-color:var(--ff-fit-neutral,#3f3f46);}
.ffb-leer__knopf:focus-visible{outline:2px solid var(--ff-ink,#111);outline-offset:2px;}
@media (max-width:520px){
  .ffb-leer{flex-wrap:wrap;}
  .ffb-leer__text{flex:1 1 calc(100% - 30px);}
  .ffb-leer__knopf{margin-left:28px;}
}

/* ── Hinweis "Für deinen Wagen filtern?" (nur /felgen, seite-felgen.js) ──
   Kein Modal: kleine Blase unter dem Banner, zeigt auf "Fahrzeug wählen".
   Ist der Banner beim Ausloesen nicht im Bild (Kunde scrollt im Raster),
   schwebt sie unten am Rand ('is-schwebend'). */
.ffb-tipp{
  position:absolute;z-index:40;top:calc(100% + 10px);right:8px;
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:max-content;
  max-width:calc(100vw - 32px);padding:10px 10px 10px 12px;border-radius:12px;
  background:var(--ff-card,#fff);color:var(--ff-ink,#111);
  border:1px solid var(--ff-line,#e7e7e3);box-shadow:0 12px 32px rgba(0,0,0,.16);
  animation:ffb-tipp-rein .22s ease-out;
}
.ffb-tipp[hidden]{display:none;}
.ffb-tipp::before{
  content:"";position:absolute;top:-6px;right:40px;width:10px;height:10px;transform:rotate(45deg);
  background:inherit;border-left:1px solid var(--ff-line,#e7e7e3);border-top:1px solid var(--ff-line,#e7e7e3);
}
/* Unten rechts sitzt der Chat-Knopf — am Rechner schwebt die Blase
   deshalb unten mittig, am Telefon links daneben. */
.ffb-tipp.is-schwebend{position:fixed;top:auto;right:auto;left:50%;bottom:24px;transform:translateX(-50%);z-index:9000;animation:none;}
.ffb-tipp.is-schwebend::before{display:none;}
.ffb-tipp__icon{font-size:18px;color:var(--ff-fit-neutral,#3f3f46);}
.ffb-tipp__text{margin:0;flex:1 1 auto;font-size:13px;font-weight:600;line-height:1.3;color:var(--ff-ink,#111);}
.ffb-tipp__los{
  padding:6px 12px;border-radius:999px;border:0;cursor:pointer;
  background:var(--ff-btn,#111);color:var(--ff-btn-ink,#fff);font-family:inherit;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;
}
.ffb-tipp__los:focus-visible,.ffb-tipp__zu:focus-visible{outline:2px solid var(--ff-ink,#111);outline-offset:2px;}
.ffb-tipp__zu{
  display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;
  border:0;background:transparent;color:var(--ff-gray,#71717a);cursor:pointer;
}
.ffb-tipp__zu:hover{background:var(--ff-soft,#f4f4f2);color:var(--ff-ink,#111);}
.ffb-tipp__zu .material-symbols-rounded{font-size:18px;}
.ffb-tipp__ansage{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
@keyframes ffb-tipp-rein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (max-width:520px){
  .ffb-tipp{left:0;right:0;width:auto;max-width:none;flex-wrap:wrap;}
  .ffb-tipp::before{right:auto;left:50%;}
  .ffb-tipp.is-schwebend{left:16px;right:88px;bottom:16px;transform:none;}
}
@media (prefers-reduced-motion:reduce){ .ffb-tipp{animation:none;} }

/* ── Passend-Garantie (Produktseite) — eine dezente Zeile ── */
.ffb-garantie{
  display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;padding:0 15px; /* buendig mit dem Symbol im Fahrzeugbanner */
  font-size:12px;line-height:1.4;color:var(--ff-fit-neutral,#3f3f46);
}
.ffb-garantie strong{font-weight:700;color:var(--ff-ink,#111);}
.ffb-garantie__icon{font-size:16px;line-height:18px;flex-shrink:0;color:var(--ff-fit-ok,#166534);}
.ffb-garantie__text{min-width:0;padding-top:1px;}
.ffb-garantie .ff-bhw{flex-shrink:0;}
.ffb-garantie .ff-bhw__knopf{height:18px;padding:0 3px;border:0;opacity:.6;}