/* ==========================================================================
   Rheinspur Automobile — Stylesheet

   Reihenfolge: Tokens · Grundlagen · Bausteine · Bereiche · Tablet · Phone ·
   Motion. Kein Hexwert außerhalb des Tokenblocks.

   Die Palette ist aus der Vorlage gemessen: ein Fast-Schwarz, ein helles
   Grau, Weiß und ein Bernstein. Das Fast-Schwarz ist der Charakter — ein
   Autohaus zeigt Lack, und Lack braucht dunkle Flächen, damit er glänzt.

   Der Bernstein liegt nur auf Knöpfen, Preisen und Bereichsmarken. Flächig
   wäre er Warnfarbe.
   ========================================================================== */

:root {
  /* --- Farben, aus der Vorlage gemessen --------------------------------- */
  --tief: #070707;          /* Hero, Bänder, Fußzeile */
  --dunkel: #171717;        /* erhobene Fläche auf Dunkel */
  --grund: #f2f2f2;         /* der helle Seitengrund */
  --grund-tief: #e7e7e7;    /* abgesetzter Streifen */
  --erhoben: #ffffff;       /* Karten — und nur die */
  --signal: #ffbf00;        /* Bernstein */
  --signal-tief: #8a6300;   /* Bernstein als Text auf Hell */

  /* --- Schrift ---------------------------------------------------------- */
  --text: #070707;
  --text-leise: #565656;
  --text-hell: #ffffff;
  --text-hell-leise: rgba(255, 255, 255, 0.68);

  /* --- Linien ----------------------------------------------------------- */
  --linie: #dcdcdc;
  --linie-stark: #c4c4c4;
  --linie-hell: rgba(255, 255, 255, 0.16);

  /* --- Maße ------------------------------------------------------------- */
  --schale: 1280px;
  --schale-schmal: 820px;
  --rand: 24px;
  --radius: 10px;
  --radius-gross: 16px;
  /* Knöpfe sind in der Vorlage leicht gerundete Rechtecke, keine Pillen — hier
     stand bis zum 27.08.2026 999px. Derselbe Fund wie bei Haarfein; er zog
     sich durch die Sammlung, weil die Pille bequemer ist als das Nachmessen.
     Chips und Schlagwörter bleiben rund: das sind keine Knöpfe. */
  --radius-knopf: 6px;

  /* --- Rhythmus --------------------------------------------------------- */
  --raum-1: 8px;
  --raum-2: 16px;
  --raum-3: 24px;
  --raum-4: 40px;
  --raum-5: 64px;
  --raum-6: 96px;
  --bereich: clamp(72px, 8.5vw, 118px);

  /* Hoehe der Kopfleiste. Steht als Token, weil das Hero um genau diesen
     Betrag nach oben rutscht — zwei Werte, die auseinanderlaufen koennen,
     waeren ein weisser Streifen oder eine verdeckte Ueberschrift. */
  --kopf-hoehe: 72px;
  /* Der durchsichtige Rahmen unter dem Kopf. Er zaehlt zur Hoehe und muss
     deshalb in jede Rechnung, die den Kopf ueberlagert — siehe den
     Kommentar bei `main > .hero:first-child`. */
  --kopf-rahmen: 1px;

  /* --- Schriftgrößen ---------------------------------------------------- */
  /* Aus der Vorlage genommen, nicht gegriffen: deren Hero-Zeile laeuft bei
     1440 px zweizeilig und bleibt deutlich unter dem, was hier vorher stand
     (bis 4rem). Ein Titel, der die halbe Bildhoehe fuellt, wirkt nicht
     souveraen, sondern bemueht — und vor allem sieht er nicht aus wie die
     Seite, die nachgebaut werden soll. */
  --t1: clamp(2rem, 3.7vw, 3.3rem);
  --t2: clamp(1.7rem, 2.9vw, 2.6rem);
  --t3: 1.18rem;
  --fliess: 1.0625rem;
  --klein: 0.9375rem;
  --winzig: 0.8125rem;

  /* --- Bewegung --------------------------------------------------------- */
  --weich: cubic-bezier(0.22, 0.61, 0.36, 1);
  --zeit: 0.5s;
}

/* ------------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--fliess);
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t1); }
h2 { font-size: var(--t2); }
h3 { font-size: var(--t3); line-height: 1.3; }
.hell { color: var(--text-hell); }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.sprite { position: absolute; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprung {
  position: absolute; left: var(--rand); top: -60px; z-index: 100;
  background: var(--signal); color: var(--tief);
  padding: 10px 18px; border-radius: var(--radius);
  transition: top 0.2s var(--weich);
}
.sprung:focus-visible { top: 12px; }

:focus-visible { outline: 2px solid var(--signal-tief); outline-offset: 3px; border-radius: 3px; }

.schale {
  width: 100%;
  max-width: var(--schale);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.schale--schmal { max-width: var(--schale-schmal); }

.sym { width: 19px; height: 19px; flex: none; }

/* --------------------------------------------------------------- Bausteine */

