/* ==========================================================================
   azm-rm.de — Design-System „AZM Cinematic"
   Tiefes Schwarz gegen großzügiges Weiß, cinematische Bildbühnen,
   große ruhige Typografie (Geist), Bewegung nur als Inszenierung.
   Keine externen Laufzeit-Ressourcen. Reduced Motion wird respektiert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Schriften (lokal, variabel, latin)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metrisch angepasster System-Fallback: hält Zeilenumbrüche stabil,
   bis Geist geladen ist. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Helvetica Neue"), local("Arial");
  font-weight: 100 900;
  size-adjust: 98.9%; /* gemessen: Geist ist ~1,1 % schmaler als Helvetica/Arial */
  ascent-override: 97%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Menlo"), local("Courier New");
  font-weight: 100 900;
  size-adjust: 100%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2 · Design-Token
   -------------------------------------------------------------------------- */
:root {
  /* Flächen */
  --ink: #0a0a0c;
  --ink-2: #121216;
  --ink-3: #1a1a21;
  --paper: #ffffff;
  --paper-2: #f5f5f7;

  /* Text auf dunkel */
  --tx-d1: #f5f5f7;
  --tx-d2: #a2a2ab;
  --tx-d3: #7c7c86;

  /* Text auf hell */
  --tx-l1: #0a0a0c;
  --tx-l2: #50505a;
  --tx-l3: #6e6e78;

  /* Linien */
  --line-d: rgba(255, 255, 255, 0.16);
  --line-d-soft: rgba(255, 255, 255, 0.09);
  --line-l: rgba(10, 10, 12, 0.16);
  --line-l-soft: rgba(10, 10, 12, 0.08);
  /* Ränder von Bedienelementen brauchen 3:1 (WCAG 1.4.11). Gemessen gegen die
     jeweilige Fläche: 0.48 auf Weiß = 3,48:1, 0.40 auf --ink = 3,77:1.
     --line-l/-d sind mit 1,4:1 bzw. 1,5:1 nur für Dekorlinien zulässig. */
  --line-control: rgba(10, 10, 12, 0.48);
  --line-control-d: rgba(255, 255, 255, 0.40);

  /* Akzent — Blau der echten AZM-Logowand, sehr sparsam eingesetzt */
  --brand: #2652c4;
  --brand-d: #9db8ff;

  /* Typografie */
  --font-sans: "Geist", "Geist Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", "SFMono-Regular", Menlo, monospace;
  --fs-display: clamp(2.7rem, 1.6rem + 5vw, 6.2rem);
  --fs-h1: clamp(2.3rem, 1.55rem + 3.4vw, 4.6rem);
  --fs-h2: clamp(1.85rem, 1.35rem + 2.2vw, 3.3rem);
  --fs-h3: clamp(1.18rem, 1.08rem + 0.45vw, 1.45rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.55vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;
  --fs-giant: clamp(3.4rem, 2rem + 7.5vw, 8rem);

  /* Rhythmus */
  --sp-section: clamp(5.5rem, 3.5rem + 7vw, 10.5rem);
  --sp-block: clamp(2.5rem, 1.8rem + 2.5vw, 4.5rem);
  --shell: 1200px;
  --shell-wide: 1440px;
  --header-h: 4rem;

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swift: cubic-bezier(0.55, 0, 0.1, 1);
  --dur-reveal: 850ms;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3 · Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 410;
  color: var(--tx-d1);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: rgba(38, 82, 196, 0.85); color: #fff; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
p a, li a:not([class]), address a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* Fieldsets erben min-inline-size: min-content aus dem UA-Stylesheet und
   sprengen sonst Grid-Tracks mit scrollenden Kindern (Termin-Rail). */
fieldset { min-width: 0; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-d);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-light :focus-visible { outline-color: var(--brand); }

h1, h2, h3, h4, legend {
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h3, h4 { line-height: 1.25; letter-spacing: -0.015em; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--paper);
  color: var(--tx-l1);
  border-radius: 0.5rem;
  font-weight: 560;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }
/* Sprungmarke ueber dem Katalog: 86 Karten heissen 86 Tabstopps, bevor ein
   Tastaturnutzer am Raster vorbei ist. Sichtbar nur im Fokus, wie die Kopf-Marke. */
.inv-skip {
  position: absolute;
  left: -9999px;
}
/* Zweiter Reset direkt neben dem Trefferzaehler: bei null Treffern sind alle Chips
   gesperrt und der Ausweg unter dem Raster liegt weit unter der Falz. */
.inv-reset--oben { align-self: center; }

.inv-skip:focus {
  position: static;
  display: inline-block;
  margin-bottom: 0.8rem;
  padding: 0.6rem 1rem;
  background: var(--paper);
  color: var(--tx-l1);
  border-radius: 0.5rem;
  font-weight: 560;
}

.shell { width: min(var(--shell), 100% - clamp(2.5rem, 8vw, 5rem)); margin-inline: auto; }
.shell--wide { width: min(var(--shell-wide), 100% - clamp(2rem, 6vw, 4rem)); }

.label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-d3);
  margin-bottom: 1.1rem;
}
.on-light .label { color: var(--tx-l3); }

.lead { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -0.012em; color: var(--tx-d2); text-wrap: pretty; }
.on-light .lead { color: var(--tx-l2); }

/* Flächenmodus */
.on-light { background: var(--paper); color: var(--tx-l1); color-scheme: light; }
.on-light-2 { background: var(--paper-2); }
.muted { color: var(--tx-d2); }
.on-light .muted { color: var(--tx-l2); }

/* --------------------------------------------------------------------------
   4 · Aktionen
   -------------------------------------------------------------------------- */
.action-primary,
.action-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.7rem;
  border-radius: 0.55rem;
  font-size: 1rem;
  font-weight: 540;
  letter-spacing: -0.01em;
  transition: transform 240ms var(--ease-out), background-color 240ms var(--ease-out),
    color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.action-primary { background: var(--paper); color: var(--ink); }
