/* Fahrzeugcenter Goms — „Schweizer Plakat, nachts auf dem Pass"
   CI: Schwarz / Rot / Weiss (Kundenvorgabe, keine dritte Akzentfarbe) */

@font-face {
  font-family: "Archivo Black";
  src: url("fonts/archivo-black-v23-latin_latin-ext-regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-v4-latin_latin-ext-regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-v4-latin_latin-ext-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-v4-latin_latin-ext-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-v4-latin_latin-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --nacht: #0e0a0b; /* Grundton, Rotstich */
  --fels: #171114; /* Fläche */
  --firn: #f4efee; /* Text warmweiss */
  --rot: #e2242d; /* der EINE Akzent */
  --glut: #7e151b; /* Akzent gedimmt */
  --nebel: #9a8f91; /* Sekundärtext */
  --linie: rgba(244, 239, 238, 0.14);
  --rot-text: var(
    --rot
  ); /* Text-Variante des Akzents (Hell-Thema dunkelt sie ab, GESETZ Kap. 11) */
  /* Abstand vom Container-Rand zur Fensterkante — Gegenstueck zur .wrap-Formel.
     Damit koennen Vollbild-Anschnitte exakt bis zur Kante laufen. Ein
     prozentualer Margin taugt dafuer NICHT: im Grid bezieht er sich auf die
     Spalte, nicht auf den Container — der Anschnitt schoss dadurch 330 px
     ueber den Bildschirm hinaus und das Motiv war zerschnitten (13.08.). */
  --rand: max(1.5rem, (100vw - 1200px) / 2);
  --display: "Archivo Black", "Arial Black", sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;

  /* ---------- Themenfeste Fixwerte (GESETZ Kap. 11) ----------
     Gelten IMMER, unabhaengig vom Schalter — fuer Kopf-Video, Sub-Head-Buehne,
     Nav-Glas, Fuss-Band und Foto-Overlays, die nie mit dem Thema wechseln. */
  --dunkel-fest: #0e0a0b;
  --fels-fest: #171114;
  --kalk-fest: #f4efee;
  --meta-fest: #9a8f91;

  color-scheme: dark;
}

/* ============================================================
   HELL = ausschliesslich per Schalter (Hamada 23.09.2026: Standard bleibt
   DUNKEL — abgenommener Look, CI Schwarz/Rot/Weiss). Kein Teil-Override:
   der komplette Token-Satz wird hier neu gesetzt.
   ============================================================ */
:root[data-thema="hell"] {
  --nacht: #f6f2f0; /* Seiten-Grund, warmes Off-White (kein Reinweiss) */
  --fels: #ffffff; /* Karten-/Panel-Flaeche */
  --firn: #1c1417; /* Text dunkel warm (deckt sich mit vorhandenen Literalen im Build) */
  --rot: #e2242d; /* Akzent bleibt CI-konstant */
  --glut: #7e151b;
  --nebel: #6b5f62; /* Sekundaertext, 5,8:1 auf --nacht */
  --linie: rgba(28, 20, 23, 0.14);
  --rot-text: #c81f27; /* etwas dunkler als --rot: 5,9:1 auf --nacht (statt 4,64:1) */

  color-scheme: light;
}

/* prefers-color-scheme steht hier BEWUSST nicht — Standard ist seit 29.09.2026 HELL (Hamada),
   auch wenn das Geraet auf dunkel steht (GESETZ Kap. 1). */

/* ---------- Themenfeste Buehnen (GESETZ Kap. 11) ----------
   Kopf-Video, Sub-Head-Buehnen, Nav-Glas und Fuss-Band bleiben in BEIDEN
   Themen dunkel: gescopet ueber dieselben Token-Namen, nicht Selektor fuer
   Selektor (BEM-Modifier ohne Basisklasse greifen sonst ins Leere). */
.nav,
.hero,
.subhead,
.footer {
  --nacht: var(--dunkel-fest);
  --fels: var(--fels-fest);
  --firn: var(--kalk-fest);
  --nebel: var(--meta-fest);
  --linie: rgba(244, 239, 238, 0.14);
  --rot-text: var(--rot);
  /* `color` MUSS hier erneut deklariert werden: Kinder erben sonst den
     bereits aufgeloesten Farbwert von body (var(--firn) dort ausgewertet,
     BEVOR diese Umdefinition greift) — Vererbung uebernimmt den fertigen
     Wert, nicht die Variable (Fund 23.09.2026: h1 in .hero/.subhead blieb
     im Hell-Thema dunkel auf dunklem Video, 1,05:1). */
  color: var(--firn);
}
.hero,
.subhead {
  background: var(--nacht);
}

/* ---------- Themenfeste dunkle Deko-Karten (Foto-Ersatz ohne echtes Bild) ----------
   .station-tafel/.bestand-live/.weg tragen einen fest dunklen Gradient
   (--fels-fest, s. o.) — ihre Schrift muss deshalb ebenso fest hell bleiben,
   sonst faellt dunkler Hell-Thema-Text auf den unveraendert dunklen Grund. */
.station-tafel,
.bestand-live,
.weg {
  --firn: var(--kalk-fest);
  --nebel: var(--meta-fest);
  --rot-text: var(--rot);
  color: var(--kalk-fest);
}

/* ---------- Themenfeste weisse Plakat-Buehne (Partner/Konditionen) ----------
   Umgekehrter Fall: bleibt IMMER hell mit dunkler Schrift, unabhaengig vom
   Thema (.buehne-weiss setzt background:var(--firn); color:var(--nacht)). */
.buehne-weiss {
  --nacht: var(--dunkel-fest);
  --firn: var(--kalk-fest);
  --rot-text: var(--rot);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--nacht);
  color: var(--firn);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition:
    background-color 240ms cubic-bezier(0.23, 1, 0.32, 1),
    color 240ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
::selection {
  background: var(--rot);
  color: var(--firn);
}

.wrap {
  width: min(1200px, calc(100% - 3rem));
  margin-inline: auto;
}
@media (max-width: 640px) {
  .wrap {
    width: calc(100% - 2.2rem);
  }
}

/* ---------- Typo ---------- */
.display {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--nebel);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 2.6rem;
  height: 2px;
  background: var(--rot);
  flex: none;
}
.rot {
  color: var(--rot-text);
}
.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--nebel);
  max-width: 40rem;
}
.lead strong {
  color: var(--firn);
  font-weight: 600;
}

/* ---------- Nav ---------- */
/* KEIN backdrop-filter direkt auf .nav: das Panel .nav-links haengt als
   position:fixed-Nachfahre in .nav, und filter/backdrop-filter auf einem
   Vorfahren erzeugt per Spezifikation dessen containing block fuer fixe
   Nachfahren — das Panel wird dann auf die 78-96px-Kopfzeile gestaucht statt
   auf den Viewport (Root Cause der Mobilmenue-Havarie, gemessen 13.08.:
   Panelhoehe 71px statt ~766px). Die Glas-Optik kommt jetzt aus einem
   ::before-Layer, der NICHT Vorfahre von .nav-links ist. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--nacht) 78%, transparent);
  border-bottom: 1px solid var(--linie);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
}
.marke {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
/* Echtes Kundenlogo (Wappen mit Schriftzug, von der Kundenwebsite in
   1555x828 geholt und beschnitten) — kein Zusatz-Balken, das Wappen trägt sich selbst. */
.marke img {
  /* Breites Wappen-Logo: über die BREITE skalieren, sonst wird der Schriftzug
     in der Nav unlesbar (12.08.). */
  width: 190px;
  height: auto;
  object-fit: contain;
}
.footer .marke img {
  width: 260px;
}
/* Footer-Claim (13.08.): war 6x als identisches Inline-style dupliziert
   (color/margin-top/max-width) — jetzt eine Klasse. */