.augenmerk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--winzig);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-tief);
  margin-bottom: var(--raum-3);
}
.augenmerk::before {
  content: '';
  width: 22px; height: 2px;
  background: currentColor;
  flex: none;
}
.augenmerk--hell { color: var(--signal); }

.bereich-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--raum-4);
  align-items: end;
  margin-bottom: var(--raum-5);
}
.bereich-lead { color: var(--text-leise); max-width: 56ch; }
.bereich-lead--hell { color: var(--text-hell-leise); }

/* --- Knöpfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--klein);
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--radius-knopf);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--weich), color 0.2s var(--weich),
              border-color 0.2s var(--weich), transform 0.2s var(--weich);
}
.knopf--gross { padding: 15px 28px; font-size: 1rem; }
.knopf--breit { width: 100%; padding: 15px 28px; font-size: 1rem; }

.knopf--voll { background: var(--tief); color: var(--text-hell); }
.knopf--voll:hover { background: var(--dunkel); transform: translateY(-1px); }

.knopf--signal { background: var(--signal); color: var(--tief); }
.knopf--signal:hover { background: #ffd042; transform: translateY(-1px); }

/* Weiss gefuellt — so setzt die Vorlage den ersten Knopf im Hero. Bernstein
   bleibt dem Kleinen vorbehalten: Preise, Bereichsmarken, Anfuehrungszeichen.
   Flaechig waere er dort Warnfarbe, und die Vorlage setzt ihn im Hero auch
   nicht ein. */
.knopf--hell { background: var(--text-hell); color: var(--tief); }
.knopf--hell:hover { background: #fff; transform: translateY(-1px); }

.knopf--rand { border-color: var(--linie-hell); color: var(--text-hell); }
.knopf--rand:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-1px); }

/* Hier stand bis zum 10.09.2026 die obere Leiste mit Mail, Telefon und
   Anschrift. Entfernt auf Ansage des Betreibers, damit das Schwarz des Hero
   ohne Kante bis an die Oberkante läuft. Begründung und Nachweis, dass die
   Angaben zweimal woanders stehen: im Kommentar in `index.html`. */

/* ------------------------------------------------------------------- Kopf */

/* Der Kopf liegt **auf** dem Hero, nicht darüber.
 *
 * Die Vorlage setzt Wortmarke, Navigation und Knopf transparent ins Bild; das
 * Hero läuft randlos bis unter die Leiste. Hier stand bis zum 23.08.2026 ein
 * eigener heller Balken davor — ein weißer Streifen über dem Bild, den die
 * Vorlage nicht hat. Das war keine Entscheidung, sondern beim Bauen so
 * entstanden (`nachbau.md`, Schritt 0).
 *
 * Sobald der Hero durchgescrollt ist, braucht die Leiste einen Grund, sonst
 * steht helle Schrift auf hellem Inhalt. Das erledigt `.kopf--fest`, gesetzt
 * von `main.js`. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s var(--weich), border-color 0.25s var(--weich);
}

/* Negativer Versatz in Kopfhöhe: das Hero rutscht unter die Leiste, statt
   nach ihr zu beginnen. Der Innenabstand oben gibt der Schrift den Platz
   zurück, damit sie nicht unter der Navigation klebt. */
/* `main` steht zwischen Kopf und Hero, ein Geschwisterselektor greift also
   nicht — das kostete einen Durchgang. */
/* **Der Hero rutscht um die volle Kopfhoehe hinauf, Rahmen eingerechnet.**
   Bis zum 10.09.2026 stand hier `-1 * var(--kopf-hoehe)`, also 72px — der
   Kopf ist aber 73px hoch: `min-height: 72px` plus den 1px `border-bottom`,
   der ueber dem Hero durchsichtig ist. In der uebrig bleibenden Zeile stand
   der helle Body-Grund, quer ueber die volle Fensterbreite.

   Genau diesen Strich hat der Betreiber gemeint. Er hat dafuer die obere
   Leiste entfernen lassen — die Leiste war es nicht, sie hat ihn nur
   verdeckt: zwischen zwei dunklen Flaechen faellt eine helle Zeile weniger
   auf als ueber einem Foto. Die Leiste bleibt trotzdem weg, das war eine
   eigene Ansage; der Strich ist dieser eine Rechenfehler.

   `--kopf-rahmen` steht als Token daneben, damit der Rahmen nicht das
   naechste Mal wieder aus der Rechnung faellt. `pruefe-hero.mjs` misst
   die oberste Bildzeile bei jedem Lauf. */
main > .hero:first-child { margin-top: calc(-1 * (var(--kopf-hoehe) + var(--kopf-rahmen))); }
main > .hero:first-child .hero__innen { padding-top: calc(var(--kopf-hoehe) + var(--kopf-rahmen)); }

