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

:root {
  --bg: #F5F5F7;
  --card: #FFFFFF;
  --card-alt: #ECECEE;
  --text: #1D1D1F;
  --text2: #6E6E73;
  --text3: #86868B;
  --accent: #B29876;
  --accent-lt: #C4AC8E;
  --border: rgba(0,0,0,0.04);
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 24px rgba(0,0,0,0.10);
  --r: 20px;
  --r-sm: 14px;
  --r-lg: 24px;
  --max: 1440px;
  --edge: clamp(16px, 3vw, 40px);
  --font: 'Inter', -apple-system, sans-serif;
}

body.home, .ff-page { background: var(--bg)!important; color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.fx { max-width: var(--max); margin: 0 auto; padding: 0 var(--edge); }

/* Typo */
.t-caps { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.t-h1 { font-size: clamp(32px, 4.5vw, 52px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.t-h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.t-h3 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.t-body { font-size: 15px; line-height: 1.6; color: var(--text2); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 980px; font-size: 14px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all .3s; }
.btn--fill { background: var(--text); color: #fff; }
.btn--fill:hover { background: #333; transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--text); border: 1.5px solid rgba(0,0,0,.12); }
.btn--outline:hover { border-color: var(--text); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-lt); }
.btn--white { background: #fff; color: var(--text); box-shadow: var(--shadow); }
.btn--white:hover { box-shadow: var(--shadow-hover); }

/* Reveal */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.rv.is-v { opacity: 1; transform: none; }


/* ═══ HERO — Apple Card Bento ═══ */
.ff-hero { padding: 80px 0 32px; }
.ff-hero__grid {
  display: grid; grid-template-columns: 1fr .32fr; gap: 14px;
  height: 55vh; min-height: 320px; max-height: 520px;
}

/* Main card = text + image combined */
.ff-hero__main {
  background: var(--card); border-radius: var(--r-lg); overflow: hidden;
  /* ── Die Bildkante liegt auf der zweiten Spalte des Produktrasters ──
     Nachgerechnet statt geschaetzt. Das Raster darunter (.ff-pgrid) hat vier
     Spalten mit 16px Abstand, seine zweite Spalte beginnt also bei
     (W - 48) / 4 + 16 = 0,25 W + 4. Diese Karte ist (W - 14) / 1,32 breit
     (.ff-hero__grid: 1fr .32fr, gap 14). Setzt man das ineinander, bleibt
     0,33 x Kartenbreite + 7,5px — und zwar unabhaengig von W, weil W linear
     in der Kartenbreite steckt. Geprueft bei 1100, 1200 und 1400: jedes Mal
     dieselben 7,5px ueber 33 Prozent.
     Nebenwirkung und eigentlicher Zweck: die Textspalte wird breiter, und die
     Fahrzeugwahl darin bekommt Luft. */
  display: grid; grid-template-columns: calc(33% + 7.5px) 1fr;
  box-shadow: var(--shadow);
}
.ff-hero__text {
  padding: 32px 30px; display: flex; flex-direction: column; justify-content: space-between;
}
.ff-hero__badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  color: var(--accent); margin-bottom: 16px;
}
.ff-hero__badge img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.ff-hero__text .t-h1 { margin-bottom: 10px; }
.ff-hero__text .t-body { margin-bottom: 24px; max-width: 260px; }
.ff-hero__image {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* Top-left dark vignette */
.ff-hero__image::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(0,0,0,.22) 0%, transparent 70%);
}

/* Slides — crossfade */
.ff-hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .8s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.ff-hero__slide.is-active { opacity: 1; z-index: 1; }
.ff-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* First slide visible by default before JS kicks in */
.ff-hero__slide:first-of-type { opacity: 1; }

/* Dots */
.ff-hero__dots {
  position: absolute; top: 16px; left: 16px; z-index: 20;
  display: flex; gap: 6px; align-items: center;
}
.ff-hero__slide-label {
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,.7);
  margin-left: 8px; letter-spacing: .01em;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.ff-hero__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.5); border: 1.5px solid rgba(255,255,255,.8);
  cursor: pointer; padding: 0;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
}
.ff-hero__dot.is-active {
  width: 26px; border-radius: 4px;
  background: #fff; border-color: #fff;
}
.ff-hero__dot.is-active::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.15);
  animation: dot-progress 3.5s linear forwards;
  transform-origin: left;
  border-radius: 4px;
}
@keyframes dot-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.ff-hero__image-dots { display: none; }
.ff-hero__trust {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  display: flex; gap: 8px; flex-wrap: wrap; z-index: 10;
}
.ff-hero__trust-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 980px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.3);
  font-size: 11px; font-weight: 600; color: #fff;
}
.ff-hero__trust-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Helle Fassung fuer Textkarten auf hellem Grund (statt auf dem Hero-Video) —
   die Glas-Optik mit weisser Schrift waere hier praktisch unsichtbar. */