.footer-claim {
  color: var(--nebel);
  margin-top: 1.2rem;
  max-width: 22rem;
}
@media (max-width: 900px) {
  .nav-links {
    inset: 96px 0 auto 0;
  }
}
@media (max-width: 480px) {
  .marke img {
    width: 148px;
  }
  .nav-inner {
    height: 78px;
  }
  .nav-links {
    inset: 78px 0 auto 0;
  }
}
.nav-links {
  display: flex;
  gap: 1.9rem;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 500;
}
.nav-links a {
  position: relative;
  padding: 0.4rem 0;
  color: var(--firn);
  opacity: 0.85;
}
.nav-links a:hover {
  opacity: 1;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--rot);
  transition: width 0.25s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  width: 100%;
}
.nav-cta {
  background: var(--rot);
  color: var(--firn);
  font-weight: 600;
  padding: 0.62rem 1.25rem;
  transition: background 0.2s;
}
.nav-cta:hover {
  background: var(--glut);
}
.burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.6rem;
}
.burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--firn);
  margin: 6px 0;
  transition: 0.3s;
}
@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--nacht);
    padding: 1.6rem;
    gap: 1.2rem;
    border-bottom: 1px solid var(--linie);
    transform: translateY(-130%);
    transition: transform 0.35s ease;
  }
  .nav-links.offen {
    transform: none;
  }
  .burger {
    display: block;
  }
  body.menu-offen .burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  body.menu-offen .burger span:nth-child(2) {
    opacity: 0;
  }
  body.menu-offen .burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.hero-medium {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-medium video,
.hero-medium canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Zwei Verläufe: von unten (Textblock) und von links (Leserichtung).
     Gemessen 12.08. — mit nur einem Verlauf fiel die H1 über hellen
     Scheinwerferflächen auf 1,0:1 Kontrast (§0e-58/Härtetest 3f). */
  /* Zurueckgedreht am 12. August: der Schleier lag mit 0,88 schon bei 34 %
     Hoehe ueber dem Bild und hat das teuerste Asset des Builds zu vier Fuenfteln
     uebermalt. Jetzt traegt das Video, der Text bekommt seinen Kontrast aus
     einem lokalen Verlauf hinter dem Textblock (.hero-inhalt::before). */
  background:
    linear-gradient(
      to top,
      var(--nacht) 3%,
      rgba(14, 10, 11, 0.55) 22%,
      rgba(14, 10, 11, 0.1) 52%,
      rgba(14, 10, 11, 0.34) 100%
    ),
    linear-gradient(
      to right,
      rgba(14, 10, 11, 0.62) 0%,
      rgba(14, 10, 11, 0.2) 42%,
      transparent 68%
    );
}
.subhead-buehne {
  position: relative;
  z-index: 1;
}
.hero-inhalt {
  position: relative;
  z-index: 2;
  isolation: isolate;
  /* KEIN width:100% — das hat die .wrap-Breite ausgehebelt und den Hero-Text
     bis an die Fensterkante laufen lassen (Fix 12.08.). */
}
.hero h1 {
  /* Minimum so gesetzt, dass "FAHRZEUGCENTER" auf 390px in eine Zeile passt
     (Text-Clip-Fix 12.08., §0e-58). */
  /* Der Titel ist lang — Grösse so, dass er auf 1440 in drei und auf 390 ohne
     Wortbruch umbricht (Fix 12.08.: vorher lief er in die Nav und brach mitten im Wort). */
  /* Titel ist jetzt kurz ("Autos fuer das Leben am Berg.") und darf deshalb
     wirklich gross werden — gerendert ~135 px bei 1440 (§0b Nr. 4). */
  font-size: clamp(2.6rem, 9.4vw, 9.5rem);
  margin: 1.1rem 0 1.4rem;
  hyphens: none;
}
.hero h1 em {
  font-style: normal;
  color: var(--rot-text);
}
.hero-beweis {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  margin-top: 1.8rem;
}
.hero-fakt {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nebel);
  border-left: 2px solid var(--rot);
  padding-left: 0.8rem;
}

/* ---------- Buttons ---------- */
.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--rot);
  color: var(--firn);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.95rem 1.8rem;
  transition:
    background 0.2s,
    transform 0.2s;
}
.btn:hover {
  background: var(--glut);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--linie);
}
.btn-ghost:hover {
  background: var(--fels);
  border-color: var(--nebel);
}
.btn-weiss {
  background: var(--nacht);
  color: var(--firn);
}
.btn-weiss:hover {
  background: #2a2225;
}

/* ---------- Sektionen / Rhythmus (variierend, §0b Nr. 7) ---------- */
.s-manifest {
  padding: clamp(3rem, 6vh, 4.5rem) 0;
  border-bottom: 1px solid var(--linie);
}
.s-stationen {
  /* Unten bewusst knapper als oben: nach Station 04 kam sonst ein ~190px
     tiefes schwarzes Band, in dem die rote Linie abrupt im Leeren endete
     (Sehen-Loop 13.08.). Oben bleibt der grosse Einstieg — dort BEGINNT die
     Linie als Ereignis. */
  padding: clamp(6rem, 14vh, 10rem) 0 clamp(2.5rem, 5vh, 4rem);
  position: relative;
}
.s-partner {
  padding: clamp(4.5rem, 8vh, 6rem) 0;
}
.s-finale {
  padding: clamp(6rem, 12vh, 9rem) 0;
}
/* Rhythmus-Kontrast (offener QA-Punkt, geschlossen 13.08.): die Werte lagen
   vorher alle zwischen 3,5 und 6,7 rem — gerendert kaum unterscheidbar, die
   Seite atmete überall gleich. Jetzt liegt zwischen der engsten und der
   weitesten Sektion ein Faktor von rund drei. */
.s-kompakt {
  padding: clamp(2.4rem, 4vh, 3.4rem) 0;
}
.s-breit {
  padding: clamp(5.5rem, 12vh, 9rem) 0;
}

.manifest {
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.45;
  font-weight: 500;
  max-width: 52rem;
}
.manifest em {
  font-style: normal;
  color: var(--rot-text);
}

/* ---------- Manifest-Szene: Satz links, Werkstattbild bis an die Fensterkante ----------
   Vorher stand hier ein 135-px-Satz ueber zwei volle Bildschirmhoehen, dessen
   Zeilen unter der fixen Nav abgeschnitten wurden, und rechts 400 px Schwarz
   (gemessen 13.08.). Jetzt traegt der Satz die linke Haelfte, das Bild die
   rechte — und laeuft ueber den Container hinaus bis zum Fensterrand
   (Referenz-Board: Heritage Saunas, Q-Industrial). */
.manifest-raster {
  display: grid;
  gap: 2.4rem;
}
@media (min-width: 900px) {
  .manifest-raster {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 4rem;
    align-items: stretch;
  }
  .manifest-bild {
    margin-right: calc(-1 * var(--rand));
  }
  /* Satz-Spalte auf Bildhoehe strecken und die Zahlenreihe an den unteren
     Bildrand verankern — schliesst die Leerflaeche unter dem Text, statt
     ihn mittig im Raum schweben zu lassen (Hamada-Korrektur 13.08.). */
  .manifest-satz {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
/* Statement-Zeile — Display-Schrift der Seite (wie der Hero-H1), eng
   gesetzt: ein Fliesstext-Satz in Body-Groesse wirkt nicht wie ein
   Statement (Hamada-Korrektur 13.08.). Rote Balken/halbe Saetze in
   voller Groesse sind Nr. 98: Rot bleibt auf einen eigenen, klar
   kleineren Nebensatz beschraenkt (siehe .manifest-pointe unten). */
.manifest-statement {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  max-width: 21ch;
  text-wrap: balance;
}
.manifest-liste {
  margin-top: 1.1rem;
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.35;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--nebel);
  max-width: 34ch;
}
.manifest-pointe {
  margin-top: 1.2rem;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 600;
  color: var(--rot-text);
  max-width: 28ch;
  line-height: 1.4;
}
/* Unterseiten: der Manifest-Satz steht ALLEIN in der Sektion, dort greift
   weiterhin die generische .manifest-Basisklasse (Fliesstext-Zitat ueber
   die volle Containerbreite) — nicht die Statement-Behandlung der
   Startseiten-Szene. */
.s-manifest > .wrap:not(.manifest-raster) .manifest {
  max-width: none;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.32;
  text-wrap: balance;
}
.manifest-bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.06);
}
.manifest-bild figcaption {
  margin-top: 0.9rem;
  color: var(--nebel);
  font-size: 0.9rem;
  line-height: 1.6;
  border-left: 2px solid var(--rot);
  padding-left: 0.8rem;
  max-width: 32rem;
}
@media (min-width: 900px) {
  .manifest-bild figcaption {
    padding-right: 3rem;
  }
}

/* Wort-Zahlen-Reihe — Spec-Bar-Raster statt Flex-Wrap-Zeile.
   Vorher brach die Reihe je nach Spaltenbreite zufaellig um, und der
   umgebrochene letzte Eintrag behielt seinen Trenner-Einzug und stand
   dadurch seltsam eingerueckt allein (Hamada-Korrektur 13.08.). Ein festes
   3-Spalten-Raster hat pro Eintrag denselben Nulleinzug, egal ob eine
   Zeile reicht oder nicht — und erdet die Satz-Spalte zugleich am unteren
   Bildrand (siehe .manifest-satz oben). */
.zahlenreihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.2rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.zahl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.9rem 1rem 0.9rem 0;
  border-right: 1px solid var(--linie);
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.15;
}
.zahl:last-child {
  border-right: none;
  padding-right: 0;
}
.zahl span[data-zaehl] {
  color: var(--rot-text);
  min-width: 1.6ch;
}
.zahl small {
  display: inline;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nebel);
  text-wrap: balance;
}
@media (max-width: 560px) {
  .zahlenreihe {
    grid-template-columns: 1fr;
  }
  .zahl {
    padding: 0.7rem 0;
    border-right: none;
    border-bottom: 1px solid var(--linie);
  }
  .zahl:last-child {
    border-bottom: none;
  }
}

/* ---------- Rote Linie / Stationen ---------- */
.linie-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.linie-svg path {
  stroke: var(--rot);
  stroke-width: 3;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(226, 36, 45, 0.65));
}
.station {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  padding: clamp(3rem, 7vh, 5.5rem) 0;
}
.station:nth-child(even) .station-text {
  order: 2;
}
.station-nr {
  font-family: var(--display);
  color: var(--rot-text);
  font-size: clamp(4.5rem, 9vw, 8rem);
  line-height: 1;
  opacity: 0.9;
}
.station-text h3 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  text-transform: uppercase;
  margin: 0.6rem 0 1rem;
}
.station-text p {
  color: var(--nebel);
  max-width: 30rem;
}
.station-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--firn);
  font-weight: 600;
  margin-top: 1.3rem;
  border-bottom: 2px solid var(--rot);
  padding-bottom: 0.2rem;
}
.station-link:hover {
  color: var(--rot-text);
}
.station-tafel {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  /* Themenfest dunkel (nicht var(--fels)): Platzhalter-Tafel ohne echtes Foto
     bleibt in beiden Themen eine dunkle Foto-Textur, statt mitten im
     Verlauf hell/dunkel zu brechen (GESETZ Kap. 11). */
  background: linear-gradient(
    145deg,
    var(--fels-fest) 0%,
    #1f171a 55%,
    var(--fels-fest) 100%
  );
  border: 1px solid var(--linie);
}
.station-tafel::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--rot), transparent);
  animation: kante 4.5s ease-in-out infinite;
}
/* Tafel mit echtem Bild: Bild füllt die Fläche, das Wort sitzt als Bildunterschrift
   unten links auf einem Verlauf (nicht mehr als Platzhalter mittig). */