.action-primary:hover { transform: translateY(-1px); background: #e9e9ee; }
.action-primary:active { transform: translateY(0); }
.on-light .action-primary { background: var(--ink); color: var(--paper); }
.on-light .action-primary:hover { background: #26262e; }

.action-ghost {
  border: 1px solid var(--line-control-d);
  color: var(--tx-d1);
  background: rgba(10, 10, 12, 0.25);
}
.action-ghost:hover { border-color: rgba(255, 255, 255, 0.45); transform: translateY(-1px); }
.on-light .action-ghost { border-color: var(--line-control); color: var(--tx-l1); background: transparent; }
.on-light .action-ghost:hover { border-color: rgba(10, 10, 12, 0.5); }

.action-link {
  /* inline statt inline-flex: als Flex-Geschwister loeste sich der Pfeil bei
     zweizeiligem Text an den rechten Rand und schwebte zwischen den Zeilen.
     Inline laeuft er im Textfluss und bleibt am letzten Wort. */
  display: inline;
  font-weight: 540;
  color: var(--brand-d);
}
.on-light .action-link { color: var(--brand); }
/* NBSP vor dem Pfeil: er darf nie allein auf eine neue Zeile rutschen. */
.action-link::after {
  content: "\00A0→";
  display: inline-block;
  transition: transform 240ms var(--ease-out);
}
.action-link:hover::after { transform: translateX(0.3rem); }

.action-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* --------------------------------------------------------------------------
   5 · Header + Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 320ms var(--ease-out);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--line-d-soft);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.site-header.is-solid,
.site-header--solid,
html:not(.js) .site-header {
  background: rgba(10, 10, 12, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}
.site-header.is-solid::after,
.site-header--solid::after,
html:not(.js) .site-header::after { opacity: 1; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  z-index: 130;
  position: relative;
}
.brand-wordmark strong { font-size: 1.2rem; font-weight: 660; letter-spacing: 0.01em; }
.brand-wordmark span {
  font-size: 0.8rem;
  font-weight: 460;
  letter-spacing: 0.02em;
  color: var(--tx-d2);
  white-space: nowrap;
}

.site-nav ul { display: flex; gap: 0.35rem; list-style: none; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.2rem 0.85rem;
  border-radius: 2rem;
  font-size: 0.94rem;
  font-weight: 480;
  color: var(--tx-d2);
  transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.site-nav a:hover { color: var(--tx-d1); }
.site-nav a[aria-current="page"] { color: var(--tx-d1); background: rgba(255, 255, 255, 0.09); }

/* Die globale Regel `li a:not([class])` unterstreicht JEDEN klassenlosen Link
   in einer Liste — also auch jeden Navigationspunkt. Sechs unterstrichene
   Woerter nebeneinander lesen sich wie ein Formular, nicht wie eine
   Navigation. Der Strich bleibt deshalb nur dort, wo man gerade steht, und
   dort ganz leise.
   Der Selektor braucht (0,1,2): `.site-nav a` allein hat nur (0,1,1) und
   verliert gegen die globale Regel. */
.site-nav ul a { text-decoration: none; }
.site-nav ul a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.32);
}

.nav-toggle {
  display: none;
  z-index: 130;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
}
.nav-toggle span {
  display: block;
  width: 1.4rem;
  height: 1.5px;
  background: var(--tx-d1);
  transition: transform 360ms var(--ease-swift), opacity 200ms;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

@media (max-width: 1080px) {
  .brand-wordmark span { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    /* safe + overflow-y: im Handy-Querformat passt die Liste nicht in 375 px Höhe.
       Ohne beides wurde der erste Eintrag oben abgeschnitten und „Kontakt" lag
       ausserhalb, ohne Scrollmöglichkeit (body trägt overflow: hidden). */
    align-content: safe center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(var(--header-h) + 1rem) clamp(1.5rem, 7vw, 3rem) 3rem;
    background: rgba(10, 10, 12, 0.94);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    visibility: hidden;
    opacity: 0;
    transition: opacity 360ms var(--ease-out), visibility 0s linear 360ms;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
  .site-nav ul { flex-direction: column; gap: 0.4rem; }
  .site-nav a {
    font-size: clamp(1.7rem, 6.5vw, 2.4rem);
    font-weight: 560;
    letter-spacing: -0.02em;
    color: var(--tx-d1);
    padding: 0.35rem 0;
    border-radius: 0;
    transform: translateY(1.2rem);
    opacity: 0;
    transition: transform 600ms var(--ease-out), opacity 500ms var(--ease-out);
  }
  .site-nav.is-open a { transform: none; opacity: 1; }
  .site-nav.is-open li:nth-child(1) a { transition-delay: 60ms; }
  .site-nav.is-open li:nth-child(2) a { transition-delay: 110ms; }
  .site-nav.is-open li:nth-child(3) a { transition-delay: 160ms; }
  .site-nav.is-open li:nth-child(4) a { transition-delay: 210ms; }
  .site-nav.is-open li:nth-child(5) a { transition-delay: 260ms; }
  .site-nav.is-open li:nth-child(6) a { transition-delay: 310ms; }
  .site-nav a[aria-current="page"] { background: none; color: var(--brand-d); }
  /* In der Vollbild-Ebene markiert die Farbe die aktuelle Seite schon deutlich.
     Ein Strich obendrauf waere doppelt gemoppelt — er gehoert in die schmale
     Kopfzeile, wo es keine Farbe gibt. Gleiche Spezifitaet wie die Regel oben,
     gewinnt hier ueber die Reihenfolge. */
  .site-nav ul a[aria-current="page"] { text-decoration: none; }
  body.nav-open { overflow: hidden; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav {
    position: static;
    /* transition: none ist Pflicht, nicht Kosmetik: die Grundregel verzögert visibility um
       360 ms. Ohne Reset ist die Navigation nach dem Selbstheilen der .js-Klasse für eine
       Drittelsekunde unsichtbar — genau dann, wenn JS ausgefallen ist und sie zählt. */
    transition: none;
    visibility: visible;
    opacity: 1;
    padding: 0;
    overflow: visible;
    background: none;
  }
  html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: 0.1rem; }
  html:not(.js) .site-nav a { font-size: 0.85rem; padding: 0.2rem 0.5rem; transform: none; opacity: 1; }
  /* Ohne JS unter die Wortmarke statt daneben: sechs umgebrochene Links teilten sich
     sonst die Zeile mit „AZM" und ueberlappten sie auf schmalen Schirmen. */
  html:not(.js) .site-header .shell { flex-wrap: wrap; }
  html:not(.js) .site-nav { flex-basis: 100%; margin-top: 0.5rem; }
  /* Hoehe freigeben: mit fester 4rem-Hoehe + Zentrierung lag die Wortmarke beim
     Umbruch KOMPLETT ueber dem Viewport (gemessen top -41 px bei 320/390) und die
     zweite Nav-Zeile ueber dem Inhalt. Der Header steht ohne JS im Fluss, main
     rueckt also von selbst nach. */
  html:not(.js) .site-header {
    height: auto;
    min-height: var(--header-h);
    padding-block: 0.6rem;
  }
}

/* Ohne JS bleibt der Header im Fluss, nichts liegt über dem Inhalt. */
html:not(.js) .site-header { position: relative; }

/* --------------------------------------------------------------------------
   6 · Hero (Startseite)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: max(100svh, 41rem);
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: clip;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(10, 10, 12, 0.42), transparent 26%),
    linear-gradient(to top, rgba(10, 10, 12, 0.88) 0%, rgba(10, 10, 12, 0.25) 34%, transparent 55%);
}
.hero__content {
  width: min(var(--shell), 100% - clamp(2.5rem, 8vw, 5rem));
  margin-inline: auto;
  padding-top: clamp(2.5rem, 6vh, 5rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.4rem;
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 590;
  letter-spacing: -0.034em;
  line-height: 1.0;
}
.hero h1 .line { display: block; }
.hero .lead { max-width: 44ch; margin-inline: auto; color: rgba(235, 235, 240, 0.78); }
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  font-size: var(--fs-small);
  color: var(--tx-d2);
}
.hero__facts span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__facts span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand-d);
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  translate: -50% 0;
  width: 1.5rem; height: 2.4rem;
  border: 1.5px solid var(--line-d);
  border-radius: 1rem;
  display: grid;
  justify-content: center;
  padding-top: 0.45rem;
}
.hero__scroll::before {
  content: "";
  width: 2.5px; height: 0.55rem;
  border-radius: 2px;
  background: var(--tx-d2);
  animation: scroll-cue 2.2s var(--ease-out) infinite;
}
@keyframes scroll-cue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(0.6rem); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Hero-Intro-Choreografie (nur mit JS + normaler Motion-Präferenz) */
html.js .hero [data-hero-line] { overflow: clip; }
html.js .hero [data-hero-line] .line {
  transform: translateY(112%);
  animation: hero-line 1000ms var(--ease-out) forwards;
}
html.js .hero [data-hero-line] .line:nth-child(2) { animation-delay: 90ms; }
html.js .hero [data-hero-fade] {
  opacity: 0;
  transform: translateY(1rem);
  animation: hero-fade 900ms var(--ease-out) forwards;
  animation-delay: 480ms;
}
html.js .hero__facts[data-hero-fade] { animation-delay: 640ms; }
html.js .hero__media img {
  transform: scale(1.055);
  animation: hero-zoom 2600ms var(--ease-out) forwards;
}
@keyframes hero-line { to { transform: translateY(0); } }
@keyframes hero-fade { to { opacity: 1; transform: none; } }
@keyframes hero-zoom { to { transform: scale(1); } }

@media (max-width: 640px) {
  .hero__content { text-align: left; justify-items: start; }
  .hero .lead { margin-inline: 0; }
  .hero__facts { justify-content: flex-start; }
  .hero__scroll { display: none; }
  /* Logo-Wand im Hochkant-Crop liegt hinter der Headline — oben stärker abdunkeln. */
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(10, 10, 12, 0.55), rgba(10, 10, 12, 0.18) 30%, transparent 45%),
      linear-gradient(to top, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.35) 40%, transparent 60%);
  }
}

/* --------------------------------------------------------------------------
   7 · Sektionen
   -------------------------------------------------------------------------- */
.section { padding-block: var(--sp-section); }
.section--tight { padding-block: calc(var(--sp-section) * 0.62); }
.section-head { max-width: 46rem; margin-bottom: var(--sp-block); }
.section-head h2 { font-size: var(--fs-h2); margin-bottom: 1.1rem; }
.section-head .lead { max-width: 38rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* Kennzahlen-Band (dunkel) */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}
.metric { border-top: 1px solid var(--line-d); padding-top: 1.4rem; }
.metric strong {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4.2rem);
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.55rem;
}
/* Nur das Label (direktes Kind) — die Zahl-Spans IM strong müssen groß bleiben. */
.metric > span { color: var(--tx-d2); font-size: var(--fs-small); }
.source-note { margin-top: var(--sp-block); font-size: 0.875rem; color: var(--tx-d3); max-width: 62ch; }
.source-note a { color: var(--tx-d2); }
.on-light .source-note { color: var(--tx-l3); }
.on-light .source-note a { color: var(--tx-l2); }

/* Leistungsraster */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(2.2rem, 4vw, 3.6rem) clamp(1.8rem, 3vw, 3rem);
}
.feature { max-width: 30rem; }
.feature .num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--tx-l3);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.9rem;
}
.feature h3 { margin-bottom: 0.55rem; }
.feature p { color: var(--tx-l2); font-size: var(--fs-small); line-height: 1.6; }

/* Cinematische Bildbühne */
.stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: end;
  min-height: clamp(26rem, 72vh, 44rem);
}
.stage__media { position: absolute; inset: 0; z-index: -2; }
/* Das <picture> braucht eine echte Höhe, sonst löst height: 112% am Bild zu „auto"
   auf — der Überstand für den Parallax-Versatz existierte bisher gar nicht.
   margin-top verteilt ihn auf beide Seiten, damit kein Rand freiläuft. */