.ff-hero__trust-pill--light {
  background: var(--card, #fff); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--border, rgba(0,0,0,.1)); color: var(--text);
}
.ff-hero__trust-pill--light svg { color: var(--accent); }

.ff-hero__image-dots { display: none; }

/* Right sidebar cards */
.ff-hero__sidebar { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ff-hero__side-card {
  background: #fff; border-radius: var(--r);
  display: grid; grid-template-columns: auto 1fr; flex: 1; min-height: 0;
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: box-shadow .3s, transform .3s; overflow: hidden;
}
.ff-hero__side-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.ff-hero__side-thumb {
  height: 100%; aspect-ratio: 1; background: var(--bg);
  overflow: hidden;
}
.ff-hero__side-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ff-hero__side-info { padding: 10px 16px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ff-hero__side-name { font-size: 15px; font-weight: 700; color: var(--text); }
.ff-hero__side-sub { font-size: 13px; color: var(--text3); margin-top: 2px; }
.ff-hero__side-btn {
  display: block; margin-top: 5px;
  background: none; color: var(--accent);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 0; border-radius: 0;
  transition: opacity .2s;
}
.ff-hero__side-card:hover .ff-hero__side-btn { opacity: .7; }

/* Dark variant — Kompletträder card */
.ff-hero__side-card--dark {
  background: #111;
}
.ff-hero__side-card--dark:hover { box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.ff-hero__side-thumb--dark { background: #1e1e1e; }
.ff-hero__side-cta {
  margin-top: 6px; font-size: 12px; font-weight: 700;
  color: var(--accent); letter-spacing: .04em;
  transition: letter-spacing .2s;
}
.ff-hero__side-card--dark:hover .ff-hero__side-cta { letter-spacing: .08em; }

/* ═══ TRUST BAR ═══ */
.ff-trust { padding: 40px 0 0; }
.ff-trust__row {
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
}
.ff-trust__item { display: flex; align-items: center; gap: 10px; }
.ff-trust__item .material-symbols-rounded { font-size: 20px; color: var(--accent); }
.ff-trust__item span:last-child { font-size: 13px; font-weight: 500; color: var(--text2); }

/* ═══ SECTION HEADER ═══ */
.sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 12px; }
.sec-head .t-h2 { margin: 0; }
.sec-link { font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; display: flex; align-items: center; gap: 4px; border: 1px solid var(--border); padding: 8px 20px; border-radius: 980px; transition: all .3s; }
.sec-link:hover { border-color: var(--accent); }

/* ═══ PRODUCTS ═══ */
.ff-products { padding: 64px 0; }
.ff-products .sec-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ff-products .sec-head .t-h2 { margin-right: 0; }

/* View Toggle */
.ff-view-toggle { display: flex; gap: 4px; background: var(--card); border-radius: 10px; padding: 3px; border: 1px solid var(--border); margin-left: auto; }
.ff-view-btn {
  height: 32px; border: none; background: transparent; border-radius: 8px; padding: 0 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--text3); font-size: 12px; font-weight: 600; transition: all .2s;
  white-space: nowrap;
}
.ff-view-btn.is-active { background: var(--text); color: #fff; }
.ff-view-btn:hover:not(.is-active) { color: var(--text); }

/* Stacked Grid */
.ff-stacked { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Stacked Card */
.sc {
  background: var(--card); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow); transition: box-shadow .3s, transform .3s;
}
.sc:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.sc__img-wrap {
  position: relative; aspect-ratio: 1; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sc__img-wrap .pc__badge { z-index: 2; }
.sc__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .4s ease;
}
.sc__img.is-active { opacity: 1; }
.sc__body { padding: 20px 24px 24px; border-top: 1px solid rgba(0,0,0,0.06); }
.sc__name { font-size: 20px; font-weight: 700; color: var(--text); margin: 4px 0 6px; }
.sc__swatches { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.sc__swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: all .2s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.sc__swatch.is-active { border-color: var(--text); transform: scale(1.15); }
.sc__swatch:hover:not(.is-active) { transform: scale(1.1); }
.sc__color-label {
  font-size: 12px; color: var(--text3); margin-left: 4px;
  white-space: nowrap; line-height: 22px;
}
.sc__cta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 16px;
  font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none;
  transition: gap .2s;
}
.sc__cta:hover { gap: 8px; }

/* CTA "Alle ansehen" card */
.sc--cta { text-decoration: none; background: var(--card); }
.sc--cta:hover { box-shadow: var(--shadow-hover); }
.sc__cta-visual {
  background: #fff!important; display: flex; align-items: center; justify-content: center;
}
.sc__cta-visual .material-symbols-rounded {
  font-size: 56px; color: var(--accent);
  font-variation-settings: 'FILL' 0, 'wght' 300;
  transition: transform .3s;
}
.sc--cta:hover .sc__cta-visual .material-symbols-rounded { transform: translateX(8px); }

/* Tabs */
.ff-tabs { display: flex; gap: 8px; margin-bottom: 32px; }
.ff-tab {
  padding: 8px 22px; border-radius: 980px; font-size: 13px; font-weight: 600;
  color: var(--text2); cursor: pointer; background: var(--card); border: 1px solid var(--border);
  transition: all .25s; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.ff-tab.is-active { background: var(--text); color: #fff; border-color: var(--text); }
.ff-tab:hover:not(.is-active) { border-color: rgba(0,0,0,.12); }

.ff-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Product card — white, rounded */
.pc {
  background: var(--card); border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  box-shadow: var(--shadow); transition: box-shadow .4s, transform .4s;
}
.pc:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.pc__img {
  aspect-ratio: 1; background: var(--card); display: flex; align-items: center;
  justify-content: center; padding: 0; position: relative; overflow: hidden;
}
.pc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pc:hover .pc__img img { transform: scale(1.06); }
.pc__badge {
  position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 980px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text); font-size: 11px; font-weight: 600;
  letter-spacing: .02em; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.pc__body { padding: 20px; flex: 1; display: flex; flex-direction: column; border-top: 1px solid rgba(0,0,0,0.06); }
.pc__series { font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.pc__name { font-size: 15px; font-weight: 600; margin: 4px 0 6px; }
.pc__price { font-size: 13px; color: var(--text2); }
.pc__price strong { color: var(--text); }
.pc__action {
  margin-top: auto; padding-top: 14px; font-size: 12px; font-weight: 600;
  color: var(--accent); letter-spacing: .03em; text-transform: uppercase;
}

/* ═══ SHOWCASE — Bento Split ═══ */
.ff-showcase { padding: 64px 0; }
.ff-showcase__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ff-showcase__card {
  background: var(--card); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow); position: relative;
}
.ff-showcase__card--img { padding: 0; }
.ff-showcase__collage {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 4px; aspect-ratio: 1 / 1; overflow: hidden;
}
.ff-showcase__collage-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 0;
}
/* Large image: left column full height — round top-left + bottom-left */
.ff-showcase__collage-img--lg {
  grid-row: 1 / 3;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
/* Top-right image — round top-right only */
.ff-showcase__collage-img:nth-child(2) { border-radius: 0 var(--r-lg) 0 0; }
/* Bottom-right image — round bottom-right only */
.ff-showcase__collage-img:nth-child(3) { border-radius: 0 0 var(--r-lg) 0; }

/* Kompletträder: grosse Kachel rechts, zwei kleine links — Spiegel der Qualitäts-Collage */
.ff-showcase__collage--reverse .ff-showcase__collage-img--lg {
  grid-column: 2;
  grid-row: 1 / 3;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.ff-showcase__collage--reverse .ff-showcase__collage-img:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  border-radius: var(--r-lg) 0 0 0;
}
.ff-showcase__collage--reverse .ff-showcase__collage-img:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  border-radius: 0 0 0 var(--r-lg);
}
.ff-showcase__collage--reverse .ff-showcase__collage-img:nth-child(3) { border-radius: 0 var(--r-lg) var(--r-lg) 0; }

.ff-showcase--kr .ff-showcase__card--img { height: 100%; }

.ff-showcase__card--text { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }
.ff-showcase__card--text .t-caps { color: var(--accent); margin-bottom: 14px; }
.ff-showcase__card--text .t-h2 { margin-bottom: 16px; }
.ff-showcase__card--text .t-body { margin-bottom: 32px; max-width: 400px; }
.ff-showcase__stats { display: flex; gap: 40px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.ff-showcase__stat-val { font-size: 28px; font-weight: 700; color: var(--accent); display: block; }
.ff-showcase__stat-lbl { font-size: 11px; color: var(--text3); font-weight: 500; }

/* ═══ FEATURES — Small cards row ═══ */
.ff-features { padding: 64px 0; }
.ff-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ff-feat {
  background: var(--card); border-radius: var(--r); padding: 32px 28px;
  box-shadow: var(--shadow); transition: box-shadow .3s, transform .3s;
}
.ff-feat:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.ff-feat__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(178,152,118,.08); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ff-feat__icon .material-symbols-rounded { font-size: 22px; color: var(--accent); }
.ff-feat__title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.ff-feat__desc { font-size: 13px; line-height: 1.6; color: var(--text2); margin: 0; }

/* ═══ CTA ═══ */
.ff-cta-section {
  padding: 80px 0; margin: 24px 0 0;
}
.ff-cta-card {
  background: var(--text); border-radius: var(--r-lg); padding: 72px 48px;
  text-align: center; box-shadow: var(--shadow);
}
.ff-cta-card .t-caps { color: rgba(255,255,255,.35); margin-bottom: 14px; }
.ff-cta-card .t-h2 { color: #fff; margin-bottom: 12px; }
.ff-cta-card .t-body { color: rgba(255,255,255,.4); max-width: 400px; margin: 0 auto 28px; }

/* ═══ SPECS — Split Layout ═══ */
.ff-specs { padding: 64px 0; }
.ff-specs__split {
  display: grid; grid-template-columns: .48fr 1fr; gap: 0;
  background: var(--card); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
}

/* Video Panel */
.ff-specs__videos {
  display: flex; gap: 6px; padding: 12px;
  height: 480px; /* fixed height — no shrink on switch */
}
.ff-specs__vid {
  position: relative; overflow: hidden; cursor: pointer;
  border-radius: 0;
  flex: 0 0 60px;
  transition: flex .5s cubic-bezier(.4,0,.2,1);
}
/* Outer corners only — match parent card radius minus padding */
.ff-specs__vid:first-child { border-radius: 14px 0 0 14px; }
.ff-specs__vid:last-child  { border-radius: 0 14px 14px 0; }
/* If only one child or if active is first/last, keep full outer rounding */
.ff-specs__vid:first-child:last-child { border-radius: 14px; }

.ff-specs__vid.is-active { flex: 1 1 0; }
.ff-specs__vid video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ff-specs__vid-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(0,0,0,.35);
  transition: opacity .3s;
}
.ff-specs__vid-play {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.2); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s;
}
.ff-specs__vid:hover .ff-specs__vid-play { transform: scale(1.08); }
.ff-specs__vid-play .material-symbols-rounded { font-size: 22px; color: #fff; }
.ff-specs__vid-label {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  white-space: nowrap;
}
/* Inactive: smaller play + rotated label */
.ff-specs__vid:not(.is-active) .ff-specs__vid-play { width: 28px; height: 28px; }
.ff-specs__vid:not(.is-active) .ff-specs__vid-play .material-symbols-rounded { font-size: 16px; }
.ff-specs__vid:not(.is-active) .ff-specs__vid-label {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 9px; letter-spacing: .1em;
}

/* Content */
.ff-specs__content {
  padding: 40px 40px 36px;
  display: flex; flex-direction: column; justify-content: center;
}
.ff-specs__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
}
.ff-specs__row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.ff-specs__row:last-child, .ff-specs__row:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.ff-specs__icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(178,152,118,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ff-specs__icon .material-symbols-rounded { font-size: 15px; color: var(--accent); }
.ff-specs__key { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.ff-specs__val { font-size: 13px; color: var(--text2); margin-left: auto; text-align: right; }

/* Color Dots */
.ff-specs__dots {
  display: flex; gap: 5px; align-items: center; justify-content: flex-end;
}
.ff-specs__dot {
  width: 16px; height: 16px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
  cursor: default; position: relative;
  transition: transform .2s;
}
.ff-specs__dot:hover { transform: scale(1.25); }
/* Native tooltip via title attribute — no extra CSS needed */

.ff-specs__ctas {
  display: flex; gap: 10px; margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}
.ff-specs__ctas .btn {
  padding: 10px 22px; font-size: 13px;
}
.ff-specs__ctas .btn--fill {
  background: var(--accent); color: #fff;
}
.ff-specs__ctas .btn--fill:hover { background: var(--accent-lt); }
.ff-specs__ctas .btn--outline {
  border-color: rgba(0,0,0,.1); color: var(--text2);
}
.ff-specs__ctas .btn--outline:hover { border-color: var(--accent); color: var(--accent); }

/* ═══ FAQ ═══ */
.ff-faq { padding: 64px 0 0; }
.ff-faq__card {
  background: var(--card); border-radius: var(--r-lg); padding: 48px;
  box-shadow: var(--shadow);
}
.ff-faq__grid {
  display: grid; grid-template-columns: .4fr 1fr; gap: 48px;
  align-items: flex-start;
}
.ff-faq__header .t-caps { color: var(--accent); margin-bottom: 8px; }
.ff-faq__header .t-h2 { margin-bottom: 12px; }
.ff-faq__header .t-body { max-width: 280px; }
.ff-faq__list { display: flex; flex-direction: column; gap: 0; }
.ff-faq__item {
  border-bottom: 1px solid var(--border);
}
.ff-faq__item:last-child { border-bottom: none; }
.ff-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 18px 0; background: none; border: none;
  cursor: pointer; text-align: left; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--text);
  transition: color .2s;
}
.ff-faq__q:hover { color: var(--accent); }
.ff-faq__q .material-symbols-rounded {
  font-size: 20px; color: var(--text3); flex-shrink: 0;
  transition: transform .3s ease;
}
.ff-faq__item.is-open .ff-faq__q .material-symbols-rounded { transform: rotate(45deg); }
.ff-faq__a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 0;
}
.ff-faq__item.is-open .ff-faq__a {
  max-height: 200px; padding: 0 0 18px;
}
.ff-faq__a p {
  margin: 0; font-size: 13px; line-height: 1.7; color: var(--text2);
}

/* ═══ FOOTER — Apple Light (all pages) ═══ */
.dm-footer {
  background: var(--bg); border-top: 1px solid rgba(0,0,0,.06);
  padding: 48px 0 0;
}
.dm-footer__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--edge);
}
/* Feste Spaltenzahl statt 'auto-fit'.
   Mit 'repeat(auto-fit, minmax(160px, 1fr))' rechnet der Browser die Anzahl
   selbst aus — und schob bei knapper Breite die vierte Spalte in eine zweite
   Zeile, waehrend die dritte allein oben stehen blieb. Wie viele Spalten es
   gibt, weiss aber das Template, nicht der Browser: deshalb die Modifikator-
   klasse --4, wenn das Verzeichnis eine eigene Spalte hat. */
.dm-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  align-items: start;
}
.dm-footer__grid--4 { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }

/* Zwischenstufe: vier Spalten werden unter 1100 Pixeln zu eng, zwei sind
   dort besser als vier gequetschte. */
@media (max-width: 1100px) {
  .dm-footer__grid--4 { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
}
.dm-footer__brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dm-footer__brand-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: .08em; }
.dm-footer__slogan { font-size: 13px; color: var(--text3); margin: 0; }
.dm-footer__heading {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); margin: 0 0 14px;
}
.dm-footer__info { display: flex; flex-direction: column; gap: 6px; }
.dm-footer__info span,
.dm-footer__info a {
  font-size: 13px; color: var(--text2); text-decoration: none; transition: color .2s;
}
.dm-footer__info a:hover { color: var(--text); }
.dm-footer__social { display: flex; gap: 12px; margin-top: 16px; }
.dm-footer__social-link {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.04);
  display: flex; align-items: center; justify-content: center; transition: background .3s;
}
.dm-footer__social-link:hover { background: rgba(0,0,0,.08); }
.dm-footer__social-link svg { stroke: var(--text2)!important; }
.dm-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 12px; padding: 20px 0; border-top: 1px solid rgba(0,0,0,.06);
}
.dm-footer__copy {
  font-size: 12px; color: var(--text3);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}