.station-tafel picture,
.station-tafel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.station-tafel:has(img)::after {
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(to top, rgba(14, 10, 11, 0.92), transparent);
}
.station-tafel:has(img) .tafel-wort {
  inset: auto 0 0 0;
  display: block;
  padding: 1.1rem 1.3rem;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: 0.18em;
  color: rgba(244, 239, 238, 0.92);
  text-align: left;
  z-index: 2;
}
.station-tafel .tafel-wort {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: rgba(244, 239, 238, 0.16);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 1rem;
}
@keyframes kante {
  0%,
  100% {
    transform: translateX(-35%);
  }
  50% {
    transform: translateX(35%);
  }
}
@media (max-width: 820px) {
  .station {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .station:nth-child(even) .station-text {
    order: 0;
  }
  .linie-svg {
    left: 1.1rem;
    transform: none;
  }
}

/* ---------- Weisse Plakat-Bühne (Partner, Konditionen) ---------- */
.buehne-weiss {
  background: var(--firn);
  color: var(--nacht);
}
.buehne-weiss .eyebrow {
  color: #6d6366;
}
.buehne-weiss .lead {
  color: #55494c;
}
.buehne-weiss .lead strong {
  color: var(--nacht);
}
/* ---------- Partner-Bühne (13.08. neu) ----------
   Die alte `.partner-leiste` war eine vierspaltige Textleiste mit Haarlinien —
   auf einer weissen Flaeche wirkte das wie ein Drahtgitter, und rechts blieb
   die halbe Sektion leer. Jetzt: Namens-REGISTER links (Nummer, Name, Rolle,
   Linie), Hallenfoto rechts bis an die Fensterkante. */
.partner-raster {
  display: grid;
  gap: 2.6rem;
}
@media (min-width: 900px) {
  .partner-raster {
    grid-template-columns: 1.04fr 0.96fr;
    gap: 4.5rem;
    align-items: center;
  }
  .partner-bild {
    margin-right: calc(-1 * var(--rand));
  }
}
.partner-titel {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  margin-top: 1rem;
  line-height: 0.94;
}
.partner-register {
  list-style: none;
  margin-top: 2.6rem;
  border-top: 1px solid rgba(14, 10, 11, 0.16);
}
.partner-register li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.15rem 1rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(14, 10, 11, 0.16);
  transition:
    padding-left 0.3s ease,
    background 0.3s ease;
}
@media (min-width: 900px) {
  .partner-register li:hover {
    padding-left: 0.7rem;
    background: linear-gradient(
      90deg,
      rgba(226, 36, 45, 0.08),
      transparent 70%
    );
  }
}
.partner-register .p-nr {
  grid-row: span 2;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--rot-text);
}
.partner-register .p-wort {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  line-height: 1.15;
  color: #241d20;
}
.partner-register .p-rolle {
  grid-column: 2;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b5f62;
}
.partner-bild img {
  width: 100%;
  height: auto;
  /* Naturformat des Fotos (1200x750) — mit 4:3 wurde das Logoschild seitlich
     angeschnitten und war als Marke nicht mehr lesbar (Sehen-Loop 13.08.). */
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.partner-bild figcaption {
  margin-top: 0.9rem;
  color: #6d6366;
  font-size: 0.88rem;
  line-height: 1.6;
  border-left: 2px solid var(--rot);
  padding-left: 0.8rem;
  max-width: 32rem;
}
@media (min-width: 900px) {
  .partner-bild figcaption {
    padding-right: 3rem;
  }
}

.partner-leiste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(14, 10, 11, 0.12);
  border: 1px solid rgba(14, 10, 11, 0.12);
  margin-top: 3rem;
}
@media (min-width: 820px) {
  .partner-leiste {
    grid-template-columns: repeat(4, 1fr);
  }
}
.partner {
  background: var(--firn);
  /* Kein min-height und kein Graustufen-Filter mehr: die Kacheln enthalten
     reinen Text, der Filter war totes CSS aus der Logo-Planung und die
     150-px-Hoehe machte aus vier Woertern vier leere Kaesten (QA 12. August). */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.15rem 1.25rem;
  text-align: left;
  transition: background 0.25s;
}
.partner:hover {
  background: #fff;
}
.partner .p-wort {
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  color: #3a3134;
  transition: color 0.25s;
}
.partner:hover .p-wort {
  color: var(--rot-text);
}
.partner .p-rolle {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a7f82;
}

/* ---------- Fahrzeug-Karten (das EINE Card-Grid der Seite) ---------- */
.fzg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.6rem;
  margin-top: 3rem;
}
.fzg {
  background: var(--fels);
  border: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.25s,
    border-color 0.25s;
  position: relative;
  overflow: hidden;
}
.fzg:hover {
  transform: translateY(-4px);
  border-color: rgba(226, 36, 45, 0.55);
}
.fzg::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.fzg:hover::after {
  transform: none;
}
.fzg-bild {
  aspect-ratio: 16 / 10;
  background: linear-gradient(150deg, #1c1417, #241a1e 60%, #1c1417);
  position: relative;
}
.fzg-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fzg-bild .fzg-marke-wz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 3rem;
  color: rgba(244, 239, 238, 0.1);
  text-transform: uppercase;
}
.fzg-korpus {
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}
.fzg h3 {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
}
.fzg-daten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.fzg-daten span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--nebel);
  border: 1px solid var(--linie);
  padding: 0.22rem 0.6rem;
}
.fzg-preis {
  font-family: var(--display);
  font-size: 1.65rem;
  color: var(--firn);
  margin-top: auto;
}
.fzg-preis small {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--nebel);
  letter-spacing: 0.08em;
}
.fzg-ctas {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.fzg-ctas .btn {
  padding: 0.6rem 1.1rem;
  font-size: 0.88rem;
}

/* ---------- Klassen-Stationen (Miet) / Wege (Oldtimer): Zeilenform, kein 2. Grid ---------- */
.zeilen {
  margin-top: 3rem;
  border-top: 1px solid var(--linie);
}
.zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  gap: 1.6rem;
  align-items: center;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--linie);
  transition:
    background 0.2s,
    padding-left 0.3s;
}
.zeile:hover {
  background: rgba(226, 36, 45, 0.05);
  padding-left: 0.8rem;
}
.zeile-nr {
  font-family: var(--display);
  color: var(--rot-text);
  font-size: 1.4rem;
}
.zeile h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
}
.zeile p {
  color: var(--nebel);
  font-size: 0.98rem;
}
.zeile .tags,
.klasse .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.zeile .tags span,
.klasse .tags span {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--nebel);
  border: 1px solid var(--linie);
  padding: 0.18rem 0.55rem;
}
@media (max-width: 820px) {
  .zeile {
    grid-template-columns: auto 1fr;
  }
  .zeile p {
    grid-column: 1 / -1;
  }
  .zeile .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.buehne-weiss .zeilen {
  border-color: rgba(14, 10, 11, 0.15);
}
.buehne-weiss .zeile {
  border-color: rgba(14, 10, 11, 0.15);
}
.buehne-weiss .zeile:hover {
  background: rgba(226, 36, 45, 0.06);
}
.buehne-weiss .zeile p,
.buehne-weiss .zeile .tags span,
.buehne-weiss .klasse .tags span {
  color: #55494c;
  border-color: rgba(14, 10, 11, 0.2);
}

/* ---------- Unterseiten-Head (Sub-Hero) ---------- */
.subhead {
  position: relative;
  /* War 62svh bei ~330 px Inhalt — unten blieben 380 px tote Flaeche
     (QA 12. August). Jetzt sitzt der Text im unteren Anschnitt einer
     kompakteren Buehne. */
  min-height: 48svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 7rem 0 2.4rem;
}
@media (min-width: 1100px) {
  .subhead {
    min-height: 54svh;
  }
}
.subhead h1 {
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
}
.subhead h1 em {
  font-style: normal;
  color: var(--rot-text);
}

/* ---------- Formular ---------- */
.formular {
  max-width: 620px;
  display: grid;
  gap: 1.1rem;
  margin-top: 2.5rem;
}
.feld {
  display: grid;
  gap: 0.45rem;
}
.feld label {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nebel);
  font-weight: 600;
}
.feld input,
.feld select,
.feld textarea {
  background: var(--fels);
  border: 1px solid var(--linie);
  color: var(--firn);
  font: inherit;
  padding: 0.85rem 1rem;
  width: 100%;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: 2px solid var(--rot);
  outline-offset: 0;
  border-color: transparent;
}
.honig {
  position: absolute;
  left: -9999px;
  opacity: 0;
}
.zusage {
  font-size: 0.88rem;
  color: var(--nebel);
}