.kopf .logo__mark { color: var(--signal); }
.kopf .logo__wort { color: var(--text-hell); }
.kopf .nav a { color: rgba(255, 255, 255, 0.72); }
.kopf .nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.kopf .nav a[aria-current='true'] { color: #fff; background: rgba(255, 255, 255, 0.16); }
.kopf .burger { border-color: rgba(255, 255, 255, 0.35); }
.kopf .burger__balken,
.kopf .burger__balken::before,
.kopf .burger__balken::after { background: var(--text-hell); }

.kopf--fest {
  background: rgba(242, 242, 242, 0.92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linie);
}
.kopf--fest .logo__mark { color: var(--tief); }
.kopf--fest .logo__wort { color: var(--text); }
.kopf--fest .nav a { color: var(--text-leise); }
.kopf--fest .nav a:hover { color: var(--text); background: rgba(7, 7, 7, 0.06); }
.kopf--fest .nav a[aria-current='true'] { color: var(--text); background: rgba(7, 7, 7, 0.08); }
.kopf--fest .burger { border-color: var(--linie-stark); }
.kopf--fest .burger__balken,
.kopf--fest .burger__balken::before,
.kopf--fest .burger__balken::after { background: var(--tief); }
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  min-height: var(--kopf-hoehe);
}

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__mark { width: 30px; height: 30px; color: var(--tief); flex: none; }
.logo--hell .logo__mark { color: var(--signal); }
.logo__wort {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.025em;
}
.logo--hell .logo__wort { color: var(--text-hell); }

.nav ul { display: flex; align-items: center; gap: 2px; }
.nav a {
  display: block;
  text-decoration: none;
  font-size: var(--klein);
  color: var(--text-leise);
  padding: 9px 14px;
  border-radius: var(--radius-knopf);
  transition: color 0.2s var(--weich), background 0.2s var(--weich);
}
.nav a:hover { color: var(--text); background: rgba(7, 7, 7, 0.06); }
.nav a[aria-current='true'] { color: var(--text); font-weight: 600; background: rgba(7, 7, 7, 0.08); }

.kopf__aktion { display: flex; align-items: center; gap: var(--raum-2); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-knopf);
  background: none;
  position: relative;
  cursor: pointer;
}
.burger__balken,
.burger__balken::before,
.burger__balken::after {
  position: absolute;
  left: 50%; width: 17px; height: 2px;
  background: var(--text);
  transform: translateX(-50%);
  transition: transform 0.3s var(--weich), opacity 0.2s var(--weich);
}
.burger__balken { top: 50%; margin-top: -1px; }
.burger__balken::before { content: ''; top: -6px; left: 0; transform: none; }
.burger__balken::after { content: ''; top: 6px; left: 0; transform: none; }
.burger[aria-expanded='true'] .burger__balken { background: transparent; }
.burger[aria-expanded='true'] .burger__balken::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__balken::after { transform: translateY(-6px) rotate(-45deg); }

.mobilnav { overflow: hidden; background: var(--grund); border-top: 1px solid var(--linie); }
.mobilnav ul { padding: var(--raum-2) var(--rand) var(--raum-3); }
.mobilnav a {
  display: block; padding: 13px 0; text-decoration: none;
  font-weight: 500; border-bottom: 1px solid var(--linie);
}
.mobilnav li:last-child a { border-bottom: 0; }

/* ------------------------------------------------------------------- Hero */

.hero {
  position: relative;
  background: var(--tief);
  color: var(--text-hell);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* Untergrenze und nicht nur `vh`: die Bildpipeline nimmt Kacheln in einem
     750 bzw. 800 px hohen Fenster auf, und ein reines `vh` liesse den Hero
     dabei zusammenschrumpfen — die Kachel zeigte dann einen Streifen des
     naechsten Bereichs.

     Die Werte sind am 27.08.2026 an der Vorlage nachgemessen worden. Dort ist
     der Hero rund 1035 px hoch und der Textblock sitzt weit oben darin: unter
     den Knoepfen bleiben 345 px Bild frei. Hier waren es 840 px Hoehe und
     109 px Luft — der Text klebte am unteren Rand. Genau das hat der
     Betreiber gemeint mit „Drivehub steht weiter oben". */
  min-height: max(1000px, min(88vh, 1040px));
  padding-top: clamp(64px, 8vw, 110px);
  padding-bottom: clamp(96px, 24vw, 345px);
}
.hero__grund { position: absolute; inset: 0; z-index: -2; }

/* Das Bild fuellt nicht mehr die ganze Breite, sondern steht rechts.
 *
 * Seit dem 10.09.2026 traegt der Hero die schwarze Limousine. Ueber die volle
 * Breite gelegt steht ihr Kuehlergrill — die hellste Stelle des Bildes —
 * genau unter dem Vorspann, und der war dort nicht mehr zu lesen. Genau davor
 * warnt `assets/HERKUNFT.json` beim alten Hauptbild: **wer mehr Wirkung will,
 * braucht eine freie linke Bildhaelfte, nicht einen staerkeren Schleier.**
 *
 * 70 % Breite rechts geben sie: gemessen bei 1470 px endet die laengste
 * Zeile des Vorspanns bei 645 px, das Bild setzt bei 441 px an und ist bis
 * 764 px durchsichtig — der Text steht damit ganz auf Schwarz. Links bleibt
 * `--tief` stehen, und weil der Bildgrund selbst Schwarz ist, ist die Kante
 * nicht zu sehen; die Maske loest die ersten 22 % zusaetzlich auf, damit sie
 * es auch auf einem hellen Schirm nicht wird. */
