/* =========================================================
   Autocenter IDEAL – Global Stylesheet
   Basis-Gerüst: Design-Tokens, Reset, Typografie, Nav, Footer
   Seitenspezifische Styles werden später hinzugefügt
   ========================================================= */

/* ------- DESIGN TOKENS -------
   Alle Custom Properties leben jetzt zentral in tokens.css (wird VOR
   main.css eingebunden). Neue kanonische Tokens + Alias-Layer für die
   bisherigen Namen. Siehe tokens.css. */

/* ------- FONTS (lokal, DSGVO-konform) -------
   Body: Inter · Headlines: Hanken Grotesk. Self-hosted woff2 aus
   src/assets/fonts/ (kein CDN/Hotlink). font-display: swap. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/hanken-grotesk-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/hanken-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/hanken-grotesk-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ------- RESET ------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  /* background-color (nicht die Shorthand): der globale Bild-Layer .site-bg
     liegt auf z-index -1 DAHINTER. Eine opake Body-Fläche würde ihn verdecken,
     darum bleibt hier nur die Fallback-Farbe auf dem transparenten html-Root.
     Siehe CLAUDE.md §9 — Shorthand `background` würde background-image mit
     zurücksetzen. */
  background-color: transparent;
  font-family: var(--font-body);
  color: var(--text);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: var(--lh-body);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { max-width: 100%; display: block; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--lh-heading); }
/* Basis-Typo-Skala (Komponenten-Klassen überschreiben gezielt) */
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
/* Headline-Tracking nur auf großen Hanken-Headlines (H1/H2 + Headline-Klassen),
   nicht auf Body/H3+. */
h1, h2, .sec-h, .hero-txt h1, .page-hero-h, .u-teaser-h { letter-spacing: -0.02em; }

/* Tabellenziffern für alle Zahlen-Anzeigen (Preise, km, Raten, Zähler, Stats). */
.cn-n, .ueber-stat-n,
.vcard-price-main, .vcard-price-fin, .vcard-facts,
.vdet-price, .vdet-price-meta, .vdet-similar-price,
.finanz-rechner-rate-value, .finanz-rechner-sub-value, .finanz-rechner-result,
.finanz-rechner input {
  font-variant-numeric: tabular-nums;
}
/* Einheiten nicht umbrechen (z. B. „160.000 km", „12.990 €"). */
.vcard-fact, .vcard-price-main, .cn-n { white-space: nowrap; }
small, .text-small { font-size: var(--fs-small); line-height: var(--lh-small); }
input, textarea, select { font-family: inherit; }

/* ------- SELECTION + FOCUS (Brand-Rot statt Browser-Blau) ------- */
::selection { background: var(--accent-red); color: #fff; }
::-moz-selection { background: var(--accent-red); color: #fff; }
/* Fokus-Ring nur bei Tastatur-Fokus (:focus-visible), nicht bei Maus-Klick.
   Einheitlich Rot mit Offset für Links, Buttons, Formularfelder etc. */
:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link for accessibility */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--red); color: #fff; padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus { top: 0; }

/* ------- LAYOUT HELPERS ------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ------- NAV (dunkel) ------- */
/* Zwei Zustaende:
   oben  -> transparent, das Hero-Foto laeuft durch den Header hindurch
   gescrollt (.is-scrolled, ab 80px, gesetzt in main.js) -> deckendes Schwarz
   Ein dezenter Verlauf nach unten haelt die Nav-Labels auch im transparenten
   Zustand lesbar, ohne als Flaeche zu wirken. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* Der Verlauf endete vorher exakt an der Nav-Unterkante bei 100% = 0%
     Deckkraft -- direkt darunter lag das ungetoente Hero-Foto. Auch bei
     0% Ziel-Alpha blieb ein winziger Rundungs-Rest sichtbar, weil der
     Browser die letzten Sub-Pixel der Interpolation nicht exakt auf 0
     rundet, bevor die Nav-Box endet. Der Gradient erreicht 0% Deckkraft
     jetzt VOR dem Box-Ende (70% statt 100%), sodass am tatsaechlichen
     Rand bereits mehrere Pixel lang nichts mehr zu sehen ist -- kein
     Restwert, der als Kante auffallen koennte. (Ein spaeterer Stop wie
     140% ist NICHT die Loesung: das laesst am Box-Ende selbst noch ~16%
     Alpha uebrig, weil 100% dann vor dem Zielwert liegt -- schlimmer als
     vorher.) border-bottom komplett entfernt statt nur transparent, weil
     selbst eine 0-Alpha-Border eine zusaetzliche Kanten-Pixelreihe in der
     Box-Berechnung erzeugen kann. */
  background: linear-gradient(to bottom, rgba(10, 11, 14, .55) 0%, rgba(10, 11, 14, 0) 70%);
  border-bottom: none;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
/* Rote Hairline über dem Header — volle Breite, auch im Sticky-Zustand sichtbar. */
.nav::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--accent-red); z-index: 1;
}
/* Verdichtung nach ~80px Scroll (Klasse via main.js). Leicht transluzentes
   Glas statt deckendem Schwarz (Porsche/Apple-Referenz): Blur traegt die
   Lesbarkeit, die Flaeche bleibt sichtbar leicht durchscheinend statt hart
   zu blocken. @supports-Fallback auf fast deckendes Schwarz fuer Browser
   ohne backdrop-filter (kein Blur = Text braucht mehr Deckung). */
.nav.is-scrolled {
  background: rgba(10, 11, 14, .72);
  /* KEINE border-bottom und KEIN Schlagschatten mehr (User-Feedback mit
     Screenshot: "die linie ist immer noch da"). Das war die zuletzt sichtbare
     durchgehende Linie quer ueber das Foto: die 1px-Haarlinie lag im
     gescrollten Zustand exakt auf Nav-Unterkante (--nav-h, 108px) und lief
     ueber die volle Breite -- und der 20px-Schatten darunter verstaerkte sie
     zu einem weichen Streifen. Beide sind Abgrenzungs-Elemente derselben Art
     wie die entfernten Sektions-Uebergaenge; die Nav grenzt sich jetzt
     ausschliesslich ueber ihre eigene Flaeche (.72 Deckung + Blur) ab. */
  border-bottom: none;
  box-shadow: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav.is-scrolled {
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-scrolled { background: rgba(10, 11, 14, .94); }
}
/* Kein Schrumpfen mehr beim Scrollen: Logo und BVfK-Siegel sollen durchgehend
   gut lesbar bleiben. Die Hoehe aendert sich nur minimal. */
.nav.is-scrolled .nav-in { height: calc(var(--nav-h) - 6px); }
/* Die Nav-Punkte sollen mittig in der SICHTBAREN Luecke zwischen Logo und
   BVfK-Siegel stehen — nicht mittig in der Leiste. Beides faellt auseinander,
   weil das Logo (~144px) mehr als doppelt so breit ist wie das Siegel (~65px).
   Feinausgleich siehe margin-right an .nav-mid unten. */
.nav-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); gap: 24px;
  transition: height .25s ease;
}

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
/* Helles Lockup (aci-slogan-light.png) für den jetzt dunklen Header —
   width:auto erhält Aspect-Ratio; width/height-Attribute im Markup gegen CLS. */
.nav-logo-img {
  height: 64px;
  width: auto;
  display: block;
  transition: height .25s ease;
}

/* flex:1 laesst .nav-mid den Rest-Raum fuellen und darin zentrieren.
   Der kleine negative rechte Rand ist der Feinausgleich fuer die
   Breitendifferenz der beiden Aussenbloecke — empirisch eingestellt, bis die
   sichtbaren Abstaende gleich sind (gemessen 236px links / 232px rechts).
   Er wirkt doppelt, weil Zentrieren die Verschiebung haelftig aufteilt. */
.nav-mid {
  display: flex; gap: 48px; align-items: center;
  flex: 1; justify-content: center;
  margin-right: -5px;
}
.nav-mid li { list-style: none; }
.nav-mid a {
  /* Heller angehoben (--text-on-dark statt --text-on-dark-muted): Kontrast
     war mit 8.55:1 technisch weit ueber AA, wirkte aber neben dem hellen
     Logo/BVfK-Siegel zu grau und fiel nicht auf. */
  font-size: 18px; font-weight: 600; color: var(--text-on-dark);
  transition: color var(--t-fast);
  position: relative; padding: 6px 0;
}
.nav-mid a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--red);
  transition: width var(--t-mid);
}
.nav-mid a:hover,
.nav-mid a.is-active { color: var(--red); }
.nav-mid a:hover::after,
.nav-mid a.is-active::after { width: 100%; }

/* "Über uns"-Dropdown im .nav-mid — gleicher Look/Abstand wie die uebrigen
   Nav-Punkte (18px/600, gleicher hover/active-Unterstrich), das Panel
   klappt per :hover/:focus-within auf statt eigenem JS-Toggle (kein
   zusaetzlicher Interaktions-Layer noetig, funktioniert ohne JS). */
.nav-drop { position: relative; }
.nav-drop-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 600; color: var(--text-on-dark);
  transition: color var(--t-fast);
  position: relative; padding: 6px 0;
}
.nav-drop-trigger::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--red);
  transition: width var(--t-mid);
}
.nav-drop-trigger:hover,
.nav-drop-trigger.is-active { color: var(--red); }
.nav-drop-trigger:hover::after,
.nav-drop-trigger.is-active::after { width: 100%; }
.nav-drop-caret { flex-shrink: 0; transition: transform var(--t-fast); }
.nav-drop:hover .nav-drop-caret,
.nav-drop:focus-within .nav-drop-caret { transform: rotate(180deg); }

/* top:100% (kein Abstand mehr) + padding-top statt eines margin-artigen
   Luecken-Versatzes: bei top:calc(100% + 14px) lag zwischen Trigger und
   Panel eine hoverfreie Zone -- die Maus verliess beim Runterfahren
   :hover auf .nav-drop, das Panel schloss, bevor sie es erreichte ("kaum
   Moeglichkeit einen Punkt anzuklicken"). Jetzt beginnt die Hover-Flaeche
   direkt an der Trigger-Unterkante, der optische Abstand kommt stattdessen
   aus padding-top auf dem Panel selbst (traegt nicht zur Hitbox-Luecke
   bei, weil das Panel dort schon beginnt). */
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: rgba(16, 18, 22, .97);
  border: 1px solid var(--border-hairline-dark);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
  margin-top: 14px;
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 110;
}
/* Unsichtbare Bruecke fuellt genau die 14px margin-Luecke zwischen Trigger
   und Panel mit echter Hover-Flaeche -- ohne sie bleibt die Maus-Bewegung
   dorthin ausserhalb von .nav-drop, das Panel schliesst vorzeitig. */
.nav-drop-menu::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-menu li { list-style: none; }
.nav-drop-menu a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--text-on-dark-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-drop-menu a:hover {
  color: var(--text-on-dark); background: rgba(255, 255, 255, .06);
}

.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Schwebende Social-/Kontakt-Leiste (rechts, vertikal) — ersetzt die Nav-Icons.
   Helles Theme: liegt über dem Content, daher heller Surface-Stil. */
.social-float {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 90;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
}
.social-float a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  color: var(--text-muted);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.social-float svg { width: 19px; height: 19px; fill: currentColor; }
.social-float a:hover {
  color: var(--accent-red);
  background: rgba(232, 32, 40, .08);
  transform: scale(1.15);
}
/* Mobile: nicht stören — ausblenden (Kontakt liegt im Mobile-Menü). */
@media (max-width: 900px) {
  .social-float { display: none; }
}

/* Bewertungs-Anzeige im Header vollständig entfernt (Karte, Wert und Sterne).
   Markup raus aus partials/header.njk, Styles hier ersatzlos gestrichen.
   Bewertungen leben auf der Startseite (#bewertungen) und /ueber-uns/. */