/* ---------- Bewertungen: Diashow (13.08.2026) ----------
   Echte Google-Rezensionen, statisch im HTML, ohne Fremd-Skript und ohne
   Consent (Skill `bewertungs-widget`). Ein Zitat gross im Bild statt eines
   Karten-Mosaiks; Wechsel per Knopf, Punkt, Tastatur oder Wisch. */
.s-stimmen {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.stimmen-kopf {
  display: grid;
  gap: 2rem;
  align-items: end;
}
@media (min-width: 900px) {
  .stimmen-kopf {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
  }
}
.stimmen-titel {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.96;
  margin-top: 1rem;
}
.stimmen-titel em {
  font-style: normal;
  color: var(--rot-text);
}
.stimmen-wert {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  border-left: 2px solid var(--rot);
  padding-left: 1.2rem;
}
@media (min-width: 900px) {
  .stimmen-wert {
    justify-self: end;
    text-align: left;
  }
}
.sterne {
  display: inline-flex;
  gap: 0.18rem;
}
.sterne svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: var(--rot);
}
.stimmen-wert strong {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
}
.stimmen-wert small {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--nebel);
}
.stimmen-wert:hover small {
  color: var(--firn);
}

/* ---------- Laufband (Marquee, 13.08.2026) ----------
   Loest die Klick-Diashow ab: zwei identische Spuren hintereinander, die
   ganze Gruppe zieht per CSS-Animation um -50% ihrer eigenen Breite nach
   links — an dem Punkt deckt die zweite (identische) Spur exakt die erste,
   der Loop ist nahtlos. Kante blutet ueber .wrap hinaus (--rand), Rand
   faedet per mask-image aus. Pause bei Hover/Fokus/Touch; reduced-motion
   → statisches Grid, Kopie ausgeblendet. */
.stimmen-band {
  margin-top: clamp(2.4rem, 5vh, 3.6rem);
  overflow: hidden;
  display: flex;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black clamp(1.5rem, 4vw, 4rem),
    black calc(100% - clamp(1.5rem, 4vw, 4rem)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black clamp(1.5rem, 4vw, 4rem),
    black calc(100% - clamp(1.5rem, 4vw, 4rem)),
    transparent
  );
}
.stimmen-spur {
  list-style: none;
  display: flex;
  flex: none;
  gap: clamp(1.1rem, 2vw, 1.6rem);
  padding-inline: clamp(1.1rem, 2vw, 1.6rem);
  animation: stimmen-lauf 30s linear infinite;
}
.stimmen-band:hover .stimmen-spur,
.stimmen-band:focus-within .stimmen-spur {
  animation-play-state: paused;
}
.stimmen-band.pausiert .stimmen-spur {
  animation-play-state: paused;
}
@keyframes stimmen-lauf {
  to {
    transform: translateX(-100%);
  }
}
.stimme {
  flex: none;
  width: clamp(17.5rem, 33vw, 22.5rem);
  background: var(--fels);
  border: 1px solid var(--linie);
  padding: clamp(1.5rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.stimme:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 2px;
}
.stimme-sterne {
  color: var(--rot-text);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
}
.stimme blockquote {
  font-size: 0.92rem;
  line-height: 1.52;
  font-weight: 500;
  color: var(--firn);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stimme-quelle {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linie);
  display: grid;
  gap: 0.2rem;
}
.stimme-name {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}
.stimme-meta {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nebel);
}
.stimmen-hinweis {
  margin-top: 2.4rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--nebel);
  max-width: 52rem;
}
.stimmen-hinweis a {
  color: var(--firn);
  border-bottom: 1px solid var(--rot);
}
@media (min-width: 900px) {
  .stimmen-band {
    margin-inline: calc(-1 * var(--rand));
  }
}
@media (max-width: 640px) {
  .stimme {
    width: 78vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stimmen-band {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .stimmen-spur {
    animation: none;
    flex-wrap: wrap;
    padding-inline: 0;
  }
  .stimmen-spur--klon {
    display: none;
  }
}

/* ---------- Standort-Sektion auf der Startseite (13.08.2026) ---------- */
.standort-raster {
  display: grid;
  gap: 2.4rem;
}
@media (min-width: 900px) {
  .standort-raster {
    grid-template-columns: 0.92fr 1.08fr;
    gap: 4rem;
    align-items: center;
  }
  .s-standort .anfahrt-karte {
    margin-right: calc(-1 * var(--rand));
  }
}
.standort-titel {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  margin: 1rem 0 1.6rem;
  line-height: 0.98;
}
/* §0e-87 (13.08.): .s-partner/.s-standort/.s-finale liefen alle drei mit
   Kicker + Display-H2 + Lead in gleicher Reihenfolge — Budget max. 2. Die
   Standort-Sektion bricht die Formel: KEIN Eyebrow im Textblock, die H2
   steht direkt und gross am Kopf der Spalte. Die fuehrende Vorzeile
   uebernimmt stattdessen ein kleines Schild AUF der Karte (.karte-schild) —
   die Karte ist das staerkste Bildelement der Sektion und traegt den
   Section-Namen selbst. */
.s-standort .standort-titel {
  margin-top: 0;
}
.karte-schild {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  /* Themenfest: sitzt auf dem Kartenfoto, das nie hell wird (GESETZ Kap. 11). */
  color: var(--kalk-fest);
  padding: 0.5rem 0.85rem;
  background: color-mix(in srgb, var(--dunkel-fest) 62%, transparent);
  border: 1px solid rgba(244, 239, 238, 0.22);
  backdrop-filter: blur(6px);
}
.wege-liste {
  list-style: none;
  margin-top: 1.6rem;
  display: grid;
  gap: 0.7rem;
}
.wege-liste li {
  color: var(--nebel);
  font-size: 0.95rem;
  line-height: 1.55;
  padding-left: 1.1rem;
  position: relative;
}
.wege-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 2px;
  background: var(--rot);
}
.wege-liste span {
  color: var(--firn);
  font-weight: 600;
}

/* ---------- Kontakt-Karte (echtes Kartenbild, 13.08.) ----------
   Ersetzt die frühere SVG-Skizze (wirkte wie ein Wireframe). Die Nadel sitzt
   auf Gluringen; Prozentwerte stammen aus dem Kachel-Ausschnitt (Gluringen bei
   49,9 % / 25,3 % des 1500x640-Bildes). */
.anfahrt-karte {
  position: relative;
  border: 1px solid var(--linie);
  background: var(--fels);
  overflow: hidden;
}
.anfahrt-karte img {
  width: 100%;
  height: auto;
  aspect-ratio: 1500 / 640;
  object-fit: cover;
  display: block;
}
.karte-nadel {
  /* Das Kartenbild wird von tools/karte-bauen.mjs EXAKT auf die
     Betriebskoordinaten zentriert — die Nadel sitzt deshalb in der Bildmitte,
     nicht auf einem geschaetzten Ortslabel (Fehler vom 13.08. korrigiert). */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--rot);
  box-shadow: 0 0 0 4px rgba(226, 36, 45, 0.28);
}
.karte-nadel::after {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1px solid rgba(226, 36, 45, 0.55);
  animation: puls 3.2s ease-out infinite;
}
@keyframes puls {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  70%,
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
.karte-marke {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(18px, -50%);
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
  /* Themenfest: Kartenpin-Beschriftung liegt auf dem Foto (GESETZ Kap. 11). */
  color: var(--kalk-fest);
  text-shadow: 0 2px 12px rgba(14, 10, 11, 0.95);
  max-width: 45%;
}
.karte-marke small {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.72rem;
  color: var(--meta-fest);
}
/* kontakt.html: die Karte sitzt direkt neben dem Formular, ohne den
   Bild-Anschnitt der Standort-Sektion — auf Desktop lag die feste
   Anrufen/WhatsApp-Leiste dadurch schon beim Laden (ohne Scroll) genau auf
   der unteren rechten Kartenecke (gemessen: 47.5 x 116px, Kosmetik-Befund
   13.08.). Die Leiste ist fixed und bewegt sich nicht mit — also weicht die
   Karte um ein paar Pixel zurueck (rechts), statt dass ein margin-bottom
   ins Leere liefe. */
@media (min-width: 900px) {
  .kontakt-karte {
    margin-right: 4.5rem;
  }
}
.anfahrt-karte figcaption {
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--linie);
  color: var(--nebel);
  font-size: 0.85rem;
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .karte-nadel::after {
    animation: none;
  }
}
@media (max-width: 560px) {
  .karte-marke {
    font-size: 0.68rem;
    transform: translate(14px, -50%);
  }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--linie);
  padding: 3.5rem 0 6.5rem;
  background: #0a0708;
}
/* VIER Spalten — im Markup stehen vier Bloecke (Marke, Seiten, Kontakt,
   Rechtliches). Mit drei Spalten fiel "Rechtliches" in eine zweite Reihe und
   die rechte Fussleiste blieb leer (gemessen 13.08.: 216–533 px tot). */
.footer-grid {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: 1.5fr 0.85fr 1fr 0.75fr;
}
@media (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer h4 {
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nebel);
  margin-bottom: 1rem;
}
.footer a {
  color: var(--nebel);
  display: block;
  padding: 0.22rem 0;
}
.footer a:hover {
  color: var(--rot-text);
}
.footer .marke-wort {
  font-size: 1.2rem;
}
.footer-unten {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: 0.82rem;
  color: var(--nebel);
}
@media (max-width: 760px) {
  .footer-unten {
    justify-content: flex-start;
  }
}

