/* =========================================================
   Autocenter IDEAL – Home Page Styles
   Seitenspezifisch: Hero + Animation, Counters, Section-Varianten,
   Ankauf-Teaser, Bewertungen, FAQ, Partner-Marquee, Kontakt-Teaser
   ========================================================= */

/* ------- KEYFRAMES ------- */
@keyframes evilFlash {
  0%   { opacity: 0; filter: brightness(1); }
  10%  { opacity: 1; filter: brightness(2) drop-shadow(0 0 40px #fff); }
  20%  { opacity: 0; filter: brightness(1); }
  30%  { opacity: 1; filter: brightness(2) drop-shadow(0 0 40px #fff); }
  45%  { opacity: .1; filter: brightness(1); }
  100% { opacity: 0; filter: drop-shadow(0 0 5px rgba(220,235,255,.1)); }
}
@keyframes heroIn     { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flyInRight { 0% { opacity: 0; transform: translateX(100px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes textRedPulse {
  0%        { color: var(--text); text-shadow: none; }
  40%, 60%  { color: var(--red-text); text-shadow: 0 0 8px rgba(191,31,38,.3); }
  100%      { color: var(--red-text); text-shadow: none; }
}
@keyframes cardIn  { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gradMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes marquee  { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Stagger-Effekt für Karten-Reihen */
.stagger.is-visible > * { animation: cardIn .6s ease forwards; opacity: 0; }
.stagger.is-visible > *:nth-child(1) { animation-delay: 0s; }
.stagger.is-visible > *:nth-child(2) { animation-delay: .12s; }
.stagger.is-visible > *:nth-child(3) { animation-delay: .24s; }
.stagger.is-visible > *:nth-child(4) { animation-delay: .36s; }

.sec-h::after {
  content: ''; display: block; width: 0; height: 3px;
  background: var(--red); margin-top: 12px; border-radius: 2px;
  transition: width .8s;
}
.reveal.is-visible .sec-h::after { width: 60px; }

/* ========= HERO (dunkler Foto-Hero) ========= */
.hero {
  min-height: 78vh;
  display: flex; align-items: center;
  /* Unten --hero-fade + Abstand: der Ausklang-Verlauf (.hero::after) darf
     nicht durch den Formular-/Chip-Bereich laufen. --hero-fade (main.css)
     ist dieselbe Variable, die .hero::after fuer seine Hoehe nutzt -- vorher
     stand hier fest "--scrim-edge", waehrend .hero::after einen davon
     unabhaengigen Wert hatte. Dadurch lag der untere Content-Rand nicht mehr
     zuverlaessig ausserhalb der Fade-Zone, sobald die Fade-Hoehe angepasst
     wurde -- eine Ursache fuer die "unruhige Naht"-Regression. */
  padding: 28px var(--space-gutter) calc(var(--hero-fade) + var(--space-md));
  position: relative; overflow: visible;
  /* background-color transparent: das Foto kommt jetzt vom globalen
     .site-bg-Layer (position:fixed, z-index:-1, in base.njk vor <main>
     eingehaengt), nicht mehr von einem eigenen .hero-Bild. Eine opake
     .hero-Flaeche wuerde das durchscheinende Foto verdecken. */
  background-color: transparent;
  color: var(--text-on-dark);
}
/* .hero-bg (eigenes Foto-Layer nur fuer den Hero) ist entfallen -- User-
   Feedback: "Im Hero-Bereich ist das Bild separat und auf der restlichen
   Seite separat", sichtbar als Bildsprung an der Hero-Unterkante. Ursache:
   .hero-bg und das globale .site-bg zeigten zwar dasselbe Motiv, aber als
   zwei UNABHAENGIG zugeschnittene object-fit:cover-Layer (verschiedene
   Container-Hoehen -> verschiedener Zoom/Ausschnitt) -- selbst bei
   identischem Foto lief das nie pixelgenau zusammen. Der Hero nutzt jetzt
   ausschliesslich den globalen .site-bg-Layer (base.njk, main.css) wie
   jede andere Sektion der Seite; .hero-scrim liegt direkt darauf. Diese
   Zwischen-Etappe (.hero-bg auf position:absolute umgestellt) war nur ein
   Zwischenschritt zum eigentlichen Fix -- das Layer ist jetzt komplett weg. */
.hero-scrim {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Rechts .30 -> .58: dort steht das Glas-Formular, und dahinter liegen die
       hellen Wabenleuchten des Showroom-Fotos. Das Abdunkeln passiert HIER,
       hinter dem Foto — nicht im Formular selbst. Dadurch kann der Karten-Scrim
       (.hero-form::before) deutlich transparenter werden, ohne dass der
       Text-Kontrast faellt. Das Foto bleibt durch das Glas sichtbar, es ist nur
       ruhiger/dunkler. */
    /* Aufgehellt (.95/.80/.58 -> .88/.66/.34), damit die Fahrzeuge im Showroom
       klar erkennbar sind. Links bleibt es am dunkelsten — dort steht die
       Headline; nach rechts oeffnet sich das Foto deutlich weiter als zuvor.
       Kontrast bleibt trotzdem im gruenen Bereich (siehe render-check-sprint).
       Linke Kante von .88 auf .55 abgesenkt: die Folgesektion (Fahrzeuge-
       Teaser) hat seit dem Transparenz-Sprint eine FLACHE .40-Deckkraft ueber
       die volle Breite -- der alte 100deg-Verlauf endete links bei .88 und
       rechts bei .34, an der Kante entstand dadurch links ein grosser, rechts
       nur ein kleiner Sprung (sichtbar als Naht, User-Feedback: "Uebergang
       zur naechsten Sektion weg"). Mit .55 liegt der Verlauf jetzt komplett
       naeher an .40, der max. Sprung ist deutlich kleiner -- Text-Kontrast
       bleibt ausreichend, da Headline/USP-Liste zusaetzlich eigene helle
       Textfarben tragen (kein reiner Scrim-Kontrast noetig). */
    /* AUFGELOEST (User-Feedback mit Screenshot, dritte Runde: "Die Linie ist
       weiterhin da. Sie kommt nicht vom Bild, sondern vom Uebergang den du
       eingebaut hattest").
       Ursache war eine reine Deckkraft-STUFE, kein weicher Verlauf: der Hero
       lag links bei .55, die Folgesektion (.page--home .sec--anchor/.bs,
       main.css) flach bei .40 -- an der Hero-Unterkante sprang die Deckung
       also um .15, ueber die volle Breite, am staerksten links und nach
       rechts auslaufend. Genau so sah die Linie im Screenshot aus. Der
       frueher hier liegende vertikale Verlauf hatte diese Stufe nur
       kaschiert; mit seinem Wegfall wurde sie sichtbar.
       Loesung: der Hero traegt jetzt DIESELBE flache .40-Grundierung wie
       alles darunter -- damit ist an der Naht kein Sprung mehr moeglich,
       unabhaengig von Fensterhoehe und Bildausschnitt. Die zusaetzliche
       Abdunklung fuer die Headline liegt als eigener horizontaler Verlauf
       darueber (siehe unten), der auf beiden Seiten des unteren Randes
       identisch waere und deshalb keine Kante erzeugen kann. */
    var(--scrim-photo);
}
/* Lesbarkeits-Abdunklung NUR fuer die Textspalte, als eigener Layer statt
   als Teil der Grundierung. Entscheidend fuer die Nahtfreiheit: dieser
   Verlauf endet vertikal weit VOR der Hero-Unterkante (Ausblendung bis 82%
   der Hoehe), die unteren ~18% des Heros tragen also exakt die .40 der
   Folgesektion. Ein Verlauf, der die Kante gar nicht erst erreicht, kann
   dort auch keine Stufe erzeugen -- anders als beim vorherigen Ansatz, der
   die Abdunklung bis zum Rand durchzog.
   Horizontal: links .18 zusaetzlich (Headline), nach rechts auf 0 -- dort
   steht das Glas-Formular, das seinen Kontrast ueber .hero-form::before
   selbst mitbringt. .18 + .40 = ~.58 effektiv links, also etwas mehr als die
   vorherigen .55 -- Headline-Kontrast wird dadurch nicht schlechter. */
.hero-scrim::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(13,14,17,.18) 0%, rgba(13,14,17,.10) 42%, rgba(13,14,17,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 82%);
}

.hero-in {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px;
  /* start statt center: bei center zentrierten sich beide Spalten relativ
     zur gemeinsamen Grid-Zeilenhoehe, wodurch die (kuerzere) Formular-Card
     oben herausragte und deutlich hoeher als der Eyebrow der Textspalte
     sass. Mit start beginnen beide Spalten am oberen Rand, der Feinversatz
     der Card auf Eyebrow-Hoehe kommt jetzt gezielt ueber deren eigenen
     margin-top (siehe .hero-form). */
  align-items: start; position: relative; z-index: 3;
}
.hero-txt { animation: heroIn .35s ease .04s both; } /* schnellerer Einblend */

/* .hero-logo entfernt: das Marken-Lockup lebt jetzt ausschliesslich in der
   (transparenten, vergroesserten) Nav ueber dem Hero. Zwei Logos direkt
   uebereinander wirkten wie ein Duplikat. */

.hero .eyebrow { color: rgba(255,255,255,.72); }
/* Sternchen als Trenner im Marken-Rot. --red-on-dark, weil der Glyph klein
   ist und #E82028 auf dunklem Grund nur 4.29:1 haelt. */
/* Trenn-Stern im Eyebrow. Groesse an der Schriftgroesse orientiert (em),
   damit er mitskaliert; vertikal ueber die Flex-Ausrichtung des Eyebrow
   zentriert statt ueber die Grundlinie. */
.eyebrow-star {
  width: 1em; height: 1em;
  color: var(--red-on-dark);
  flex-shrink: 0;
  opacity: .9;
}
/* margin-bottom entfernt: diese Regel stammt aus der Zeit, als die Headline
   echter Fliesstext war (siehe Kommentar unten zu .hero-textlogo-h). Der
   Textlogo-H1 ist seitdem ein Bild (.hero-textlogo-h), das seinen eigenen
   Abstand separat definiert -- die 22px hier gewannen wegen hoeherer
   Spezifitaet (Element+Klasse) trotzdem gegen die dedizierte Regel und
   verhinderten die vom User gewuenschte Vergroesserung auf 56px. */
.hero-txt h1 {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5.4vw, 60px);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -.015em;
  color: #fff;
}
.hero-txt .hl { color: var(--accent-red); }
/* Textlogo-Bild statt "Das IDEALE Fahrzeug." als Fliesstext -- freigestellter
   Ausschnitt aus dem Marken-Textlogo (Outline-Weiss + volles Rot bei
   "IDEALE"), Hintergrund transparent. Breite an der bisherigen H1-Groesse
   orientiert (clamp analog zur vorherigen font-size-Skala), max-width
   verhindert Ausufern auf sehr breiten Screens. */
/* 22px -> 36px war immer noch zu wenig (User-Feedback: "hat sich nicht
   vergroessert" + Screenshot zeigte weiterhin fast keinen Abstand) -- deutlich
   staerker auf 56px angehoben, damit der Sprung tatsaechlich sichtbar ist. */
.hero-textlogo-h { margin-bottom: 56px; }
/* Deutlich groesser (vorher clamp(280px, 34vw, 460px)) -- wirkte neben dem
   restlichen Hero-Text zu klein/zurueckhaltend fuer das zentrale Markenversprechen. */
.hero-textlogo {
  display: block;
  width: clamp(360px, 42vw, 580px);
  height: auto;
}
.hero-txt p {
  color: rgba(255,255,255,.82);
  font-size: 17px; line-height: 1.7;
  margin-bottom: 26px; margin-top: 8px;
  max-width: 500px;
}
.hero-txt p strong { color: #fff; font-weight: 600; }

/* USP-Liste im Hero mit den gelieferten Outline-Icons.
   Die Icons ziehen ihre Farbe ueber `currentColor` aus dieser Regel (deshalb
   inline im Markup, nicht als <img>). --red-on-dark statt --accent-red: die
   Strichstaerke ist duenn, da traegt der hellere Rotton auf dunklem Grund
   deutlich besser. Icons stehen frei, ohne Kasten oder Kreis-Container. */
/* Die vier Punkte stehen UNTEREINANDER (eine Spalte). „Zweireihig" meint den
   Text innerhalb eines Punktes: Schlagwort oben, Beleg darunter — siehe
   .hero-usp-tx b. */
.hero-usp {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  max-width: 520px;
  display: grid;
  gap: var(--space-md);
}
.hero-usp li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: stretch;
  gap: var(--space-md);
}
.hero-usp-ic {
  /* stretch statt fixer Groesse: das Icon fuellt die volle Zellhoehe,
     reicht also von der Schlagwort- bis zur Beleg-Zeile (zwei Textzeilen)
     statt mittig auf einer festen 34px-Groesse zu sitzen. */
  display: flex;
  align-items: center;
  width: 34px;
  color: var(--red-on-dark);
  /* Leichter Schatten hebt die duennen Linien vom Foto ab, ohne Kasten. */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}
.hero-usp-ic svg { width: 100%; height: auto; display: block; }
.hero-usp-tx {
  font-size: 16px; line-height: 1.45;
  /* Volle Deckkraft statt .80: die 20 % Transparenz liessen die hellste
     Fotostelle durchschlagen. Auf dem Foto ist gedimmtes Weiss kein
     verlaesslicher Sekundaerton -- die Zuruecknahme gegenueber der Headline
     traegt hier ohnehin schon die Schriftgroesse. */
  color: #fff;
}
/* Schlagwort auf eigene Zeile, Beleg darunter — zweireihig pro Punkt.
   Die vier Punkte bleiben untereinander; nur der Text innerhalb einer Zeile
   bricht um. So steht das Schlagwort als Anker links und der Beleg liest sich
   ruhig darunter, statt in einer langen Zeile mitzulaufen. */
.hero-usp-tx b {
  display: block;
  color: #fff; font-weight: 700;
  margin-bottom: 1px;
}

@media (max-width: 480px) {
  .hero-usp { gap: var(--space-sm); }
  .hero-usp li { grid-template-columns: 30px 1fr; gap: var(--space-sm); }
  .hero-usp-ic { width: 30px; }
  .hero-usp-tx { font-size: 15px; }
}

/* Trust-Leiste am Hero-Fuss. Kompakt an den Inhalt herangerueckt (vorher
   --space-xl + eigene Trennlinie: das riss einen leeren Streifen auf).
   Linksbuendig unter der Textspalte statt zentriert ueber die volle Breite —
   sie gehoert zur Aussage darueber, nicht als eigenes Band darunter. */
.hero-trust {
  grid-column: 1 / -1;
  /* var(--space-lg) (32px) -> 18px: die Trust-Logos sollen naeher an die
     USP-Liste ruecken, damit Headline bis Logos komplett ohne Scrollen in
     einen Viewport passen (User-Feedback). */
  margin-top: 18px;
  display: flex; justify-content: flex-start;
}
.hero-trust img {
  width: 100%; max-width: 520px; height: auto;
  opacity: .9;
}
@media (max-width: 900px) {
  .hero-trust { justify-content: center; margin-top: var(--space-sm); }
  .hero-trust img { max-width: 420px; }
}

/* Hero-Formular (rechte Seite) — Glass-Skin über dem Foto.
   WICHTIG (Kontrast): Die Fläche ist transluzent, also traegt sie den Text
   nicht mehr selbst. Deshalb laeuft die Typo im Formular auf HELL (Weiss auf
   abgedunkeltem Glas) statt wie vorher dunkel auf weisser Card — dunkler Text
   auf 10%-Weiss ueber einem hellen Foto-Bereich waere nicht lesbar.
   Die Lesbarkeit kommt aus dem abgedunkelten Foto (.hero-scrim rechts) und den
   dunkel getinteten Feldern — NICHT aus einer deckenden Kartenflaeche. */
.hero-form {
  position: relative;
  /* Bringt die Card auf Hoehe des Eyebrows in der Textspalte (beide Spalten
     starten jetzt oben, siehe align-items:start an .hero-in) -- ohne diesen
     Versatz sass die Card sichtbar hoeher als "PREMIUM-GEBRAUCHTFAHRZEUGE
     · SEIT 2016". Wert aus der gemessenen Differenz Eyebrow-Top minus
     Card-Top bei Referenz-Viewport. */
  margin-top: 8px;
  padding: 28px 26px 24px;
  opacity: 0;
  animation: flyInRight .42s cubic-bezier(.2,.8,.2,1) .14s forwards;
  /* WICHTIG: background hier explizit setzen — .hero-form traegt zusaetzlich
     die Klasse .card, die eine OPAKE Flaeche (var(--surface-card)) setzt.
     Ohne diese Deklaration gaebe es gar kein Glas. */
  background: rgba(255, 255, 255, .06);
  /* Blur bewusst NIEDRIG (4px statt 16px): ein starker Blur verwaescht das
     Foto hinter der Karte zu einer gleichmaessigen Flaeche — die Karte wirkt
     dann massiv, egal wie niedrig die Alpha ist. Genau das war der Grund,
     warum eine reine Alpha-Senkung optisch nichts gebracht hat. 4px nimmt dem
     Hintergrund nur die Unruhe, laesst Strukturen (Deckenlicht, Wand) aber
     klar erkennbar. */
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  backdrop-filter: blur(4px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  color: #fff;
  isolation: isolate;
}
/* Lokaler Scrim UNTER dem Glas, nur noch .10 (vorher .62).
   Die Lesbarkeit kommt jetzt aus zwei anderen Quellen, nicht aus einer
   deckenden Karte:
     1. .hero-scrim dunkelt das FOTO rechts ab (.30 -> .58) — dort, wo die
        hellen Wabenleuchten liegen. Abgedunkelt wird hinter dem Foto, nicht
        im Formular.
     2. Die Felder sind dunkel getintet statt hell (siehe .fs/.fi unten).
   Dadurch bleibt die Karte fast klar und das Foto sichtbar.
   Gemessen (render-check-sprint.js): Label 7.45:1, Select 5.20:1. */
.hero-form::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: rgba(13, 14, 17, .10);
  pointer-events: none;
}
/* Fallback: ohne backdrop-filter (aeltere Browser) wird die Flaeche deckend,
   sonst waere das Formular ueber dem Foto unlesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-form { background: rgba(16, 18, 22, .93); }
  .hero-form::before { background: none; }
}

/* --- Glass-Skin: Typo + Felder auf hell --- */
.hero-form .kauf-cta-h,
.hero-form .sf-success-h,
.hero-form .sf-error-h { color: #fff; }
.hero-form .kauf-cta-p,
.hero-form .sf-hint,
.hero-form .sf-step-title,
.hero-form .sf-success-p,
.hero-form .sf-error-p,
.hero-form .fl { color: rgba(255, 255, 255, .86); }
.hero-form .sf-hint a,
.hero-form .kauf-cta-link { color: #fff; text-decoration: underline; }
.ft {
  display: flex; margin-bottom: 28px;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
}
.ft [role="tab"] {
  flex: 1; padding: 14px 8px; text-align: center;
  font-size: 14px; font-weight: 600;
  background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .82);
  cursor: pointer; transition: background .25s, color .25s;
}
.ft [role="tab"]:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ft [role="tab"].on { background: var(--accent-red); color: #fff; }
/* Fokus-Ring inset (das umgebende .ft hat overflow:hidden — ein Ring mit
   positivem Offset würde geclippt). Auf dem aktiven roten Tab weiß, sonst rot. */
.ft [role="tab"]:focus-visible { outline: 2px solid var(--accent-red); outline-offset: -2px; }
.ft [role="tab"].on:focus-visible { outline-color: #fff; }

/* Inline-Sende-Fehler im Hero-Formular (helle Card) — verwirft keine Eingaben. */
.sf-inline-err {
  margin: 12px 0 0; padding: 10px 12px;
  background: rgba(232, 32, 40, .06);
  border: 1px solid rgba(232, 32, 40, .28);
  border-radius: 8px;
  color: var(--red-text);
  font-size: 13px; font-weight: 600; line-height: 1.5;
}
.sf-inline-err a { color: var(--red-text); font-weight: 700; text-decoration: underline; }

/* Glass-Skin-Felder: transluzent-dunkel mit hellem Text. Nur background-COLOR
   setzen (nicht die Shorthand) — die Shorthand wuerde das Chevron-SVG der
   Selects mit zuruecksetzen (CLAUDE.md §9). */
/* Felder DUNKEL tinten statt hell: eine helle Fuellung hellt genau die Flaeche
   hinter dem weissen Text auf und senkt den Kontrast. Ein leichtes Abdunkeln
   erhoeht ihn und laesst das Foto trotzdem durchscheinen. */
.hero-form .fs,
.hero-form .fi {
  /* .30 -> .46: seit der Hero-Scrim aufgehellt wurde (damit die Fahrzeuge
     erkennbar sind), liegt hinter dem Formular ein deutlich hellerer
     Bildbereich. Der Select-Text fiel dadurch auf 4.33:1. Abgedunkelt wird
     gezielt das FELD, nicht die ganze Karte — so bleibt der Glas-Effekt und
     das Foto sichtbar. */
  background-color: rgba(10, 12, 15, .46);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.hero-form .fi::placeholder { color: rgba(255, 255, 255, .55); }
/* option-Liste rendert im OS-Popup (nicht auf Glas) → deckend dunkel. */
.hero-form .fs option { background: var(--surface-dark-anchor); color: #fff; }
.hero-form .fs {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23ffffff'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}
/* Fokus bleibt auf Glas deutlich sichtbar: roter Ring MIT hellem Halo,
   damit er auch ueber dunklen Bildbereichen nicht verschwindet. */
.hero-form .fs:focus-visible,
.hero-form .fi:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
  border-color: var(--accent-red);
  box-shadow: 0 0 0 4px rgba(232, 32, 40, .25);
}

/* Hell-Overrides für die Step-Form-UI (.sf-* liegt dunkel in main.css) */
.hero-form .sf-step-dot { background: rgba(255, 255, 255, .28); }
.hero-form .sf-step-dot.is-active { background: var(--accent-red); }
.hero-form .sf-step-dot.is-done { background: rgba(232, 32, 40, 0.55); }
.hero-form .sf-nav-back {
  background: rgba(255, 255, 255, .10) !important;
  color: rgba(255, 255, 255, .86) !important;
  border: 1.5px solid rgba(255, 255, 255, .22) !important;
}
.hero-form .sf-nav-back:hover { border-color: rgba(255, 255, 255, .5) !important; color: #fff !important; }

/* Kaufen-Tab: CTA-Block (statt Formular) */
.kauf-cta { text-align: center; padding: 18px 8px 8px; }
.kauf-cta-ic { font-size: 42px; margin-bottom: 18px; opacity: .85; }
.kauf-cta-h {
  font-family: var(--font-heading); font-size: 20px; font-weight: 700;
  color: var(--text); margin-bottom: var(--space-sm); letter-spacing: -.01em;
}
.kauf-cta-p {
  font-size: 14px; color: var(--text-muted); line-height: 1.6;
  margin-bottom: 24px; max-width: 340px; margin-left: auto; margin-right: auto;
}
.kauf-cta-btn { display: inline-block; text-align: center; text-decoration: none; }
.kauf-cta-hint { font-size: 12px; color: var(--text-muted); margin-top: 18px; }
.kauf-cta-link { color: var(--red); text-decoration: none; font-weight: 600; }
.kauf-cta-link:hover { text-decoration: underline; }

/* ========= ANKAUFSTATION / KENNZAHLEN (dunkle Anker-Sektion) ========= */
.ank-head { text-align: center; margin-bottom: var(--space-block); }
/* Die Logo-Kacheln selbst (.cred-awards/.cred-award/.cred-award-tile) leben
   jetzt in main.css -- dasselbe Kachel-Design wie auf /ankauf/ und
   /suchauftrag/ (User-Entscheidung: einheitliches Design statt der beiden
   custom gestylten Siegel-Karten, die vorher hier standen). .ank-logos/
   .ank-logo sind damit entfallen. */

.ctr-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md); text-align: center;
}
.cn { padding: var(--space-lg) var(--space-md); }
.cn-n {
  font-family: var(--font-heading);
  font-size: clamp(34px, 4.6vw, 48px);
  font-weight: 800; color: #fff; margin-bottom: 8px;
  line-height: 1;
}
/* Suffix-Zeichen (+ / %) neben der Kennzahl. Bewusst kleiner und leichter als
   die Zahl: das Zeichen ist Zusatzinformation, nicht der Wert selbst. Per
   vertical-align an der Oberkante ausgerichtet, damit es nicht auf der
   Grundlinie „mitschwimmt". */
.cn-s {
  color: var(--accent-red);
  font-size: .48em;
  font-weight: 700;
  vertical-align: .55em;
  margin-left: .06em;
  opacity: .85;
}
/* Prozentzeichen weiß: bei „98 %" gehört das Zeichen zur Zahl und ist kein
   Akzent (anders als das „+"). */
.cn-s--white { color: #fff; opacity: .9; }
.cn-l { font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--text-on-dark-muted); line-height: 1.4; }
@media (max-width: 900px) { .ctr-in { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ctr-in { grid-template-columns: 1fr 1fr; } .cn { padding: 22px 12px; } }

/* ========= FAHRZEUGE-TEASER ========= */
/* Headline + „Alle Fahrzeuge"-Link nebeneinander. Der Abstand zum Grid liegt
   hier statt an .sec-h (die traegt margin-bottom: 0) — deshalb explizit auf
   dem Content-Rhythmus, nicht auf --space-block. */
.fz-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: var(--space-text-content);
}
.fz-head .sec-h { margin-bottom: 0; }
/* Gleiche Groesse wie „Mehr ueber uns erfahren" (.u-teaser-link, 18px) —
   beide sind der einzige Ausgang aus ihrer Sektion und sollen gleich wiegen. */
.fz-head-link { flex-shrink: 0; padding-bottom: 6px; font-size: 18px; }
.fz-head-link svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .fz-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.sec.sec--light { background: var(--scrim-light); color: var(--text); }
.sec.sec--light .sec-h { color: var(--text); }
.sec.sec--light .sec-p { color: #666; }
.cg { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.cc {
  background: var(--w); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease-out, box-shadow .25s ease-out;
  cursor: pointer; color: var(--text);
}
.cc:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.ci { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.ci img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.cc:hover .ci img { transform: scale(1.08); }
.cy {
  position: absolute; bottom: 10px; right: 10px;
  background: var(--red); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 6px; z-index: 1;
}
.cb { padding: 14px 16px 16px; }
.cb h3 { font-size: 16px; font-weight: 700; margin-bottom: 2px; line-height: 1.2; }
.cb .su {
  font-size: 12px; color: #888; margin-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.cs span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #666; }
.cs svg { width: 14px; height: 14px; fill: #999; }
.cp { display: flex; align-items: baseline; justify-content: space-between; }
.cp b { font-size: 20px; font-weight: 700; }
.ac {
  display: inline-block; padding: 14px 40px;
  background: var(--red); color: #fff;
  font-size: 14px; font-weight: 600;
  border-radius: 12px; transition: all .25s;
  box-shadow: 0 4px 16px rgba(232,32,40,.2);
  position: relative; overflow: hidden;
}
.ac:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,32,40,.35); }

/* ========= ANKAUF-TEASER (ruhig-dunkel) =========
   Wie .sec--anchor scrim-basiert statt opak, damit das globale Hintergrundbild
   auch hier durchscheint und die Kanten-Ausblendung (.bs::before in main.css)
   greift. */
.bs {
  background: transparent;
  color: var(--text-on-dark);
  position: relative; overflow: hidden;
}
.bs::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  /* gleicher subtiler radialer Gradient wie .sec--anchor (Tiefe, keine Textur) */
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 255, 255, .035), transparent 72%),
    var(--scrim-dark);
}
.bs > * { position: relative; }
.bs .sec-h { color: #fff; }
/* --text-on-dark-muted war auf dem foto-durchsichtigen Grund kaum lesbar
   (User-Feedback: "Der Text darueber bitte nicht in grau, das ist kaum
   lesbar") -- volles --text-on-dark statt der gedaempften Variante. */
.bs .sec-p { color: var(--text-on-dark); }
.bs .sec-p strong { color: #fff; }
/* USP-Icons hell/muted (nicht rot) */
/* .07 war auf dem jetzt foto-durchsichtigen Hintergrund praktisch unsichtbar
   (User-Feedback: "die Textboxen [...] wieder herstellen" -- die Icon-
   Badges wirkten wie freischwebende Icons ohne Flaeche). Deutlich staerkere
   Deckkraft + eigener Rand fuer klare Kontur gegen das Foto. */
.bs .icon-badge {
  background: rgba(16, 18, 22, .55);
  border: 1px solid rgba(255,255,255,.14);
}
.bs .icon-badge__svg { color: var(--text-on-dark); }
.bg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bf { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
/* Karten-Flaeche wie .bsi (Prozess-Schritte rechts) -- vorher trug .bfe gar
   keine eigene Flaeche, nur die kleine Icon-Box hatte einen Hintergrund
   (User-Feedback: "hier sind immer noch keine Textboxen", Screenshot zeigte
   Icon+Text frei auf dem Foto schwebend, nur das Icon-Quadrat war als Box
   erkennbar). Jetzt traegt die GESAMTE Zeile (Icon + Ueberschrift + Text)
   dieselbe dunkle Karten-Optik wie die Prozess-Schritte daneben. */
.bfe {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface-dark-card);
  border: 1px solid var(--border-hairline-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-dark);
  padding: 16px 18px;
  transition: transform .2s, border-color .3s;
}
.bfe:hover { transform: translateX(6px); border-color: rgba(255,255,255,.22); }
.bfe:hover .icon-badge { background: rgba(255,255,255,.12); }
.bfe h3 { font-size: 15px; font-weight: 600; margin-bottom: var(--space-2xs); color: #fff; }
/* --text-on-dark-muted war auf dem foto-durchsichtigen Grund kaum lesbar
   (User-Feedback: "Der Text darueber bitte nicht in grau, das ist kaum
   lesbar") -- volles --text-on-dark statt der gedaempften Variante. */
.bfe p  { font-size: 13px; color: var(--text-on-dark); line-height: 1.5; }
.bst { display: flex; gap: 14px; flex-direction: column; }
/* Prozess-Schritte als erhöhte dunkle Karten */
.bsi {
  background: var(--surface-dark-card);
  border: 1px solid var(--border-hairline-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-dark);
  padding: 22px; display: flex; align-items: center; gap: 18px;
  transition: border-color .3s, transform .3s;
}
.bsi:hover { border-color: rgba(255,255,255,.22); transform: translateX(4px); }
/* Schrittzahl dezent: Haarlinien-Kreis + helle Ziffer (KEIN rot gefüllt) */
.bsn {
  width: 46px; height: 46px; border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-hairline-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 700; flex-shrink: 0; color: #fff;
}
.bsi h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: #fff; }
.bsi p  { font-size: 13px; color: var(--text-on-dark-muted); line-height: 1.5; }

/* Ankauf-CTA unterm Ankauf-Block — einzige rote Fläche */
.bs-cta { margin-top: 32px; }

/* ========= TRUST-BAR (dunkle Anker-Sektion) =========
   Eine Reihe einheitlicher, abgerundeter weisser Logo-Kacheln (ACI-Referenz-
   layout) statt der frueheren zweizeiligen Auszeichnungs-/Partner-Chips. */
.trust-bar .eyebrow { margin-bottom: var(--space-block); }
.tb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.tb-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 148px; height: 148px;
  /* Innenabstand 22 -> 14px: die Quell-PNGs bringen selbst schon Weissraum
     mit, zusammen mit 22px Kachel-Padding blieben die Wortmarken zu klein zum
     Lesen. Weniger Padding = groesseres Logo bei gleicher Kachelgroesse. */
  padding: 14px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-dark);
  transition: transform .2s, box-shadow .2s;
}
.tb-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tb-tile img { width: 100%; height: 100%; object-fit: contain; }
/* Partner ohne gepflegtes Logo: Name als Fallback-Text statt leerer Kachel. */
.tb-tile-txt {
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  color: var(--text); text-align: center; letter-spacing: .2px;
}

@media (max-width: 600px) {
  .tb-tile { width: 104px; height: 104px; padding: 16px; border-radius: var(--radius); }
}

/* ========= URKUNDEN (helle Sektion, eigene Section nach der Trust-Bar) =========
   Die tatsaechlichen Auszeichnungs-Urkunden (Scans, nicht nur Wortmarken)
   prominent auf der Startseite — vorher nur auf /ueber-uns/ zu finden.
   Gleicher Karten-Aufbau wie dort (.u-urkunde in ueber-uns.css): weisse
   Karte, Haarlinie, Schatten, oberer Bild-Frame mit Trennlinie, Caption mit
   Pfeil-Icon macht die Klick-Absicht sichtbar statt einer stillen
   Bildschaltflaeche. Eigene .hm-urkunde*-Klassen weil home.css und
   ueber-uns.css getrennte Bundles sind (kein Cross-Page-Import). */
.hm-urkunden {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 28px;
  /* Vorher --space-text-content (40px), gedacht fuer H2 -> Content. Die H2
     ("Unsere Auszeichnungen im Original") ist raus -- jetzt folgt der
     Abstand direkt auf den Eyebrow, --space-h-text (18px) passt zum
     Label-Rhythmus besser als der groessere Text-Content-Wert. */
  margin-top: var(--space-h-text);
}
.hm-urkunde {
  display: flex; flex-direction: column;
  width: 300px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.hm-urkunde:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.hm-urkunde-frame {
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-hairline);
}
.hm-urkunde-frame img {
  max-height: 340px;
  width: auto; max-width: 100%;
  object-fit: contain;
}
.hm-urkunde-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-size: 13px; line-height: 1.4; color: var(--text);
  font-weight: 600;
}
.hm-urkunde-cap svg { flex-shrink: 0; color: var(--red); transition: transform .2s; }
.hm-urkunde:hover .hm-urkunde-cap svg { transform: translateX(3px); }
@media (max-width: 700px) {
  .hm-urkunden { gap: 20px; }
  .hm-urkunde { width: 100%; max-width: 320px; }
  .hm-urkunde-frame img { max-height: 280px; }
}

/* ========= KUNDENMEINUNGEN (dunkler Anker) =========
   Sektion selbst ist jetzt .sec--anchor (Rhythmus-Bruch), die Review-Karten
   bleiben helle Karten (.rv) -- die brauchen dafuer keine Anpassung. */
/* ---------- REZENSIONS-SLIDER ----------
   Der Streifen ist IMMER ein Scroll-Snap-Container (nicht erst auf Mobile,
   wie zuvor .rg). Zwei Gruende: mit jetzt zehn Stimmen waere ein starres
   4er-Raster zweieinhalb Reihen hoch, und der Streifen funktioniert damit
   auch ohne JS vollstaendig -- reviews-slider.js ergaenzt nur Automatik,
   Pfeile und Punkte auf derselben Mechanik. */
.rev { position: relative; }
.rev-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 18px) / 4);   /* vier nebeneinander */
  gap: 18px;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Karten haben Schatten + Hover-Lift: etwas Luft, damit nichts abgeschnitten
     wirkt, und der Rand faellt mit dem Sektions-Gutter zusammen. */
  margin: 0 calc(-1 * var(--space-gutter));
  padding: 6px var(--space-gutter) 12px;
  /* Ohne scroll-padding schnappt scroll-snap-align:start an die INNENkante,
     also hinter das padding-left -- die Ansicht ruhte dadurch bei
     scrollLeft 24 statt 0 und die erste Karte war nie zu sehen. */
  scroll-padding-left: var(--space-gutter);
  scrollbar-width: none;                 /* Firefox */
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-slide { scroll-snap-align: start; }

/* ---------- DURCHLAUFENDER STREIFEN ----------
   User-Wunsch: durchgehend animiert, ohne Pausen, langsam wie ein Streifen.
   Vorher sprang der Slider alle 6 s um eine ganze Ansicht -- das ist ein
   Schrittwechsel, kein Fluss.

   Die Klasse setzt reviews-slider.js, nachdem es die Karten EINMAL geklont
   hat: der Streifen enthaelt danach zwei identische Saetze und faehrt genau
   um die Haelfte (-50%). In dem Moment steht der geklonte Satz exakt dort,
   wo der erste begann -- der Sprung zurueck auf 0 ist deshalb unsichtbar,
   die Bewegung wirkt endlos.

   Ohne die Klasse (kein JS) bleibt der Streifen der scrollbare Snap-Container
   von oben -- alle Karten weiterhin erreichbar. */
.rev-track.is-marquee {
  overflow: hidden;              /* kein manuelles Scrollen mehr noetig */
  scroll-snap-type: none;
  /* Die Spalten duerfen jetzt NICHT mehr auf Containerbreite rechnen, sonst
     wuerde der geklonte Satz die Kartenbreite halbieren. Feste Breite. */
  grid-auto-columns: 320px;
}
.rev-track.is-marquee .rev-slide { scroll-snap-align: none; }
.rev-marquee-inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 320px;
  gap: 18px;
  align-items: stretch;
  width: max-content;
  animation: revMarquee var(--rev-dauer, 80s) linear infinite;
}
/* Anhalten nur bei echtem Eingriff -- Hover ueber den Karten laesst den
   Streifen bewusst weiterlaufen (das war der Fehler der vorherigen Fassung:
   ein ruhender Mauszeiger legte die Automatik komplett still). */
.rev-track.is-marquee.is-paused .rev-marquee-inner { animation-play-state: paused; }

@keyframes revMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Weiche Kanten: die Karten sollen am Rand ein- und ausgeblendet werden,
   statt hart abgeschnitten zu erscheinen -- das ist der "eingeblendete
   Streifen" aus dem Wunsch. */
.rev-track.is-marquee {
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* Dauerbewegung ist Dekoration: bei prefers-reduced-motion steht der Streifen
   still und bleibt normal scrollbar. */
@media (prefers-reduced-motion: reduce) {
  .rev-marquee-inner { animation: none; }
  .rev-track.is-marquee { overflow-x: auto; scroll-snap-type: x mandatory; }
}
/* Fokus-Ring nur bei Tastaturbedienung (der Streifen ist tabindex=0). */
.rev-track:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* Bedienleiste unter dem Streifen */
.rev-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
/* display:flex ueberschreibt das hidden-Attribut -- ohne diese Regel blieb die
   Bedienleiste sichtbar, obwohl das Skript sie fuer den durchlaufenden
   Streifen ausgeblendet hatte. */
.rev-nav[hidden] { display: none; }
/* Pfeile bewusst zurueckgenommen: der Slider laeuft von allein, sie sind nur
   die Moeglichkeit einzugreifen -- kein Aufruf zur Bedienung. Erst bei Hover
   ueber der Sektion bzw. bei Tastaturfokus treten sie hervor. */
.rev-arrow {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: rgba(236, 238, 240, .5);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, opacity .2s;
}
.rev:hover .rev-arrow,
.rev:focus-within .rev-arrow {
  color: var(--text-on-dark);
  border-color: var(--border-hairline-dark);
  background: rgba(255, 255, 255, .06);
}
.rev-arrow svg { width: 18px; height: 18px; }
.rev-arrow:hover { background: var(--red); border-color: var(--red); color: #fff; }
.rev-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.rev-dots { display: flex; align-items: center; gap: 8px; }
.rev-dot {
  width: 8px; height: 8px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.rev-dot.is-active { background: var(--red); transform: scale(1.35); }
.rev-dot:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

@media (max-width: 1000px) {
  .rev-track { grid-auto-columns: calc((100% - 18px) / 2); }   /* zwei */
}
@media (max-width: 640px) {
  .rev-track { grid-auto-columns: 84%; }                       /* eine */
}

/* Altes 4er-Raster: bleibt fuer etwaige weitere Verwendungen von .rg
   erhalten, die Startseite nutzt jetzt .rev-track. */
.rg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.rv {
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 24px;
  display: flex; flex-direction: column; color: var(--text);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
@media (hover: hover) {
  .rv:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
}
/* Sterne als SVG (components/stars.njk) statt Unicode-Glyphen: die rendern
   je nach Systemfont unterschiedlich breit und duenn. */
.rv .rs2 { margin-bottom: var(--space-sm); }
.stars { display: inline-flex; align-items: center; gap: 3px; }
.stars-i { width: 15px; height: 15px; color: var(--accent-red); flex-shrink: 0; }
/* Gleich hohe Karten: Zitat auf 5 Zeilen begrenzen (line-clamp) */
.rv .rtx {
  font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px;
  /* 9 statt 5 Zeilen: die echten Google-Rezensionen sind deutlich laenger als
     die vier kurzen Stimmen von vorher -- bei 5 Zeilen brach schon der zweite
     Satz ab. Eine Begrenzung bleibt trotzdem, damit eine sehr lange Rezension
     nicht die Hoehe aller Karten im Slider bestimmt. */
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
}
.rv .rfo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.rv .rn  { font-size: 14px; font-weight: 600; color: var(--text); }
.rv .rvia {
  font-size: 11px; color: var(--text-muted);
  background: var(--surface-warm); border: 1px solid var(--border-hairline);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 1000px) { .rg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  /* Mobile: horizontal scroll-/snap-bar statt 1-Spalten-Stapel */
  .rg {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--space-gutter)); padding: 4px var(--space-gutter) 10px;
  }
  .rv { scroll-snap-align: start; }
}

/* FAQ-Akkordeon-Klassen (.fql/.fqi/.fqq/.fqa/.fqa-in/.fqa-arrow) wurden nach
   main.css migriert — cross-page Pattern für Home Top-3 + /faq/ Vollliste. */

/* Home-spezifischer "Mehr"-Link unter Top-3 zur volle /faq/-Seite.
   Bewusst dezent als Text-Link (kein .ac-Button) — FAQ-Section ist
   info-orientiert, der Klick zur Vollliste ist sekundär (Top-3 reichen
   meist als erste Antwort). Ein roter Button würde unnötig
   Conversion-Druck erzeugen wo keiner ist. */
.fql-more { text-align: center; margin-top: 32px; }
.fql-more-link {
  font-size: 14px; font-weight: 600; letter-spacing: .5px;
  color: var(--gy); text-decoration: none;
  transition: color .2s;
}
.fql-more-link:hover { color: var(--red); }

/* Partner-Marquee (.pw-sec/.pa/.pt) entfernt (Reskin P8) — Partner-Logos leben
   jetzt in der Trust-Bar (.tb-chips). marquee-Keyframe bleibt ungenutzt. */

/* ========= KONTAKT-TEASER ========= */
.mw {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); height: 360px;
}
.mw iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.6) brightness(.95); }
.kg { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 16px; }
.ki h3 { font-family: var(--font-heading); font-size: 24px; margin-bottom: 20px; }
.kr {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 16px; transition: transform .2s;
}
.kr:hover { transform: translateX(4px); }
.krt { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.krt strong { color: var(--text); display: block; margin-bottom: 2px; }
.kr .icon-badge { background: rgba(0,0,0,.05); } /* helles Theme: Badge sichtbar auf hell */
/* Startseite jetzt durchgehend dunkel -- .ki/.kr/.krt sind roher Text/Icon-
   Content direkt auf der Sektionsflaeche (kein Karten-Wrapper), brauchen
   daher helle Gegenstuecke. rgba(0,0,0,.05) fuer .icon-badge war explizit
   fuers helle Theme gedacht (siehe Kommentar oben) und waere auf Dunkel fast
   unsichtbar -- helle Flaeche stattdessen, analog .bs .icon-badge. */
.page--home .ki h3,
.page--home .krt strong { color: var(--text-on-dark); }
/* --text-on-dark-muted (#A7ABB3) war auf dem foto-durchsichtigen Grund zu
   schwach lesbar (User-Feedback: "Keine graue Textfarbe mehr, da ebenfalls
   nicht sichtbar") -- volles --text-on-dark statt der gedaempften Variante. */
.page--home .krt { color: var(--text-on-dark); }
.page--home .krt a { color: var(--text-on-dark); }
.page--home .kr .icon-badge { background: rgba(255,255,255,.07); }
.page--home .kr .icon-badge__svg { color: var(--text-on-dark); }

/* ========= ÜBER UNS — STATS (Home-Teaser) =========
   V1-Über-uns-Block (.ueber-grid, .ueber-text, .ueber-lead, .ueber-body,
   .ueber-visual, .ueber-visual-label) gelöscht — verwaist seit Phase 1.5.
   .ueber-stats* bleibt: noch in [index.njk:269](src/index.njk#L269) Home-Teaser. */
.ueber-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ueber-stat-n {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
  margin-bottom: 6px;
}
.ueber-stat-l {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  letter-spacing: .2px;
}
@media (max-width: 900px) {
  .ueber-stats { grid-template-columns: 1fr; gap: 20px; }
}

/* ========= SHOWROOM-STATEMENT (kompaktes Einzelbild, dunkler Anker) =========
   Bild liegt nur in kleiner Ausgangsaufloesung vor (513x558px) -- deshalb
   bewusst als kompaktes, mittelgrosses Bild statt Vollbreite-Hero-Format.
   Gleiches Zweispalten-Prinzip wie .u-teaser-split (Bild + kurzer Text),
   aber auf dunklem Anker-Grund fuer einen ruhigen Rhythmus-Wechsel
   zwischen dem hellen Ankauf-Teaser und den hellen Leistungskarten. */
.showroom-statement-in {
  max-width: var(--maxw); margin: 0 auto;
  /* Drei Spalten: Bild | Titel+Button | Kennzahlen. Vorher zwei Spalten mit
     den Kennzahlen im Textblock UNTER dem Button, horizontal nebeneinander
     -- sollten stattdessen als eigene Spalte NEBEN dem Titel stehen, Werte
     untereinander gestapelt statt in einer Reihe. */
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr auto;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.showroom-statement-media img {
  width: 100%; height: auto;
  aspect-ratio: 513 / 558;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  display: block;
}
.showroom-statement-text .sec-h { margin-bottom: var(--space-text-content); }
/* Zaehl-Animation als eigene Spalte NEBEN Titel/Button, Werte untereinander
   gestapelt (column statt row). Gleiche .cn-n/.cn-num/.cn-s/.cn-l-Struktur
   wie das Kennzahlen-Band (JS ist identisch), aber eigene helle Farben statt
   der dunklen Card-Defaults, weil diese Sektion hell ist (sec--warm). Eine
   duenne linke Trennlinie grenzt die Spalte optisch vom Text ab. */
.showroom-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-left: clamp(32px, 5vw, 56px);
  border-left: 1px solid var(--border-hairline);
  flex-shrink: 0;
}
.showroom-stat { text-align: left; }
/* Deutlich groesser (vorher clamp(26px, 2.6vw, 34px)) -- wirkten neben der
   Headline zu klein/zurueckhaltend fuer Kennzahlen, die auffallen sollen.
   Farben von --text/--text-muted (dunkel, urspruenglich fuer die HELLE
   sec--warm-Sektion gedacht) auf --text-on-dark/--text-on-dark-muted
   umgestellt -- die Sektion ist seit der Startseiten-Umstellung durchgehend
   dunkel (.sec--anchor), dunkler Text auf dunklem Foto war praktisch
   unsichtbar (User-Feedback: "Die schwarzen Zahlen und der graue Text
   darunter [sind] kaum sichtbar"). */
.showroom-stat .cn-n { color: var(--text-on-dark); font-size: clamp(38px, 4vw, 52px); margin-bottom: 4px; }
.showroom-stat .cn-l { color: var(--text-on-dark); font-size: 14px; white-space: nowrap; }
@media (max-width: 900px) {
  .showroom-statement-in { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .showroom-statement-media { max-width: 280px; margin: 0 auto; }
  .showroom-statement-text .eyebrow { justify-content: center; }
  .showroom-stats {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: var(--space-md) var(--space-lg);
    padding-left: 0; border-left: none;
    border-top: 1px solid var(--border-hairline); padding-top: var(--space-lg);
  }
  .showroom-stat { text-align: center; }
}

/* Zwischen-Headline + breites 16:9-Werkstatt-Banner, direkt über den
   Leistungskarten (Layoutvorgabe ACI). */
/* ========= WERKSTATT-BLOCK (Text links / Slider rechts) =========
   Der Slider lief vorher ueber die volle Breite und dominierte die Sektion.
   Zweispaltig ist er ein Beleg neben der Aussage, nicht das Hauptmotiv.
   Raster-Disziplin nach BMW-Vorbild: alle Abstaende auf dem 4/8px-Raster,
   Trennung ueber Haarlinien statt Rahmen/Schatten, keine Deko. */
.wrk {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-text-content);
}
.wrk-text .sec-h,
.wrk-text .sec-p { max-width: 42ch; }
/* Beleg-Liste: Haarlinien statt Bullets — ruhiger und praeziser. Jede Zeile
   mit rotem Outline-Icon als visueller Anker (gleicher Icon-Stil wie
   Hero-USPs/Leistungskarten), statt reinem unstrukturiertem Fliesstext. */
.wrk-list {
  list-style: none; margin: var(--space-md) 0 0; padding: 0;
  border-top: 1px solid var(--border-hairline);
}
.wrk-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 15px; line-height: 1.5;
  color: var(--text);
  font-weight: 500;
}
.wrk-list-ic {
  display: flex;
  flex-shrink: 0;
  width: 22px; height: 22px;
  color: var(--red);
}
.wrk-list-ic svg { width: 100%; height: 100%; display: block; }
/* Der Slider bekommt eine feste Obergrenze, damit er auf breiten Viewports
   nicht wieder ausufert. */
.wrk-media { min-width: 0; }
/* Startseite jetzt durchgehend dunkel -- .wrk-list ist eine rohe Text-Liste
   ohne Karten-Wrapper direkt auf der Sektionsflaeche, .wrk-list-h braucht
   deshalb helle Textfarbe + eine auf Dunkel sichtbare Trennlinie statt der
   hellen Haarlinie. */
.page--home .wrk-list { border-top-color: var(--border-hairline-dark); }
.page--home .wrk-list li { color: var(--text-on-dark); border-bottom-color: var(--border-hairline-dark); }

@media (max-width: 900px) {
  .wrk { grid-template-columns: 1fr; gap: var(--space-lg); }
}
/* ========= WERKSTATT-SLIDER (.wsl) =========
   Scroll-Snap-Karussell. Ohne JS bleibt es ein horizontal scrollbarer
   Streifen — alle Bilder erreichbar, nur ohne Pfeile/Punkte (die blendet
   .is-enhanced ein, siehe werkstatt-slider.js). */
.wsl {
  position: relative;
  /* Kein eigener Bodenabstand mehr — den traegt jetzt .wrk (der Slider sitzt
     in der rechten Spalte und endet dort, wo der Block endet). */
}
.wsl-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* Scrollbar ausblenden — die Navigation laeuft ueber Pfeile/Punkte/Wisch. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wsl-track::-webkit-scrollbar { display: none; }
.wsl-track:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 3px; }
.wsl-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  aspect-ratio: 16 / 9;
}
.wsl-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pfeile + Punkte erscheinen nur, wenn das Skript laeuft. */
.wsl-nav, .wsl-dots { display: none; }
.wsl.is-enhanced .wsl-nav { display: flex; }
.wsl.is-enhanced .wsl-dots { display: flex; }

.wsl-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  align-items: center; justify-content: center;
  width: 44px; height: 44px;               /* 44px Touch-Target (WCAG 2.5.5) */
  border-radius: 50%;
  background: rgba(10, 11, 14, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.wsl-nav svg { width: 22px; height: 22px; }
.wsl-nav:hover { background: rgba(10, 11, 14, .78); border-color: var(--accent-red); }
.wsl-nav--prev { left: var(--space-md); }
.wsl-nav--next { right: var(--space-md); }

.wsl-dots {
  justify-content: center; gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.wsl-dots button {
  width: 32px; height: 4px; padding: 0;
  border-radius: 999px;
  background: var(--border-hairline);
  border: none;
  transition: background var(--t-fast);
}
.wsl-dots button[aria-selected="true"] { background: var(--accent-red); }
.wsl-dots button:hover { background: var(--text-muted); }

@media (max-width: 600px) {
  .wsl-nav { width: 38px; height: 38px; }
  .wsl-nav--prev { left: var(--space-xs); }
  .wsl-nav--next { right: var(--space-xs); }
}

/* ========= LEISTUNGEN =========
   Einheitliches Raster: alle acht Leistungen als gleich grosse, kompakte
   Karten (4 Spalten x 2 Reihen). Vorher hatten die zwei Kern-Pfade
   (Verkauf/Ankauf) ein breiteres horizontales Feature-Layout mit groesserem
   Icon — dadurch wirkten sie deutlich groesser als die uebrigen sechs,
   vor allem mobil. Jetzt gleiches Gewicht fuer alle acht Karten. */
.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.leistung-card {
  display: block;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg) var(--space-lg);
  transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
  text-decoration: none;
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.leistung-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease-out;
}
@media (hover: hover) {
  .leistung-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-hairline);
  }
  .leistung-card:hover::before { transform: scaleX(1); }
}
.leistung-ic {
  font-size: 30px;
  margin-bottom: 16px;
  display: block;
  line-height: 1;
  color: var(--red);
}
.leistung-ic svg { display: block; }
.fahrzeuge-teaser-more { text-align: center; margin-top: 40px; }
.leistung-card h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.leistung-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
@media (max-width: 1000px) { .leistungen-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .leistungen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .leistungen-grid { grid-template-columns: 1fr; } }

/* ========= ÜBER-UNS-TEASER (hell/warm) ========= */
.u-teaser-in {
  max-width: 760px; margin: 0 auto;
}
/* Zweispalter-Modifier: Foto ~52% / Text ~48% (Desktop), Bild zuerst gestapelt
   auf Mobile. max-width der Basisklasse wird hier ueberschrieben, damit die
   Bild-Spalte Platz hat. */
.u-teaser-split {
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
/* Traegt jetzt einen Slider statt eines Einzelbilds. Kein aspect-ratio /
   overflow:hidden mehr auf dem Container: das Seitenverhaeltnis steuert die
   Slide selbst, und overflow:hidden wuerde die Punkte unter dem Track
   abschneiden. Radius + Schatten wandern auf den Track. */
.u-teaser-media { min-width: 0; }
.u-teaser-media .wsl-slide { aspect-ratio: 4 / 3; }
.u-teaser-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-teaser-text .u-teaser-p { max-width: none; }
@media (max-width: 900px) {
  .u-teaser-split { grid-template-columns: 1fr; gap: 28px; }
  .u-teaser-media { order: -1; }
}

.u-teaser-h {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4.5vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--text);
  margin-bottom: 22px;
}
/* Zweite Zeile: KEIN kursives Rot mehr — nur dezent abgesetzt (gedämpft). */
.u-teaser-h .u-teaser-line2 { color: var(--text-muted); }
/* Emotionale Markenbotschaft — bewusst mehr Luft als eine normale
   Info-Sektion: Label 16 / H2 24 / Text 48 zum naechsten Block. */
.u-teaser-p {
  font-size: 17px; line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 26px;
  max-width: 560px;
}
/* Startseite jetzt durchgehend dunkel (User-Entscheidung) -- .u-teaser-h/-p
   rendern als rohen Text DIREKT auf der Sektionsflaeche (kein Karten-
   Wrapper), im Unterschied zu z.B. .leistung-card/.hm-urkunde/.fqi, die als
   eigenstaendige weisse Karten unveraendert auf Dunkel funktionieren. Braucht
   daher eigene helle Textfarben, sonst waere der dunkle Standard-Text auf dem
   jetzt dunklen Hintergrund unlesbar. */
.page--home .u-teaser-h { color: var(--text-on-dark); }
/* --text-on-dark-muted war auf dem foto-durchsichtigen Grund zu schwach
   lesbar (User-Feedback: "Keine graue Textfarbe mehr, da ebenfalls nicht
   sichtbar") -- volles --text-on-dark statt der gedaempften Variante. */
.page--home .u-teaser-h .u-teaser-line2 { color: var(--text-on-dark); }
.page--home .u-teaser-p { color: var(--text-on-dark); }

/* Auszeichnungs-Liste im Ueber-uns-Teaser (ersetzt die doppelten Kennzahlen).
   Zweispaltig auf Desktop, einspaltig auf Mobile. */
/* .u-teaser-creds entfernt: die Auszeichnungs-Liste war eine Dopplung zu den
   Ankaufstation-Siegeln direkt darueber und zur Cred-Section weiter unten.
   Der Teaser traegt jetzt nur Headline, Text und den Ausgang. Der Abstand zum
   Link kommt aus .u-teaser-p (siehe oben). */

/* „Mehr über uns erfahren" — groesser als der Standard-.link-red (15px),
   weil er hier der einzige Ausgang aus der Sektion ist. */
.u-teaser-link { font-size: 18px; }

/* ========= LEISTUNGEN-SEKTION ========= */
/* Scrim als ::before (nicht als Element-Background), damit die Kanten-
   Ausblendung aus main.css greift — sonst endet die Flaeche hart. */
.leistungen-sec {
  background: transparent;
  position: relative;
  padding: var(--space-section-y) var(--space-gutter); /* war 100px 24px */
}
.leistungen-sec::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--scrim-dark);
  -webkit-mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0, #000 var(--scrim-edge),
    #000 calc(100% - var(--scrim-edge)), var(--scrim-edge-alpha) 100%);
  mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0, #000 var(--scrim-edge),
    #000 calc(100% - var(--scrim-edge)), var(--scrim-edge-alpha) 100%);
}
.leistungen-sec > * { position: relative; }
.lst-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 16px;
}
@media (max-width: 1000px) { .lst-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .lst-grid { grid-template-columns: 1fr; } }

.lst-card {
  padding: 28px 24px;
  background: var(--surface-dark-card);
  border: 1px solid var(--border-hairline-dark);
  border-radius: 14px;
  transition: border-color .25s, transform .25s, background .25s;
}
.lst-card:hover {
  border-color: rgba(232,32,40,.4);
  transform: translateY(-3px);
  background: var(--surface-dark-card);
}
.lst-ic {
  font-size: 32px;
  margin-bottom: 14px;
  opacity: .9;
}
.lst-card h3 {
  font-size: 16px; font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: .2px;
}
.lst-card p {
  font-size: 13px; line-height: 1.6;
  color: #aaa;
}

/* ========= RESPONSIVE ========= */
@media (max-width: 900px) {
  .hero-in, .bg2, .kg { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding: 24px 20px 44px; }
  .hero-txt p { max-width: 100%; }
  /* Der Desktop-Feinversatz (margin-top an .hero-form fuer die Ausrichtung
     auf Eyebrow-Hoehe neben der Textspalte) ergibt auf Mobile keinen Sinn
     mehr -- dort stehen Text und Formular gestapelt untereinander, der
     Versatz wuerde nur eine unmotivierte Luecke zwischen beiden erzeugen. */
  .hero-form { margin-top: 0; }
  /* Mobile-Scrim: Grundierung FLACH auf --scrim-photo, exakt wie auf dem
     Desktop und wie die Folgesektion (.page--home .sec--anchor::before,
     main.css). Vorher stand hier ein vertikaler Verlauf
     (.74 -> .68 -> .78), der an der Hero-UNTERKANTE auf .78 endete, waehrend
     die Fahrzeug-Sektion direkt darunter auf .58 liegt: eine Deckkraft-Stufe
     von .20 quer ueber die volle Breite, sichtbar als Linie genau an der
     Sektionsgrenze (User-Feedback: "Uebergang vom Hero-Bereich zur Fahrzeug-
     Sektion"). Gemessen ueber demselben Fotopixel: RGB 37 oben, RGB 58
     unten. Auf dem Desktop gab es diesen Sprung nie, weil dort Hero und
     Folgesektion beide flach auf --scrim-photo liegen (RGB 58 = 58).
     Der Verlauf stammte aus der Zeit vor der Desktop-Flachlegung und wurde
     damals nicht mitgezogen.
     Die zusaetzliche Abdunklung fuer die Lesbarkeit liegt jetzt -- wieder wie
     auf dem Desktop (.hero-scrim::after) -- als eigener Layer darueber, der
     vertikal ausmaskiert wird und die Unterkante gar nicht erst erreicht.
     Ein Verlauf, der an der Kante nicht ankommt, kann dort keine Stufe
     erzeugen. */
  .hero-scrim { background: var(--scrim-photo); }
  /* Auf Mobile stehen Text und Formular gestapelt, die Abdunklung muss also
     ueber die volle Breite laufen (nicht wie auf dem Desktop nur links).
     .14 zusaetzlich auf .58 = ~.72 effektiv im Textbereich; Kontrast fuer
     .hero-usp-tx (rgba(255,255,255,.80), kleinster/hellster Fliesstext)
     gegen die hellste Fotostelle: 7.04:1, klar ueber AA (4.5:1) und ueber
     dem vorherigen Wert. Ausblendung bis 78% der Hoehe -- die unteren ~22%
     tragen exakt die .58 der Folgesektion. */
  .hero-scrim::after {
    background: linear-gradient(180deg,
      rgba(13,14,17,.14) 0%, rgba(13,14,17,.14) 55%, rgba(13,14,17,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 78%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 78%);
  }
  .ctr-in { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ctr-in { grid-template-columns: 1fr 1fr; }
  .hero-form { padding: 22px 18px 18px; }
}

/* ========= STEP-FORM (Hero-spezifisch) =========
   Step-UI-Basis (.sf-steps-bar, .sf-step, .sf-nav, .sf-success/error etc.)
   liegt in main.css als cross-page Pattern. Hier nur Hero-Default für den
   Zurück-Button (dunkel-transparent). Hell-Variante in ankauf.css. */
.sf-nav-back {
  background: transparent !important;
  color: #bbb !important;
  border: 1.5px solid var(--border-hairline-dark) !important;
  box-shadow: none !important;
}
.sf-nav-back:hover {
  border-color: #666 !important;
  color: #fff !important;
  transform: none !important;
}