.hero__grund img {
  display: block;
  width: 70%;
  height: 100%;
  margin-left: auto;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
  mask-image: linear-gradient(to right, transparent 0%, #000 22%);
}

/* Der Schleier dunkelt von unten links auf — dort steht die Schrift, und der
   Wagen bleibt rechts oben frei. */
.hero__schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* Von unten: dort steht die Schrift, und ein heller Kühlergrill genau
       darunter frisst sie sonst auf.

       Die Werte sind am 10.09.2026 neu gesetzt worden — **zum ersten Mal an
       einem Schleier, der wirklich vor dem Bild liegt.** Vorher stand hier
       0,82 bei 30 % und 0,34 bei 62 %; das war die Antwort auf einen
       Verlauf, den man nicht sah, und mit dem Fehler behoben haette es den
       Wagen fast vollstaendig zugedeckt. */
    linear-gradient(to top,
      rgba(7, 7, 7, 0.88) 0%,
      rgba(7, 7, 7, 0.62) 26%,
      rgba(7, 7, 7, 0.2) 58%,
      rgba(7, 7, 7, 0.02) 84%),
    /* Von links: haelt die Textspalte zu, laesst den Wagen rechts frei. Seit
       das Bild nur noch 70 % der Breite einnimmt, hat er dort ohnehin wenig
       zu tun — er faengt nur den Teil des Vorspanns ab, der ueber die
       Bildkante hinausragt. */
    linear-gradient(100deg,
      rgba(7, 7, 7, 0.72) 0%,
      rgba(7, 7, 7, 0.34) 38%,
      rgba(7, 7, 7, 0.06) 68%,
      transparent 100%);
}

.hero h1 { max-width: 24ch; }
.hero__lead { margin-top: var(--raum-3); max-width: 48ch; color: var(--text-hell-leise); }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-top: var(--raum-4); }

/* -------------------------------------------------------- Fahrzeugklassen */

.klassen { padding-block: var(--bereich); }
.klassen__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--raum-3);
  margin-top: var(--raum-5);
}
.klassen__liste li {
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: var(--raum-4) var(--raum-3) var(--raum-3);
  display: grid;
  gap: var(--raum-3);
  /* **Vier Eigenschaften, und die Reihenfolge hat einen Grund.**

     Hier standen bis zum 11.09.2026 nur `border-color` und `transform`. Weil
     diese Regel spezifischer ist als `.anim`, hat sie deren Uebergang
     vollstaendig ersetzt: Die Deckkraft bekam gar keinen, die vier Kacheln
     sprangen in einem Bild auf 1 statt einzublenden, und die Bewegung lief
     0,25 s statt der 0,5 s, die Abschnitt 10 der SPEZIFIKATION zusagt. Ein
     Bereich der Seite verhielt sich anders als alle uebrigen einundzwanzig.

     `opacity` und `transform` tragen deshalb wieder die Einblenddauer. Das
     Anheben beim Ueberfahren laeuft ueber die eigenstaendige Eigenschaft
     `translate` und behaelt seine 0,25 s — zwei Dauern auf *einer*
     Eigenschaft gehen nicht, zwei Eigenschaften nebeneinander schon. */
  transition:
    opacity var(--zeit) var(--weich),
    transform var(--zeit) var(--weich),
    border-color 0.25s var(--weich),
    translate 0.25s var(--weich);
}
.klassen__liste li:hover { border-color: var(--tief); translate: 0 -2px; }
/* Die Silhouette ist breit und flach — deshalb eine eigene Größe statt `.sym`. */
.klassen__bild { width: 100%; max-width: 130px; height: auto; color: var(--tief); }
.klassen__name {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.klassen__anzahl { color: var(--text-leise); font-size: var(--klein); }

/* -------------------------------------------------------------- Fahrzeuge */

.fahrzeuge {
  padding-block: var(--bereich);
  background: var(--grund-tief);
  border-block: 1px solid var(--linie);
}
.fahrzeuge__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
}
.fahrzeug {
  background: var(--erhoben);
  border-radius: var(--radius-gross);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fahrzeug__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--tief);
}
.fahrzeug__rumpf { padding: var(--raum-3); display: grid; gap: var(--raum-3); flex: 1; align-content: start; }

.fahrzeug__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--raum-2); }
.fahrzeug__preis {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.fahrzeug__preishinweis { font-size: var(--winzig); color: var(--text-leise); margin-top: 2px; text-align: right; }
.fahrzeug__marken { display: flex; gap: 8px; flex-wrap: wrap; }
.fahrzeug__marke {
  font-size: var(--winzig);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--text-leise);
}

.fahrzeug__daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--raum-3); }
.fahrzeug__daten div { display: grid; gap: 1px; }
.fahrzeug__daten dt { font-size: var(--winzig); color: var(--text-leise); }
.fahrzeug__daten dd { margin: 0; font-size: var(--klein); font-weight: 600; }