/* ---------- Sticky Kontakt (immer sichtbar, §0e-12) ---------- */
/* ---------- Sticky-Aktionsleiste unten rechts (WhatsApp + Anrufen) ----------
   Beschriftet wird die AKTION, nicht die Rufnummer (Hamada-Korrektur):
   die Nummer steht im Footer, im Impressum und auf der Kontaktseite. */
.sticky-leiste {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 70;
  display: grid;
  gap: 0.6rem;
  justify-items: end;
}
.sticky-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.3rem;
  transition:
    background 0.2s,
    transform 0.2s;
}
.sticky-knopf:hover {
  transform: translateY(-2px);
}
.sticky-tel {
  background: var(--rot);
  color: var(--firn);
  box-shadow: 0 10px 30px rgba(226, 36, 45, 0.35);
}
.sticky-tel:hover {
  background: var(--glut);
}
/* WhatsApp bleibt in der CI (Schwarz/Rot/Weiss) — erkennbar über das Icon,
   nicht über eine dritte Markenfarbe. */
.sticky-wa {
  background: color-mix(in srgb, var(--nacht) 88%, transparent);
  color: var(--firn);
  border: 1px solid var(--linie);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.sticky-wa:hover {
  background: var(--fels);
  border-color: var(--rot-text);
}
@media (max-width: 480px) {
  .sticky-leiste {
    right: 0.85rem;
    bottom: 0.85rem;
    gap: 0.5rem;
  }
  .sticky-knopf {
    padding: 0.72rem 1.05rem;
    font-size: 0.88rem;
  }
}

/* ---------- Motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.sichtbar {
  opacity: 1;
  transform: none;
}
.wisch {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}
.wisch.sichtbar {
  clip-path: inset(0 0 0 0);
}
.verzoegert-1 {
  transition-delay: 0.12s;
}
.verzoegert-2 {
  transition-delay: 0.24s;
}
.verzoegert-3 {
  transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .wisch {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .station-tafel::before {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Rechtsseiten / Prosa ---------- */
.prosa {
  max-width: 46rem;
}
.prosa h2 {
  font-family: var(--display);
  text-transform: uppercase;
  /* skaliert mit — lange Rechtsbegriffe („Vertretungsberechtigte Person")
     müssen auf 390px in die Spalte passen (§0e-58). */
  font-size: clamp(1.12rem, 3.9vw, 1.5rem);
  margin: 2.6rem 0 0.9rem;
  overflow-wrap: break-word;
}
.prosa h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.8rem 0 0.5rem;
}
.prosa p,
.prosa li {
  color: var(--nebel);
}
.prosa ul {
  padding-left: 1.2rem;
}
.prosa strong {
  color: var(--firn);
}

/* ---------- Sub-Head-Bühne (Interim-Licht bis Grok-Clips liegen) ---------- */
.subhead-buehne {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(
    120% 90% at 50% 110%,
    #1f1519 0%,
    var(--nacht) 62%
  );
}
.subhead-buehne::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(226, 36, 45, 0.2) 50%,
    transparent 58%
  );
  animation: lichtzug 7s ease-in-out infinite;
}
.subhead-buehne::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--rot) 40%,
    transparent 80%
  );
  filter: drop-shadow(0 0 8px rgba(226, 36, 45, 0.7));
  animation: kante 6s ease-in-out infinite;
}
@keyframes lichtzug {
  0%,
  100% {
    transform: translateX(-18%) skewX(-4deg);
  }
  50% {
    transform: translateX(18%) skewX(-4deg);
  }
}
.subhead .wasserzeichen {
  position: absolute;
  right: -1%;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(5rem, 17vw, 15rem);
  color: rgba(244, 239, 238, 0.05);
  white-space: nowrap;
}
.subhead video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.subhead .hero-schleier {
  z-index: 1;
}
.subhead .wrap {
  position: relative;
  z-index: 2;
  isolation: isolate;
}
/* Lokaler Kontrast-Verlauf NUR hinter dem Textblock — gemessen 13.08.:
   die Eyebrow auf oldtimer.html lag über einer hellen Chromfläche bei 2,96:1
   (Ziel 4,5). Wie im Hero deckt der Verlauf nur die Texthöhe ab, der obere
   Teil des Clips bleibt frei (§0e-13). */
.subhead .wrap::before {
  content: "";
  position: absolute;
  inset: -2rem -100vw -3rem -100vw;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(14, 10, 11, 0.92) 0%,
    rgba(14, 10, 11, 0.86) 45%,
    rgba(14, 10, 11, 0.6) 78%,
    rgba(14, 10, 11, 0.15) 94%,
    transparent 100%
  );
}
.subhead .eyebrow,
.subhead .kapitel span {
  color: rgba(244, 239, 238, 0.86);
}
@media (prefers-reduced-motion: reduce) {
  .subhead-buehne::before,
  .subhead-buehne::after {
    animation: none;
  }
}

/* Rechtsseiten-Titel: lange Komposita (Geschaeftsbedingungen, Datenschutzerklaerung)
   muessen auf 390px in die Spalte passen — Text-Clip-Fix 12.08. (§0e-58). */
.rechts-titel {
  font-size: clamp(1.6rem, 5.6vw, 3.4rem);
  margin: 1.2rem 0 2rem;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ---------- Kontakt: Wunschtermin-Paar + Faktenblock ---------- */
.feld-titel {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nebel);
  margin-bottom: 0.5rem;
}
.feld-zeile {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.7rem;
}
.feld-zeile input {
  width: 100%;
}
.feld-hinweis {
  display: block;
  margin-top: 0.5rem;
  color: var(--nebel);
  font-size: 0.8rem;
}
@media (max-width: 480px) {
  .feld-zeile {
    grid-template-columns: 1fr;
  }
}
.kontakt-fakten {
  margin-top: 1.6rem;
  display: grid;
  gap: 1rem;
  border-left: 2px solid var(--rot);
  padding-left: 1.2rem;
  color: var(--nebel);
  line-height: 1.7;
}
.kontakt-fakten strong {
  color: var(--firn);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.kontakt-fakten a {
  color: var(--firn);
  border-bottom: 1px solid var(--rot);
}

/* ---------- Bestand-Live-Block (solange kein echter Bestand eingespielt ist) ---------- */
.fzg-grid-hinweis {
  display: block;
}
.bestand-live {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--rot);
  background: linear-gradient(135deg, var(--fels-fest), #120d10 70%);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  display: grid;
  gap: 1.4rem;
  max-width: 62rem;
}
.bestand-live h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
}
.marken-band {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.marke-chip {
  border: 1px solid var(--linie);
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nebel);
}

/* Hero-Eyebrow heller als der Standard-Sekundärton: über dem Video wurden
   nur 3,78:1 gemessen (Ziel 4,5:1 für kleinen Text) — 12.08. */
.hero .eyebrow {
  color: rgba(244, 239, 238, 0.86);
}

/* ---------- Startseiten-Finale: Formular + Fakten nebeneinander ---------- */
.finale-raster {
  margin-top: 2.6rem;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  /* bewusst festes Zweispalten-Verhältnis statt auto-fit:
     Card-Grid-Budget ist für die Stationen reserviert (§0b Nr. 1) */
  .finale-raster {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
.finale-raster .formular {
  margin-top: 0;
  max-width: none;
}
.finale-fakten .kontakt-fakten {
  margin-top: 1.4rem;
}
/* Die Fakten-Spalte ist von Natur aus kuerzer als das Formular — vorher
   endete sie auf halber Hoehe und rechts unten klaffte ein Loch (13.08.).
   Jetzt streckt sie sich ueber die Formularhoehe und verteilt ihre Bloecke. */
@media (min-width: 900px) {
  .finale-raster .finale-fakten {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .finale-raster .finale-fakten .kontakt-fakten {
    flex: 1;
    align-content: space-evenly;
  }
}

/* Ortszeile neben dem Logo — trägt den lokalen Bezug in den ersten Viewport,
   seit die Wortmarke durch das echte Wappen ersetzt ist (12.08.). */
.marke-ort {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--nebel);
  border-left: 2px solid var(--rot);
  padding-left: 0.7rem;
}
.footer .marke-ort {
  display: none;
}
@media (max-width: 560px) {
  .marke-ort {
    display: none;
  }
}

/* ---------- Referenz-Galerie (echte Kundenfotos verkaufter Fahrzeuge) ----------
   Bewusst KEIN weiteres auto-fit-Raster: versetztes Mauerwerk, damit die
   Fahrzeugseite eine andere Grammatik hat als die Stationen der Startseite. */
/* Versetztes Mauerwerk als SPALTENSATZ statt Raster.
   Das frühere dense-Grid liess bei sieben Bildern rechnerisch eine Zelle leer —
   auf 1440 klaffte unten rechts ein schwarzes Loch von halber Bildbreite
   (gemessen 13.08.). Ein Spaltensatz kann per Definition kein Loch bekommen,
   die Bilder behalten ihr natürliches Format und die Seite hat weiter eine
   andere Grammatik als die Stationen der Startseite. */
.ref-galerie {
  columns: 1;
  column-gap: 1.1rem;
}
@media (min-width: 700px) {
  .ref-galerie {
    columns: 2;
  }
}
@media (min-width: 1100px) {
  .ref-galerie {
    columns: 3;
  }
}
.ref-galerie .ref-karte {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  margin-bottom: 1.1rem;
}
.ref-karte {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--fels);
}
.ref-karte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0, 0.1, 1);
}
.ref-karte:hover img {
  transform: scale(1.04);
}
.ref-karte::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rot), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.ref-karte:hover::after {
  opacity: 1;
}