/* Der Verweis auf die Agentur, wie bei Damina: eine kleine Plakette statt
   eines weiteren grauen Links — sonst geht sie zwischen den Rechtslinks
   unter, und genau das soll sie nicht. */
.footer-weblabs {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 6px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 6px;
  color: var(--text3);
  font-size: 12px; font-weight: 600; text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.footer-weblabs:hover,
.footer-weblabs:focus-visible {
  background: rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.14);
  color: var(--text);
}
.footer-weblabs img { width: 18px; height: 18px; border-radius: 3px; }

.dm-footer__legal {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dm-footer__legal a {
  font-size: 12px; color: var(--text3); text-decoration: none; transition: color .2s;
}
.dm-footer__legal a:hover { color: var(--text); }

/* ── Vertrag widerrufen ──
   Gesetzlich vorgeschrieben und muss auffindbar sein, deshalb als Knopf und
   nicht als vierzehnter grauer Link. Farben aus dem Theme: Akzentrahmen und
   Akzentschrift, gefuellt erst beim Ueberfahren — laut genug zum Finden,
   ruhig genug, um die Rechtszeile nicht zu dominieren. */
/* Der Widerrufsknopf sitzt jetzt in der Spalte Oeffnungszeiten, nicht mehr
   in der Rechtsleiste — die Regel darf deshalb nicht mehr darauf zeigen.
   Akzentfarbe wie zuvor: Die Fusszeile ist hell (#F5F5F7), Weiss waere
   dort unsichtbar. Nur Platzierung und Abstand aendern sich. */
.dm-footer__widerruf {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.dm-footer__widerruf:hover,
.dm-footer__widerruf:focus-visible {
  background: var(--accent);
  color: #fff;
}
@media (max-width: 768px) {
  .dm-footer__grid,
  .dm-footer__grid--4 { grid-template-columns: 1fr; gap: 32px; }
  .dm-footer__bottom { flex-direction: column; align-items: flex-start; }
  .dm-footer__legal { gap: 12px 16px; row-gap: 12px; align-items: center; }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .ff-hero__grid { grid-template-columns: 1fr; }
  .ff-hero__sidebar { display: none; }
  /* Ohne Seitenspalte fuellt die Karte die ganze Breite, und das Raster
     darunter hat hier zwei Spalten: dessen zweite beginnt bei W/2 + 8. */
  .ff-hero__main { grid-template-columns: calc(50% + 8px) 1fr; }
  .ff-pgrid { grid-template-columns: repeat(2, 1fr); }
  .ff-showcase__grid { grid-template-columns: 1fr; }
  /* Kompletträder-Sektionen: Bild zuerst auf Mobile, wie bei "Engineering
     aus Deutschland" (dort steht das Bild schon im DOM vorn) — hier steht
     der Text zuerst im DOM, deshalb per 'order' erzwungen statt umgebaut. */
  .ff-showcase--kr .ff-showcase__card--img { order: -1; }
  .ff-features__grid { grid-template-columns: 1fr 1fr; }
  .ff-specs__split { grid-template-columns: 1fr; }
  .ff-specs__videos { height: 300px; flex-direction: row; }
  .ff-specs__vid { flex: 0 0 80px; }
  .ff-specs__vid:first-child { border-radius: 14px 0 0 14px; }
  .ff-specs__vid:last-child  { border-radius: 0 14px 14px 0; }
  .ff-specs__vid:not(.is-active) .ff-specs__vid-label { writing-mode: horizontal-tb; }
  .ff-specs__content { padding: 32px 28px 28px; }
  .ff-faq__grid { grid-template-columns: 1fr; gap: 24px; }
  .ff-faq__card { padding: 32px 28px; }
}

@media (max-width: 768px) {
  /* Hero: image top, text bottom, no fixed height */
  .ff-hero { padding: 78px 0 24px; }
  .ff-hero__grid {
    grid-template-columns: 1fr;
    height: auto; min-height: 0; max-height: none;
  }
  .ff-hero__main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: visible;
  }
  .ff-hero__image {
    order: -1;
    aspect-ratio: 4/3;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    min-height: 220px;
  }
  .ff-hero__text { order: 1; padding: 24px 20px; }

  /* Smaller trust pills on mobile */
  .ff-hero__trust { gap: 5px; bottom: 10px; left: 10px; right: 10px; }
  .ff-hero__trust-pill { padding: 4px 9px; font-size: 10px; gap: 4px; }
  .ff-hero__trust-pill svg { width: 11px; height: 11px; }

  /* Show sidebar on mobile as 2x2 grid */
  .ff-hero__sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ff-hero__side-card {
    grid-template-columns: 70px 1fr; /* narrow thumb, text gets the rest */
  }
  .ff-hero__side-thumb {
    width: 70px; height: auto; aspect-ratio: 1;
  }
  .ff-hero__side-info { padding: 8px 10px; }
  .ff-hero__side-name {
    font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ff-hero__side-sub  {
    font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Products header:
     Row 1: "Unsere Felgen" (full width)
     Row 2: toggle + "Alle ansehen" left-aligned in one line */
  .ff-products .sec-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .ff-products .sec-head .t-h2 {
    flex-basis: 100%;      /* full row */
    white-space: nowrap;
  }
  .ff-view-toggle { margin-left: 0; flex-shrink: 0; order: 2; }
  .sec-link { order: 3; margin-top: 0; flex-basis: auto; }

  /* Grids: 1 column on mobile */
  .ff-stacked { grid-template-columns: 1fr; gap: 16px; }
  .ff-pgrid { grid-template-columns: 1fr; gap: 12px; }

  /* Swatches below name, left-aligned */
  .sc__body { padding: 16px 18px 20px; }
  .sc__swatches { justify-content: flex-start; }

  /* Tabs: scrollable row */
  .ff-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; flex-wrap: nowrap; }
  .ff-tab { white-space: nowrap; flex-shrink: 0; }

  .ff-features__grid { grid-template-columns: 1fr; }
  .ff-showcase__stats { gap: 24px; }
  .ff-trust__row { gap: 20px; }
  .ff-specs__grid { grid-template-columns: 1fr; }
  .ff-specs__videos { padding: 10px; gap: 4px; height: 240px; }
  .ff-specs__vid { flex: 0 0 48px; }
  .ff-specs__vid:first-child { border-radius: 10px 0 0 10px; }
  .ff-specs__vid:last-child  { border-radius: 0 10px 10px 0; }
  .ff-faq__q { font-size: 13px; padding: 14px 0; }
}

@media (max-width: 480px) {
  .ff-showcase__stats { flex-direction: column; }
}


/* ══════════════════════════════════════════════════════════════════
   Fahrzeugwahl im Hero
   Sie steht an der Stelle der beiden Knoepfe "Felgen" und "Räder" und ist
   damit die eine Handlungsaufforderung des Kopfes. Zwei gleichrangige gibt es
   nicht: dann ist keine die wichtigste.
   Die Textspalte ist rund 255px breit — jede Zeile hier ist darauf gerechnet.
   ══════════════════════════════════════════════════════════════════ */
.ff-hero__fzg { display: flex; flex-direction: column; gap: 10px; }

.ff-hero__fzg-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text3, #86868B);
}

/* HSN + TSN + Pfeil in einer Zeile. Ein ausgeschriebener Knopf braeuchte gut
   hundert Einheiten mehr und braeche in eine zweite Zeile um — daher nur der
   Pfeil, und der bleibt quadratisch statt den Rest der Zeile zu fuellen. */
.ff-hero__fzg-row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }

/* Ein Feld traegt seine Herkunftsangabe in sich: rechts im Feld eine kleine
   Marke mit der Nummer aus der Zulassungsbescheinigung (2.1 und 2.2). Als
   Zeile darueber kostete das eine ganze Bildschirmzeile fuer zwei Zahlen.
   Das Eingabefeld bekommt rechts entsprechend Platz, damit die Eingabe nicht
   unter die Marke laeuft. */
.ff-hero__fzg-feld { position: relative; display: inline-flex; flex: 0 0 auto; }
.ff-hero__fzg-feld em {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;      /* der Klick gehoert dem Feld, nicht der Marke */
  font-style: normal;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .06);
  color: var(--text3, #86868B);
}

.ff-hero__fzg-row input {
  width: 98px;               /* Platz fuer die Marke rechts */
  flex: 0 0 auto;
  padding: 0 34px 0 12px;
  height: 44px;
  border: 1.5px solid var(--border, rgba(0, 0, 0, .12));
  border-radius: 12px;
  background: #fff;
  font: 600 15px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text, #1D1D1F);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ff-hero__fzg-row input::placeholder {
  letter-spacing: .04em; font-weight: 500; text-transform: none; color: var(--text3, #86868B);
}
.ff-hero__fzg-row input:focus {
  border-color: var(--text, #1D1D1F);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
}

/* Rund, dunkel, quadratisch — dieselbe Anmutung wie der gefuellte Knopf, den
   er ersetzt, nur auf das Symbol eingedampft. */
.ff-hero__fzg-go {
  flex: 0 0 auto;
  width: 48px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background: var(--text, #1D1D1F);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.ff-hero__fzg-go:hover { background: #333; transform: translateY(-1px); }
.ff-hero__fzg-go .material-symbols-rounded { font-size: 19px; }

.ff-hero__fzg-err { margin: 0; font-size: 12px; line-height: 1.45; color: #b91c1c; }

/* ── Fahrzeug steht fest ──
   Oben eine kompakte Fahrzeugzeile (Logo | "Passend für" + Name | Ändern),
   darunter zwei Wege nebeneinander: Felgen (gefuellt) und Kompletträder
   (Kontur). Bricht bei sehr schmaler Spalte untereinander um. */
.ff-hero__fzg-aktiv { display: flex; flex-direction: column; gap: 12px; }
.ff-hero__fzg-aktiv[hidden], .ff-hero__fzg-form[hidden], .ff-hero__fzg-wege[hidden] { display: none; }
.ff-hero__fzg-auto {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 8px; border-radius: 14px;
  background: var(--bg, #f5f5f7); border: 1px solid var(--border, rgba(0,0,0,.08));
}
.ff-hero__fzg-logo {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ff-hero__fzg-logo img { width: 26px; height: 26px; object-fit: contain; }
.ff-hero__fzg-logo .material-symbols-rounded { font-size: 20px; color: var(--text3, #86868B); }
.ff-hero__fzg-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ff-hero__fzg-name {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
  color: var(--text, #1D1D1F);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ff-hero__fzg-unter { font-size: 11.5px; color: var(--text3, #86868B); line-height: 1.3; }
.ff-hero__fzg-aendern {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 11.5px/1.3 var(--font); color: var(--text2, #6E6E73);
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.ff-hero__fzg-aendern:hover { color: var(--text, #1D1D1F); border-bottom-color: currentColor; }
/* Zwei Wege immer nebeneinander; in der schmalen Hero-Spalte am Desktop
   (~240 px) ohne Icons und etwas kompakter (Container-Abfrage). */
.ff-hero__fzg-ziele { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; container-type: inline-size; }
.ff-hero__fzg-ziel {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  height: 46px; padding: 0 12px; border-radius: 12px; white-space: nowrap;
  font: 700 14px/1 var(--font); text-decoration: none;
}
.ff-hero__fzg-ziel .material-symbols-rounded { font-size: 18px; }
.ff-hero__fzg-ziel--zwei {
  border: 1.5px solid var(--text, #1D1D1F); color: var(--text, #1D1D1F); background: #fff;
  transition: background .18s ease;
}
.ff-hero__fzg-ziel--zwei:hover { background: var(--bg, #f5f5f7); color: var(--text, #1D1D1F); }
@container (max-width: 300px) {
  .ff-hero__fzg-ziel { height: 44px; padding: 0 6px; font-size: 13px; }
  .ff-hero__fzg-ziel .material-symbols-rounded { display: none; }
}

/* ── Die leiseren Wege ──
   Eine Zeile, zwei Links, durch einen Punkt getrennt. Sie tragen die Ziele der
   alten Knoepfe weiter, ohne mit der Fahrzeugwahl um Aufmerksamkeit zu
   streiten — und sie bleiben in **einer** Zeile: bei rund 255 verfuegbaren
   Einheiten messen "Modell wählen" und "Alle Felgen" mit Trenner zusammen
   etwa 176. Ein dritter Link passte nicht mehr. */
.ff-hero__fzg-wege {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.ff-hero__fzg-weg {
  padding: 0;
  border: none;
  background: none;
  /* Ein Link bricht nie in sich selbst um — lieber die ganze Zeile umbrechen
     als "Kompletträ-der". */
  white-space: nowrap;
  font: 600 12.5px/1.4 var(--font);
  color: var(--text2, #6E6E73);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.ff-hero__fzg-weg:hover { color: var(--text, #1D1D1F); border-bottom-color: currentColor; }
.ff-hero__fzg-punkt { color: var(--text3, #86868B); font-size: 12px; }

@media (max-width: 640px) {
  .ff-hero__fzg-row input { width: 92px; }
}

/* ══════════════════════════════════════════════════════════════════
   Google-Bewertungen
   ══════════════════════════════════════════════════════════════════ */

/* Sterne als Zeichen, nicht als Bild: fuenf Glyphen statt fuenf Anfragen.
   Der volle Streifen liegt ueber dem leeren und wird beschnitten — damit
   zeigt 4,7 auch wirklich 4,7 und nicht gerundete fuenf. */
.ff-sterne {
  position: relative;
  /* Die Kiste ist genau ein Geviert hoch (1em) und der Stern darin mittig.
     Ohne feste Hoehe richtet sich die Kiste nach der Zeilenbox der Schrift,
     und die ist bei Symbolzeichen deutlich hoeher als die Tinte — daher der
     Versatz nach unten. */
  display: inline-flex;
  align-items: center;
  height: 1em;
  flex: 0 0 auto;
  font-size: var(--ff-sterne-groesse, 13px);
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  vertical-align: middle;
}
.ff-sterne__leer,
.ff-sterne__voll { line-height: 1; }
.ff-sterne__leer { color: rgba(0, 0, 0, .16); }
.ff-sterne__voll {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: #F5A623;
}

/* ── Kopfzeile ── */
.ff-gtrust {
  display: inline-flex;
  align-items: center;
  /* Zeilenhoehe eins: der Text soll die Kiste nicht hoeher machen als noetig.
     Die senkrechte Lage regelt die Variante weiter unten. */
  line-height: 1;
  gap: 6px;
  text-decoration: none;
  color: var(--text2, #6E6E73);
  white-space: nowrap;
}
.ff-gtrust__note { font-size: 12.5px; font-weight: 700; color: var(--text, #1D1D1F); }
.ff-gtrust__zahl { font-size: 11.5px; font-weight: 500; }
/* Das Logo schiebt mit 'margin-right: auto' alles Folgende nach rechts
   (style.css, body.has-light-header). Steht die Vertrauenszeile direkt
   dahinter, wuerde sie damit ans andere Ende der Kopfzeile wandern — genau
   dorthin, wo sie nicht hin soll. Der Abstandhalter wandert deshalb eine
   Stelle weiter: vom Logo auf die Zeile.
   ':has()' koennen alle aktuellen Browser. Ein Browser ohne das laesst den
   Abstandhalter am Logo und stellt die Zeile weiter rechts — unschoen, aber
   nicht kaputt. */
body.has-light-header .dm-header__logo:has(+ .ff-gtrust--desktop) { margin-right: 0; }

/* Neben dem Logo, nicht zwischen Navigation und Aktionen: dort konkurrierte
   die Zeile mit den Bedienelementen. Hier gehoert sie zur Absenderangabe.
   Kein margin-left:auto mehr — sie soll am Logo kleben, nicht ans andere Ende
   der Kopfzeile wandern. */
.ff-gtrust--desktop {
  margin-left: 14px;
  margin-right: auto;
  padding-left: 14px;
  border-left: 1px solid var(--border, rgba(0, 0, 0, .1));
  flex: 0 0 auto;
  /* Volle Hoehe der Kopfzeile, Inhalt darin mittig — damit haengt die Lage
     nicht daran, wie hoch ein Stern in einer bestimmten Schrift misst. */
  align-self: stretch;
  display: flex;
  align-items: center;
}
.ff-gtrust--desktop:hover .ff-gtrust__zahl { color: var(--text, #1D1D1F); }

/* Am Handy hat die Kopfzeile keine zweite Zeile frei — dort steht der Beleg
   unten im Menue, abgesetzt durch eine Linie. */
.ff-gtrust--mobil {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(0, 0, 0, .08));
  gap: 8px;
  flex-wrap: wrap;
  white-space: normal;
}
.ff-gtrust--mobil .ff-gtrust__note { font-size: 15px; }
.ff-gtrust--mobil .ff-gtrust__zahl { font-size: 13px; }

/* Unter 1100px wird es in der Kopfzeile eng — dann faellt die Zahl weg und es
   bleiben Sterne und Note. Ganz verstecken waere schade: die Sterne sind der
   Teil, den man ohne Lesen erfasst. */
@media (max-width: 1100px) {
  .ff-gtrust--desktop .ff-gtrust__zahl { display: none; }
}
@media (max-width: 900px) {
  .ff-gtrust--desktop { display: none; }
}

/* ── Abschnitt ── */
.ff-rez { padding: 56px 0 8px; }
.ff-rez__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ff-rez__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--text2, #6E6E73);
}
.ff-rez__note strong { font-size: 17px; color: var(--text, #1D1D1F); }
.ff-rez__alle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2, #6E6E73);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.ff-rez__alle:hover { color: var(--text, #1D1D1F); border-bottom-color: currentColor; }

.ff-rez__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.ff-rez__karte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 22px 24px;
  background: var(--card, #fff);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--shadow);
}
.ff-rez__karte blockquote {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text, #1D1D1F);
  /* Ungekuerzt gespeichert, aber nicht unbegrenzt hoch: nach acht Zeilen wird
     abgeblendet. Wer alles lesen will, geht ueber "Alle ansehen" zu Google —
     dort steht der Text vollstaendig und in seinem Zusammenhang. */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ff-rez__karte figcaption {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 12.5px;
  color: var(--text3, #86868B);
}
.ff-rez__karte figcaption img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ff-rez__name { font-weight: 700; color: var(--text, #1D1D1F); }
.ff-rez__wann::before { content: '·'; margin-right: 7px; }

.ff-rez__quelle {
  margin: 18px 0 0;
  font-size: 11.5px;
  color: var(--text3, #86868B);
}

@media (max-width: 1024px) { .ff-rez__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  {
  .ff-rez { padding: 40px 0 4px; }
  .ff-rez__grid { grid-template-columns: 1fr; }
}

/* ── Beleg im Fuss ──
   Vier runde Kundenbilder, ueberlappend, dahinter die Note. Die Ueberlappung
   ist kein Schmuck: sie macht aus vier Einzelbildern eine Gruppe, und eine
   Gruppe liest sich als "viele" — genau die Aussage.
   Farben fuer einen **hellen** Fuss: .dm-footer steht in dieser Datei auf
   var(--bg), also #F5F5F7, und diese Datei wird nach style.css geladen. Ein
   erster Entwurf mit weisser Schrift waere auf Hellgrau unlesbar gewesen —
   nachgesehen statt angenommen. */
.ff-fuss-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 20px;
}
.ff-fuss-trust__bilder { display: flex; flex: 0 0 auto; }
.ff-fuss-trust__bilder img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  /* Der Rand traegt die Farbe des Fusses und schneidet die Nachbarin frei —
     ohne ihn verschwimmen die Kreise ineinander. */
  border: 2px solid var(--bg, #F5F5F7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.ff-fuss-trust__bilder img + img { margin-left: -12px; }

.ff-fuss-trust__note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text2, #6E6E73);
}
.ff-fuss-trust__note strong { font-size: 14px; color: var(--text, #1D1D1F); }

.ff-fuss-trust__link {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2, #6E6E73);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.ff-fuss-trust__link:hover { color: var(--text, #1D1D1F); border-bottom-color: currentColor; }
.ff-fuss-trust__text { margin: 0; font-size: 12.5px; color: var(--text3, #86868B); }

@media (max-width: 640px) {
  .ff-fuss-trust__bilder img { width: 38px; height: 38px; }
  .ff-fuss-trust__bilder img + img { margin-left: -10px; }
}

/* ══════════════════════════════════════════════════════════════════
   404
   Kein Kasten mit einer Entschuldigung, sondern die kuerzeste Strecke von
   "kaputter Link" zu "das habe ich gesucht": Fahrzeugwahl gross, Serien
   darunter. Die Formensprache ist die der Startseite — eine 404 in einem
   fremden Gewand wirkt wie ein Fehler des Servers, nicht wie eine Seite des
   Shops.
   ══════════════════════════════════════════════════════════════════ */
.ff-404 { padding: 96px 0 40px; }

.ff-404__karte {
  display: grid;
  grid-template-columns: calc(46% + 8px) 1fr;
  background: var(--card, #fff);
  border-radius: var(--r-lg, 20px);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 380px;
}
.ff-404__text {
  padding: 40px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Die Zahl ist Zierde und Ortsangabe zugleich — gross genug, um sofort zu
   sagen "hier ist nichts", klein genug, um der Ueberschrift nicht die Schau
   zu stehlen. */
.ff-404__zahl {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--accent, #B8860B);
  margin-bottom: 14px;
}
/* Ausdruecklich dunkel. '.t-h1' bringt nur Groesse und Schnitt mit, die Farbe
   erbt es — und ausserhalb von 'body.home' und '.ff-page' ist das die helle
   Schrift des dunklen Grundlayouts. Auf der weissen Karte hiess das: weisse
   Ueberschrift auf weissem Grund. Deshalb traegt das <main> jetzt zusaetzlich
   '.ff-page', und die Ueberschrift sagt ihre Farbe hier noch einmal selbst. */
.ff-404__text .t-h1 { margin-bottom: 12px; color: var(--text, #1D1D1F); }
.ff-404 .t-body { color: var(--text2, #6E6E73); }
.ff-404__text .t-body { margin-bottom: 26px; max-width: 380px; }

.ff-404__bild { position: relative; overflow: hidden; }
.ff-404__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Fahrzeugwahl ── */
.ff-404__label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text3, #86868B);
}
.ff-404__row { display: flex; gap: 8px; align-items: center; }
.ff-404__feld { position: relative; display: inline-flex; flex: 0 0 auto; }
.ff-404__feld input {
  width: 104px;
  height: 48px;
  padding: 0 36px 0 14px;
  border: 1.5px solid var(--border, rgba(0,0,0,.12));
  border-radius: 12px;
  background: #fff;
  font: 600 15px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text, #1D1D1F);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ff-404__feld input::placeholder { letter-spacing: .04em; font-weight: 500; text-transform: none; color: var(--text3, #86868B); }
.ff-404__feld input:focus { border-color: var(--text, #1D1D1F); box-shadow: 0 0 0 3px rgba(0,0,0,.07); }
.ff-404__feld em {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
  font-style: normal; font-weight: 700; font-size: 10px;
  padding: 2px 5px; border-radius: 4px;
  background: rgba(0,0,0,.06); color: var(--text3, #86868B);
}
.ff-404__go {
  flex: 0 0 auto;
  width: 52px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 12px;
  background: var(--text, #1D1D1F); color: #fff;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.ff-404__go:hover { background: #333; transform: translateY(-1px); }
.ff-404__go .material-symbols-rounded { font-size: 20px; }

.ff-404__err { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #b91c1c; }

.ff-404__wege { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; color: var(--text3, #86868B); font-size: 12.5px; }
.ff-404__weg {
  padding: 0; border: none; background: none;
  font: 600 12.5px/1.4 var(--font);
  color: var(--text2, #6E6E73);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.ff-404__weg:hover { color: var(--text, #1D1D1F); border-bottom-color: currentColor; }

/* Wer schon ein Fahrzeug gemerkt hat, bekommt es direkt angeboten. */
.ff-404__gemerkt {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(184,134,11,.07);
  border: 1px solid rgba(184,134,11,.22);
  font-size: 13px;
  color: var(--text, #1D1D1F);
}
.ff-404__gemerkt a { color: var(--accent, #B8860B); font-weight: 700; }

/* ── Serien ── */
.ff-404__serien { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.ff-404__serie {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  background: var(--card, #fff);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ff-404__serie:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.10); }
.ff-404__serie-bild { flex: 0 0 62px; }
.ff-404__serie-bild img { width: 62px; height: 62px; object-fit: contain; display: block; }
.ff-404__serie-name { display: block; font-size: 13.5px; font-weight: 700; color: var(--text, #1D1D1F); }
.ff-404__serie-preis { display: block; margin-top: 2px; font-size: 12px; color: var(--text3, #86868B); }
.ff-404__serie--kfg .ff-404__serie-preis { color: var(--accent, #B8860B); font-weight: 700; }

@media (max-width: 1024px) {
  .ff-404__serien { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ff-404 { padding: 86px 0 28px; }
  /* Bild nach oben, Text darunter — auf einem Telefon soll die Eingabe
     erreichbar sein, ohne an einem Foto vorbeizuscrollen. */
  .ff-404__karte { grid-template-columns: 1fr; min-height: 0; }
  .ff-404__bild { order: -1; height: 190px; }
  .ff-404__text { padding: 28px 22px 30px; }
}
@media (max-width: 480px) {
  .ff-404__feld input { width: 92px; }
  .ff-404__serien { grid-template-columns: 1fr; }
}

/* ── Beleg in der CTA-Karte ──
   Die Karte ist dunkel, die Farben hier entsprechend hell. An der Stelle, an
   der jemand sich entscheidet, wirkt die Bewertung staerker als weiter oben. */
.ff-cta-trust {
  /* Unter den Knopf, nicht daneben. Als inline-flex blieb die Zeile in
     derselben Zeile wie der Knopf — die CTA-Karte richtet ihren Inhalt
     mittig aus, und zwei Dinge nebeneinander lesen sich dort als ein
     Element. Eigene Zeile, mittig, mit Abstand. */
  display: flex;
  width: fit-content;
  margin: 20px auto 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
}
.ff-cta-trust strong { color: #fff; font-size: 14px; }
.ff-cta-trust:hover { color: rgba(255, 255, 255, .9); }
/* Auf Dunkel braucht der leere Stern mehr Kontrast als auf Hell. */
.ff-cta-trust .ff-sterne__leer { color: rgba(255, 255, 255, .24); }

/* ── Kartenkopf fuer Inhaltsseiten ──
   Dieselbe Karte wie auf den Verkaufsseiten. Das Video liegt darin und nicht
   randlos hinter der ganzen Breite — genau das war der Unterschied, an dem
   die alten Seiten wie ein fremder Shop aussahen. */
.ff-kopf { padding: 96px 0 8px; }
.ff-kopf__karte {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  background: #0A0A0A;
}
.ff-kopf__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Die Ueberschrift ist hier ein h1 — sie ist die Ueberschrift der Seite.
   Die Klasse bringt ihre eigene Groesse mit, der Browserstandard fuer h1
   wuerde sie sonst zusaetzlich aufblasen. */
.ff-kopf__karte h1.kfg__viz-vehicle-name { margin: 0; line-height: 1.1; }

@media (max-width: 900px) {
  .ff-kopf { padding: 84px 0 4px; }
  .ff-kopf__karte { min-height: 200px; }
}

/* Das Einblenden macht das Skript selbst (assets/js/video-nachladen.js) —
   hier steht bewusst kein 'opacity: 0'. Sonst haetten alle Kopf-Videos
   ueberall dauerhaft unsichtbar dagestanden, wenn das Skript einmal nicht
   laedt. Eine Regel, die im Fehlerfall die Seite kaputt macht, gehoert nicht
   ins Stylesheet, sondern dorthin, wo sie auch wieder zurueckgenommen wird. */
video[data-ff-video] { transition: opacity .5s ease; }

/* ══════════════════════════════════════════════════════════════════
   Mobile Nachbesserungen
   ══════════════════════════════════════════════════════════════════ */

/* ── Überlagerungen scrollen lassen ──
   Auf iOS ist '85vh' die Hoehe *ohne* die ein- und ausfahrende Browserleiste:
   ein Dialog in dieser Hoehe ragt unter die Leiste, und der letzte Knopf ist
   nicht erreichbar. 'dvh' rechnet mit dem, was gerade wirklich sichtbar ist.
   Dazu die beiden Angaben, ohne die iOS eine Flaeche mit 'overflow: auto'
   gerne gar nicht erst als scrollbar behandelt. */
.dm-modal__content,
.dm-modal__dialog,
.dm-legal-modal {
  max-height: 85dvh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#ffb-dr {
  max-height: 90dvh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Fahrzeugleiste im Leerzustand ──
   Text und Knopf lagen in einer Zeile, der Text mit 'flex: 1' und der Knopf
   mit 'nowrap'. Auf einem Telefon bleiben dem Text damit rund achtzig Pixel,
   und "Fahrzeug auswählen — Passende Felgen direkt anzeigen" faellt in sechs
   Zeilen untereinander. Unter 560px stapelt die Leiste sauber: Text ueber
   voller Breite, Knopf darunter ueber voller Breite. */
@media (max-width: 560px) {
  #ffb-empty {
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  #ffb-empty > span:nth-of-type(2) {
    flex: 1 1 100% !important;
    line-height: 1.4;
  }
  #ffb-empty > button {
    flex: 1 1 100% !important;
    justify-content: center;
    padding: 9px 12px !important;
  }
  /* Dieselbe Behandlung fuer die Leiste mit gewaehltem Fahrzeug. */
  #ffb-active { gap: 8px !important; }
  #ffb-active #ffb-label { flex: 1 1 100%; }
  #ffb-active #ffb-btn-change,
  #ffb-active #ffb-btn-remove { flex: 1 1 auto; justify-content: center; }
}

/* Platzhalter-Styles liegen in konfigurator.css (Hero-Card). */

/* ── Höhen, die auf iOS unter die Browserleiste rutschen ──
   'vh' ist die Hoehe *ohne* die ein- und ausfahrende Leiste. Alles, was damit
   bemessen ist, ragt darunter — und was dort liegt, ist unerreichbar, wenn der
   Rest nicht scrollt. Betroffen sind ausgerechnet Elemente, die es nur auf dem
   Telefon gibt. */
.kfg__mob-sheet { height: 90dvh !important; max-height: 90dvh !important; }

/* Der RDKS-Dialog hatte gar keine Hoehenbegrenzung: Kopf, zwei Bildkarten,
   Infokasten und zwei Knoepfe stehen mittig in einem festen Rahmen. Auf einem
   kleinen Geraet — in Querlage immer — ragt er oben und unten heraus, und
   "Überspringen"/"Bestätigen" sind nicht erreichbar. Auf dem Rechner faellt
   das nie auf. */
.rdks-modal__card {
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Popover der Kopfzeile ──
   Konto 320px, Garage 380px, Warenkorb 400px — ohne max-width und ohne
   Mobilregel. Am rechten Rand verankert ragen sie auf jedem Telefon unter
   400px links aus dem Bild; 'body { overflow-x: hidden }' schneidet sie dann
   stumm ab, statt scrollen zu lassen. Der abgeschnittene Teil ist damit weg. */
@media (max-width: 460px) {
  .dm-popover,
  .dm-popover--garage,
  .dm-popover--cart {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    right: -8px;
  }
}

/* ── iOS zoomt in Felder unter 16px hinein ──
   Und wieder heraus zoomt es nicht. Im Kassenweg heisst das: nach dem ersten
   Antippen scrollt man seitlich durch ein vergroessertes Formular. Auf dem
   Telefon deshalb ueberall mindestens 16px — die Schriftgroesse am Bildschirm
   bleibt gleich, nur der Zoom bleibt aus. */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="search"], input[type="url"], input[type="date"],
  select, textarea,
  .kfg__input, .woocommerce-input-wrapper input, .dm-search-input {
    font-size: 16px !important;
  }
}

/* ── Berührungsziele ──
   Der Entfernen-Knopf im Mini-Warenkorb misst 22 Pixel und sitzt an der Ecke
   des Produktbilds — eine loeschende Aktion mit einem Ziel, das man kaum
   trifft, dafuer aber leicht danebentippt. Die Flaeche waechst, das Aussehen
   bleibt: der sichtbare Knopf ist weiter klein, nur der Bereich darum nimmt
   die Beruehrung an. */
@media (hover: none) {
  .dm-mini-cart__remove,
  .kfg__modal-close,
  .dm-modal__close,
  .rdks-modal__close {
    position: relative;
  }
  .dm-mini-cart__remove::after,
  .dm-modal__close::after,
  .rdks-modal__close::after {
    content: '';
    position: absolute;
    inset: -11px;              /* 22 + 2x11 = 44 */
  }
  /* Die Mengensteuerung im B2B war auf dem Telefon kleiner als am Rechner —
     36px dort, 26px hier. Das ist genau verkehrt herum. */
  .ff-b2b-stepper__btn { min-width: 40px !important; min-height: 40px !important; }
}

/* ── B2B-Suche schob die Werkzeugleiste aus dem Bild ──
   Im Mobilblock stand 'min-width: 320px' — auf einem 320er Geraet bleiben nach
   den Seitenraendern rund 288px. Die Regel wurde beim Kopieren aus dem
   Desktopblock mitgenommen. */
@media (max-width: 768px) {
  .ff-b2b-search { min-width: 0 !important; }
}