/* Der Verbrauchsblock steht abgesetzt — er ist Pflichtangabe und keine
   Werbefläche, und das darf man ihm ansehen. */
.fahrzeug__verbrauch {
  border-top: 1px solid var(--linie);
  padding-top: var(--raum-3);
  font-size: var(--winzig);
  color: var(--text-leise);
  display: grid;
  gap: 4px;
}
.fahrzeug__klasse {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--text);
}
.fahrzeug__klasse b {
  display: grid;
  place-items: center;
  min-width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--signal);
  color: var(--tief);
  font-size: var(--winzig);
}
.fahrzeug__knopf {
  margin-top: auto;
  padding: 0 var(--raum-3) var(--raum-3);
}

.verbrauchshinweis {
  margin-top: var(--raum-4);
  font-size: var(--winzig);
  color: var(--text-leise);
  max-width: 90ch;
  border-left: 2px solid var(--linie-stark);
  padding-left: var(--raum-3);
}

/* ------------------------------------------------------------------ Band */

.band { background: var(--tief); }
.band img { width: 100%; height: clamp(280px, 38vw, 520px); object-fit: cover; object-position: 50% 42%; }

/* ------------------------------------------------------------- Leistungen */

.leistungen { padding-block: var(--bereich); }
.leistungen__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raum-3);
}
.leistungen__liste li {
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: var(--raum-4);
  display: grid;
  gap: var(--raum-3);
  align-content: start;
}
.leistungen__sym {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--tief);
  color: var(--signal);
  display: grid;
  place-items: center;
}
.leistungen__sym .sym { width: 24px; height: 24px; }
.leistungen__liste p { color: var(--text-leise); }
.leistungen__knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--klein);
  text-decoration: none;
  justify-self: start;
}
.leistungen__knopf .sym { width: 17px; height: 17px; transition: transform 0.25s var(--weich); }
.leistungen__liste li:hover .leistungen__knopf .sym { transform: translateX(4px); }

/* --- Repräsentatives Beispiel ------------------------------------------- */

.beispiel {
  margin-top: var(--raum-3);
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: var(--raum-4);
}
.beispiel__titel {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: var(--raum-3);
}
.beispiel__zeilen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
}
.beispiel__zeilen div { display: grid; gap: 2px; }
.beispiel__zeilen dt { font-size: var(--winzig); color: var(--text-leise); }
.beispiel__zeilen dd {
  margin: 0;
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
}
.beispiel__hinweis {
  margin-top: var(--raum-3);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--linie);
  font-size: var(--winzig);
  color: var(--text-leise);
}

/* --------------------------------------------------------------- Betrieb */

.betrieb {
  padding-block: var(--bereich);
  background: var(--grund-tief);
  border-block: 1px solid var(--linie);
}
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
}
.kennzahlen li {
  background: var(--erhoben);
  border-radius: var(--radius-gross);
  padding: var(--raum-4) var(--raum-3);
}
.kennzahlen__zahl {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.kennzahlen li p:last-child { color: var(--text-leise); font-size: var(--klein); margin-top: 10px; }

.betrieb__punkte { margin-top: var(--raum-3); display: grid; gap: var(--raum-2); }
.betrieb__punkte li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--raum-2);
  background: var(--erhoben);
  border-radius: var(--radius);
  padding: var(--raum-3);
  font-size: var(--klein);
}
.betrieb__punkte .sym { color: var(--signal-tief); margin-top: 2px; }

/* --------------------------------------------------------------- Stimmen */

.stimmen { padding-block: var(--bereich); }
.stimmen__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--raum-3);
  margin-top: var(--raum-5);
}
.stimmen__liste li {
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: var(--raum-3);
  display: grid;
  gap: var(--raum-3);
  align-content: start;
}
.stimmen__zeichen {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 0.5;
  color: var(--signal-tief);
}
.stimmen__text { font-size: var(--klein); }
.stimmen__wer { font-weight: 600; font-size: var(--klein); }
.stimmen__ort { color: var(--text-leise); font-size: var(--winzig); }

/* -------------------------------------------------------------------- FAQ */

.faq-bereich { padding-block: var(--bereich); background: var(--grund-tief); border-block: 1px solid var(--linie); }
.faq { margin-top: var(--raum-5); }
.faq__eintrag { border-bottom: 1px solid var(--linie-stark); }
.faq__frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  background: none;
  border: 0;
  padding: var(--raum-3) 0;
  font: inherit;
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.faq__zeichen {
  position: relative;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--erhoben);
  border: 1px solid var(--linie-stark);
  transition: background 0.25s var(--weich), border-color 0.25s var(--weich);
}
.faq__zeichen::before,
.faq__zeichen::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 1.8px;
  background: var(--text);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--weich);
}
.faq__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__eintrag[data-offen] .faq__zeichen { background: var(--signal); border-color: var(--signal); }
.faq__eintrag[data-offen] .faq__zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__antwort { height: 0; overflow: hidden; transition: height 0.3s var(--weich); }
.faq__antwort p { padding-bottom: var(--raum-3); color: var(--text-leise); }