/* ---------- Oldtimer: Restaurierungs-Lauf (echte Kundenfotos) ----------
   Versetzte Zweierspur mit Nummern — eigene Grammatik, kein Card-Grid. */
.olympia-lauf {
  margin-top: 3rem;
  display: grid;
  gap: 1.6rem;
}
@media (min-width: 820px) {
  .olympia-lauf {
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem 2.6rem;
  }
  .ol-schritt:nth-child(even) {
    transform: translateY(3.2rem);
  }
}
.ol-schritt img,
.ol-final img {
  width: 100%;
  height: auto;
  border: 1px solid var(--linie);
}
.ol-schritt figcaption,
.ol-final figcaption {
  margin-top: 0.9rem;
  color: var(--nebel);
  font-size: 0.95rem;
  line-height: 1.6;
}
.ol-schritt figcaption span,
.ol-final figcaption span {
  font-family: var(--display);
  color: var(--rot-text);
  margin-right: 0.5rem;
}
.ol-final {
  margin-top: clamp(3rem, 8vh, 6rem);
}
.ol-final figcaption strong {
  color: var(--firn);
  display: block;
  margin-top: 0.4rem;
}

/* ---------- Ueber uns: Betrieb in echt ---------- */
.betrieb-lauf {
  margin-top: 3rem;
  display: grid;
  gap: 1.6rem;
}
@media (min-width: 860px) {
  .betrieb-lauf {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }
}
.betrieb-lauf img,
.bt-breit img {
  width: 100%;
  height: auto;
  border: 1px solid var(--linie);
}
.bt-spalte {
  display: grid;
  gap: 1.6rem;
}
.betrieb figcaption {
  margin-top: 0.8rem;
  color: var(--nebel);
  font-size: 0.92rem;
  line-height: 1.6;
  border-left: 2px solid var(--rot);
  padding-left: 0.8rem;
}
.bt-breit {
  margin-top: clamp(2.4rem, 6vh, 4.5rem);
}

/* ---------- Kritiker-Runde 12. August ---------- */

/* Kontrast nur DORT, wo Text steht — nicht ueber dem ganzen Bild (§0e-13). */
.hero-inhalt::before {
  content: "";
  position: absolute;
  inset: -2.5rem -100vw -6rem -100vw;
  z-index: -1;
  /* Gemessen: mit dem duenneren Vollflaechen-Schleier fiel die H1 auf 1,28:1.
     Der Kontrast kommt jetzt aus einem Verlauf, der NUR die Texthoehe abdeckt —
     die oberen zwei Drittel des Videos (Berge, Kurve, Lichtspur) bleiben frei. */
  background: linear-gradient(
    to top,
    rgba(14, 10, 11, 0.94) 0%,
    rgba(14, 10, 11, 0.9) 42%,
    rgba(14, 10, 11, 0.72) 72%,
    rgba(14, 10, 11, 0.25) 92%,
    transparent 100%
  );
  pointer-events: none;
}
.hero h1,
.hero .lead {
  text-shadow: 0 2px 28px rgba(14, 10, 11, 0.55);
}

/* Sperrzone fuer den fixen CTA-Stapel — ZURUECKGEBAUT am 13. August.
   Die alte Loesung schrieb padding-right: 13.5rem auf .zeile/.finale-fakten/
   .footer-grid/.bestand-live. Gemessen (tools/achsen-check.mjs): das hat auf
   JEDER Seite 216 px Inhaltsbreite weggenommen, den Footer von vier auf drei
   Spalten gedrueckt und die Kontaktspalte des Startseiten-Finales auf ~150 px
   gequetscht ("FAHRZEUG / CENTER GOMS / AG"). Das war Hamadas Befund
   "Zentrierung kaputt".
   Den Job macht bereits der Kollisionswaechter in app.js: liegt ein Klickziel
   unter der Leiste, weicht die LEISTE (.weicht) — nicht der Inhalt. */
body {
  padding-bottom: 7.5rem;
}
@media (min-width: 900px) {
  body {
    padding-bottom: 0;
  }
}

/* Display-Moment: gerendert 128 px+ bei 1440 (vorher lieferte der vw-Term nur
   81–90 px, das clamp-Maximum war reine Deko im Quelltext). */
.gross {
  font-size: clamp(2.6rem, 9.4vw, 9.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.manifest.gross {
  max-width: 18ch;
}

/* Die Leiste weicht, wenn ein echtes Klickziel unter ihr liegt (siehe app.js).
   Sie verschwindet nicht ganz — sie rutscht zur Seite und wird durchlaessig,
   damit der Anruf-Weg jederzeit auffindbar bleibt. */
.sticky-leiste {
  transition:
    transform 0.28s cubic-bezier(0.2, 0, 0.1, 1),
    opacity 0.28s ease;
}
.sticky-leiste.weicht {
  /* War translateX(calc(100% - 2.6rem)) — das schob die Leiste ca. 90px ueber
     den rechten Viewport-Rand hinaus. Harmlos, SOLANGE weicht selten
     ausloest; seit die Ziel-Liste in app.js auch Ueberschriften/Absaetze
     deckt (KRITISCH 2, 13.08.), ist die Leiste auf Text-Seiten fast staendig
     im weicht-Zustand — mobil-check faengt das jetzt zurecht als "ueber die
     Kante" ab. Bleibt jetzt IMMER innerhalb des Viewports: nur ein kurzer
     Ausweich-Ruck bis an die Kante, der Rest kommt von der Transparenz. */
  transform: translateX(1.2rem);
  opacity: 0.45;
}
@media (max-width: 560px) {
  /* Auf schmalen Geraeten fuellt die Leiste fast die Breite — seitliches
     Ausweichen reicht dort nicht, sie geht nach unten aus dem Weg. */
  .sticky-leiste.weicht {
    transform: translateY(calc(100% + 1.2rem));
    opacity: 0;
    pointer-events: none;
  }
}
.sticky-leiste.weicht:hover,
.sticky-leiste.weicht:focus-within {
  transform: none;
  opacity: 1;
}

/* Mobiles Menue als echtes Overlay: volle Hoehe, deckender Grund. */
@media (max-width: 900px) {
  .nav-links {
    inset: 96px 0 0 0;
    background: var(--nacht);
    padding: 2.2rem 1.6rem;
    gap: 1.6rem;
    font-size: 1.15rem;
    overflow-y: auto;
    /* Geschlossen ist das Overlay wirklich weg — sonst haengen die Links
       unsichtbar im Layout, sind per Tab erreichbar und der Layout-Check
       meldet sie als verdeckt (gemessen 12. August). */
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.35s ease,
      visibility 0s linear 0.35s;
  }
  .nav-links.offen {
    visibility: visible;
    pointer-events: auto;
    transition:
      transform 0.35s ease,
      visibility 0s;
  }
  body.menu-offen .sticky-leiste {
    opacity: 0;
    pointer-events: none;
  }
}
@media (max-width: 480px) {
  .nav-links {
    inset: 78px 0 0 0;
  }
}

/* Abschluss-Sektionen: Inhalt bekommt eine Breite, statt links zu kleben und
   die rechte Haelfte leer zu lassen (Kritiker-Befund 2 und QA-Befund 3). */
.s-finale .wrap > .display,
.s-finale .wrap > .lead {
  max-width: 30ch;
}
@media (min-width: 900px) {
  .s-finale:not(.finale-breit) .wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.4rem 4rem;
    align-items: end;
  }
  .s-finale:not(.finale-breit) .wrap > .eyebrow,
  .s-finale:not(.finale-breit) .wrap > .kapitel {
    grid-column: 1 / -1;
  }
  /* Headline links, Text + Knopf rechts daneben — statt Headline links und
     rechts 390 px Schwarz (gemessen 13.08.). */
  .s-finale:not(.finale-breit) .wrap > .display {
    grid-column: 1;
    align-self: center;
  }
  /* center statt end: bei einer 4-zeiligen Headline stand der Text sonst
     unten in der Ecke und rechts oben blieben ~250 px Schwarz (13.08.). */
  .s-finale:not(.finale-breit) .wrap > .lead {
    grid-column: 2;
    max-width: none;
    align-self: center;
  }
  /* Alles, was KEINE Kopfzeile ist, laeuft ueber die volle Breite.
     Ohne diese Regel landete das ganze Finale-Raster (Formular + Kontakt)
     in Spalte 1 und die rechte Haelfte blieb leer — die sichtbarste
     Auspraegung von Hamadas "Zentrierung kaputt" (13.08.). */
  .s-finale:not(.finale-breit) .wrap > .finale-raster,
  .s-finale:not(.finale-breit) .wrap > .btns,
  .s-finale:not(.finale-breit) .wrap > .formular,
  .s-finale:not(.finale-breit) .wrap > .zeilen,
  .s-finale:not(.finale-breit) .wrap > .klassen {
    grid-column: 1 / -1;
  }
  .s-finale:not(.finale-breit) .wrap > .btns {
    grid-column: 2;
    justify-content: flex-start;
    align-self: end;
    margin-top: 0.6rem;
  }
}
/* Der Text der Abschluss-Sektion darf die Spalte fuellen — die alte
   30ch-Deckelung liess auch in der zweiten Spalte noch 170 px leer. */
.s-finale .wrap > .lead {
  max-width: 34rem;
}

/* Partner-Kacheln: kompakter, kein totes Graustufen-Filter auf reinem Text. */
.partner {
  min-height: 0;
  padding: 1.1rem 1.2rem;
  filter: none;
}
.partner-leiste {
  align-items: stretch;
}

/* Firmenname als kleine Vorzeile IN der H1: der Betrieb steht damit im ersten
   Viewport (§0e-80) und der grosse Satz bleibt der Display-Moment (§0b Nr. 4).
   Ersetzt die frühere separate Eyebrow — der Name stand sonst dreifach da. */
.h1-vorzeile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: max(0.78rem, 0.1em);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 239, 238, 0.86);
  margin-bottom: 1.1rem;
}
.h1-vorzeile::before {
  content: "";
  width: 2.6rem;
  height: 2px;
  background: var(--rot);
  flex: none;
}