.stage__media picture { display: block; height: 100%; }
.stage__media img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; }
.stage::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.82), rgba(10, 10, 12, 0.12) 45%, transparent 70%);
}
.stage__content { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.stage__content h2 { font-size: var(--fs-h2); max-width: 20ch; margin-bottom: 0.9rem; }
.stage__content .lead { max-width: 44ch; }

/* Fahrzeug-Rail */
.rail-wrap { position: relative; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(16.5rem, 70vw, 21.5rem);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0.25rem 1.4rem;
}
/* Scrollbalken nur verbergen, solange die JS-Pfeile ihn ersetzen — ohne JS wird
   auch .rail-nav ausgeblendet, dann bliebe der Bestand rechts unerreichbar. */
html.js .rail { scrollbar-width: none; }
html.js .rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

.vehicle-card {
  display: grid;
  gap: 0;
  background: var(--ink-2);
  border: 1px solid var(--line-d-soft);
  border-radius: 0.9rem;
  overflow: clip;
  transition: transform 340ms var(--ease-out), border-color 340ms var(--ease-out);
}
.vehicle-card:hover { transform: translateY(-4px); border-color: var(--line-d); }
.vehicle-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vehicle-card figcaption { padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: 0.3rem; }
.vehicle-card .vc-title {
  /* Im Katalog ist der Fahrzeugname ein <h3>: 86 ueberschriftenlose Listenpunkte
     gaben Screenreadern keine Struktur. Optisch darf sich nichts aendern. */
  margin: 0;
  font-size: 1.02rem;
  font-weight: 540;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.vehicle-card .vc-specs { font-size: 0.85rem; color: var(--tx-d2); }
.vehicle-card .vc-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 560;
  margin-top: 0.35rem;
}
/* FABLE 27.07 (Betreiberangabe): Verkaufte Fahrzeuge bleiben im Bestand sichtbar —
   Eckbanner statt Löschung. Nutzung: Karte bekommt zusätzlich die Klasse
   "is-verkauft" und als erstes Kind <span class="vc-flag">Verkauft</span>. */
.vehicle-card.is-verkauft { position: relative; }
.vehicle-card.is-verkauft img { filter: grayscale(0.4) brightness(0.96); }
.vehicle-card .vc-flag {
  position: absolute;
  top: 1.05rem;
  right: -2.35rem;
  z-index: 1;
  width: 9.5rem;
  transform: rotate(45deg);
  text-align: center;
  padding: 0.34rem 0;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(10, 10, 12, 0.25);
}
.vehicle-card--more {
  align-content: center;
  justify-items: center;
  gap: 1rem;
  min-height: 100%;
  padding: 2rem;
  text-align: center;
  background: transparent;
  border-style: dashed;
}
.vehicle-card--more p { color: var(--tx-d2); font-size: var(--fs-small); max-width: 22ch; }

.rail-nav { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.2rem; }
.rail-nav button {
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  /* Bedienelement, nicht Dekor: die Kreise sind reine Icon-Knoepfe, ihr Rand IST
     die Identifikation — --line-d (1,5:1) war laut Token-Kommentar unzulaessig. */
  border: 1px solid var(--line-control-d);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--tx-d1);
  transition: border-color 220ms, opacity 220ms, transform 220ms var(--ease-out);
}
.rail-nav button:hover { border-color: rgba(255, 255, 255, 0.5); transform: translateY(-1px); }
.rail-nav button[disabled] { opacity: 0.35; pointer-events: none; }
html:not(.js) .rail-nav { display: none; }
.rail:focus-visible { outline: 2px solid var(--brand-d); outline-offset: 6px; }

/* Bestands-Grid (An- und Verkauf) */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

/* Stand-Hinweis unter Fahrzeugdaten */
.on-light .stand-note { color: var(--tx-l3); }
.on-light .stand-note a { color: var(--tx-l2); }
.stand-note { font-size: 0.875rem; color: var(--tx-d3); margin-top: 1.1rem; max-width: 66ch; }
.stand-note a { color: var(--tx-d2); }

/* Zitate / Bewertungen */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* Auf schmalen Schirmen ein Wischband mit Einrasten statt einer langen Spalte.
   Bewusst rein per CSS und nutzergesteuert: ein selbstlaufendes Band bräuchte
   nach WCAG 2.2.2 einen Pause-Knopf, verdoppelte Zitate im DOM (die Screenreader
   zweimal vorlesen) und würde bei „Bewegung reduzieren" an seinen Endzustand
   springen statt anzuhalten. */
@media (max-width: 720px) {
  .quotes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.75rem;
  }
  /* align-self: start statt der geerbten Streckung — sonst erbte jede Karte die Hoehe
     des laengsten Zitats und unter den kurzen blieben rund 250 px Leerraum. */
  .quotes > .quote { scroll-snap-align: start; align-self: start; }
}
.quote {
  border-top: 1px solid var(--line-l);
  padding-top: 1.5rem;
  display: grid;
  gap: 1rem;
  align-content: start;
}
.quote blockquote {
  font-size: 1.1rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  font-weight: 440;
  text-wrap: pretty;
}
.quote figcaption { font-size: 0.875rem; color: var(--tx-l3); }
.quote .stars { color: var(--tx-l1); letter-spacing: 0.18em; font-size: 0.8rem; }

/* Jedes Zitat führt zu seiner Quelle. Der Link sitzt sichtbar auf dem
   Portalnamen, deckt über ::after aber die ganze Karte ab: anklickbar ist das
   komplette Zitat, im Bedienbaum steht trotzdem genau EIN Link je Karte. */
.quote { position: relative; }
/* Unterstreichung MUSS hier stehen: global gilt `a { text-decoration: none }`,
   unterstrichen wird nur in `p a` und `li a` — eine <figcaption> ist beides
   nicht. Ohne die Zeile sieht der Link aus wie gewoehnlicher Text und niemand
   klickt. Farbe wie in der Quellenzeile darunter, damit er sich vom
   uebrigen Bildunterschrift-Grau abhebt. */
.quote-quelle {
  color: var(--tx-l2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.quote-quelle::after { content: ""; position: absolute; inset: 0; }
.quote:hover .quote-quelle { color: var(--tx-l1); }
/* Der Fokusring gehört um die ganze Karte, nicht um zwei Wörter — deshalb liegt
   er auf der Deckfläche statt auf dem Link selbst. */
.quote-quelle:focus-visible { outline: none; }
.quote-quelle:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: 6px; }

/* Fakten-Band */
.fact-band {
  border-block: 1px solid var(--line-d);
  padding-block: clamp(1.8rem, 3.5vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem 2.5rem;
}
.on-light .fact-band { border-color: var(--line-l); }
.fact-band strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1;
}
.fact-band span { font-size: var(--fs-lead); color: var(--tx-d2); }
.on-light .fact-band span { color: var(--tx-l2); }

/* Linien-Listen (Leistungen, Haltung, Geldfluss) */
.service-line, .process-line {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.5rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--line-l-soft);
}
.service-line:last-child, .process-line:last-child { border-bottom: 1px solid var(--line-l-soft); }
.service-line .num, .process-line .num {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--tx-l3);
  padding-top: 0.25rem;
}
.service-line h3, .process-line h3 { margin-bottom: 0.35rem; }
.service-line p, .process-line p { color: var(--tx-l2); font-size: var(--fs-small); max-width: 56ch; }
.line-list--dark .service-line, .line-list--dark .process-line { border-color: var(--line-d-soft); }
.line-list--dark .service-line p, .line-list--dark .process-line p { color: var(--tx-d2); }
.line-list--dark .num { color: var(--tx-d3); }
.line-list--dark .service-line:last-child, .line-list--dark .process-line:last-child { border-bottom-color: var(--line-d-soft); }

.process-line { grid-template-columns: 3.2rem 1fr auto; align-items: start; }
.process-line .meta {
  display: grid;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--tx-l3);
  text-align: right;
  min-width: 11rem;
}
.process-line .meta b { font-weight: 540; color: var(--tx-l2); }
@media (max-width: 720px) {
  .process-line { grid-template-columns: 2.4rem 1fr; }
  .process-line .meta { grid-column: 2; text-align: left; margin-top: 0.6rem; min-width: 0; }
  .service-line { grid-template-columns: 2.4rem 1fr; gap: 1rem; }
}

/* Sticky-Bühne (Vermittlung) */
.sticky-stage { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sticky-stage__media {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  border-radius: 1rem;
  overflow: clip;
}
.sticky-stage__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 860px) {
  .sticky-stage { grid-template-columns: 1fr; }
  .sticky-stage__media { position: relative; top: 0; }
  .sticky-stage__media img { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   8 · Erlös-Rechner
   -------------------------------------------------------------------------- */
.calc { display: grid; gap: 2.6rem; max-width: 46rem; margin-inline: auto; text-align: center; }
.payout { display: grid; gap: 0.8rem; justify-items: center; }
.payout__digits {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-giant);
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
}
.payout__digits .digit { display: inline-block; }
.payout__digits .digit.is-changing { animation: digit-in 340ms var(--ease-out); }
@keyframes digit-in {
  from { transform: translateY(0.28em); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.payout__label { color: var(--tx-d2); font-size: var(--fs-small); }
/* Der Provisionssatz stand bis 30.07.2026 nur in einem sr-only-Satz. Sichtbar ist
   er das stärkste Argument für die Festprovision: er sinkt mit steigendem Preis. */
.payout__rate {
  color: var(--tx-d2);
  font-size: var(--fs-small);
  max-width: 34ch;
  margin-inline: auto;
  margin-top: 0.5rem;
}
.payout__rate [data-calc-fee-rate] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--tx-d1);
}
.payout__equation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  font-size: var(--fs-small);
  color: var(--tx-d2);
}
.payout__equation output { font-variant-numeric: tabular-nums; }