/* --------------------------------------------------------------- Kontakt */

.kontakt { padding-block: var(--bereich); background: var(--tief); color: var(--text-hell); }
.kontakt__innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--raum-6);
  align-items: start;
}
.kontakt__daten { margin-top: var(--raum-4); display: grid; gap: var(--raum-3); }
.kontakt__daten li { display: grid; grid-template-columns: 22px 1fr; gap: var(--raum-2); }
.kontakt__daten .sym { color: var(--signal); margin-top: 3px; }
.kontakt__daten a { text-decoration: none; }
.kontakt__daten a:hover { color: var(--signal); }
.kontakt__daten dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--raum-2); }
.kontakt__daten dt { color: var(--text-hell-leise); font-size: var(--klein); }
.kontakt__daten dd { margin: 0; font-size: var(--klein); }

/* --- Formular ----------------------------------------------------------- */

.formular {
  background: var(--erhoben);
  border-radius: var(--radius-gross);
  padding: var(--raum-4);
  display: grid;
  gap: var(--raum-3);
  color: var(--text);
}
.feld { display: grid; gap: 7px; }
.feld--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-3); }
.feld--paar > div { display: grid; gap: 7px; }
.feld label { font-size: var(--klein); font-weight: 600; }
.feld input,
.feld select,
.feld textarea {
  font: inherit;
  font-size: var(--klein);
  color: var(--text);
  background: var(--grund);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s var(--weich), background 0.2s var(--weich);
}
.feld textarea { resize: vertical; min-height: 104px; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus { background: #fff; border-color: var(--tief); outline: none; }
.feld input[aria-invalid='true'] { border-color: #b3261e; background: #fff; }

.formular__hinweis { font-size: var(--winzig); color: var(--text-leise); }
.formular__meldung { font-size: var(--klein); font-weight: 600; color: var(--signal-tief); }
.formular__meldung:empty { display: none; }

/* ------------------------------------------------------------- Abschluss */

.abschluss {
  position: relative;
  padding-block: clamp(72px, 9vw, 130px);
  background: var(--tief);
  color: var(--text-hell);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.abschluss__grund { position: absolute; inset: 0; z-index: -2; }
.abschluss__grund img { width: 100%; height: 100%; object-fit: cover; }
.abschluss__schleier {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(7, 7, 7, 0.86), rgba(7, 7, 7, 0.7) 50%, rgba(7, 7, 7, 0.92));
}
.abschluss h2 { max-width: 20ch; margin-inline: auto; }
.abschluss > .schale > p { margin-top: var(--raum-3); color: var(--text-hell-leise); max-width: 56ch; margin-inline: auto; }
.abschluss__knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-2); justify-content: center; margin-top: var(--raum-4); }

/* ------------------------------------------------------------------- Fuß */

.fuss { background: var(--tief); color: var(--text-hell-leise); overflow: hidden; }
.fuss__innen {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--raum-5) var(--raum-4);
  padding-block: var(--raum-6) var(--raum-5);
}
.fuss__marke p { margin-top: var(--raum-3); font-size: var(--klein); max-width: 34ch; }
.fuss__titel {
  font-size: var(--winzig);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--raum-3);
}
.fuss__liste { display: grid; gap: 11px; font-size: var(--klein); }
.fuss__liste li { display: flex; gap: 10px; align-items: flex-start; }
.fuss__liste .sym { width: 16px; height: 16px; color: var(--signal); margin-top: 4px; }
.fuss__liste a { text-decoration: none; }
.fuss__liste a:hover { color: var(--text-hell); }
.fuss__zeit strong { display: block; color: var(--text-hell); font-weight: 600; }

/* Die Wortmarke ganz groß als Abschluss — wie in der Vorlage. Sie wird unten
   angeschnitten, deshalb `overflow: hidden` am Fuß. */
.fuss__gross {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(3.5rem, 19vw, 17rem);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.07);
  text-align: center;
  margin-bottom: calc(var(--raum-3) * -1);
  text-wrap: nowrap;
  user-select: none;
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-4);
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--linie-hell);
  padding-block: var(--raum-3);
  font-size: var(--winzig);
}
.fuss__rechtlich { display: flex; gap: var(--raum-3); }
.fuss__rechtlich a { text-decoration: none; }
.fuss__rechtlich a:hover { color: var(--signal); }

/* =============================================================== Tablet === */