/* BVfK Qualitätshändler-Logo — freigestelltes PNG mit echtem Alpha
   (src/assets/img/badges/bvfk-2zeilen.png, 628x723). Zweizeilige Fassung
   (BUNDESVERBAND / FREIER KFZ-HÄNDLER) statt der urspruenglichen dreizeiligen
   Variante (die zusaetzlich "MITGLIED IM" hatte) -- auf Nav-Hoehe deutlich
   besser lesbar. Erzeugt aus src/assets/img/partner/bvfk.png (weisser
   Vollflaechen-Hintergrund) per scripts/fix-bvfk-badge.js -- bei Bedarf dort
   neu rendern. Der frueher benutzte Chroma-Key lieferte eine binaere Maske
   ohne Anti-Aliasing plus einen fast weissen Saum (98,6 % der Randpixel ueber
   Luminanz 195) und ausgefranste Ecken; das Script schneidet stattdessen die
   Badge-Silhouette mit weicher Kante und rechnet den Weissanteil heraus.
   Container bleibt bei --nav-h (108px), das Bild selbst ist kleiner (88px)
   und ueber align-items:center vertikal zentriert -- sonst fuellt es den
   kompletten Nav-Container ohne Luft oben/unten (wirkte zu dominant). */
.nav-bvfk {
  height: var(--nav-h);
  flex-shrink: 0;
  display: flex; align-items: center;
}
.nav-bvfk img { height: 92px; width: auto; object-fit: contain; }

.nav-toggle {
  display: none;
  /* 44×44 Touch-Target (WCAG 2.5.5): Hit-Area vergrößert, Icon-Balken bleiben
     24px schmal (align-items:center). Negatives Margin hält die optische
     Kante bündig, ohne die Trefferfläche zu verkleinern. */
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
  margin-right: -8px;
}
.nav-toggle span { display: block; height: 2px; width: 24px; background: var(--text-on-dark); border-radius: 2px; transition: var(--t-fast); }

/* Mobile menu (heller Header → helles Overlay) */
.nav-mobile {
  position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(20px);
  z-index: 99;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile ul { display: flex; flex-direction: column; gap: 20px; text-align: center; }
.nav-mobile a { font-size: 20px; font-weight: 600; color: var(--text); }
.nav-mobile a.is-active { color: var(--red); }

/* "Über uns" als natives <details> im Mobile-Menue — <summary> uebernimmt
   die gleiche Typografie wie die uebrigen Top-Level-Links, Sub-Items
   darunter kleiner/gedeckter, damit die Hierarchie klar bleibt. */
.nav-mobile-drop { width: 100%; }
.nav-mobile-drop details { width: 100%; }
.nav-mobile-drop summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 20px; font-weight: 600; color: var(--text);
  cursor: pointer; list-style: none;
}
.nav-mobile-drop summary::-webkit-details-marker { display: none; }
.nav-mobile-drop summary.is-active { color: var(--red); }
.nav-mobile-drop summary svg { transition: transform var(--t-fast); }
.nav-mobile-drop details[open] summary svg { transform: rotate(180deg); }
.nav-mobile-drop ul {
  display: flex; flex-direction: column; gap: 14px; text-align: center;
  margin-top: 16px;
}
.nav-mobile-drop ul a { font-size: 16px; font-weight: 500; color: var(--text-muted); }
.nav-mobile-drop ul a:hover { color: var(--red); }
.nav-mobile-contact { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.nav-mobile-contact a {
  padding: 12px 24px;
  background: var(--surface-warm);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  color: var(--text);
}
/* Ersatz fuer die auf Mobile ausgeblendete .social-float-Leiste (siehe
   main.css @media 900px) -- horizontale Icon-Reihe statt vertikal fixiert,
   damit sie den Screen nicht dauerhaft ueberlagert. */
.nav-mobile-social {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.nav-mobile-social a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--surface-warm);
  border: 1px solid var(--border-hairline);
  color: var(--text-muted);
}
.nav-mobile-social svg { width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 900px) {
  .nav-mid { display: none; }
  /* Dezent statt komplett ausgeblendet: kleines Siegel zwischen Logo und
     Burger, an die 72px-Mobile-Leiste angepasst statt der 108px Desktop-
     Groesse. */
  .nav-bvfk { height: auto; }
  .nav-bvfk img { height: 48px; }
  .nav-toggle { display: flex; }
  .nav-logo-img { height: 44px; }
  /* Mobile braucht die Extra-Hoehe nicht — dort steht nur Logo + Siegel + Burger. */
  .nav-in { height: 72px; }
  .nav.is-scrolled .nav-in { height: 66px; }
}

@media (max-width: 480px) {
  /* Auf sehr schmalen Screens reicht der Platz neben Logo + Burger nicht
     mehr fuer ein drittes Element ohne Gedraenge -- Siegel weicht wieder
     der schwebenden Social-Leiste (die dort ohnehin ausgeblendet ist). */
  .nav-bvfk { display: none; }
}

/* ------- MAIN -------
   Kein padding-top: die Nav ist oben transparent, Hero bzw. Page-Hero sollen
   hinter ihr durchlaufen (einheitliches Schema auf allen Seiten). Beide
   gleichen die Nav-Hoehe ueber ihr eigenes padding-top aus.
   Seiten OHNE Hero (falls kuenftig welche dazukommen) bekommen den Abstand
   ueber .page-plain. */
main { min-height: calc(100vh - var(--nav-h)); }
.page--home .hero,
.page--ankauf .hero,
.page--suchauftrag .hero { padding-top: calc(var(--nav-h) + 28px); }
.page-plain main { padding-top: var(--nav-h); }
/* /fahrzeuge/ hat wieder einen dunklen .page-hero direkt unter der Nav
   (analog /reifen/, /jobs/, /termin/) -- der traegt seinen eigenen
   Nav-Ausgleich (siehe .page-hero padding-top), main braucht daher hier
   KEIN zusaetzliches padding-top mehr. */

/* ------- GLOBALER HINTERGRUND-LAYER (Sprint Full-Bleed) -------
   Fixierter Layer hinter allem (z-index -1), damit das Bild beim Scrollen
   steht. BEWUSST KEIN `background-attachment: fixed` — das ist auf iOS
   Safari kaputt (Layer springt/flackert beim Momentum-Scroll).
   Der Build darf NICHT brechen, wenn site-bg.webp noch fehlt: Fallback ist
   die Flächenfarbe --bg, die auch dann trägt, wenn image-set() ins Leere
   zeigt (Browser behält dann schlicht die background-color). */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
  background-size: cover;
  /* "center" liess eine echte Uebergangslinie IM FOTO (Teppich/Fliesenboden-
     Kante des Showrooms) auf der Startseite genau auf der Hero/Sektions-
     Grenze landen -- sah wie ein CSS-Scrim-Uebergang aus, war aber Teil des
     Bildes selbst (verifiziert durch Entfernen aller Scrim-Layer, User-
     Feedback: "Uebergang ist immer noch da"). .site-bg ist position:fixed,
     die sichtbare Bildzone haengt also an der Viewport-Position, nicht am
     Scroll-Stand -- vertikale Verschiebung des Bildausschnitts (35% statt
     50% Mitte) schiebt die Teppichkante aus der typischen Sektionsgrenze
     heraus. */
  background-position: center 35%;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Das Bild wird NUR referenziert, wenn die Datei im Build existiert
   (body.has-site-bg, gesetzt aus base.njk via hasSiteBg). Sonst wuerde der
   Browser die fehlende Datei anfordern und auf jeder Seite einen 404 in die
   Console schreiben — der Layer faellt dann still auf --bg zurueck. */
.has-site-bg .site-bg {
  background-image: image-set(
    url("/assets/img/bg/site-bg.webp") 1x,
    url("/assets/img/bg/site-bg@2x.webp") 2x
  );
  background-image: -webkit-image-set(
    url("/assets/img/bg/site-bg.webp") 1x,
    url("/assets/img/bg/site-bg@2x.webp") 2x
  );
}
/* Aufhell-/Beruhigungs-Schleier ueber dem Foto, NICHT pro Sektion.
   Zweck: das Foto ist ein kontrastreiches Showroom-Bild. Ohne diese Schicht
   muessten die Sektions-Scrims sehr deckend sein, um Text lesbar zu halten —
   dann sieht man vom Bild nichts mehr. Mit dem Schleier ist der Untergrund
   gleichmaessig genug, dass die Scrims transluzent bleiben koennen und das
   Bild trotzdem ueberall subtil durchscheint. */
.has-site-bg .site-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(247, 247, 245, .55);
}
/* Low-Data-Modus: nur die Flächenfarbe, kein Bild-Download. */
@media (prefers-reduced-data: reduce) {
  .has-site-bg .site-bg { background-image: none; }
  .has-site-bg .site-bg::after { background: none; }
}

/* Mobile: derselbe Bildausschnitt wie auf dem Desktop.
   Das Foto ist 4:3 (1600x1200). Auf dem Desktop (z. B. 1440x900, Verhaeltnis
   1.60) skaliert `cover` auf die BREITE -- sichtbar sind dann nur ~75% der
   Bildhoehe, und `background-position: center 35%` kann diesen Ausschnitt
   vertikal verschieben. Genau das haelt die Teppich-/Bodenkante im Foto von
   den Sektionsgrenzen fern (siehe Kommentar oben bei .site-bg).
   Auf dem Handy (z. B. 390x844, Verhaeltnis 0.46) skaliert `cover` dagegen auf
   die HOEHE: die volle Bildhoehe ist sichtbar, es gibt keinen vertikalen
   Ueberschuss -- und damit tut die 35% gar nichts mehr. Die Bildkante landete
   wieder mitten im Viewport und las sich als sichtbarer Uebergang zwischen
   zwei Sektionen, obwohl alle Scrims durchgehend gleichfarbig sind.
   Fix: `background-size` explizit ueberhoehen (Breite auto, Hoehe 150vh),
   damit wieder vertikaler Ueberschuss zum Verschieben da ist und die 35%
   greifen. Das Bild wird dabei horizontal beschnitten, nicht gestaucht --
   das Seitenverhaeltnis bleibt erhalten, weil nur eine Achse gesetzt ist. */
@media (max-width: 900px) {
  .site-bg { background-size: auto 150vh; }
}
/* ------- PAGE SECTIONS (wiederverwendbar) -------
   Zwei Rhythmus-Ebenen: .sec ist die grosse Hauptsektion, .sec--band ein
   schmaleres Zwischenband (Kennzahlen, Trust-Leisten, Cred). Vorher lagen
   beide bei identischen 60px — dadurch hatten Haupt- und Nebeninhalt dieselbe
   Gewichtung und der vertikale Rhythmus wirkte flach. */
.sec {
  padding: var(--space-section-y) var(--space-gutter);
  position: relative;
}
/* Zwischenbänder: deutlich flacher als eine Hauptsektion. */
.sec--band { padding-block: var(--space-subsection-y); }
/* Kein --scrim-edge-Override mehr noetig: die globale Zone ist jetzt mit
   28px so klein, dass sie auch auf den niedrigeren .sec--band-Baendern
   nicht mehr unverhaeltnismaessig wirkt (siehe tokens.css, vierte Runde). */

/* Scrim-Träger: EIN ::before pro Sektion. Sektions-Hintergründe sind
   transparent, damit der globale Bild-Layer durchscheint; die Lesbarkeit
   macht ausschließlich der Scrim. Ein ::before statt background auf der
   Sektion selbst, weil sich so an der Naht zweier gleichfarbiger Sektionen
   NICHTS überlagert (zwei Scrims übereinander = dunklere Linie). */
.sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.sec > * { position: relative; }