.price-control { display: grid; gap: 1rem; }
.price-control__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--fs-small);
  color: var(--tx-d2);
}
.price-control__row output {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  color: var(--tx-d1);
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  /* Startwert 18.000 € auf der 3.000–150.000-Skala; JS hält den Wert aktuell. */
  --fill: 10.2%;
  width: 100%;
  height: 2.75rem;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  /* Kein Fallback: --fill steht auf dem input selbst und wird hierher vererbt,
     der frühere 12%-Ersatzwert konnte nie greifen. */
  background: linear-gradient(to right, #f5f5f7 var(--fill), rgba(255, 255, 255, 0.22) var(--fill));
  border-radius: 1px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  background: #fff;
  border: 0;
  margin-top: calc(-0.825rem + 1px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  transition: transform 180ms var(--ease-out);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-track { height: 2px; background: rgba(255, 255, 255, 0.22); border-radius: 1px; }
input[type="range"]::-moz-range-progress { height: 2px; background: #f5f5f7; border-radius: 1px; }
input[type="range"]::-moz-range-thumb {
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
input[type="range"]:focus-visible { outline: 2px solid var(--brand-d); outline-offset: 6px; border-radius: 4px; }

/* Der Bestandsfilter liegt auf heller Fläche. Die Schienen- und Grifffarben oben
   sind für die dunkle Rechner-Bühne gebaut und wären hier weiss auf weiss.
   input[type="range"] MUSS im Selektor stehen: eine reine Klasse (0,1,0) verliert
   gegen Element + Attribut (0,1,1) — die Regeln hier griffen sonst nie, und die
   Schiene rendete weiterhin #f5f5f7 auf Weiss (gemessen: 1,05:1). */
input[type="range"].inv-preis::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--ink) var(--fill), rgba(10, 10, 12, 0.28) var(--fill));
}
input[type="range"].inv-preis::-webkit-slider-thumb { background: var(--ink); box-shadow: 0 2px 10px rgba(10, 10, 12, 0.32); }
input[type="range"].inv-preis::-moz-range-track { background: rgba(10, 10, 12, 0.28); }
input[type="range"].inv-preis::-moz-range-progress { background: var(--ink); }
input[type="range"].inv-preis::-moz-range-thumb { background: var(--ink); box-shadow: 0 2px 10px rgba(10, 10, 12, 0.32); }
input[type="range"].inv-preis:focus-visible { outline-color: var(--brand); }

/* Im erzwungenen Kontrastmodus entfernt das System alle eigenen Farben — ohne
   Systemfarben blieben beide Regler komplett unsichtbar. */
@media (forced-colors: active) {
  input[type="range"] { forced-color-adjust: none; }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(to right, Highlight var(--fill), ButtonBorder var(--fill));
  }
  input[type="range"]::-webkit-slider-thumb {
    background: ButtonText; border: 2px solid ButtonFace; box-shadow: none;
    margin-top: calc(-0.825rem + 2px);
  }
  input[type="range"]::-moz-range-track { height: 4px; background: ButtonBorder; }
  input[type="range"]::-moz-range-progress { height: 4px; background: Highlight; }
  input[type="range"]::-moz-range-thumb { background: ButtonText; border: 2px solid ButtonFace; box-shadow: none; }
  input[type="range"]:focus-visible { outline-color: Highlight; }

}

.calc-scale { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--tx-d3); font-family: var(--font-mono); }
.calc-disclaimer { font-size: 0.875rem; color: var(--tx-d3); max-width: 52ch; margin-inline: auto; }
.calc-static { font-family: var(--font-mono); font-size: var(--fs-lead); }
html.js .calc-static { display: none; }
html:not(.js) .price-control { display: none; }

/* --------------------------------------------------------------------------
   9 · Seiten-Intro (Unterseiten)
   -------------------------------------------------------------------------- */
.page-intro {
  padding-top: calc(var(--header-h) + clamp(3.5rem, 9vh, 7rem));
  padding-bottom: clamp(2.6rem, 6vh, 5rem);
}
html:not(.js) .page-intro { padding-top: clamp(2.5rem, 7vh, 5rem); }
.page-intro h1 { font-size: var(--fs-h1); max-width: 16ch; margin-bottom: 1.3rem; }
.page-intro .lead { max-width: 46ch; }
.page-intro--stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: end;
  min-height: clamp(24rem, 62vh, 38rem);
  padding-bottom: clamp(2.4rem, 5vh, 4rem);
}
.page-intro--stage .page-intro__media { position: absolute; inset: 0; z-index: -2; }
.page-intro--stage .page-intro__media img { width: 100%; height: 112%; object-fit: cover; }
.page-intro--stage::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.9), rgba(10, 10, 12, 0.3) 45%, rgba(10, 10, 12, 0.12) 70%);
}

/* --------------------------------------------------------------------------
   10 · FAQ
   -------------------------------------------------------------------------- */
.faq-tools { display: grid; gap: 0.7rem; max-width: 34rem; margin-bottom: var(--sp-block); }
.faq-tools label { font-size: var(--fs-small); font-weight: 520; color: var(--tx-l1); }
.faq-search {
  width: 100%;
  min-height: 3.4rem;
  padding: 0.6rem 1.2rem;
  font: inherit;
  color: var(--tx-l1);
  background: var(--paper);
  border: 1px solid var(--line-control);
  border-radius: 0.65rem;
  transition: border-color 200ms;
}
.faq-search:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--tx-l1); }
.faq-count { font-size: 0.875rem; color: var(--tx-l2); }

.faq-group { padding-block: 0.6rem; }
.faq-group h2 {
  font-size: 0.95rem;
  font-weight: 560;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-l3);
  margin: 2.4rem 0 0.7rem;
}
.faq-item { border-top: 1px solid var(--line-l-soft); }
.faq-group .faq-item:last-of-type { border-bottom: 1px solid var(--line-l-soft); }
.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.35rem;
  font-size: 1.12rem;
  font-weight: 530;
  letter-spacing: -0.014em;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  width: 1.9rem; height: 1.9rem;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-weight: 380;
  color: var(--tx-l2);
  border: 1px solid var(--line-l);
  border-radius: 50%;
  transition: transform 320ms var(--ease-out), background-color 220ms, color 220ms;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.faq-body { padding: 0 0 1.6rem; max-width: 62ch; color: var(--tx-l2); }
html.js .faq-item[open] .faq-body { animation: faq-open 420ms var(--ease-out); }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   11 · Kontakt-Formular
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
  /* Kinder dürfen den 1fr-Track nie über den Viewport dehnen (Termin-Rail). */
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  padding-bottom: var(--sp-section);
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-layout > form { min-width: 0; }
.cal-scroll { max-width: 100%; }

.form-progress {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--tx-l3);
  margin-bottom: 1.8rem;
}
html:not(.js) [data-progress-text] { display: none; }

.form-step { border: 0; display: grid; gap: 1.45rem; }
.form-step + .form-step { margin-top: 2.6rem; }
html.js .form-step[data-step]:not(.is-current) { display: none; }
html.js .form-step + .form-step { margin-top: 0; }
.form-step > legend {
  font-size: var(--fs-h3);
  font-weight: 560;
  letter-spacing: -0.015em;
  margin-bottom: 1.4rem;
  padding: 0;
}