@media (max-width: 1080px) {
  .klassen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fahrzeuge__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stimmen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Die 70/22 des Hero sind bei 1470px gemessen. Schmaler tragen sie nicht:
   Die Textspalte wird nur wenig schmaler, das Bild dagegen im gleichen
   Verhaeltnis — der Vorspann laeuft dann rechts in den hellen Kuehlergrill.
   Der `abnahme-pruefer` hat das am 10.09.2026 auf 1024 und 834 nachgemessen
   (59px bzw. mehr auf vollem Bild, Spitzen bis 211 von 255).

   Deshalb zwei Zwischenstufen, in denen das Bild zurueckweicht statt der
   Schrift. `pruefe-hero.mjs` misst seither nicht mehr den ganzen
   Vorspann, sondern den Teil rechts vom Maskenende. */
@media (max-width: 1199px) {
  .hero__grund img {
    width: 62%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
    mask-image: linear-gradient(to right, transparent 0%, #000 26%);
  }

  /* **Unterhalb dieser Breite steht der Kopf auf hellem Grund, und das Hero
     beginnt darunter.** Nachgetragen am 11.09.2026 aus `referenz/`, nachdem
     der `abnahme-pruefer` es gemeldet hat.

     Die Vorlage macht das so, und zwar nur hier: Auf 1440 liegen Leiste und
     Navigation durchsichtig ueber dem Foto, weisse Schrift, das Foto beginnt
     bei y = 0. Auf 1024 stehen beide auf Weiss mit **harter Unterkante bei
     y = 92**, und das Foto faengt erst darunter an. Der Nachbau war in beiden
     Breiten durchsichtig — das war keine Entscheidung, sondern eine, die nie
     jemand getroffen hat.

     **Die Schwelle selbst ist ungemessen.** Zwei Aufnahmen (1024 und 1440)
     geben keinen Umbruchpunkt her; 1199 ist hier gewaehlt, weil das Hero an
     derselben Stelle ohnehin umbricht. Wer die echte Zahl hat, setzt sie ein
     und streicht diesen Absatz. */
  .kopf {
    background: var(--grund);
    border-bottom-color: var(--linie);
  }
  .kopf .logo__mark { color: var(--tief); }
  .kopf .logo__wort { color: var(--text); }
  .kopf .nav a { color: var(--text-leise); }
  .kopf .nav a:hover { color: var(--text); background: rgba(7, 7, 7, 0.06); }
  .kopf .nav a[aria-current='true'] { color: var(--text); background: rgba(7, 7, 7, 0.08); }
  .kopf .burger { border-color: var(--linie-stark); }
  .kopf .burger__balken,
  .kopf .burger__balken::before,
  .kopf .burger__balken::after { background: var(--tief); }

  /* Und damit faellt der Grund fuer den negativen Versatz weg: Das Hero soll
     hier **nach** der Leiste beginnen und nicht unter sie rutschen. Die
     Polsterung, die den Versatz ausglich, ebenfalls. */
  main > .hero:first-child { margin-top: 0; }
  main > .hero:first-child .hero__innen { padding-top: 0; }
}

@media (max-width: 899px) {
  .hero__grund img {
    width: 55%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
    mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
  .bereich-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); align-items: start; }
  .leistungen__liste { grid-template-columns: minmax(0, 1fr); }
  .kontakt__innen { grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  .beispiel__zeilen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================ Phone === */

@media (max-width: 640px) {
  :root { --rand: 18px; }

  :root { --kopf-hoehe: 64px; }
  .kopf__aktion .knopf--voll { display: none; }

  .hero__knoepfe .knopf { flex: 1 1 100%; }

  /* **Auf dem Telefon stapelt die Vorlage, statt zu ueberlagern — und sie
     dreht dabei Grund und Schrift um.** Nachgebaut am 11.09.2026 aus
     `referenz/vorlage-phone.jpg`, nachdem der `abnahme-pruefer` gemeldet hat,
     dass der Nachbau hier etwas anderes tut als die Vorlage und dass es
     nirgends als Abweichung begruendet steht.

     Gemessen an der Aufnahme (390 px breit, Zeilen mit dunkler Schrift):

         22– 34   Wortmarke und Burger, auf hellem Grund
        111–273   drei Zeilen Ueberschrift, schwarz, Zeilenabstand 60 px
        308–383   drei Zeilen Vorspann, grau
        422–470   erster Knopf, schwarz gefuellt, 49 px hoch
        478–527   zweiter Knopf, heller Umriss
        588–937   das Foto, randlos ueber die volle Breite, **350 px hoch**

     Also: heller Grund, dunkle Schrift, Knoepfe gefuellt und Umriss — und das
     Foto als eigener Block **unter** den Knoepfen, nicht dahinter. Der
     Schleier hat hier nichts mehr zu tun und wird abgeschaltet.

     **Was daran ungemessen ist:** ob die 350 px eine feste Hoehe sind oder
     ein Seitenverhaeltnis, und bei welcher Breite die Vorlage umbricht. Aus
     einer einzelnen Aufnahme laesst sich beides nicht unterscheiden; 640 px
     ist der Umbruchpunkt, den dieses Stylesheet ohnehin fuehrt.

     Hier stand bis dahin das Gegenteil: Bild oben ueber die halbe Hoehe, Text
     darunter auf dunklem Grund, und in `DESIGN-DNA.md` der Satz „Der Hero
     verliert das Fahrzeugbild an Hoehe". Das war sorgfaeltig gebaut und gegen
     `pruefe-hero.mjs` gefahren — nur eben nicht abgelesen. *Referenz schlaegt
     Text*, auch die eigene. */
  .hero {
    flex-direction: column;
    align-items: stretch;
    background: var(--grund);
    color: var(--text);
    /* **40 statt 47** (11.09.2026). Die 47 kamen aus „111 px minus 64 px
       Kopfhoehe" — nur sind die 111 px der Vorlage die erste **Tintenzeile**
       der Ueberschrift, waehrend `padding-top` die **Kastenoberkante** setzt.
       Dazwischen liegt die Luft ueber den Grossbuchstaben. Nachgemessen stand
       der Kasten bei 112 und die Tinte bei 118, also 7 px zu tief. */
    padding-top: 40px;
    padding-bottom: 0;
  }
  .hero h1 { color: var(--text); }
  .hero__lead { color: var(--text-leise); }

  /* Die beiden Knoepfe tauschen die Seite mit: gefuellt wird dunkel, der
     Umriss bekommt eine Linie, die man auf Hell sieht. Die Klassen im Markup
     bleiben, weil sie auf den grossen Breiten weiter richtig sind. */
  .hero__knoepfe .knopf--hell { background: var(--tief); color: var(--text-hell); }
  .hero__knoepfe .knopf--hell:hover { background: var(--dunkel); }
  .hero__knoepfe .knopf--rand { border-color: var(--linie-stark); color: var(--text); }
  .hero__knoepfe .knopf--rand:hover {
    background: rgba(7, 7, 7, 0.06);
    border-color: var(--text);
  }

  .hero__schleier { display: none; }

  /* Aus der Ebene hinter dem Text wird ein Block darunter. `order` statt
     einer Umstellung im Markup: auf den grossen Breiten muss `.hero__grund`
     weiter das erste Kind sein. */
  .hero__innen { order: 1; }
  .hero__grund {
    order: 2;
    position: static;
    inset: auto;
    z-index: auto;
    height: 350px;
    /* 588 minus 527, der Unterkante des zweiten Knopfes. */
    margin-top: 61px;
  }

  .hero__grund img {
    width: 100%;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* **Und die Mindesthoehe faellt weg.** Hier stand bis zum 11.09.2026 eine
     eigene Zeile fuer das Telefon; mit dem Umbau ist sie gestrichen worden,
     und damit griff wieder die Grundregel `max(1000px, …)` aus dem
     Hero-Block. Ergebnis: Das Foto endete bei 937 wie in der Vorlage, das
     Hero aber erst bei 1065 — 128 px leerer Grund darunter, den niemand
     gewollt hat. Die 1000 px sind hier kein abgelesener Wert, sondern ein
     geerbter.

     Der gestapelte Hero misst sich an seinem Inhalt: Polsterung, Text,
     Knoepfe, 350 px Foto. Abstand vom Fotoende zum naechsten Inhalt dann
     108 px wie in der Vorlage statt 200. */
  main > .hero:first-child { min-height: 0; }




  .klassen__liste { grid-template-columns: minmax(0, 1fr); }
  .fahrzeuge__liste { grid-template-columns: minmax(0, 1fr); }
  .kennzahlen { grid-template-columns: minmax(0, 1fr); }
  .stimmen__liste { grid-template-columns: minmax(0, 1fr); }
  .beispiel__zeilen { grid-template-columns: minmax(0, 1fr); }
  .beispiel { padding: var(--raum-3); }

  .feld--paar { grid-template-columns: minmax(0, 1fr); }
  .formular { padding: var(--raum-3); }
  .fuss__innen { grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); padding-block: var(--raum-5) var(--raum-4); }
}

/* =============================================================== Motion === */

.anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--zeit) var(--weich), transform var(--zeit) var(--weich);
}
.anim.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ============================================================ Rechtstexte ===

   Impressum und Datenschutz sind Pflichtseiten, keine Gestaltung. Beim
   Autohandel kommt einiges dazu: Registereintrag, Aufsichtsbehörde für die
   Kreditvermittlung und die Hinweise zur Sachmängelhaftung. */

.seitenkopf {
  background: var(--tief);
  color: var(--text-hell);
  padding-block: clamp(48px, 6vw, 78px);
}
.seitenkopf p { color: var(--text-hell-leise); margin-top: var(--raum-2); }

.rechtstext { padding-block: var(--bereich); }
.rechtstext .schale { max-width: 46rem; }
.rechtstext h2 {
  font-size: 1.35rem;
  margin-top: var(--raum-5);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie);
}
.rechtstext h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.rechtstext p, .rechtstext ul { margin-top: var(--raum-2); color: var(--text-leise); }
.rechtstext ul { list-style: disc; padding-left: 1.2em; }
.rechtstext li { margin-top: 6px; }
.rechtstext a { color: var(--text); text-decoration: underline; }
.rechtstext strong { color: var(--text); }
.rechtstext code { font-size: 0.9em; background: var(--grund-tief); border-radius: 3px; padding: 1px 5px; }

.rechtstext__hinweis {
  background: var(--erhoben);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius);
  padding: var(--raum-3);
  margin-bottom: var(--raum-5);
  font-size: var(--klein);
}
.rechtstext__hinweis strong { color: var(--signal-tief); }