/* Kopfzeile (Preisanzeige-Schalter) und Fahrzeugleiste — vorher als <style> in header.php und template-parts/fitment-banner.php, auf jeder Seite ungecacht im HTML. Laedt nach homepage.css, damit die Reihenfolge der Regeln wie beim Inline-Block bleibt. */

/* ── aus header.php ── */
.ff-price-mode-toggle { display:flex; align-items:center; }
@media(max-width:640px){ .ff-price-mode-toggle { display:none; } }

/* ── B2B/B2C Pill Toggle ── */
.ff-toggle-pill {
  cursor: pointer;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.ff-toggle-pill:focus-visible .ff-toggle-pill__track {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}
.ff-toggle-pill__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 80px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
}
/* active thumb — weißes Pill */
.ff-toggle-pill__thumb {
  position: absolute;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  border-radius: 10px;
  background: #fff;
  transition: transform .2s cubic-bezier(.4,0,.2,1);
  z-index: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.ff-toggle-pill__label {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  font-family: inherit;
  transition: color .2s;
}
/* Aktive Seite = dunkel (auf weißem Pill), inaktive = hell-transparent */
.ff-toggle-pill[data-mode="b2b"] .ff-toggle-pill__label--b2b { color: #111; }
.ff-toggle-pill[data-mode="b2b"] .ff-toggle-pill__label--b2c { color: rgba(255,255,255,0.45); }
.ff-toggle-pill[data-mode="b2c"] .ff-toggle-pill__label--b2c { color: #111; }
.ff-toggle-pill[data-mode="b2c"] .ff-toggle-pill__label--b2b { color: rgba(255,255,255,0.45); }

/* Light-Header Variante */
body.has-light-header .ff-toggle-pill__track {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.12);
}
body.has-light-header .ff-toggle-pill__thumb { background: #1D1D1F; }
body.has-light-header .ff-toggle-pill[data-mode="b2b"] .ff-toggle-pill__label--b2b { color: #fff; }
body.has-light-header .ff-toggle-pill[data-mode="b2b"] .ff-toggle-pill__label--b2c { color: rgba(0,0,0,0.3); }
body.has-light-header .ff-toggle-pill[data-mode="b2c"] .ff-toggle-pill__label--b2c { color: #fff; }
body.has-light-header .ff-toggle-pill[data-mode="b2c"] .ff-toggle-pill__label--b2b { color: rgba(0,0,0,0.3); }

/* ── aus template-parts/fitment-banner.php ── */
#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:#6b7280;line-height:1.35;}
#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: Zeilen + "mehr laden" → style.css (.ff-garage-zeile, .ffb-mehr) */
.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:rgba(0,0,0,.4);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;}
/* Kaskaden-Felder → assets/css/fahrzeug-dialog.css (.ff-modal-ss) */
@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:#6b7280;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-kreisel{animation-duration:2.4s;}
}
/* 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;}