.field { display: grid; gap: 0.5rem; }
.field label { font-size: var(--fs-small); font-weight: 520; color: var(--tx-l1); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1.1rem;
  font: inherit;
  color: var(--tx-l1);
  background: var(--paper);
  border: 1px solid var(--line-control);
  border-radius: 0.65rem;
  transition: border-color 180ms;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--tx-l1);
}
.field [aria-invalid="true"] { border-color: #b3261e; }
.field-help { font-size: 0.85rem; color: var(--tx-l3); }
.field-error { font-size: 0.85rem; font-weight: 530; color: #9d1c15; }

.choice-group { border: 0; display: grid; gap: 0.55rem; }
.choice-group > legend { font-size: var(--fs-small); font-weight: 520; margin-bottom: 0.65rem; padding: 0; }
.choice-line {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.25rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-control);
  border-radius: 0.65rem;
  font-size: var(--fs-small);
  color: var(--tx-l1);
  cursor: pointer;
  transition: border-color 180ms, background-color 180ms;
}
.choice-line:hover { border-color: rgba(10, 10, 12, 0.5); }
.choice-line:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.choice-line:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.choice-line input { accent-color: var(--ink); width: 1.15rem; height: 1.15rem; flex: none; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-disclosure { font-size: 0.875rem; color: var(--tx-l2); max-width: 56ch; margin-top: 2rem; }
/* Der zweite Weg: leere Vorlage statt gefuehrtem Formular. Bewusst ruhig
   gehalten und abgesetzt - er soll auffindbar sein, ohne dem gefuehrten Weg
   die Aufmerksamkeit zu nehmen. */
.form-alternative {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-l);
  font-size: 0.875rem;
  color: var(--tx-l3);
  max-width: 56ch;
}
.form-alternative a { color: var(--tx-l2); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.form-status { margin-top: 1rem; font-size: var(--fs-small); }
.form-status.is-error { color: #9d1c15; font-weight: 530; }
#form-sent-status { border-top: 1px solid var(--line-l); padding-top: 1.2rem; color: var(--tx-l2); display: grid; gap: 0.9rem; }
.status-actions { margin: 0; }
.status-copy {
  min-height: 2.75rem;
  padding: 0.45rem 1.2rem;
  border: 1px solid var(--line-control);
  border-radius: 0.55rem;
  font-weight: 530;
  color: var(--tx-l1);
  transition: border-color 180ms, background-color 180ms;
}
.status-copy:hover { border-color: rgba(10, 10, 12, 0.5); }
.status-details summary { cursor: pointer; font-weight: 530; color: var(--tx-l1); }
.status-details pre {
  margin-top: 0.7rem;
  padding: 1rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--line-l-soft);
  border-radius: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.form-nav { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }
.form-nav [data-form-prev] {
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--line-control);
  border-radius: 0.55rem;
  font-weight: 520;
}
html:not(.js) .form-nav [data-form-prev],
html:not(.js) .form-nav [data-form-next] { display: none; }

.form-summary { display: grid; gap: 1rem; padding-top: 0.4rem; }
.form-summary h2 {
  font-size: var(--fs-label);
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-l3);
}
.form-summary dl { display: grid; gap: 0.75rem; }
.form-summary dl div { display: grid; gap: 0.1rem; border-top: 1px solid var(--line-l-soft); padding-top: 0.75rem; }
.form-summary dt { font-size: 0.8rem; color: var(--tx-l3); }
.form-summary dd { font-size: var(--fs-small); color: var(--tx-l1); overflow-wrap: anywhere; }
.form-summary .contact-direct { border-top: 1px solid var(--line-l-soft); padding-top: 1.1rem; display: grid; gap: 0.35rem; font-size: var(--fs-small); color: var(--tx-l2); }
.form-summary .contact-direct a { font-weight: 540; color: var(--tx-l1); }
.form-summary .contact-direct a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   12 · Rechtsseiten + 404
   -------------------------------------------------------------------------- */
.legal-page { padding-top: calc(var(--header-h) + clamp(2.6rem, 7vh, 5rem)); }
html:not(.js) .legal-page { padding-top: clamp(2rem, 5vh, 3.5rem); }
.legal-layout { max-width: 44rem; padding-bottom: var(--sp-section); overflow-wrap: break-word; hyphens: auto; }
.legal-layout h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); margin-bottom: 2.2rem; }
.legal-layout h2 { font-size: 1.35rem; margin: 2.6rem 0 0.8rem; }
.legal-layout h3 { font-size: 1.08rem; margin: 1.8rem 0 0.5rem; }
.legal-layout p, .legal-layout address, .legal-layout li { color: var(--tx-l2); font-style: normal; }
.legal-layout p + p { margin-top: 0.8rem; }
.legal-layout ul, .legal-layout ol { padding-left: 1.2rem; display: grid; gap: 0.45rem; margin-block: 0.8rem; }
/* Das amtliche Muster-Widerrufsformular ist zum Ausfuellen und Ausdrucken
   gedacht, nicht zum Ueberfliegen. Deshalb Trennlinien statt Aufzaehlungspunkte:
   jede Zeile liest sich als Feld. Der Wortlaut bleibt unveraendert. */
.legal-layout .widerruf-formular {
  padding-left: 0;
  list-style: none;
  gap: 0;
  border-top: 1px solid var(--line-l);
}
.legal-layout .widerruf-formular li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-l);
}

.prelaunch-notice {
  border: 1px solid rgba(178, 106, 0, 0.4);
  background: #fdf6ea;
  border-radius: 0.75rem;
  padding: 1.2rem 1.4rem;
  margin-bottom: 2.4rem;
  display: grid;
  gap: 0.4rem;
}
.prelaunch-notice strong { color: #7a4a00; font-weight: 580; }
.prelaunch-notice p { color: #6b5230; font-size: var(--fs-small); }
.prelaunch-field {
  display: inline-block;
  background: #fdf6ea;
  border: 1px dashed rgba(178, 106, 0, 0.55);
  border-radius: 0.4rem;
  padding: 0.15rem 0.6rem;
  color: #7a4a00;
  font-size: var(--fs-small);
}

.error-page {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 1.2rem;
  padding: calc(var(--header-h) + 2rem) 0 4rem;
}
.error-code {
  font-family: var(--font-mono);
  font-size: clamp(5rem, 24vw, 13rem);
  font-weight: 560;
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(180deg, #f5f5f7 30%, rgba(245, 245, 247, 0.16));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.error-page p { color: var(--tx-d2); max-width: 34ch; }
.error-page .action-row { justify-content: center; margin-top: 0.8rem; }

/* --------------------------------------------------------------------------
   13 · Abschluss-CTA + Footer
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  isolation: isolate;
  overflow: clip;
  text-align: center;
  padding-block: var(--sp-section);
}
.closing__media { position: absolute; inset: 0; z-index: -2; }
.closing__media img { width: 100%; height: 100%; object-fit: cover; }
.closing::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 10, 12, 0.74);
}
.closing h2 { font-size: var(--fs-h2); max-width: 18ch; margin-inline: auto; margin-bottom: 1rem; }
.closing .lead { max-width: 42ch; margin-inline: auto; }
.closing .action-row { justify-content: center; margin-top: 2.2rem; }
.closing .phone-line { margin-top: 1.6rem; font-size: var(--fs-small); color: var(--tx-d2); }
.closing .phone-line a { font-family: var(--font-mono); color: var(--tx-d1); font-size: 1.05rem; }

/* Ruhiger Abschluss ohne Bild */
.closing-action {
  border-top: 1px solid var(--line-d);
  padding-block: calc(var(--sp-section) * 0.7);
}
.on-light .closing-action { border-color: var(--line-l); }
.closing-action h2 { font-size: var(--fs-h2); max-width: 20ch; margin-bottom: 0.8rem; }
.closing-action .lead { max-width: 46ch; }
.closing-action .action-row { margin-top: 2rem; }
.closing-action .phone-note { margin-top: 1.2rem; font-size: var(--fs-small); color: var(--tx-d2); }
.on-light .closing-action .phone-note { color: var(--tx-l2); }
.closing-action .phone-note a { font-family: var(--font-mono); }

.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line-d-soft);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.4rem;
  color: var(--tx-d2);
  font-size: var(--fs-small);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: clamp(2.2rem, 5vw, 4rem);
  padding-bottom: 2.8rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-identity { display: grid; gap: 0.9rem; align-content: start; }
.footer-mark { font-size: 1.35rem; font-weight: 660; color: var(--tx-d1); letter-spacing: 0.01em; }
.footer-contact { display: grid; gap: 0.5rem; align-content: start; }
.footer-contact a { color: var(--tx-d1); font-weight: 480; width: fit-content; }
.footer-contact a:hover { color: var(--brand-d); }
.footer-nav { display: grid; grid-template-columns: auto auto; gap: clamp(1.8rem, 4vw, 3.2rem); }
.footer-nav ul { list-style: none; display: grid; gap: 0.55rem; align-content: start; }
.footer-nav a { color: var(--tx-d2); }
.footer-nav a:hover { color: var(--tx-d1); }
.footer-bottom {
  border-top: 1px solid var(--line-d-soft);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  color: var(--tx-d3);
  font-size: 0.85rem;
}
.footer-bottom a { color: var(--tx-d2); }

/* --------------------------------------------------------------------------
   13b · Bestandskatalog (fahrzeuge.html)
   -------------------------------------------------------------------------- */
.inv-tools { display: grid; gap: 1.1rem; margin-bottom: 2.2rem; }
.inv-tools__row { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.inv-tools__row--controls { align-items: end; gap: 1rem 1.5rem; }
.inv-chip {
  min-height: 2.75rem;
  padding: 0.4rem 1.15rem;
  border: 1px solid var(--line-control);
  border-radius: 2rem;
  font-size: var(--fs-small);
  font-weight: 520;
  color: var(--tx-l2);
  transition: border-color 200ms, background-color 200ms, color 200ms;
}
.inv-chip:hover { border-color: rgba(10, 10, 12, 0.5); color: var(--tx-l1); }
.inv-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Trefferzahl je Filter: zeigt Bestandstiefe ohne Klick und verhindert Sackgassen.
   aria-hidden, weil den Bestand bereits [data-inventory-count] als Live-Region
   meldet — sonst läse ein Screenreader die Zahl doppelt. */
.chip-n {
  margin-left: 0.45rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.78em;
  /* Keine Deckkraft-Abstufung: 0,62 drueckte die Zahl auf 3,05:1 (11,7 px braucht
     4,5:1); die kleinere Mono-Schrift unterscheidet sie bereits vom Namen. */
}
.inv-chip:disabled { opacity: 0.72; cursor: not-allowed; }
.inv-chip:disabled:hover { border-color: var(--line-control); color: var(--tx-l2); }
/* Gegenüberstellung Vermittlung / Ankauf. Eigener Scroll-Container, damit die
   Tabelle auf schmalen Geräten scrollt statt die Seite zu verbreitern. */
/* Sichtbare Andeutung, dass seitlich mehr steht — bei 320 px liegt sonst die
   ganze Ankauf-Spalte unerkannt ausserhalb. tabindex/role stehen im Markup. */
.vergleich {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* --deck statt fest Weiss: die Tabelle liegt auf .on-light-2 (#f5f5f7), die
     Deckstreifen malten sonst weisse Baender auf die graue Flaeche. */
  --deck: var(--paper);
  background:
    linear-gradient(to right, var(--deck) 30%, rgba(255, 255, 255, 0)) left / 3rem 100% no-repeat,
    linear-gradient(to left, var(--deck) 30%, rgba(255, 255, 255, 0)) right / 3rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(10, 10, 12, 0.16), rgba(10, 10, 12, 0)) left / 1.4rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(10, 10, 12, 0.16), rgba(10, 10, 12, 0)) right / 1.4rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.on-light-2 .vergleich { --deck: var(--paper-2); }
.vergleich:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.vergleich table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-small); }
.vergleich caption { text-align: left; }
.vergleich th,
.vergleich td { padding: 0.9rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-l-soft); }
.vergleich thead th { font-size: 1.05rem; font-weight: 560; color: var(--tx-l1); border-bottom: 1px solid var(--line-control); }
.vergleich tbody th { font-weight: 520; color: var(--tx-l3); width: 12rem; }
.vergleich tbody td { color: var(--tx-l2); }
.vergleich tbody tr:last-child th,
.vergleich tbody tr:last-child td { border-bottom: 0; }

.inv-preis { width: 100%; min-width: 11rem; }
/* Drei willkürliche Breiten in einer linksbündigen Spalte wirkten ausgefranst,
   und der Platzhalter des Suchfelds wurde mitten im Wort abgeschnitten. */
@media (max-width: 760px) {
  .inv-tools__row--controls { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
  .inv-tools__row--controls .inv-field { width: 100%; }
  .inv-search, .inv-sort { width: 100%; }
}
/* Steht bewusst neben statt im <label>: als Kind des Labels hätte der laufend
   aktualisierte Wert den zugänglichen Namen des Reglers beim Ziehen verändert. */
/* Wert NEBEN dem Label statt darunter: als dritte Rasterzeile machte das Preisfeld
   die ganze Werkzeugzeile ungleich hoch — mit align-items: end sass sein Label 28 px
   ueber „Suchen" und „Sortieren". */
.inv-preis-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }

.inv-preis-wert {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  color: var(--tx-l1);
}

/* Verkäufer-Anstoß im Katalog: wer hier Preise vergleicht, denkt über den Wert
   des eigenen Fahrzeugs nach. Der Abschluss-CTA steht erst nach 86 Karten. */
.inv-hinweis {
  margin-bottom: 1.8rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line-control);
  border-radius: 0.65rem;
  font-size: var(--fs-small);
  color: var(--tx-l2);
  max-width: 74ch;
}
.inv-hinweis strong { color: var(--tx-l1); }
/* Kein nowrap: bei 320 px blieben unter 2 px Reserve — eine Schriftgroessen-
   Einstellung des Nutzers oder ein laengeres Wort haetten die Zeile gesprengt. */