/* ---------- Mietklassen als Baender ----------
   Eigene Grammatik statt der .zeile-Tabelle, die im Build sechsmal stand
   (Kritiker-Befund 12. August). Nummer und Name gross links, Substanz rechts —
   damit ist auch die rechte Sektionshaelfte belegt. */
.klassen {
  margin-top: 2.6rem;
  border-top: 1px solid var(--linie);
}
.klasse {
  display: grid;
  gap: 1rem 2.5rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--linie);
  align-items: start;
  transition: background 0.3s;
}
@media (min-width: 900px) {
  .klasse {
    grid-template-columns: minmax(16rem, 0.9fr) 1.4fr auto;
    align-items: center;
    padding: 2.1rem 0;
  }
  .klasse:hover {
    background: linear-gradient(
      90deg,
      rgba(226, 36, 45, 0.07),
      transparent 60%
    );
  }
}
.klasse-kopf {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.klasse-nr {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--rot-text);
  letter-spacing: 0.1em;
}
.klasse-kopf h3 {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1;
  font-weight: 400;
}
.klasse-inhalt p {
  color: var(--nebel);
  max-width: 34rem;
}
.klasse-inhalt .tags {
  margin-top: 0.8rem;
}
.klasse-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  border-bottom: 2px solid var(--rot);
  padding-bottom: 0.25rem;
}
.klasse-cta span {
  transition: transform 0.25s;
}
.klasse:hover .klasse-cta span {
  transform: translateX(4px);
}

/* ---------- Haltung: Fliesstext mit Marginalien ----------
   Ersetzt eine der sechs Zeilen-Tabellen (Kritiker-Befund 12. August) und
   belegt die rechte Sektionshaelfte mit Substanz statt mit Schwarz. */
.haltung {
  display: grid;
  gap: 2.2rem;
}
@media (min-width: 900px) {
  .haltung {
    grid-template-columns: 1.35fr 0.65fr;
    gap: 4.5rem;
    align-items: start;
  }
}
.haltung-text p {
  color: var(--nebel);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.75;
  margin-top: 1.2rem;
  max-width: 46rem;
}
.haltung-text strong {
  color: var(--firn);
  font-weight: 600;
}
.haltung-rand {
  display: grid;
  gap: 1.5rem;
  border-left: 1px solid var(--linie);
  padding-left: 1.6rem;
}
.rand-punkt span {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--firn);
}
.rand-punkt span::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 2px;
  background: var(--rot);
  vertical-align: middle;
  margin-right: 0.6rem;
}
.rand-punkt p {
  color: var(--nebel);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 0.35rem;
}

/* ---------- Oldtimer: drei ungleich grosse Wege ----------
   Bewusst KEIN gleichmaessiges Raster: der Ankauf ist das Geschaeft, das
   zaehlt, und bekommt Flaeche; die beiden anderen stehen als schmale Karten
   daneben (Grammatik-Bruch, Kritiker-Befund 12. August). */
.wege {
  margin-top: 2.4rem;
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 900px) {
  .wege {
    grid-template-columns: 1.25fr 0.75fr;
    grid-template-rows: auto auto;
    gap: 1.6rem;
  }
  .weg-gross {
    grid-row: span 2;
  }
}
.weg {
  border: 1px solid var(--linie);
  background: linear-gradient(150deg, var(--fels-fest), #120d10 75%);
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}
.weg-gross {
  justify-content: center;
  gap: 1.1rem;
  border-left: 3px solid var(--rot);
}
.weg-nr {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--rot-text);
}
.weg h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1;
}
.weg-gross h3 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}
.weg p {
  color: var(--nebel);
  line-height: 1.65;
}
.weg-gross p {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  max-width: 34rem;
}
.weg .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.weg .tags span {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--nebel);
  border: 1px solid var(--linie);
  padding: 0.18rem 0.55rem;
}
.weg .klasse-cta {
  margin-top: auto;
}
/* In der hohen Ankauf-Karte klebte der Link am Boden und liess mitten in der
   Karte rund 300 px Leere stehen (Sehen-Loop 13.08.). Die Karte ist ohnehin
   zentriert — der Link gehoert an den Text, nicht an die Unterkante. */
.weg-gross .klasse-cta {
  margin-top: 0.6rem;
}

/* ---------- Kapitelmarke: zweite Oeffnungsform ----------
   Der rote Strich mit Versalien stand 3–5x je Seite (Kritiker-Befund
   12. August, §0b Nr. 2 erlaubt 2). Diese Variante oeffnet vertikal am
   linken Rand statt horizontal ueber der Headline. */
.kapitel {
  position: relative;
  margin-bottom: 1.4rem;
  padding-left: 2.6rem;
  min-height: 1.4rem;
}
.kapitel span {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--nebel);
}
.kapitel::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: -0.4rem;
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(to bottom, var(--rot), transparent);
}
.buehne-weiss .kapitel span {
  color: #6b5f62;
}
@media (max-width: 560px) {
  .kapitel {
    padding-left: 1.6rem;
  }
  .kapitel::before {
    left: 0.35rem;
  }
}

/* ---------- Hell/Dunkel-Schalter (23.09.2026, Hamada-Auftrag) ----------
   Immer in der Kopfleiste, unabhaengig vom Burger-Zustand sichtbar — damit
   auch im offenen Mobil-Menue erreichbar (GESETZ Kap. 11). .nav ist eine
   themenfeste Buehne: der Schalter bekommt seine sichtbare Fassung deshalb
   selbst aus den fixen Tokens, nicht aus dem (dort eingefrorenen) --firn. */
.thema-schalter {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  background: transparent;
  color: var(--kalk-fest);
  border: 1px solid rgba(244, 239, 238, 0.22);
  border-radius: 999px;
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 200ms ease,
    background 200ms ease;
}
.thema-schalter:hover {
  border-color: var(--rot);
}
.thema-schalter:active {
  transform: scale(0.97);
}
.thema-schalter svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.thema-schalter .thema-icon-sonne {
  display: none;
}
:root[data-thema="hell"] .thema-schalter .thema-icon-mond {
  display: none;
}
:root[data-thema="hell"] .thema-schalter .thema-icon-sonne {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .thema-schalter {
    transition: none;
  }
}

/* ============================================================
   29.09.2026 — Kundenrueckmeldung Zeiter („viel zu dunkel", „an seiner
   Seite orientieren") + Hamada („als start hell"). Start-Thema HELL,
   Palette naeher an fahrzeugcenter-goms.ch: Weiss-Grund, sein Rot
   (#e21c21/#ce2026), Schwarz + Werkstatt-Grau (#5f605b) als Kachel-Toene.
   ============================================================ */
:root[data-thema="hell"] {
  --nacht: #faf8f7; /* fast Weiss mit Rotstich (GESETZ Kap. 4: nie Reinweiss) */
  --fels: #ffffff;
  --firn: #1a1416;
  --rot: #d6191f; /* sein Rot, 5,0:1 mit weisser Schrift */
  --glut: #a81318;
  --nebel: #5f5557;
  --linie: rgba(26, 20, 22, 0.13);
  --rot-text: #b5151b;
}
/* Knopf-Schrift auf Rot ist in BEIDEN Themen weiss (wie auf seiner Seite) */
.btn,
.nav-cta,
.nav-links a.nav-cta {
  color: #fff;
  opacity: 1;
}
.btn-ghost {
  color: var(--firn);
}
.btn-weiss {
  color: var(--firn);
}

/* Kopfleiste: ueber dem Kopf-Video themenfest dunkel, gescrollt im Hell-Thema
   weiss wie seine Altseite (GESETZ Kap. 2: der Grund folgt dem Untergrund). */
.nav::before {
  transition: background-color 240ms cubic-bezier(0.23, 1, 0.32, 1);
}
:root[data-thema="hell"] .nav[data-gescrollt="ja"] {
  --nacht: #ffffff;
  --firn: #1a1416;
  --nebel: #5f5557;
  --linie: rgba(26, 20, 22, 0.12);
  color: var(--firn);
}
:root[data-thema="hell"] .nav[data-gescrollt="ja"]::before {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 24px rgba(26, 20, 22, 0.08);
}
:root[data-thema="hell"] .nav[data-gescrollt="ja"] .marke-ort {
  color: #5f5557;
}
:root[data-thema="hell"] .nav[data-gescrollt="ja"] .thema-schalter {
  color: #1a1416;
  border-color: rgba(26, 20, 22, 0.25);
}