/* Auch diese beiden Sektions-Varianten laufen ueber Scrims statt opaker
   Flaechen, damit das globale Hintergrundbild ueberall durchscheint. */
.sec--light { background: var(--scrim-light); color: var(--text); }
.sec--dark2 { background: var(--scrim-dark); color: var(--w); }

/* Reskin-Sektions-Flächen (kanonisch) — jetzt scrim-basiert über dem Bild. */
.sec--warm { background: transparent; color: var(--text); }
.sec--warm::before { background: var(--scrim-light); }

/* Dunkle Anker-Sektionen: Scrim + SEHR subtiler radialer Gradient (Mitte
   minimal heller) — Tiefe, keine sichtbare Textur (~3,5% Weiß, oben zentriert). */
.sec--anchor {
  background: transparent;
  color: var(--text-on-dark);
}
.sec--anchor::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 255, 255, .035), transparent 72%),
    var(--scrim-dark);
}

/* KOMPLETT-DUNKLE SEITEN (/fahrzeuge/, /reifen/, Fahrzeug-Detail, Startseite):
   das globale Hintergrundfoto (.site-bg) soll hier so sichtbar durchscheinen
   wie im Startseiten-Hero, nicht als fast deckende Flaeche wie die uebrigen
   dunklen Anker-Sektionen (Kennzahlen/Bewertungen). Zwei Bremsen bisher: der
   globale Aufhell-Schleier (.site-bg::after, .55 Weiss, fuer HELLE
   sec--warm-Sektionen gedacht) lag ZUSAETZLICH ueber dem Foto, UNTER diesem
   eigenen Scrim -- macht das Foto insgesamt zu blass/grau statt wie im Hero
   (der das Foto OHNE den globalen Aufhell-Schleier zeigt, siehe .hero-bg:
   eigener fixed Layer, kein .site-bg). Scrim hier daher nochmal abgesenkt,
   angelehnt an die dunkelste Stufe des Hero-Scrims (siehe home.css
   .hero-scrim, linke Kante ~.88 -> hier deutlich heller gewaehlt, da die
   ganze Flaeche und nicht nur ein Rand betroffen ist). Gemeinsamer Selector
   fuer alle komplett-dunklen Unterseiten statt fast identischer Bloecke.
   Startseite (User-Entscheidung): komplette Seite durchgehend dunkel wie der
   Hero, alle vorher hellen .sec--warm-Sektionen wurden auf .sec--anchor
   umgestellt (siehe index.njk) -- .bs (Ankauf-Teaser) hatte schon dieselbe
   ::before-Mechanik OHNE eigene Klasse, daher hier separat aufgefuehrt. */
.page--fahrzeuge-list .list-sec.sec--anchor::before,
.page--reifen .sec--anchor::before,
.page--termin .sec--anchor::before,
/* /jobs/ + Job-Detail nachgetragen (User: "genau wie die anderen Seiten"):
   ohne diesen Eintrag faellt die Listen-Sektion auf die vollen .85
   (--scrim-dark) zurueck, waehrend Hero, .cred und Footer auf .40 liegen. */
.page--jobs .sec--anchor::before,
.page--job-detail .sec--anchor::before,
/* Rechtliche Seiten (Impressum/Datenschutz/Cookie-Hinweis, gemeinsame
   pageClass "legal"): tragen jetzt ebenfalls sec--anchor statt eines
   scrimlosen .sec -- dort stand der Rechtstext vorher direkt auf dem Foto,
   und an der Hero-Unterkante sass die haerteste Kante der ganzen Site
   (gemessener Luminanz-Sprung 61.5 gegenueber 0.0 im reinen Foto). */
.page--legal .sec--anchor::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 255, 255, .035), transparent 72%),
    var(--scrim-photo);
}
/* Startseite: OHNE den radialen Top-Highlight (anders als die anderen
   komplett-dunklen Seiten oben) -- jede .sec--anchor-Sektion bekommt sonst
   eine eigene helle Aufhellung zentriert an ihrer OBEREN Kante (radial-
   gradient "at 50% 0%"). Auf einer Seite mit vielen aufeinanderfolgenden
   .sec--anchor-Sektionen (User-Entscheidung: komplette Startseite dunkel)
   addierte sich das zu einem sichtbaren hellen Streifen an JEDER
   Sektionsgrenze -- selbst wenn die Grund-Deckkraft beidseitig exakt gleich
   ist (User-Feedback: "Uebergang ist immer noch da", trotz mathematisch
   identischer Basisfarbe). Flache Flaeche ohne Highlight vermeidet das. */
.page--home .sec--anchor::before,
.page--home .bs::before {
  background: var(--scrim-photo);
}
/* Fahrzeug-Detail und Reifen-Detail nutzen kein .sec--anchor (kein
   .sec-Element auf diesen Seiten) -- dieselbe Scrim-Deckkraft ist direkt auf
   .vdetail::before bzw. .reifen-detail::before repliziert, siehe
   fahrzeuge.css bzw. reifen.css. */
/* Globalen Aufhell-Schleier fuer diese Seiten deaktivieren (siehe Kommentar
   oben) -- .site-bg::after ist auf HELLE Sektionen zugeschnitten, hier ist
   die komplette Seite dunkel, der Weiss-Schleier wuerde das Foto weiter
   verwaschen. */
.page--fahrzeuge-list .site-bg::after,
.page--reifen .site-bg::after,
.page--fahrzeug-detail .site-bg::after,
.page--reifen-detail .site-bg::after,
.page--home .site-bg::after,
.page--termin .site-bg::after,
.page--ankauf .site-bg::after,
.page--suchauftrag .site-bg::after,
.page--ueber-uns .site-bg::after,
/* /jobs/ + Job-Detail nachgetragen: der weisse .55-Aufhellschleier ist fuer
   HELLE Sektionen gedacht -- auf den jetzt durchgehend dunklen Jobs-Seiten
   wusch er das Foto aus (im Screenshot als blasse Mittelzone sichtbar). */
.page--jobs .site-bg::after,
.page--job-detail .site-bg::after,
.page--legal .site-bg::after { background: none; }

/* ------- SCRIM-ÜBERGÄNGE -------
   Jede Sektion blendet ihren Scrim an BEIDEN Kanten aus, statt hart zu enden.
   Dadurch entsteht an jeder Sektionsgrenze eine weiche Zone, in der das
   Hintergrundbild staerker durchscheint — derselbe Effekt, den die dunkle
   Kennzahlen-Sektion schon hatte, jetzt einheitlich ueberall.

   Warum an beiden Kanten und nicht als Uebergang zwischen zwei Nachbarn:
   die Sektionen sind transluzent, ein Gradient „von Ton A nach Ton B" wuerde
   sich an der Naht mit dem Nachbar-Scrim ueberlagern und dort dunkler
   ausfallen. Blendet dagegen jede Sektion selbst aus, treffen an der Naht
   zwei auslaufende Kanten aufeinander — die Summe bleibt gleichmaessig.

   --scrim-edge steuert, wie weit die Kanten ausblenden (dezent gehalten:
   die Zone soll die Sektion andeuten, nicht als Streifen auffallen). */
/* 17 Stopps auf einer ECHTEN Kosinus-Ease-in-out-Kurve (nicht mehr von Hand
   geschaetzte Prozentwerte): alpha(t) = (1 - cos(t*pi)) / 2 fuer t = 0/8 .. 8/8
   je Seite. Vorherige Versuche (2, dann 5, dann 11 Stopps) reduzierten den
   Knick nur, weil eine stueckweise lineare Naeherung mit wenigen Punkten immer
   Segmente unterschiedlicher Steigung bleibt — am Auge sichtbar als Stufe,
   besonders bei einer so langen 180px-Zone. Die Kosinus-Kurve hat an beiden
   Enden Steigung 0 (glatt in die Vollflaeche hinein UND aus ihr heraus), das
   ist der Unterschied zu jeder linear interpolierten Annaeherung. */