.inv-hinweis .action-link { margin-left: 0.35rem; }

/* Detailansicht statt Einzelseiten je Fahrzeug. */
.inv-dialog {
  /* Ohne diese Zeile klebt der Dialog oben links: der globale *-Reset (Zeile 113)
     überschreibt die Browserregel dialog { margin: auto }. */
  margin: auto;
  width: min(56rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  /* dvh: auf Mobilbrowsern mit ein-/ausfahrender Leiste ist 100vh grösser als
     die tatsächlich sichtbare Fläche. */
  max-height: calc(100dvh - 3rem);
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 0;
  border-radius: 1rem;
  background: var(--paper);
  color: var(--tx-l1);
  overflow-y: auto;
}
.inv-dialog::backdrop { background: rgba(10, 10, 12, 0.62); }
/* Seite hinter dem Modal festhalten — sonst scrollt das Rad den Katalog weiter. */
html:has(dialog[open]) { overflow: hidden; }
.inv-dialog__kopf { display: flex; justify-content: flex-end; margin-bottom: 0.6rem; }
.inv-dialog__zu {
  min-height: 2.75rem;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--line-control);
  border-radius: 0.55rem;
  background: transparent;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--tx-l1);
  cursor: pointer;
}
.inv-dialog__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.3rem;
}
.inv-dialog__hinweis { margin-top: 0.9rem; font-size: var(--fs-small); color: var(--tx-l3); }
.inv-dialog__hinweis a { color: var(--tx-l2); }
.inv-dialog__mehr { margin: 1.8rem 0 1rem; font-size: var(--fs-h3); }
.inv-dialog__liste { margin: 0; }
/* Preisbezug zum gerade gezeigten Fahrzeug. Bewusst zurueckhaltend: eine Einordnung,
   keine Auszeichnung — es ist die Differenz zweier inserierter Preise. */
.vc-bezug {
  font-size: 0.8rem;
  font-weight: 520;
  color: var(--tx-l2);
}
/* Das gezeigte Fahrzeug darf grösser wirken als die Vorschläge darunter. */
.inv-dialog__haupt .vehicle-card { border: 0; }
.inv-dialog__haupt .vehicle-card:hover { transform: none; }
.inv-dialog__haupt .vc-title { font-size: var(--fs-h3); font-weight: 560; }
.inv-dialog__haupt .vc-specs { font-size: var(--fs-small); }
.inv-dialog__haupt .vc-price { font-size: 1.35rem; }
.inv-dialog__haupt figcaption { padding: 1.1rem 0 0; }
.inv-dialog__haupt img { border-radius: 0.7rem; }
/* Ankerrahmen fuer die Verkauft-Schleife im Dialog: position + overflow schneiden die
   rotierte Banderole wie an der Rasterkarte, aber an der Bildspalte statt am Rahmen. */
.inv-dialog__haupt .vc-bild {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.7rem;
}
/* Gemessen: das Bild fuellte 615 von 952 px Dialoghoehe, „Aehnliche Fahrzeuge" lag
   damit komplett unter der Falte — die Funktion war da und niemand sah sie. Die
   Studioaufnahmen haben oben und unten viel leere Halle, ein Zuschnitt kostet nichts.
   Seitenverhaeltnis statt Viewport-Hoehe: so ist der Zuschnitt auf jedem Schirm
   derselbe. max-height bleibt als Netz fuer sehr flache Fenster. */
.inv-dialog__haupt img { aspect-ratio: 16 / 10; max-height: min(46vh, 26rem); }

@media (min-width: 58rem) {
  .inv-dialog__haupt figure {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.2vw, 1.7rem);
    align-items: start;
  }
  .inv-dialog__haupt figcaption { padding: 0; }
}

/* Auf dem Handy stapelten die drei Vorschlaege auf 1152 px — praktisch unerreichbar.
   Als seitliches Band mit Schnapppunkten ist es eine Wischgeste. Kein tabindex noetig:
   jede Karte traegt einen Knopf, der Fokus kommt also von selbst hinein. */
@media (max-width: 40rem) {
  .inv-dialog__liste.vehicle-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.4rem;
  }
  .inv-dialog__liste > li { scroll-snap-align: start; align-self: start; }
}

/* Der Fahrzeugname ist der Auslöser. main.js baut ihn zur Schaltfläche um; ohne
   JavaScript bleibt es der schlichte Text von vorher. Optisch darf sich nichts
   ändern — deshalb der vollständige Button-Reset. */
.vc-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* Die ganze Karte ist Klickfläche — der Zeiger muss das auch sagen. Die Karte
   hatte bisher einen Hover-Effekt, ohne irgendetwas zu tun.
   Zeiger und Hover-Unterstreichung waren der KOMPLETTE Satz visueller Hinweise —
   auf dem Hauptgerät der Zielgruppe gibt es beides nicht. Deshalb ein statischer
   Hinweis, der ohne Zeigegerät funktioniert: der Fahrzeugname ist dauerhaft dezent
   unterstrichen und trägt eine Detail-Marke, die auf Hover kräftiger wird. */
/* Startseiten-Rail: die Karten waren bis 2026-08-01 tot — gleiche Optik wie im
   Katalog, aber ohne jedes Ziel. Der Link sitzt auf dem Fahrzeugnamen und deckt
   ueber ::after die ganze Karte ab: ein Link je Karte im Bedienbaum, anklickbar
   ist trotzdem alles. Ziel ist bewusst der Katalog und nicht das einzelne Auto —
   einen Direktsprung gibt es erst, wenn der Deep-Link steht (B4). Darum heisst
   der Hinweis auch „Im Katalog ansehen" und nicht „Details". */