/* ---------- Vier Kacheln wie auf seiner Altseite (Schwarz · Grau · Rot · Dunkel) ---------- */
.s-kacheln {
  background: var(--nacht);
}
.kacheln {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kachel {
  --firn: #ffffff;
  --nebel: rgba(255, 255, 255, 0.86);
  color: #fff;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.3rem, 2.4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  position: relative;
  transition: filter 200ms ease;
}
.kachel:hover {
  filter: brightness(1.08);
}
.kachel svg {
  width: 2.3rem;
  height: 2.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.kachel h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1rem;
  line-height: 1.25;
}
.kachel p,
.kachel li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.kachel ul {
  list-style: none;
  display: grid;
  gap: 0.15rem;
}
.kachel-weiter {
  margin-top: auto;
  padding-top: 0.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.kachel-schwarz {
  background: #0e0a0b;
}
.kachel-grau {
  background: #5f605b;
}
.kachel-rot {
  background: #d6191f;
}
.kachel-dunkel {
  background: #2f2e2e;
}
@media (max-width: 980px) {
  .kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  /* Mobil: 2x2 kompakt — sonst stapeln sich vier dunkle Flaechen zu einem
     Bildschirm voller Dunkel (GESETZ Kap. 4: Buehnen sind die Ausnahme). */
  .kachel {
    padding: 1.3rem 1rem 1.2rem;
    gap: 0.6rem;
  }
  .kachel p,
  .kachel ul {
    display: none;
  }
  .kachel h2 {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
  }
  .kachel svg {
    width: 1.8rem;
    height: 1.8rem;
  }
  .kachel-weiter {
    font-size: 0.8rem;
  }
}

/* ---------- Fahrzeug-Galerie live aus AutoScout24 ---------- */
.s-bestand {
  padding: clamp(4rem, 9vh, 6.5rem) 0;
  border-bottom: 1px solid var(--linie);
}
.bestand-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem 2rem;
}
.bestand-kopf > div {
  min-width: 0;
}
.bestand-kopf h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  margin: 1rem 0 0.9rem;
}
.bestand-sync {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--firn);
  background: var(--fels);
  border: 1px solid var(--linie);
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
}
.bestand-sync::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #1f9d55;
  box-shadow: 0 0 0 4px rgba(31, 157, 85, 0.18);
  flex: none;
}
.bestand-as24 {
  font-weight: 700;
  background: #f5f200;
  color: #1a1416;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
}
.bestand-stand {
  font-size: 0.82rem;
  color: var(--nebel);
  margin-top: 0.6rem;
}
.s-bestand .fzg-grid {
  margin-top: 2.4rem;
}
button.fzg-bild {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
  background: #e9e4e2;
  overflow: hidden;
}
button.fzg-bild img {
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
button.fzg-bild:hover img {
  transform: scale(1.03);
}
.bestand-bildzahl {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  background: rgba(14, 10, 11, 0.78);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
}
.bestand-version {
  font-size: 0.88rem;
  color: var(--nebel);
  margin-top: -0.5rem;
}
.fzg-ctas button.btn {
  appearance: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bestand-leer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  background: var(--fels);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--rot);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.bestand-leer svg {
  width: 3.2rem;
  height: 3.2rem;
  fill: none;
  stroke: var(--rot-text);
  stroke-width: 1.6;
}
.bestand-leer h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.bestand-leer p {
  color: var(--nebel);
  max-width: 44rem;
  margin-bottom: 1.3rem;
}
.bestand-leer strong {
  color: var(--firn);
}
@media (max-width: 560px) {
  .bestand-leer {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Detailansicht */
.fzg-dialog {
  width: min(1180px, calc(100% - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  border: 0;
  padding: 0;
  background: var(--fels);
  color: var(--firn);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  overflow: auto;
}
.fzg-dialog::backdrop {
  background: rgba(14, 10, 11, 0.72);
}
.dialog-offen,
.dialog-offen body {
  overflow: hidden;
}
.fzg-dialog-kopf {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1.1rem, 3vw, 2rem) 1rem;
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  background: var(--fels);
  z-index: 2;
}
.fzg-dialog-kopf h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.05;
  margin-top: 0.5rem;
}
.fzg-dialog-kopf .bestand-version {
  margin-top: 0.4rem;
}
.fzg-dialog-zu {
  appearance: none;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--firn);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.fzg-dialog-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  padding: clamp(1.1rem, 3vw, 2rem);
}
.fzg-dialog-medien {
  min-width: 0;
}
.fzg-dialog-haupt {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #e9e4e2;
}
.fzg-dialog-haupt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fzg-dialog-pfeil {
  appearance: none;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 2.8rem;
  height: 2.8rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1416;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.fzg-dialog-pfeil.links {
  left: 0.8rem;
}
.fzg-dialog-pfeil.rechts {
  right: 0.8rem;
}
.fzg-dialog-zaehler {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  background: rgba(14, 10, 11, 0.78);
  color: #fff;
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
}
.fzg-dialog-zaehler:empty {
  display: none;
}
.fzg-dialog-daumen {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.7rem 0 0.2rem;
}
.fzg-dialog-daumen button {
  appearance: none;
  border: 2px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
  flex: none;
  width: 5.4rem;
  opacity: 0.7;
}
.fzg-dialog-daumen button[aria-current="true"] {
  border-color: var(--rot);
  opacity: 1;
}
.fzg-dialog-daumen img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.fzg-dialog-text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
.fzg-dialog-daten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--linie);
}
.fzg-dialog-daten div {
  padding: 0.65rem 0.2rem;
  border-bottom: 1px solid var(--linie);
}
.fzg-dialog-daten dt {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nebel);
}
.fzg-dialog-daten dd {
  font-weight: 600;
}
.fzg-dialog-beschreibung summary {
  cursor: pointer;
  font-weight: 600;
}
.fzg-dialog-beschreibung p {
  white-space: pre-line;
  color: var(--nebel);
  font-size: 0.92rem;
  margin-top: 0.7rem;
}
.fzg-dialog-as24 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rot-text);
}
@media (max-width: 860px) {
  .fzg-dialog-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Vorfuehr-Sektion: was die neue Website mehr kann ----------
   Nur fuer die Vorschau (data-vorfuehrung) — faellt beim echten Go-Live raus. */
.s-vorteile {
  padding: clamp(4.5rem, 10vh, 7rem) 0;
  background: #f1ecea;
  border-bottom: 1px solid var(--linie);
}
:root:not([data-thema="hell"]) .s-vorteile {
  background: #151012;
}
.vorteile-hinweis {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rot);
  padding: 0.35rem 0.7rem;
}
.s-vorteile h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  margin: 1.1rem 0 0.9rem;
}
.vorteile-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.6rem;
}
.vorteil {
  background: var(--fels);
  border: 1px solid var(--linie);
  padding: 1.6rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.vorteil-nr {
  font-family: var(--display);
  color: var(--rot-text);
  font-size: 1.5rem;
}
.vorteil h3 {
  font-size: 1.12rem;
  line-height: 1.3;
}
.vorteil p {
  color: var(--nebel);
  font-size: 0.96rem;
}
.vorteil-top {
  grid-column: span 2;
  border-left: 4px solid var(--rot);
}
.vorteil-breit {
  grid-column: 1 / -1;
}
[data-bestand-mehr][hidden] {
  display: none;
}
@media (max-width: 980px) {
  .vorteile-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .vorteile-raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .vorteil-top,
  .vorteil-breit {
    grid-column: auto;
  }
}

/* Anrufen-Knopf: weisse Schrift auf Rot in beiden Themen (Gate 29.09.: 3,48:1 hell) */
.sticky-tel {
  color: #fff;
}

/* ---------- Hamada 29.09.2026, 23:49: „nimm den schatten über dem headvideo" ----------
   Kein Schleier mehr über dem Video und kein dunkles Band hinter dem Text —
   das Video steht frei. Lesbarkeit der Schrift kommt nur noch aus einem
   weichen Textschatten direkt an den Buchstaben (keine Fläche). */
.hero-schleier {
  background: none;
}
.hero-inhalt::before {
  content: none;
}
.hero h1,
.hero .lead,
.hero .eyebrow,
.hero .hero-fakt,
.subhead h1,
.subhead .lead,
.subhead p {
  text-shadow:
    0 1px 2px rgba(14, 10, 11, 0.75),
    0 2px 18px rgba(14, 10, 11, 0.6);
}

/* ---------- Hamada 01.10.2026, 09:49: „die Schrift drauf ist nicht zu erkennen … mach den Text etwas knapper, dass man besser das Video sehen kann" ----------
   Helles Porsche-Video → weisse Schrift ging unter. Kein Schleier über dem Video
   (Wort 29.09. bleibt), sondern eine kompakte dunkle Glas-Tafel NUR hinter dem
   kleiner gewordenen Textblock unten links. Text auf Vorzeile + Titel + 1 Knopf gekürzt. */
.hero-inhalt.wrap {
  margin-left: max(1.1rem, calc((100% - 1200px) / 2));
  margin-right: 1.1rem;
  width: fit-content;
  max-width: min(31rem, calc(100vw - 2.2rem));
  padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1.2rem, 2.6vw, 2rem);
  background: rgba(14, 10, 11, 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 4.4rem);
  line-height: 0.98;
  margin: 0.6rem 0 1.1rem;
  color: #f6f1ee;
}
.hero .h1-vorzeile {
  color: rgba(246, 241, 238, 0.85);
  letter-spacing: 0.16em;
  line-height: 1.5;
}
.hero h1 em {
  color: #ff3b3b;
}
.hero .btns {
  margin-top: 0 !important;
}