.sec::before,
.bs::before {
  -webkit-mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0,
    color-mix(in srgb, var(--scrim-edge-alpha) 96%, #000) calc(var(--scrim-edge) * 0.125),
    color-mix(in srgb, var(--scrim-edge-alpha) 85%, #000) calc(var(--scrim-edge) * 0.250),
    color-mix(in srgb, var(--scrim-edge-alpha) 69%, #000) calc(var(--scrim-edge) * 0.375),
    color-mix(in srgb, var(--scrim-edge-alpha) 50%, #000) calc(var(--scrim-edge) * 0.500),
    color-mix(in srgb, var(--scrim-edge-alpha) 31%, #000) calc(var(--scrim-edge) * 0.625),
    color-mix(in srgb, var(--scrim-edge-alpha) 15%, #000) calc(var(--scrim-edge) * 0.750),
    color-mix(in srgb, var(--scrim-edge-alpha) 4%, #000) calc(var(--scrim-edge) * 0.875),
    #000 var(--scrim-edge),
    #000 calc(100% - var(--scrim-edge)),
    color-mix(in srgb, var(--scrim-edge-alpha) 4%, #000) calc(100% - var(--scrim-edge) * 0.875),
    color-mix(in srgb, var(--scrim-edge-alpha) 15%, #000) calc(100% - var(--scrim-edge) * 0.750),
    color-mix(in srgb, var(--scrim-edge-alpha) 31%, #000) calc(100% - var(--scrim-edge) * 0.625),
    color-mix(in srgb, var(--scrim-edge-alpha) 50%, #000) calc(100% - var(--scrim-edge) * 0.500),
    color-mix(in srgb, var(--scrim-edge-alpha) 69%, #000) calc(100% - var(--scrim-edge) * 0.375),
    color-mix(in srgb, var(--scrim-edge-alpha) 85%, #000) calc(100% - var(--scrim-edge) * 0.250),
    color-mix(in srgb, var(--scrim-edge-alpha) 96%, #000) calc(100% - var(--scrim-edge) * 0.125),
    var(--scrim-edge-alpha) 100%);
  mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0,
    color-mix(in srgb, var(--scrim-edge-alpha) 96%, #000) calc(var(--scrim-edge) * 0.125),
    color-mix(in srgb, var(--scrim-edge-alpha) 85%, #000) calc(var(--scrim-edge) * 0.250),
    color-mix(in srgb, var(--scrim-edge-alpha) 69%, #000) calc(var(--scrim-edge) * 0.375),
    color-mix(in srgb, var(--scrim-edge-alpha) 50%, #000) calc(var(--scrim-edge) * 0.500),
    color-mix(in srgb, var(--scrim-edge-alpha) 31%, #000) calc(var(--scrim-edge) * 0.625),
    color-mix(in srgb, var(--scrim-edge-alpha) 15%, #000) calc(var(--scrim-edge) * 0.750),
    color-mix(in srgb, var(--scrim-edge-alpha) 4%, #000) calc(var(--scrim-edge) * 0.875),
    #000 var(--scrim-edge),
    #000 calc(100% - var(--scrim-edge)),
    color-mix(in srgb, var(--scrim-edge-alpha) 4%, #000) calc(100% - var(--scrim-edge) * 0.875),
    color-mix(in srgb, var(--scrim-edge-alpha) 15%, #000) calc(100% - var(--scrim-edge) * 0.750),
    color-mix(in srgb, var(--scrim-edge-alpha) 31%, #000) calc(100% - var(--scrim-edge) * 0.625),
    color-mix(in srgb, var(--scrim-edge-alpha) 50%, #000) calc(100% - var(--scrim-edge) * 0.500),
    color-mix(in srgb, var(--scrim-edge-alpha) 69%, #000) calc(100% - var(--scrim-edge) * 0.375),
    color-mix(in srgb, var(--scrim-edge-alpha) 85%, #000) calc(100% - var(--scrim-edge) * 0.250),
    color-mix(in srgb, var(--scrim-edge-alpha) 96%, #000) calc(100% - var(--scrim-edge) * 0.125),
    var(--scrim-edge-alpha) 100%);
}
/* Der Hero blendet nach UNTEN aus, damit der Wechsel in die erste helle
   Sektion genauso weich ist wie alle anderen Sektionsgrenzen. Ohne das endet
   das Hero-Foto mit einer harten Kante an der weissen Flaeche.
   --hero-fade (tokens.css, 40px) statt --scrim-edge (28px): .hero-scrim hat
   einen eigenen Boden-Abdunkler in home.css, der Fotobereich direkt ueber
   der Naht ist dadurch bereits dunkler als bei einer normalen Sektionskante
   -- 28px liess den Uebergang hart wirken. WICHTIG (aus zwei Fehlversuchen
   gelernt, 64px und 160px waren beide zu breit): die Zone bleibt bewusst in
   derselben "feine Kante statt Streifen"-Groessenordnung wie --scrim-edge
   selbst (siehe dessen Kommentar in tokens.css) -- ein zu langer Fade laesst
   das Foto der naechsten Sektion durchschimmern und wirkt unruhig statt
   sauber. .hero-in hat padding-bottom: calc(var(--hero-fade) + ...) exakt
   auf dieselbe Variable synchronisiert (home.css), damit der Content nicht
   in die Fade-Zone hineinragt. */
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--hero-fade);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--scrim-light));
}
/* --to-dark: Modifier fuer Seiten, deren naechste Sektion dunkel ist
   (z. B. /ankauf/, wo direkt die .cred-Sektion folgt). Ohne diesen blendet
   der Hero Richtung --scrim-light (helles Off-White) aus, obwohl beide
   Nachbar-Sektionen dunkel sind -- der helle Keil war als stoerender
   Streifen sichtbar, wo eigentlich gar kein Farbwechsel stattfindet.
   Groessere Fade-Hoehe (analog .page-hero--to-dark) statt --hero-fade: die
   Ziel-Sektion (.cred) beginnt bereits voll deckend bei --scrim-dark, ein zu
   kurzer Fade liesse den Sprung von "fast Foto" zu "0.85 deckend" als
   Kante durchscheinen. */
/* Wie .page-hero--to-dark::after jetzt abgeschaltet statt 160px hoch --
   fest verdrahtete Hoehe, die der auf 0 gesetzte --hero-fade nicht erreicht
   haette. */
.hero--to-dark::after { display: none; }
/* Startseite: kein Fade an der Hero-Unterkante mehr (User-Entscheidung:
   komplette Seite durchgehend dunkel, "ohne Uebergaenge"). Die naechste
   Sektion ist jetzt selbst dunkel/foto-sichtbar statt hell, ein Ausklang ist
   damit unnoetig -- harter Schnitt zwischen zwei bereits aehnlich dunklen
   Flaechen faellt nicht als Kante auf. */
.hero--flat-b::after { display: none; }
/* Ohne den Fade braucht der Hero unten mehr eigenen Puffer, sonst kleben die
   Trust-Logos direkt am unteren Sektionsrand (User-Feedback: "die Logos ...
   nicht so am Rand der Sektion stehen").
   .hero.hero--flat-b (statt nur .hero--flat-b): home.css definiert .hero
   selbst mit einer padding-SHORTHAND (setzt padding-bottom implizit mit) UND
   laedt NACH main.css -- bei gleicher Spezifitaet (0,1,0 vs. 0,1,0) gewann
   die spaeter geladene Shorthand-Regel gegen dieses longhand-Override, die
   Aenderung blieb unsichtbar (User-Feedback: "weder der Abstand ist
   vergroessert, noch die unteren Logos sind hochgerueckt"). Die kombinierte
   Klassen-Selektor-Spezifitaet (0,2,0) gewinnt jetzt unabhaengig von der
   Ladereihenfolge. */
.hero.hero--flat-b { padding-bottom: var(--space-xl); }
/* ------- NAHT-MODIFIER: keine Ausblend-Zone zwischen GLEICHFARBIGEN
   Nachbar-Sektionen -------
   Zwei Sektionen mit derselben Grundfarbe (z. B. warm -> warm) blenden
   unabhaengig voneinander an ihrer gemeinsamen Kante aus — an genau dieser
   Stelle kann das durchscheinende Foto zufaellig heller oder dunkler sein
   als die Umgebung, was einen sichtbaren Streifen erzeugt, OBWOHL beide
   Seiten dieselbe Farbe haben (der Bruch ist unnoetig, kein Farbwechsel
   findet dort statt). .seam-flat-b/-t deaktivieren die Ausblendung an der
   jeweiligen Kante (durchgehend deckend bis zum Rand) — an die passende
   Sektion einer gleichfarbigen Paarung setzen (b = untere Kante der ersten,
   t = obere Kante der zweiten Sektion). */
.seam-flat-b::before,
.seam-flat-b.bs::before {
  -webkit-mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0,
    color-mix(in srgb, var(--scrim-edge-alpha) 96%, #000) calc(var(--scrim-edge) * 0.125),
    color-mix(in srgb, var(--scrim-edge-alpha) 85%, #000) calc(var(--scrim-edge) * 0.250),
    color-mix(in srgb, var(--scrim-edge-alpha) 69%, #000) calc(var(--scrim-edge) * 0.375),
    color-mix(in srgb, var(--scrim-edge-alpha) 50%, #000) calc(var(--scrim-edge) * 0.500),
    color-mix(in srgb, var(--scrim-edge-alpha) 31%, #000) calc(var(--scrim-edge) * 0.625),
    color-mix(in srgb, var(--scrim-edge-alpha) 15%, #000) calc(var(--scrim-edge) * 0.750),
    color-mix(in srgb, var(--scrim-edge-alpha) 4%, #000) calc(var(--scrim-edge) * 0.875),
    #000 var(--scrim-edge),
    #000 100%);
  mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0,
    color-mix(in srgb, var(--scrim-edge-alpha) 96%, #000) calc(var(--scrim-edge) * 0.125),
    color-mix(in srgb, var(--scrim-edge-alpha) 85%, #000) calc(var(--scrim-edge) * 0.250),
    color-mix(in srgb, var(--scrim-edge-alpha) 69%, #000) calc(var(--scrim-edge) * 0.375),
    color-mix(in srgb, var(--scrim-edge-alpha) 50%, #000) calc(var(--scrim-edge) * 0.500),
    color-mix(in srgb, var(--scrim-edge-alpha) 31%, #000) calc(var(--scrim-edge) * 0.625),
    color-mix(in srgb, var(--scrim-edge-alpha) 15%, #000) calc(var(--scrim-edge) * 0.750),
    color-mix(in srgb, var(--scrim-edge-alpha) 4%, #000) calc(var(--scrim-edge) * 0.875),
    #000 var(--scrim-edge),
    #000 100%);
}
.seam-flat-t::before,
.seam-flat-t.bs::before {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0,
    #000 calc(100% - var(--scrim-edge)),
    color-mix(in srgb, var(--scrim-edge-alpha) 4%, #000) calc(100% - var(--scrim-edge) * 0.875),
    color-mix(in srgb, var(--scrim-edge-alpha) 15%, #000) calc(100% - var(--scrim-edge) * 0.750),
    color-mix(in srgb, var(--scrim-edge-alpha) 31%, #000) calc(100% - var(--scrim-edge) * 0.625),
    color-mix(in srgb, var(--scrim-edge-alpha) 50%, #000) calc(100% - var(--scrim-edge) * 0.500),
    color-mix(in srgb, var(--scrim-edge-alpha) 69%, #000) calc(100% - var(--scrim-edge) * 0.375),
    color-mix(in srgb, var(--scrim-edge-alpha) 85%, #000) calc(100% - var(--scrim-edge) * 0.250),
    color-mix(in srgb, var(--scrim-edge-alpha) 96%, #000) calc(100% - var(--scrim-edge) * 0.125),
    var(--scrim-edge-alpha) 100%);
  mask-image: linear-gradient(to bottom,
    #000 0,
    #000 calc(100% - var(--scrim-edge)),
    color-mix(in srgb, var(--scrim-edge-alpha) 4%, #000) calc(100% - var(--scrim-edge) * 0.875),
    color-mix(in srgb, var(--scrim-edge-alpha) 15%, #000) calc(100% - var(--scrim-edge) * 0.750),
    color-mix(in srgb, var(--scrim-edge-alpha) 31%, #000) calc(100% - var(--scrim-edge) * 0.625),
    color-mix(in srgb, var(--scrim-edge-alpha) 50%, #000) calc(100% - var(--scrim-edge) * 0.500),
    color-mix(in srgb, var(--scrim-edge-alpha) 69%, #000) calc(100% - var(--scrim-edge) * 0.375),
    color-mix(in srgb, var(--scrim-edge-alpha) 85%, #000) calc(100% - var(--scrim-edge) * 0.250),
    color-mix(in srgb, var(--scrim-edge-alpha) 96%, #000) calc(100% - var(--scrim-edge) * 0.125),
    var(--scrim-edge-alpha) 100%);
}
/* Beide Kanten flach (Sektion liegt zwischen zwei gleichfarbigen Nachbarn):
   komplett deckend, keine Ausblendung noetig. */
.seam-flat-b.seam-flat-t::before,
.seam-flat-b.seam-flat-t.bs::before {
  -webkit-mask-image: none;
  mask-image: none;
}

.sec--warm .sec-h,
.sec--anchor .sec-h { color: inherit; }
.sec--warm .sec-p { color: var(--text-muted); }
.sec--anchor .sec-p { color: var(--text-on-dark-muted); }
/* Startseite: --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.
   Nur fuer die Startseite, andere Seiten mit .sec--anchor auf flacherem
   --scrim-dark behalten die gedaempfte Hierarchie-Abstufung. */
.page--home .sec--anchor .sec-p,
.page--home .sec--anchor .eyebrow { color: var(--text-on-dark); }

/* ------- .card — generische Karten-Basis (Reskin 1f) -------
   surface-card + Haarlinie + Schatten. Für helle Sektionen. Dunkle
   Anker-Karten via .card.card--dark. */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card--dark {
  background: var(--surface-dark-card);
  border-color: var(--border-hairline-dark);
  box-shadow: var(--shadow-card-dark);
  color: var(--text-on-dark);
}

/* ------- Eyebrow mit rotem Strich (Reskin) -------
   Kicker-Label mit kurzer roter Linie davor. .sec-eyebrow--center für
   zentrierte Sektionen (Strich beidseitig). */
/* Section-Label. Abstand zur Headline ueber --space-label-h, damit alle
   Sektionen denselben Header-Rhythmus haben (Label -> H2 -> Text -> Content). */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--space-label-h);
}
.eyebrow::before {
  content: ''; width: 28px; height: 2px; border-radius: 2px;
  background: var(--accent-red); flex-shrink: 0;
}
.eyebrow--center { display: flex; justify-content: center; }
.eyebrow--center::after {
  content: ''; width: 28px; height: 2px; border-radius: 2px;
  background: var(--accent-red); flex-shrink: 0;
}
.sec--anchor .eyebrow { color: var(--text-on-dark-muted); }

/* Roter Text-Link mit Pfeil (Reskin) — „Alle ansehen →", „Mehr erfahren →". */
.link-red {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent-red); font-family: var(--font-heading);
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  transition: gap var(--t-fast);
}
.link-red svg { width: 16px; height: 16px; }
.link-red:hover { gap: 12px; }

.sec-in { max-width: var(--maxw); margin: 0 auto; }

.sec-eyebrow {
  font-size: 12px; font-weight: 700; color: var(--red);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: var(--space-label-h);
}
.sec-h {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700; line-height: 1.2;
  margin-bottom: var(--space-h-text);
  text-wrap: balance;
}
/* Folgt KEIN Beschreibungstext, traegt die Headline selbst den groesseren
   Abstand zum Content — sonst klebt das Grid direkt an der Ueberschrift. */
.sec-h:last-child { margin-bottom: var(--space-text-content); }
.sec--light .sec-h { color: var(--text); }
.sec-p {
  color: var(--gy);
  font-size: 16px; line-height: 1.7;
  max-width: 65ch;                       /* Lesbare Zeilenlaenge */
  margin-bottom: var(--space-text-content);
  text-wrap: pretty;
}
.sec--light .sec-p { color: #666; }

/* Modifier: Section-Header zentrieren (Eyebrow + Headline + Lead-Copy) */
.sec--centered .sec-eyebrow,
.sec--centered .sec-h,
.sec--centered .sec-p { text-align: center; }
.sec--centered .sec-p { margin-left: auto; margin-right: auto; }

/* ------- PAGE-HERO (cross-page Hero-Pattern für Unterseiten) -------
   Traegt dasselbe Schema wie der Startseiten-Hero: das Foto laeuft hinter der
   transparenten Nav durch, ein Scrim sichert die Lesbarkeit, und nach unten
   blendet die Flaeche weich in die Folgesektion aus.
   Das Foto kommt aus dem globalen Layer (.site-bg), der ohnehin auf jeder
   Seite liegt — hier wird lediglich der Scrim aufgesetzt, damit heller Text
   darauf funktioniert. Kein zweites Bild, kein zusaetzlicher Request. */
/* GRUNDIERUNG FLACH auf .40 (User-Feedback mit Screenshot, /jobs/: "der
   Uebergang ist aber noch da. Zieh den dunklen Bereich wieder bis ganz nach
   unten").
   Vorher lag hier ein diagonaler Verlauf .95 -> .82 -> .62, waehrend die
   Sektionen darunter flach auf .40 liegen. An der Hero-Unterkante sprang die
   Deckung dadurch ueber die volle Breite -- am rechten Rand um .22, gemessen
   als Luminanz-Sprung von 29.1 auf 47.3 (+18.2) exakt auf der Kante,
   waehrend das Foto ringsum nur um +/-3 schwankt. Genau die Linie im
   Screenshot.
   Die Korrektur steht bewusst HIER in der Basisregel und nicht noch einmal
   pro Seite: dieselbe Kante existierte auf JEDER Seite mit .page-hero
   (nachgemessen: /jobs/, /reifen/, /fahrzeuge/, /impressum/, /datenschutz/,
   /cookie-hinweis/, /finanzierung/) -- nur /termin/ war bereits gefixt, weil
   es dort einzeln gescoped wurde. Ein weiterer Einzel-Fix haette die naechste
   Seite offen gelassen.
   Die Lesbarkeits-Abdunklung fuer den Hero-Text liegt jetzt als eigener
   Layer auf ::before (siehe unten) und endet VOR der Unterkante. */
.page-hero {
  background: var(--scrim-photo);
  /* Ausnahme /finanzierung/: die Folgesektion ist dort HELL (--bg), nicht
     dunkel wie ueberall sonst. Eine flache .40-Flaeche wuerde dort gegen
     Weiss laufen und die Kante nicht loesen, sondern verschieben -- deshalb
     behaelt diese eine Seite den kraeftigen Verlauf (der Hero soll sich dort
     bewusst gegen die helle Flaeche absetzen). Als Klasse und nicht als
     pageClass-Selektor, damit kuenftige Seiten mit hellem Unterbau sie
     einfach mitnehmen koennen. */
  /* Nav-Hoehe + Abstand, weil main auf Unterseiten kein padding-top mehr hat.
     Unten: --scrim-edge (Hoehe der Ausblend-Zone) PLUS regulaerer Abstand —
     sonst laeuft der Verlauf durch den CTA-Button, der direkt am Sektionsende
     steht. Der Inhalt endet damit oberhalb der weichen Zone. */
  padding: calc(var(--nav-h) + 44px) var(--space-gutter)
           calc(var(--scrim-edge) + var(--space-lg));
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
/* Variante ohne Inhalt: reiner Foto-Streifen unter der Nav (z. B. /ankauf/,
   wo Headline und CTA entfallen sind). Nur so hoch, dass die transparente Nav
   auf dem Foto sitzt und der Uebergang zur Folgesektion weich bleibt. */
.page-hero--bare {
  padding: calc(var(--nav-h) + var(--space-lg)) var(--space-gutter) var(--scrim-edge);
  min-height: 0;
}

/* Weicher Ausklang nach unten — analog .hero::after auf der Startseite.
   Blendet standardmaessig zu HELL aus (die meisten Page-Heroes leiten in
   eine helle Sektion ueber). --to-dark ist der Modifier fuer Seiten, deren
   naechste Sektion dunkel ist (z. B. /suchauftrag/, Trust-Band direkt nach
   dem Hero) — sonst treffen zwei entgegengesetzte Verlaeufe aufeinander und
   erzeugen einen sichtbaren Farbbruch (heller Balken) in der Mitte. */
.page-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--scrim-edge);
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--scrim-light));
}
/* --to-dark bekommt eine deutlich groessere Ausklang-Zone als der Standard-
   Fade (28px reichten nicht): das Hero-Foto ist rechts fast ungetoent
   (der Lesbarkeits-Gradient in .page-hero liegt links), .suchauftrag-trust
   direkt danach startet aber komplett flaechig bei --scrim-dark (0.85
   Deckkraft, seit die obere Kante dort bewusst NICHT mehr ausblendet, siehe
   .suchauftrag-trust::before). Auf 28px war der Sprung von "fast Foto" zu
   "0.85 deckend dunkel" noch als Balken sichtbar. 160px gleicht das aus. */
/* Jetzt abgeschaltet statt 160px (User-Entscheidung: "Uebergaenge raus,
   dunkle Linie durchgehend bis nach ganz unten"). Der Standard-Fade darueber
   verschwindet bereits von selbst, weil --scrim-edge auf 0 steht -- diese
   Variante trug als einzige eine fest verdrahtete Hoehe und haette den
   weichen Ausklang sonst als einzige Seite behalten. */
.page-hero--to-dark::after { display: none; }

/* /reifen/: Hero deutlich kompakter (User-Feedback: "fuer so wenig Text
   nimmt die Sektion sehr viel Platz ein, sodass das Hintergrundbild wenig
   durchscheint") + KEIN Ausklang-Fade mehr an der Unterkante (User-
   Feedback: "wir wollen auf der Seite keine Uebergaenge mehr"). Beides
   haengt zusammen: die Filter-Sektion darunter nutzt seit dem Transparenz-
   Sprint bereits denselben abgesenkten Scrim-Ton (.40, siehe
   .page--reifen .sec--anchor::before weiter oben) wie der Hero selbst --
   ein weicher Verlauf zwischen zwei fast gleich hellen Flaechen war ohnehin
   kaum noch sichtbar, ein harter Schnitt faellt hier nicht als Kante auf. */
.page--reifen .page-hero {
  padding-top: calc(var(--nav-h) + 20px);
  padding-bottom: var(--space-md);
}
/* Der /reifen/-Hero ist deutlich flacher als die anderen (kompaktes Padding
   oben). Die 62%/88%-Ausblendmaske von .page-hero::before liegt dadurch
   relativ frueher und laesst den Text im unteren Drittel ohne Abdunklung --
   gemessen 4.10:1 gegen den hellsten Bildpunkt. Auf dieser Seite deshalb
   spaeter ausblenden; die Kante bleibt trotzdem frei, weil bei 100% Null
   erreicht ist und der Hero direkt in eine gleichfarbige Sektion laeuft. */
.page--reifen .page-hero::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
}
.page--reifen .page-hero::after { display: none; }
/* .page-hero-p traegt sonst 32px margin-bottom fuer einen nachfolgenden
   CTA-Button (siehe .page-hero-cta auf anderen Seiten) -- /reifen/ hat
   keinen, der Abstand blieb als unnoetige Leerflaeche stehen. */
.page--reifen .page-hero-p { margin-bottom: 0; }
/* Naht zur Cred-Section (Bewertungen/Auszeichnungen) am Seitenende: .cred
   faellt normalerweise auf das dunklere --scrim-dark (.85) zurueck, waehrend
   die Listing-Sektion darueber seit dem Transparenz-Sprint nur noch .40
   Deckkraft hat -- der Sprung zwischen beiden Tonstufen war als sichtbarer
   Farbbruch/"Übergang" zu sehen (User-Feedback). Gleiche abgesenkte Deckkraft
   wie oben + Fade-in-Maske am oberen Rand deaktiviert (glatter, harter
   Schnitt statt weichem Verlauf, User-Wunsch: "keine Uebergaenge mehr"). */
.page--reifen .cred::before,
.page--termin .cred::before,
.page--ankauf .cred::before,
.page--suchauftrag .cred::before,
/* /jobs/ + Job-Detail nachgetragen: standen als einzige Seiten mit
   .cred-Sektion noch auf den vollen .85 (--scrim-dark), waehrend die
   Sektion darueber .40 hat -- der Sprung war als heller/dunkler Block
   sichtbar (User: "damit sie genau wie die anderen Seiten aussieht"). */
.page--jobs .cred::before,
.page--job-detail .cred::before {
  background: var(--scrim-photo);
  -webkit-mask-image: none;
  mask-image: none;
}
/* Lesbarkeits-Abdunklung fuer Eyebrow/H1/Lead PLUS der rote Schimmer, beides
   in einem Layer. Entscheidend fuer die Nahtfreiheit: die Maske blendet den
   Layer ab 62% der Hero-Hoehe aus und ist bei 88% auf 0 -- die Unterkante
   traegt damit exakt die .40 der Folgesektion, und was die Kante nicht
   beruehrt, kann dort auch keine Stufe erzeugen.
   Horizontal links am staerksten (dort steht der Text), nach rechts
   auslaufend: .30 + .40 = ~.70 effektiv links -- mehr als die fruehere
   Diagonale rechts (.62) lieferte, der Textkontrast wird also nicht
   schlechter, sondern besser. */
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(232,32,40,.08), transparent 60%),
    /* Verstaerkt (.30/.18 -> .42/.30/.12): auf /reifen/ und /ueber-uns/ liegt
       der Hero-Text ueber der hellsten Stelle des Fotos (Wabenleuchten), dort
       kam die Subline mit den alten Werten nur auf ~4.1:1 gegen den hellsten
       Bildpunkt. Auch rechts jetzt ein Rest (.12 statt 0), weil der Text auf
       manchen Seiten weiter nach rechts laeuft als urspruenglich angenommen. */
    linear-gradient(100deg,
      rgba(13, 14, 17, .42) 0%, rgba(13, 14, 17, .30) 45%, rgba(13, 14, 17, .12) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 88%);
  pointer-events: none;
}
/* Siehe Kommentar an .page-hero: /finanzierung/ ist die einzige Seite mit
   HELLEM Unterbau und behaelt daher den kraeftigen Verlauf. Muss NACH
   .page-hero und .page-hero::before stehen, sonst gewinnt bei gleicher
   Spezifitaet (0,1,0 bzw. 0,1,1) die spaeter notierte Basisregel. */
.page-hero--on-light {
  background:
    linear-gradient(100deg, rgba(13, 14, 17, .95) 0%, rgba(13, 14, 17, .82) 45%, rgba(13, 14, 17, .62) 100%);
}
.page-hero--on-light::before {
  background: radial-gradient(ellipse at 70% 50%, rgba(232,32,40,.08), transparent 60%);
  -webkit-mask-image: none;
  mask-image: none;
}

.page-hero-in { max-width: var(--maxw); margin: 0 auto; position: relative; }
.page-hero-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--red); margin-bottom: 16px;
}
.page-hero-h {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700; line-height: 1.15;
  margin-bottom: 16px;
  color: var(--w); /* dunkler Page-Hero: helle Headline statt vom (hellen) Body zu erben */
}
.page-hero-h .accent { color: var(--gy-light); font-style: italic; }
/* Textlogo-Bild ersetzt nur "das IDEALE Fahrzeug!" -- "Sie suchen" davor
   bleibt echter Text (aktuell nur /suchauftrag/), Bild sitzt inline in
   derselben Zeile. Hoehe in em statt fixer Breite: skaliert dadurch exakt
   mit der H1-Schriftgroesse mit (clamp(32px, 5vw, 52px) von .page-hero-h),
   statt eigenstaendig ueber vw zu wachsen und mit dem Text aus dem Tritt
   zu geraten. vertical-align gleicht die Grundlinie zum Fliesstext an. */
.page-hero-textlogo {
  display: inline-block;
  height: 0.85em;
  width: auto;
  vertical-align: middle;
  margin-left: 0.15em;
  margin-top: -0.08em;
}
/* ------- GESTAPELTE ZENTRIERTE VARIANTE (/suchauftrag/) -------
   "Sie suchen [Textlogo]" nebeneinander in einer Zeile wirkte unruhig: das
   Textlogo-Bild nutzt eine andere Schriftart als der umgebende Fliesstext,
   der Bruch war an der Grundlinie sichtbar. Vorherige Zwischenschritte
   zentrierten nur die Headline, Fliesstext/Liste/Button blieben links --
   der Wechsel von zentriert zu linksbuendig mitten in der Sektion wirkte
   inkonsistent. Jetzt zentriert .page-hero-in--centered den KOMPLETTEN
   Hero-Inhalt als eigenen schmalen Block (nicht die volle Hero-Spalten-
   breite) -- alles teilt dieselbe optische Mittelachse. Zusaetzlich
   kompakter: kleinere Abstaende zwischen den Bloecken (vorher 16/32px,
   jetzt 12/24px), damit der Hero nicht unnoetig hoch wirkt. */
.page-hero-in--centered {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-hero-in--centered .page-hero-eyebrow { margin-bottom: 12px; }
.page-hero-in--centered .page-hero-h { margin-bottom: 12px; }
.page-hero-in--centered .page-hero-p { margin-bottom: 20px; }
.page-hero-h--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-hero-h-line { display: block; }
/* Nochmal vergroessert (220-340px -> 320-480px -> 420-620px) -- bei einer
   eigenen Zeile darf das Textlogo das visuelle Gewicht von "DAS IDEALE
   FAHRZEUG!" tragen, statt neben der grossen H1-Zeile klein zu wirken. */
.page-hero-textlogo--stacked {
  display: block;
  height: auto;
  width: clamp(420px, 46vw, 620px);
  margin: 10px 0 0;
  vertical-align: initial;
}
.page-hero-p {
  color: var(--gy-light);
  font-size: 17px; line-height: 1.6;
  max-width: 640px;
  margin-bottom: 32px;
}
/* Liste als zentrierte Reihe statt linksbuendiger Absatz-Bullets: der
   Haken sitzt jetzt inline vor dem Text (kein position:absolute mehr,
   das war auf zentrierten/umbrechenden Items nicht sauber moeglich). */
.sa-hero-points--center {
  justify-content: center;
  margin-bottom: 20px;
}
.sa-hero-points--center li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}
.sa-hero-points--center li::before {
  position: static;
  flex-shrink: 0;
}
.page-hero-cta { margin-top: 4px; }

/* ------- FORM-FELDER (cross-page Basis: .fg, .fl, .fs, .fi, .fr, .fb) ------- */
.fl {
  display: block; color: var(--gy); font-size: 11px; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px;
}
.fg { margin-bottom: 16px; }
.fs, .fi {
  width: 100%; padding: 12px 14px;
  background: rgba(26,26,26,.8);
  border: 1.5px solid var(--border-hairline-dark); border-radius: 10px;
  color: #fff; font-size: 14px; font-family: inherit;
  -webkit-appearance: none; appearance: none; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.fs:focus, .fi:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,32,40,.1); }
.fs {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23888'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.fs option { background: var(--surface-dark-anchor); color: #fff; }
.fr { display: flex; gap: 12px; }
.fr > * { flex: 1; }
.fb {
  width: 100%; padding: 16px;
  font-size: 15px; font-weight: 700;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff; border: none; border-radius: 12px; margin-top: 8px;
  transition: transform .15s, box-shadow .15s;
  position: relative; overflow: hidden;
  cursor: pointer; font-family: inherit;
}
.fb::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s;
}
.fb:hover::after { left: 120%; }
.fb:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(232,32,40,.3); }

.fs.is-invalid, .fi.is-invalid {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

/* Feld-Fehlermeldung (von AciForms.validateContainer erzeugt, im .fg) */
.fe-msg {
  margin-top: 6px;
  color: #f87171;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

/* ------- STEP-FORM-UI (cross-page Basis: .sf-*) ------- */
.sf-steps-bar {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin-bottom: 18px;
}
.sf-step-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface-dark-card);
  transition: all 220ms ease;
}
.sf-step-dot.is-done { background: rgba(232, 32, 40, 0.45); }
.sf-step-dot.is-active {
  width: 24px; border-radius: 4px;
  background: var(--red);
}

.sf-step-title {
  font-size: 11px; font-weight: 700; color: var(--gy);
  letter-spacing: 2px; text-transform: uppercase;
  text-align: center; margin-bottom: 16px;
}

.sf-step { display: none; }
.sf-step.is-visible {
  display: block;
  animation: sf-fade 200ms ease-out;
}
@keyframes sf-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sf-nav {
  display: flex; gap: 10px; margin-top: 18px;
}
.sf-nav .fb { flex: 1; margin: 0; }

.sf-hint {
  font-size: 11px; color: #888;
  text-align: center; margin-top: 10px;
  line-height: 1.55;
}
.sf-hint a { color: var(--red); text-decoration: none; font-weight: 600; }
.sf-hint a:hover { text-decoration: underline; }

.sf-success { text-align: center; padding: 20px 8px 12px; }
.sf-success-ic {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.sf-success-h {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 700;
  color: #fff; margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.sf-success-p {
  font-size: 14px; color: #aaa; line-height: 1.6;
  max-width: 320px; margin: 0 auto;
}

.sf-error { text-align: center; padding: 20px 8px 12px; }
.sf-error-ic {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.sf-error-h {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 700;
  color: #fff; margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.sf-error-p {
  font-size: 14px; color: #aaa; line-height: 1.6;
  max-width: 320px; margin: 0 auto;
}
.sf-error-p a { color: var(--red); font-weight: 700; text-decoration: none; }
.sf-error-p a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .fr { flex-direction: column; }
}

/* ------- ICONS (Lucide, Stroke 1.5, Farbe ACI-Rot via currentColor) ------- */
/* Variante A: Inline-Icon ohne Container (Trustbars, Shortcuts, PDF-Links). */
.icon-inline {
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
  color: var(--red);
}

/* Variante B: Icon-Badge mit Container (Feature-Listen, Kontakt-Icons). 40×40. */
.icon-badge {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  flex-shrink: 0;
  transition: background .3s;
}
.icon-badge__svg { width: 20px; height: 20px; }

/* ------- BUTTONS -------
   Ruhezustand traegt bereits einen weichen Schatten/Glow statt flach zu
   wirken; Hover verstaerkt Schatten + hebt minimal an + skaliert leicht
   (1.02) -- drei kombinierte Signale statt nur einer Transform-Achse. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  font-size: 15px; font-weight: 600;
  border-radius: var(--radius);
  transition: transform .2s ease-out, box-shadow .2s ease-out, background .2s ease-out, border-color .2s ease-out;
  cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
}
.btn--primary {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff;
  box-shadow: 0 2px 8px rgba(232, 32, 40, .18), 0 8px 20px rgba(232, 32, 40, .12);
}
.btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 14px rgba(232, 32, 40, .28), 0 14px 32px rgba(232, 32, 40, .22);
}
.btn--ghost {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
  color: #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.btn--ghost:hover {
  border-color: var(--red);
  color: #fff;
  background: rgba(255, 255, 255, .07);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

/* ------- CTA-BAND (dunkler Anker, zentriert, zwei Buttons) -------
   Ursprünglich nur auf /ueber-uns/ (ueber-uns.css), jetzt hier global,
   weil andere Seiten (z.B. /termin/) dieselbe Sektion brauchen und deren
   extraHead nicht ueber-uns.css laedt. main.css ist auf jeder Seite da. */
.u-cta {
  background: transparent;
  padding: var(--space-section-y) var(--space-gutter);
  position: relative;
}
.u-cta::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--scrim-dark);
  /* Untere Kante NICHT ausblenden: .u-cta ist ueberall wo es vorkommt
     (/ueber-uns/, /termin/) die letzte Sektion direkt vor dem Footer, der
     jetzt ebenfalls --scrim-dark ist -- kein Farbwechsel an dieser Naht. */
  -webkit-mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0, #000 var(--scrim-edge),
    #000 100%);
  mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0, #000 var(--scrim-edge),
    #000 100%);
}
/* Obere Kante zusaetzlich flach, wenn direkt davor .u-hours steht (nur auf
   /ueber-uns/): beide Sektionen sind --scrim-dark, kein Farbwechsel an der
   Naht. Untere Kante ist bereits durch die Basisregel oben flach (Footer
   folgt ueberall). Bewusst als Sibling-Selektor statt globaler Aenderung an
   .u-cta, weil dieselbe Klasse frueher auf /termin/ nach einer HELLEN
   Sektion folgte -- seit /termin/ durchgehend dunkel ist (User-Entscheidung),
   steht davor jetzt .cred, ebenfalls .cred+.u-cta abgedeckt. */
.u-hours + .u-cta::before,
.cred + .u-cta::before {
  -webkit-mask-image: none;
  mask-image: none;
}
/* /termin/: derselbe abgesenkte Scrim-Ton wie die uebrigen dunklen Seiten
   (User-Entscheidung: "Uebergaenge weg", .85 --scrim-dark sprang zu stark
   gegen die .40 der Sektionen davor). */
.page--termin .u-cta::before,
.page--ueber-uns .u-cta::before { background: var(--scrim-photo); }
.u-cta > * { position: relative; }
.u-cta-in { max-width: 720px; margin: 0 auto; text-align: center; }
.u-cta h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-on-dark);
}
.u-cta p {
  font-size: 17px;
  color: var(--text-on-dark-muted);
  margin-bottom: 32px;
}
.u-cta-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}

/* ------- CRED-SECTION (Reusable Trust-Block) -------
   Macro: src/_includes/components/cred-section.njk
   Nutzer: ankauf, suchauftrag, termin, home (#bewertungen) – alle dunkel.
   Single-Source für Bewertungs-Aggregate + Awards-Pills. */
/* Scrim als ::before, damit die Kanten-Ausblendung greift (siehe oben). */
.cred {
  background: transparent;
  position: relative;
  padding: var(--space-subsection-y) var(--space-gutter); /* Band, keine Hauptsektion */ /* war 48px 24px */
}
.cred::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--scrim-dark);
  /* Untere Kante NICHT ausblenden: .cred ist ueberall wo es vorkommt (Ankauf,
     Suchauftrag, Termin, Reifen, Jobs, jeweils Listen- + Detail-Seiten) die
     letzte Sektion direkt vor dem Footer, der jetzt ebenfalls --scrim-dark
     ist -- kein Farbwechsel an dieser Naht, siehe .u-hours + .u-cta-Pattern
     auf /ueber-uns/. */
  -webkit-mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0, #000 var(--scrim-edge),
    #000 100%);
  mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0, #000 var(--scrim-edge),
    #000 100%);
}
/* .seam-flat-t::before (oben, generischer Naht-Modifier) hat dieselbe
   Spezifitaet wie .cred::before und steht VOR dieser Regel im Quelltext —
   die Kaskade liess .cred::before immer gewinnen, der obere Fade blieb
   also sichtbar selbst mit gesetzter .seam-flat-t-Klasse. Kombinierter
   Selektor mit hoeherer Spezifitaet erzwingt den flachen (deckenden)
   oberen Rand zuverlaessig. */
.cred.seam-flat-t::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 100%);
}
.cred > * { position: relative; }
.cred-in {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-md); /* war 24px */
}
.cred-ratings {
  display: flex; align-items: center; gap: var(--space-lg); /* war 32px */
  flex-wrap: wrap;
  justify-content: center;
}
.cred-rating {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; color: var(--gy);
  flex-wrap: wrap; justify-content: center;
}
.cred-rating strong {
  font-family: var(--font-heading);
  font-size: 28px; color: #fff; font-weight: 700;
  letter-spacing: -.01em;
}
/* Sekundär-Rating optisch leicht zurückgenommen, damit Primary-Quelle
   (mobile.de mit höherer Sample-Size) als Trust-Anker liest. */
.cred-rating--secondary strong { font-size: 22px; opacity: .9; }
.cred-rating--secondary { opacity: .85; }
.cred-stars {
  color: var(--red); letter-spacing: 2px;
  font-size: 18px;
}
.cred-awards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-md);
  align-items: flex-start;
}
/* Auszeichnungen als weisse Logo-Kacheln (Muster: .tb-tile im Partner-Band). */
.cred-award {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-sm);
  margin: 0;
  width: 148px;
}
.cred-award-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 148px; height: 148px;
  padding: var(--space-md);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-dark);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.cred-award:hover .cred-award-tile {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
}
/* Logo fuellt die Kachel aus. max-height statt fester Hoehe, damit sehr breite
   Wortmarken (mobile.de ist 5:1) die volle Breite nutzen duerfen und nicht auf
   Quadratmass heruntergerechnet werden — genau daran waren sie vorher zu klein. */
.cred-award-tile img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
/* Sehr breite Wortmarken (mobile.de 5:1, AS24-Banner 7,8:1) bekommen eine
   BREITERE Kachel statt einer quadratischen. In einem Quadrat bestimmt die
   Breite die Skalierung, das Logo bleibt dadurch zwangslaeufig winzig —
   dieselbe Ursache, aus der es vorher schon zu klein wirkte. */
.cred-award--wide,
.cred-award--wide .cred-award-tile { width: 240px; }
.cred-award--wide .cred-award-tile { padding: var(--space-md) var(--space-lg); }
.cred-award figcaption {
  font-size: 13px; line-height: 1.35; color: #ccc;
  text-align: center;
}
/* Fallback fuer Eintraege ohne Logo: schlichte Text-Pille. */
.cred-award-text {
  display: inline-flex; align-items: center;
  padding: var(--space-xs) var(--space-md);
  background: var(--surface-dark-anchor);
  border: 1px solid var(--border-hairline-dark);
  border-radius: 999px;
  font-size: 14px; color: #ddd;
}
@media (max-width: 600px) {
  .cred-ratings { gap: 16px; flex-direction: column; }
  .cred-awards { gap: var(--space-sm); }
  /* Kacheln auf Mobile kleiner, damit zwei nebeneinander passen. */
  .cred-award, .cred-award-tile { width: 112px; }
  .cred-award-tile { height: 112px; padding: var(--space-sm); }
  .cred-award figcaption { font-size: 12px; }
  .cred-award-text { font-size: 12px; padding: 6px 12px; }
}

/* ------- FOOTER -------
   Dunkler Anthrazit-Anker statt heller Flaeche (Impeccable-Polish-Sprint).
   Der Footer war die letzte Sektion der Seite und blieb hell, waehrend jede
   andere wiederkehrende Trust-/Abschluss-Sektion (Header, Kennzahlen-Band,
   Trust-Bar) bewusst in --surface-dark-anchor kippt (DESIGN.md-Rhythmus-
   Prinzip: helle Ruhe wechselt mit dunklen Ankern). Ohne den Wechsel lief
   die Seite einfach hell aus statt bewusst zu enden. */
/* Wie alle anderen dunklen Anker-Sektionen jetzt scrim-basiert statt einer
   deckenden Flaeche: --surface-dark-anchor (#101216) ist exakt die Basis-
   farbe von --scrim-dark, der Footer war aber die einzige dunkle Sektion,
   die noch nicht am globalen Hintergrundfoto-Durchschein teilnahm.
   Footer ist die letzte Sektion der Seite -> keine Ausblendung an der
   UNTEREN Kante noetig. Obere Kante blendet standardmaessig aus (Default
   fuer alle Seiten mit hellem Vorgaenger: Startseite, /fahrzeuge/,
   Fahrzeug-Detail). Wo der direkte Vorgaenger bereits --scrim-dark ist
   (.cred auf Ankauf/Suchauftrag/Reifen/Jobs, .u-cta auf /ueber-uns/ und
   /termin/) bleibt die obere Kante flach -- kein Farbwechsel an der Naht,
   analog zum .u-hours + .u-cta-Pattern. Der Footer liegt ausserhalb von
   <main> (siehe base.njk), ein Sibling-Selektor auf die letzte Sektion
   wuerde also nicht greifen -- stattdessen ueber die pageClass-Klasse auf
   <body> gesteuert (jede Seite hat sie bereits im Frontmatter). */
/* --text-on-dark-muted war auf dem foto-durchsichtigen Footer-Hintergrund
   kaum lesbar (User-Feedback: "Auch den Text im Footer-Bereich bitte
   weiss") -- Basisfarbe und alle spezifischen Footer-Textregeln unten auf
   das hellere --text-on-dark angehoben. */
.ftr {
  background: transparent;
  color: var(--text-on-dark);
  position: relative;
}
/* Die frueher hier gesetzte Trennlinie an der Footer-Oberkante (.ftr::after,
   1px --border-hairline-dark) ist entfallen: sie war als "die EINE bewusste
   Linie ganz unten" gedacht, wurde aber als stoerende schmale Kante ueber dem
   Footer wahrgenommen (User-Wunsch: auch diese entfernen). Damit laeuft die
   dunkle Flaeche jetzt wirklich ohne jede Kante bis zum Seitenende durch. */
.ftr::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 100%);
  mask-image: linear-gradient(to bottom,
    var(--scrim-edge-alpha) 0, #000 var(--scrim-edge), #000 100%);
}
.page--ankauf .ftr::before,
.page--suchauftrag .ftr::before,
.page--reifen .ftr::before,
.page--reifen-detail .ftr::before,
.page--jobs .ftr::before,
.page--job-detail .ftr::before,
.page--termin .ftr::before,
.page--ueber-uns .ftr::before,
.page--fahrzeuge-list .ftr::before,
.page--home .ftr::before {
  -webkit-mask-image: none;
  mask-image: none;
}
/* Komplett-dunkle Seiten: derselbe abgesenkte Scrim-Ton wie die Sektion
   direkt darueber (.cred/.u-cta/.sec--anchor, alle auf .40), sonst springt
   die Deckkraft an der Naht auf die footer-eigenen .85 (--scrim-dark) und
   erzeugt einen sichtbaren Uebergang (User-Entscheidung: "Hintergrund muss
   exakt wie auf der Startseite sein... KEINE UEBERGAENGE" -- betraf zuerst
   nur die Startseite, gilt aber fuer jede durchgehend dunkle Seite gleich). */
.page--home .ftr::before,
.page--ankauf .ftr::before,
.page--suchauftrag .ftr::before,
.page--termin .ftr::before,
.page--reifen .ftr::before,
.page--ueber-uns .ftr::before,
.page--jobs .ftr::before,
.page--job-detail .ftr::before,
.page--legal .ftr::before,
.page--fahrzeuge-list .ftr::before { background: var(--scrim-photo); }
.ftr > * { position: relative; }
/* Drei Spalten: Marke | Seiten (inkl. Rechtliches darunter, leiser) | Kontakt. */
.ftr-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--space-gutter);
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: var(--space-xl) var(--space-xl);
}
.ftr-col h4 {
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-on-dark);
  margin-bottom: var(--space-sm);
}
.ftr-col .ftr-subhead { margin-top: var(--space-lg); }
.ftr-col ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.ftr-col a {
  font-size: 14px; color: var(--text-on-dark);
  transition: color var(--t-fast);
}
.ftr-col a:hover { color: var(--accent-red); }

/* Rechtliches optisch spuerbar leiser als Hauptseiten: kleinere Schrift,
   staerker gedaempfte Farbe. Vorher gleiche Groesse/Farbe wie die Hauptliste
   -- wirkte wie ein fuenfter Hauptseiten-Punkt statt klar sekundaer. */
.ftr-subhead--muted { color: var(--text-on-dark-muted); font-weight: 600; letter-spacing: 1.5px; }
/* Farbe angehoben (war rgba(167,171,179,.82)): seit der Footer das
   Hintergrundfoto durchscheinen laesst (.40-Scrim statt frueher deckendem
   --scrim-dark), stand dieser Wert ueber einer hellen Fotostelle effektiv
   bei nur 2.38:1 -- deutlich unter der AA-Pflichtgrenze von 4.5:1, und das
   ausgerechnet bei Impressum/Datenschutz/Cookie-Hinweis/AGB, also den
   rechtlich verpflichtenden Links. Ohne Alpha und heller: ~5.4:1 gegen
   dieselbe Stelle. Die gewollte Zuruecknahme gegenueber den Hauptseiten-
   Links traegt weiterhin die kleinere Schriftgroesse.
   NICHT --text-on-dark-muted (#a7abb3) verwenden: der Token ist fuer
   DECKENDE dunkle Flaechen gedacht und kommt gegen eine helle Fotostelle
   nur auf 2.81:1. Dieser Wert liegt bei 4.88:1 (nachgerechnet), bleibt aber
   sichtbar leiser als die --text-on-dark-Hauptlinks (5.97:1). */
.ftr-legal-list a { font-size: 13px; color: rgb(222, 224, 226); }
.ftr-legal-list a:hover { color: var(--accent-red); }

.ftr-brand .ftr-logo { display: inline-flex; }
/* Groesser als der Rest der Spalten-Kopfzeilen -- das Logo ist im Footer das
   einzige Brand-Element und soll entsprechend tragen. */
.ftr-logo-img { height: 70px; width: auto; display: block; margin-bottom: var(--space-sm); }
.ftr-claim {
  font-size: 13px; line-height: 1.6;
  color: var(--text-on-dark);
  max-width: 34ch;
}

/* Kontakt-Spalte: EINE Liste mit einheitlichem Zeilenabstand (--space-sm)
   fuer alle sechs Zeilen. Vorher zwei Listen mit unterschiedlichem Gap
   (--space-sm vs. --space-2xs) plus einem dritten Extra-Margin dazwischen --
   drei verschiedene Abstaende im selben Block. Der Bedeutungsunterschied
   Info- vs. Aktions-Zeile kommt jetzt ausschliesslich aus Icon-Farbe und
   Hover, nicht mehr zusaetzlich aus einem eigenen Rhythmus. */
.ftr-contact-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.ftr-contact-row {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  font-size: 14px; line-height: 1.5;
}
.ftr-contact-row .icon-inline { flex-shrink: 0; margin-top: 2px; color: var(--accent-red); }
.ftr-contact-row a {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  color: var(--text-on-dark);
  transition: color var(--t-fast);
}
.ftr-contact-row a:hover { color: var(--accent-red); }
/* Info-Zeilen (Adresse/Zeiten): kein Link, dezent kleinere Schrift. Farbe
   auf --text-on-dark angehoben (vorher --text-on-dark-muted, auf dem
   foto-durchsichtigen Hintergrund kaum lesbar, User-Feedback). */
.ftr-contact-row--info { color: var(--text-on-dark); font-size: 13px; }
.ftr-contact-row--info .icon-inline { color: rgba(244, 244, 242, .75); }
/* Gefuellte Marken-Icons (WhatsApp) brauchen keinen Stroke. */
.icon-inline--solid { stroke: none; }

.ftr-bottom {
  /* border-top entfernt: das war die zweite schmale Linie im Footer-Bereich
     (Trenner zur Copyright-Zeile). Die Abgrenzung traegt jetzt allein der
     Abstand -- deshalb etwas mehr padding-top als vorher, sonst ruecken
     Copyright und Footer-Spalten optisch zusammen. */
  padding: var(--space-md) var(--space-gutter) var(--space-sm);
}
.ftr-bottom-in {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
}
.ftr-copy { font-size: 13px; color: var(--text-on-dark); }
/* Echte Icons statt Textlinks (Instagram/Facebook/TikTok) -- konsistent zur
   Icon-Sprache im Kontakt-Block, statt als einzige reine Text-Links zu wirken. */
.ftr-social { display: flex; gap: var(--space-sm); }
.ftr-social-link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  color: var(--text-on-dark);
  border: 1px solid var(--border-hairline-dark);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.ftr-social-link:hover { color: var(--accent-red); border-color: rgba(232, 32, 40, .4); }

@media (max-width: 900px) {
  .ftr-in { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .ftr-brand { grid-column: 1 / -1; }
  .ftr-claim { max-width: 46ch; }
}
@media (max-width: 560px) {
  .ftr-in { grid-template-columns: 1fr; gap: var(--space-lg); }
  .ftr-bottom-in { justify-content: center; text-align: center; }
}

/* ------- FAQ-AKKORDEON (cross-page: Home Top-3 + /faq/ Vollliste) ------- */
/* Click-Toggle in src/assets/js/home.js via document-level event-delegation
   auf .fqq — funktioniert auf jeder Page wo .fqi/.fqq im DOM existiert. */
.fql { max-width: 720px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 8px; }
/* Zweispaltiges Raster fuer die Volltliste (Startseite, 14 Fragen) —
   vorher eine einzige lange Spalte, wirkte unkompakt und ausufernd. Items
   fuellen die Spalte spaltenweise von oben nach unten (grid-auto-flow:
   column), nicht zeilenweise — Frage 1 und 2 stehen so untereinander in
   Spalte 1, nicht nebeneinander in Zeile 1. Deutlich breiter als die
   Akkordeon-Liste (720px), volle Sektionsbreite bis 1040px. */
.fql--grid {
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);
  gap: 10px 20px;
  text-align: left;
}
.fqi {
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden;
  transition: border-color .25s;
}
.fqi.open { border-color: rgba(232,32,40,.35); }
/* Startseite: --shadow-card ist ein sehr dezenter warmer Schatten, gedacht
   fuer helle Flaechen -- vor dem jetzt durchscheinenden Foto praktisch
   unsichtbar, die Karten wirkten dadurch wie eine flache, leere weisse
   Flaeche statt distinkter Boxen (User-Feedback: "sehen leer aus"). Kraeftiger
   dunkler Schatten (--shadow-card-dark, sonst fuer Karten auf Anker-
   Sektionen genutzt) gibt ihnen Tiefe/Kontur gegen den Fotohintergrund. */
.page--home .fqi { box-shadow: var(--shadow-card-dark); }
.fqq {
  /* Kompakter als zuvor (22px -> 18px) — bei zwei Spalten und 14 Items
     summiert sich jeder Pixel Innenabstand sichtbar zur Gesamthoehe. */
  padding: 18px 22px; font-size: 15px; font-weight: 600;
  cursor: pointer;
  /* EXPLIZITE Textfarbe statt Vererbung (User-Feedback: "Die Texte in den
     FAQ-Boxen sind nicht erkennbar"). .fqq stand ohne eigene color-Angabe und
     erbte damit die der umgebenden Sektion. Seit die FAQ-Sektion .sec--anchor
     ist (dunkle Seite, color: --text-on-dark = #f4f4f2) hiess das: nahezu
     weisse Schrift auf der weissen Karte (--surface-card) -- die Fragen waren
     unsichtbar. Die Antworten (.fqa-in) waren nie betroffen, weil sie
     --text-muted schon immer explizit setzen.
     --text ist hier richtig und nicht --text-on-dark: die Karte selbst bleibt
     weiss, nur ihr Umfeld ist dunkel. Ein <button> erbt color ohnehin nicht
     vom UA-Stylesheet, die Vererbung kam allein aus der Sektion. */
  color: var(--text);
  /* width:100% ist noetig, weil .fqq ein <button> ist: Buttons haben eine
     intrinsische Breite und schrumpfen auf ihren Inhalt, statt die Karte zu
     fuellen. Ohne das nutzt weder space-between noch flex:1 etwas — der Pfeil
     klebte direkt hinter dem Text. */
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  text-align: left;
  transition: color .2s;
}
.fqq-t { flex: 1; }
.fqq:hover { color: var(--red); }
/* Chevron als SVG statt Unicode-Dreieck: das Glyph sass auf der Grundlinie
   und liess sich nicht sauber zentrieren. */
.fqa-arrow {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .3s ease, color .2s;
}
.fqi.open .fqa-arrow { transform: rotate(180deg); color: var(--red); }
.fqa { max-height: 0; overflow: hidden; transition: max-height .35s; }
.fqi.open .fqa { max-height: 600px; }
.fqa-in { padding: 0 22px 18px; font-size: 14px; color: var(--text-muted); line-height: 1.7; }
@media (max-width: 900px) {
  /* Unter 900px eine Spalte -- zwei Spalten wuerden die Fragen zu schmal
     quetschen. Zeilenanzahl spielt dann keine Rolle mehr, normale
     Dokumentreihenfolge reicht. */
  .fql--grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}
/* Markdown-Render erzeugt <p>-Wrapper um Antworten — Default-Browser-Margin
   würde sonst extra-Spacing oben/unten erzeugen. Multi-Paragraph mit
   gleichmäßigem Abstand zwischen Paragraphen. */
.fqa-in > p { margin: 0; }
.fqa-in > p + p { margin-top: 0.5em; }

/* ------- LEGAL-BODY (Markdown-Render auf rechtlichen Pages) -------
   Genutzt von /impressum/, /datenschutz/, /cookie-hinweis/ — rendert den
   Markdown-Body aus content/pages/{name}.yml. Defensiv gestyled für
   künftige eRecht24-Generator-Outputs (H2/H3/Listen/Strong/Em/Links). */
.legal-body {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.7;
  /* Nicht --gy: das war fuer eine deckende dunkle Flaeche gedacht. Hier steht
     Pflichttext (Impressum/Datenschutz) -- Lesbarkeit ist nicht verhandelbar. */
  color: rgb(232, 234, 236);
  /* Eigene Abdunklung UNTER dem Text statt noch hellerer Schrift: Rechtstexte
     sind lang und werden am Stueck gelesen, das ist der ungeeignetste Fall
     fuer wechselnden Foto-Untergrund. Mit dem Seiten-Scrim allein kam der
     Absatz gegen den hellsten Bildpunkt nur auf 3.55:1. Der Block traegt
     seinen Kontrast jetzt selbst und ist damit unabhaengig davon, welcher
     Bildausschnitt bei welcher Fensterhoehe zufaellig darunter liegt. */
  position: relative;
  padding: var(--space-lg);
  border-radius: var(--radius);
  background: rgba(13, 14, 17, .62);
}
.legal-body h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  margin: 32px 0 12px;
  color: #fff;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 24px 0 8px;
  color: #fff;
}
.legal-body p { margin: 0 0 1em; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body strong { color: #fff; }
.legal-body em { color: var(--gy-light); }
/* Aufgehellt statt --red (3.49:1 auf dem Panel): das sind die Kontakt-Links
   im Impressum/Datenschutz -- funktionale Links in Pflichttexten, die muessen
   lesbar sein. Bleibt eindeutig das Marken-Rot, ist aber unterstrichen und
   damit ohnehin nicht allein ueber die Farbe erkennbar. */
.legal-body a { color: #f26670; text-decoration: underline; }
.legal-body ul,
.legal-body ol { padding-left: 24px; margin: 0 0 1em; }
.legal-body li { margin-bottom: 0.4em; }

/* ------- BRAND-AKZENT: rotes IDEAL-Wort projektweit ------- */
/* Pure Color-Akzent-Klasse für Brand-Hervorhebung von „IDEAL"-Wörtern.
   Setzt nur die Farbe — font-weight und Größe werden vom umgebenden Kontext
   geerbt, damit IDEAL als reiner Farb-Akzent im Fließtext wirkt (nicht als
   abgesetztes Element mit eigenem Gewicht).
   Komplementär zu den drei lokalen Varianten mit Spezifika: Home-Hero `.hl`
   mit Pulse-Animation, Page-Hero `.accent` mit italic, Über-Uns-Story
   `.red-inline` mit eigenem font-weight 600. */
.ideal-accent {
  color: var(--red-text);
}

/* ------- UTILITY CLASSES ------- */
/* reveal-on-scroll: nur bei aktivem JS zunächst versteckt (html.js). Ohne JS
   bleibt der Inhalt sichtbar — kein unsichtbarer Content, wenn JS/Observer ausfällt. */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .7s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ------- GESTAFFELTE REVEALS (Grid-Karten nacheinander, ~70ms Stagger) ------- */
.js .reveal .list-grid > *,
.js .reveal .leistungen-grid > *,
.js .reveal .rev-track > *,
.js .reveal .bst > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.reveal.is-visible .list-grid > *,
.reveal.is-visible .leistungen-grid > *,
.reveal.is-visible .rev-track > *,
.reveal.is-visible .bst > * { opacity: 1; transform: none; }
.reveal.is-visible :is(.list-grid, .leistungen-grid, .rev-track, .bst) > *:nth-child(1) { transition-delay: 0s; }
.reveal.is-visible :is(.list-grid, .leistungen-grid, .rev-track, .bst) > *:nth-child(2) { transition-delay: .07s; }
.reveal.is-visible :is(.list-grid, .leistungen-grid, .rev-track, .bst) > *:nth-child(3) { transition-delay: .14s; }
.reveal.is-visible :is(.list-grid, .leistungen-grid, .rev-track, .bst) > *:nth-child(4) { transition-delay: .21s; }
.reveal.is-visible :is(.list-grid, .leistungen-grid, .rev-track, .bst) > *:nth-child(5) { transition-delay: .28s; }
.reveal.is-visible :is(.list-grid, .leistungen-grid, .rev-track, .bst) > *:nth-child(6) { transition-delay: .35s; }
.reveal.is-visible :is(.list-grid, .leistungen-grid, .rev-track, .bst) > *:nth-child(7) { transition-delay: .42s; }
.reveal.is-visible :is(.list-grid, .leistungen-grid, .rev-track, .bst) > *:nth-child(8) { transition-delay: .49s; }

/* ------- PREFERS-REDUCED-MOTION: Inhalte sofort sichtbar, keine Transforms ------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal,
  .reveal.is-visible,
  .js .reveal :is(.list-grid, .leistungen-grid, .rev-track, .bst) > * {
    opacity: 1 !important;
    transform: none !important;
  }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}