.rail .vehicle-card { position: relative; cursor: pointer; }
.rail .vc-link { color: inherit; text-decoration: none; }
.rail .vc-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Zwei Wege je Karte: die Kartenflaeche fuehrt in den Katalog, der Anfrage-Link
   direkt zur Anfrage mit vorbelegtem Fahrzeug. Der Hinweis links ist bewusst
   KEIN Link — die Karte ist ja schon einer, ein Link im Link waere ungueltig. */
.rail .vc-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 560;
  letter-spacing: 0.01em;
}
.rail .vc-hinweis { color: var(--brand); }
/* Muss ueber der Deckflaeche des Kartenlinks liegen, sonst verschluckt der
   Katalogweg den Anfrageweg. */
.rail .vc-anfrage { position: relative; z-index: 1; color: var(--tx-d2); text-decoration: none; }
.rail .vc-anfrage:hover, .rail .vc-anfrage:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }
.rail .vehicle-card:hover .vc-hinweis,
.rail .vehicle-card:focus-within .vc-hinweis,
.rail .vehicle-card:hover .vc-link,
.rail .vehicle-card:focus-within .vc-link { text-decoration: underline; text-underline-offset: 0.18em; }
/* Der Ring gehoert um die ganze Karte, nicht um den Namen. Offset NEGATIV:
   .rail hat overflow-x: auto, ein nach aussen versetzter Ring wird vom
   Scroll-Container abgeschnitten und war unsichtbar — nachgewiesen im Bild. */
.rail .vc-link:focus-visible { outline: none; }
.rail .vc-link:focus-visible::after { outline: 2px solid var(--brand-d); outline-offset: -3px; border-radius: 8px; }

.vehicle-card.is-klickbar { cursor: pointer; }
/* Der Hinweis gehoert ans ENDE der Karte, nicht zwischen Fahrzeugnamen und Eckdaten:
   dort zerschnitt er die Datenreihenfolge Name -> Eckdaten -> Preis. Als Zeile nach
   dem Preis liest er sich als das, was er ist — der Handlungsaufruf der Karte. */
.vehicle-card.is-klickbar figcaption::after {
  content: "Details ansehen →";
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  color: var(--brand);
}
.vehicle-card.is-klickbar:hover figcaption::after,
.vehicle-card.is-klickbar:focus-within figcaption::after { text-decoration: underline; text-underline-offset: 0.18em; }
.vehicle-card.is-klickbar:hover .vc-trigger,
.vehicle-card.is-klickbar:focus-within .vc-trigger { text-decoration: underline; text-underline-offset: 0.18em; }
/* --brand-d ist der Akzent für dunkle Flächen; auf der weissen Karte ergab er 1,96:1. */
.vc-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 0.2rem; }

.inv-field { display: grid; gap: 0.35rem; }
.inv-field label { font-size: 0.8rem; font-weight: 520; color: var(--tx-l3); }
.inv-search, .inv-sort {
  min-height: 2.9rem;
  padding: 0.4rem 1rem;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--tx-l1);
  background: var(--paper);
  border: 1px solid var(--line-control);
  border-radius: 0.55rem;
}
.inv-search { width: min(20rem, 100%); }
.inv-search:focus-visible, .inv-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.inv-count {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  color: var(--tx-l2);
}
.inv-grid .vehicle-card { background: var(--paper); border-color: var(--line-l-soft); }
.inv-grid .vehicle-card .vc-specs { color: var(--tx-l2); }
.inv-grid .vehicle-card figcaption { padding: 1rem 1.1rem 1.15rem; }
.inv-grid .vehicle-card:hover { border-color: var(--line-l); }
.inv-empty { padding: 2.4rem 0 1rem; color: var(--tx-l2); }
.inv-reset { text-decoration: underline; text-underline-offset: 0.2em; font-weight: 530; color: var(--tx-l1); }
/* Ohne JavaScript: kompletter Katalog sichtbar, Werkzeuge ausgeblendet. */
html:not(.js) [data-inventory-tools] { display: none; }
/* Ohne JS filtert nichts: die Suche war als einziges JS-Werkzeug sichtbar und tot. */
html:not(.js) .faq-tools { display: none; }
html:not(.js) .inv-empty { display: none; }
@media (max-width: 640px) {
  .inv-count { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   13c · Terminwunsch (termin.html)
   -------------------------------------------------------------------------- */
/* Terminzeiten als ruhige Zeilen statt Plakatziffern. */
.hours-list { max-width: 44rem; margin: 0; }
.hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.05rem 0.1rem;
  border-top: 1px solid var(--line-d);
}
.hours-row:last-child { border-bottom: 1px solid var(--line-d); }
.hours-row dt { font-size: 1rem; color: var(--tx-d2); }
.hours-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--tx-d1);
  /* Kein nowrap: die Freitagszeile ist als Flex-Item sonst 343 px breit und
     schiebt die Seite auf schmalen Geräten über den Viewport. Die einzelnen
     Zeitspannen bleiben über geschützte Leerzeichen im Markup zusammen. */
  white-space: normal;
}
.hours-sep { color: var(--tx-d3); padding-inline: 0.15rem; }
.hours-row--closed dd { font-family: var(--font-sans); color: var(--tx-d3); }
.termin-picker { border: 0; margin-bottom: 2rem; }
.termin-picker > legend {
  font-size: var(--fs-h3);
  font-weight: 560;
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
  padding: 0;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.cal-week {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--tx-l2);
}
.cal-nav { display: flex; gap: 0.45rem; }
/* 2.75rem = 44 px, wie die Slots. 2.6rem waren 41,6 px. */
.cal-nav-btn {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-control);
  border-radius: 0.55rem;
  color: var(--tx-l1);
  font-size: 1rem;
  transition: border-color 200ms, opacity 200ms;
}
.cal-nav-btn:hover:not(:disabled) { border-color: rgba(10, 10, 12, 0.5); }
.cal-nav-btn:disabled { opacity: 0.3; cursor: default; }

.cal-scroll {
  /* relative: macht den Scroller zum Containing Block der sr-only-Spans in den Zellen —
     sonst ragen deren absolute Boxen ungeclippt aus der Seite (Overflow-Test). */
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
/* border-collapse bleibt separate: nur so funktioniert die sticky Uhrzeit-Spalte. */
.cal-table {
  width: 100%;
  min-width: 37rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.cal-table th, .cal-table td { padding: 0.14rem; }
.cal-time-head, .cal-time {
  width: 3.4rem;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
  border-right: 1px solid var(--line-l-soft);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--tx-l3);
  text-align: left;
  white-space: nowrap;
}
.cal-time { padding-right: 0.5rem; }
.cal-day-head { padding-bottom: 0.55rem; text-align: center; }
.cal-day-name { display: block; font-size: 0.86rem; font-weight: 560; letter-spacing: 0.01em; color: var(--tx-l1); }
.cal-day-head.is-today .cal-day-name::after {
  content: "";
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  margin-left: 0.32rem;
  border-radius: 50%;
  background: var(--brand);
  vertical-align: 0.12em;
}
.cal-day-date {
  display: block;
  margin-top: 0.14rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--tx-l3);
}
.cal-cell { height: auto; }
/* Viertelstunden-Raster — vier Start-Knöpfe je Stunde und Tag. */
.cal-quarters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.18rem;
}
.cal-slot {
  width: 100%;
  height: 100%;
  /* 2.75rem = 44 px: Mindestgröße für Tap-Ziele (WCAG 2.5.5), von der
     Browser-Suite geprüft. Nicht unter diesen Wert senken. */
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-control);
  border-radius: 0.45rem;
  background: transparent;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  color: var(--tx-l2);
  transition: border-color 160ms, background-color 160ms, color 160ms;
}
.cal-slot--aus {
  opacity: 0.28;
  border-style: dashed;
  pointer-events: none;
}
.cal-slot:hover { border-color: rgba(10, 10, 12, 0.55); color: var(--tx-l1); }
.cal-slot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cal-cell--blocked::before, .cal-cell--past::before, .cal-cell--lead::before {
  content: "";
  display: block;
  min-height: 3.9rem;
  border-radius: 0.45rem;
}
.cal-cell--blocked::before {
  background: repeating-linear-gradient(-45deg, rgba(10, 10, 12, 0.055) 0 4px, transparent 4px 9px);
}
.cal-cell--past::before,
.cal-cell--lead::before { background: rgba(10, 10, 12, 0.03); }
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  margin-top: 0.85rem;
  font-size: var(--fs-small);
  color: var(--tx-l3);
}
.cal-legend__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.cal-key {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.22rem;
  border: 1px solid var(--line-l);
}
.cal-key--sel { background: var(--ink); border-color: var(--ink); }
.cal-key--off {
  border-color: var(--line-l-soft);
  background: repeating-linear-gradient(-45deg, rgba(10, 10, 12, 0.07) 0 3px, transparent 3px 7px);
}
/* Ohne JavaScript: kein Picker — das Freitextfeld übernimmt vollständig. */
html:not(.js) .termin-picker { display: none; }

@media (max-width: 460px) {
  h1, h2 { overflow-wrap: break-word; hyphens: auto; }
}

/* --------------------------------------------------------------------------
   14 · Bewegung: Reveals + Parallax
   -------------------------------------------------------------------------- */
.reveal, .reveal-scale { --d: 0ms; }
html.js .reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.js .reveal-scale {
  opacity: 0;
  transform: scale(0.965);
  transition: opacity var(--dur-reveal) var(--ease-out), transform 1100ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.js .reveal.is-visible,
html.js .reveal-scale.is-visible { opacity: 1; transform: none; }

/* will-change setzt js/main.js nur, solange ein Element wirklich im Blick ist:
   dauerhaft erzwingt es je Bild eine eigene Compositor-Ebene. */

/* --------------------------------------------------------------------------
   14b · Vertrags-Druckfassung (vermittlungsvertrag.html)
   Am Bildschirm unsichtbar; @media print druckt AUSSCHLIESSLICH den Vertrag.
   -------------------------------------------------------------------------- */
.print-contract { display: none; }

@media print {
  @page { margin: 14mm; }
  /* Drucken heißt Papier: nie dunkle Flächen als Seitengrund ausgeben.
     Wichtig: color-scheme steuert in Chromium die Canvas-Farbe des Drucks. */
  :root {
    color-scheme: light;
    /* Auf Papier gibt es keine dunklen Flächen. Ohne diese Überschreibung behalten
       alle Seiten außer dem Vertrag ihre Dunkel-Textfarben und drucken hellgrau
       auf weiß (gemessen: #f5f5f7 auf #fff = 1,09:1). */
    --tx-d1: #111;
    --tx-d2: #444;
    --tx-d3: #555;
  }
  html, body { background: #fff !important; color: #111; }
  /* Nur mit JS: beforeprint fuellt die Werte. Ohne JS druckt die normale Seite —
     Formular samt sichtbarer Kernvereinbarung — statt eines leeren Gerippes. */
  html.js body:has(.print-contract) { color: #111; }
  .print-contract { background: #fff; }
  html.js body:has(.print-contract) .site-header,
  html.js body:has(.print-contract) .site-footer,
  html.js body:has(.print-contract) main > *:not(.print-contract),
  html.js body:has(.print-contract) .skip-link { display: none !important; }

  /* Reveal-Blöcke starten mit opacity: 0 und werden erst beim Scrollen sichtbar.
     Wer eine Seite druckt, ohne sie ganz durchgescrollt zu haben, bekam sonst
     leeres Papier — gemessen 36 von 36 unsichtbaren Blöcken auf der Startseite. */
  /* Der Schritt-Wizard verbirgt am Bildschirm alle nicht-aktuellen Schritte. Beim
     Drucken fielen damit alle bereits ausgefuellten Felder der anderen Schritte weg
     (auf der Vertragsseite uebernimmt ohnehin .print-contract). */
  html.js .form-step[data-step] { display: grid !important; }

  /* Querscroller werden im Druck an der Blattkante abgeschnitten: von 11
     Rail-Fahrzeugen druckten drei. Im Druck als zweispaltiges Raster. */
  .rail {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
  }

  /* Die Druck-Tokens oben erfassen nur Textfarben: Trennlinien dunkler Flaechen
     (.metric, .hours-row) druckten weiss auf weiss. */
  :root {
    --line-d: rgba(0, 0, 0, 0.3);
    --line-d-soft: rgba(0, 0, 0, 0.15);
  }

  html.js .reveal,
  html.js .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    /* transition: none ist Pflicht, nicht Kosmetik: ohne sie beginnt beim Umschalten
       auf das Druckmedium eine Blende von 0 nach 1, und der erste (einzige) Paint
       eines Druckauftrags faellt mitten hinein — gemessen 0,88 statt 1. */
    transition: none !important;
    animation: none !important;
  }

  /* Der feste Kopf und der Sprunglink wurden nur auf der Vertragsseite entfernt
     und druckten sonst auf jedem Blatt über den Fließtext. */
  .site-header,
  .skip-link,
  .nav-toggle,
  .rail-nav,
  [data-inventory-tools],
  .faq-tools,
  .inv-dialog { display: none !important; }
  /* „Details ansehen →" ist eine Bildschirmgeste — auf Papier bleibt sie unerfuellbar. */
  .vehicle-card.is-klickbar figcaption::after { content: none !important; }

  /* Hart kodierte Helltextfarben, die die Token-Überschreibung oben nicht erfasst. */
  .hero .lead { color: #444 !important; }
  .hero__facts,
  .hero h1 { color: #111 !important; }

  html.js .print-contract {
    display: block;
    font-family: var(--font-sans);
    font-size: 10.5pt;
    line-height: 1.45;
    color: #111;
  }
  .pc-head { border-bottom: 2px solid #111; padding-bottom: 4mm; margin-bottom: 5mm; }
  .pc-brand { font-size: 9pt; letter-spacing: 0.12em; text-transform: uppercase; color: #444; margin-bottom: 2mm; }
  .pc-head h2 { font-size: 17pt; letter-spacing: -0.01em; margin-bottom: 1.5mm; }
  .pc-head h2 span { font-size: 10pt; font-weight: 460; color: #444; }
  .pc-fee { font-size: 10pt; }
  .pc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4mm; margin-bottom: 4mm; }
  .pc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin-bottom: 4mm; }
  .pc-parties h3, .pc-vehicle h3 { font-size: 10pt; margin-bottom: 2mm; }
  .pc-label { display: block; font-size: 7.5pt; letter-spacing: 0.08em; text-transform: uppercase; color: #555; margin-bottom: 0.8mm; }
  .pc-value { display: block; font-weight: 560; min-height: 5mm; border-bottom: 0.3pt solid #999; padding-bottom: 1mm; }
  .pc-value--empty::after { content: " "; }
  .pc-line { display: block; min-height: 6mm; border-bottom: 0.4pt solid #555; }
  .pc-line--sign { margin-top: 10mm; }
  .pc-parties p, .pc-vehicle p, .pc-grid p { margin-bottom: 2.5mm; break-inside: avoid; }
  .pc-vehicle { margin-bottom: 4mm; }
  .pc-note { font-size: 8.5pt; color: #444; }
  .pc-clauses { column-count: 2; column-gap: 6mm; font-size: 8.6pt; line-height: 1.4; border-top: 0.4pt solid #999; padding-top: 3.5mm; margin-bottom: 4mm; }
  .pc-clauses p { break-inside: avoid; margin-bottom: 2.5mm; }
  .pc-confirm { font-size: 8.6pt; color: #333; margin-bottom: 8mm; }
  .pc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-bottom: 5mm; break-inside: avoid; }
  .pc-footer { font-size: 8pt; color: #666; border-top: 0.4pt solid #999; padding-top: 2.5mm; }
}

/* --------------------------------------------------------------------------
   15 · Reduced Motion — alles Dekorative aus
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html.js .reveal, html.js .reveal-scale { opacity: 1; transform: none; }
  html.js .hero [data-hero-line] .line { transform: none; animation: none; }
  html.js .hero [data-hero-fade] { opacity: 1; transform: none; animation: none; }
  html.js .hero__media img { transform: none; animation: none; }
  .hero__scroll::before { animation: none; }
  [data-parallax] { transform: none !important; will-change: auto; }
  .stage__media img, .page-intro--stage .page-intro__media img { height: 100%; }
}

/* FABLE 27.07: Unterschriftsfeld des Vermittlungsvertrags (Schritt 4). touch-action: none ist
   Pflicht — sonst scrollt das Handy beim Unterschreiben statt zu zeichnen. */
.sign-pad {
  width: 100%; height: 180px; display: block;
  background: #fff; /* --line-control statt der eigenen 0,35er-Mischung: der Rand ist die EINZIGE
     Begrenzung des Felds auf der weissen Flaeche und braucht 3:1 (gemessen: 2,18:1). */
  border: 1px dashed var(--line-control); border-radius: 10px;
  touch-action: none; cursor: crosshair;
}
.sign-tools { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }

/* ---------------------------------------------------------- Erzwungener Kontrast */
/* AM DATEIENDE, nicht beim Regler-Block: diese Selektoren haben dieselbe Spezifitaet
   wie ihre Normalregeln (Zeile ~1398/1804) — nur die spaetere Position gewinnt.
   Frueher platziert griffen sie nie, gemessen an rgb(10,10,12) statt SelectedItem. */
@media (forced-colors: active) {
  .inv-chip[aria-pressed="true"],
  .cal-slot[aria-pressed="true"] {
    forced-color-adjust: none;
    background: SelectedItem;
    border-color: SelectedItem;
    color: SelectedItemText;
  }
  .cal-cell--blocked,
  .cal-cell--past,
  .cal-cell--lead { border: 1px dashed GrayText; }
  .cal-slot--aus { color: GrayText; }
}