/* app-a.css — Variante A "Durchfahrt bei Nacht"
   Randlos · sticky · Text-im-Bild. Rhythmus über Bühnenhöhen, keine Sektionsränder.
   Tokens 1:1 aus design.md §2. */

/* ============================================================
   Dritter Choreografie-Typ: NATIVE Scroll-Driven Animation
   (§0b Nr. 3 verlangt ≥3 Typen unterhalb des Heros; vorhanden waren bereits
   clip-path/Maske und Gegenlauf-Parallax. Pinning zählt seit §0e-127 nicht mehr.)

   Inhaltlich ist das die design.md-Signatur „Der Lichtanlauf" — hier aber
   scroll-gebunden und ohne JavaScript: die Bühne zündet, während sie ins Bild
   fährt. Läuft im Compositor, kostet keinen Main-Thread, braucht keinen
   IntersectionObserver.

   Sicherheitsnetz: nur innerhalb @supports (ältere Browser behalten exakt den
   bisherigen Zustand, das JS-Reveal bleibt unangetastet) und vollständig aus
   bei prefers-reduced-motion.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes lichtanlauf-scroll {
      from {
        filter: brightness(0.46) saturate(0.86);
      }
      to {
        filter: brightness(1) saturate(1);
      }
    }
    .buehne__bild,
    .fbahn__bild {
      animation: lichtanlauf-scroll linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 42%;
    }
  }
}

:root {
  --nacht: #0b0e13;
  --nacht-2: #12161d;
  --nacht-3: #171c25;
  --chrom: #e8edf3;
  --stahl: #8e9db0;
  --ford: #0b63e5;
  --ford-hell: #4d93ff;
  --natrium: #f2a73b;
  --natrium-tief: #a76a17;

  --f-display: "Darker Grotesque", "Arial Narrow", sans-serif;
  --f-body: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;

  --ease-zuendung: cubic-bezier(0.16, 0.86, 0.28, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--chrom);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}

/* Tastatur-Fokus sitewide SICHTBAR (barrierefreiheit-bfsg §1b) — der Ring wird nie
   entfernt, sondern gestaltet; :focus-visible zeigt ihn nur bei Tastaturbedienung. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--natrium);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3,
.disp {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 0.88;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stahl);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Der Lichtbalken — horizontal, nie senkrecht */
.balken {
  display: inline-block;
  width: 44px;
  height: 4px;
  background: var(--natrium);
  border-radius: 2px;
  flex: none;
}
.balken--ford {
  background: var(--ford-hell);
}

/* ============ Kopfleiste ============ */
.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 4vw, 3rem);
  /* Fremd-Blick #4/§0e-130: über hellen Heros (404, Vermietung, Über uns) verschwand die
     Nav ohne jeden Grund. Dezenter, gerichteter Scrim von oben, immer aktiv — kein Kasten,
     keine Vollfläche. Löst sich in [data-solid] in die feste Leiste auf. */
  background: linear-gradient(
    to bottom,
    rgba(11, 14, 19, 0.55) 0%,
    rgba(11, 14, 19, 0.22) 65%,
    transparent 100%
  );
  transition:
    background-color 0.4s var(--ease-zuendung),
    background 0.4s var(--ease-zuendung),
    backdrop-filter 0.4s var(--ease-zuendung);
}
.kopf[data-solid="true"] {
  background: rgba(11, 14, 19, 0.82);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--nacht-3);
}
.kopf__logo {
  height: 36px;
  width: auto;
  flex: none;
}
.kopf__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kopf__nav a {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--stahl);
  position: relative;
  padding-bottom: 6px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.kopf__nav a:hover {
  color: var(--chrom);
}
.kopf__nav a[aria-current="page"] {
  color: var(--chrom);
}
.kopf__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--natrium);
  border-radius: 2px;
}
.kopf__burger {
  display: none;
  background: none;
  border: 0;
  color: var(--chrom);
  width: 40px;
  height: 40px;
  cursor: pointer;
  flex: none;
}
@media (max-width: 1023px) {
  .kopf__nav {
    display: none;
  }
  .kopf__burger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.kopf__mobil {
  position: fixed;
  inset: 0;
  background: var(--nacht);
  z-index: 70;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  transform: translateY(-4%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease-zuendung),
    transform 0.3s var(--ease-zuendung);
}
.kopf__mobil[data-offen="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.kopf__mobil-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}
.kopf__mobil-schliessen {
  background: none;
  border: 0;
  color: var(--chrom);
  width: 40px;
  height: 40px;
}
.kopf__mobil-nav {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.kopf__mobil-nav a {
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--chrom);
}
.kopf__mobil-nav a[aria-current="page"] {
  color: var(--natrium);
}

/* ============ A1 — Head ============ */
.head {
  position: relative;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--nacht);
}
.head__medium {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--nacht);
  pointer-events: none;
}
.head__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgba(11, 14, 19, 0.88) 0%,
    rgba(11, 14, 19, 0.35) 45%,
    transparent 72%
  );
  pointer-events: none;
}
.head__inhalt {
  position: absolute;
  left: 7vw;
  right: 7vw;
  bottom: 13%;
  max-width: min(84vw, 1180px);
}
.head__inhalt .eyebrow {
  margin-bottom: 1.1rem;
}
.head h1 {
  /* design.md §2.2 Display XXL — der Display-Moment (§0b Nr. 4).
     Der Bauer hatte auf 7,2vw/8,1rem reduziert, um die zu lange H1 zu bändigen;
     die Ursache lag aber in der Copy (PL-Fehler, siehe duell-entscheidung.md).
     Copy gekürzt → volle Größe wiederhergestellt. */
  font-size: clamp(3.6rem, 11vw, 9.6rem);
  color: var(--chrom);
  margin: 0.3rem 0 1.4rem;
}
.head h1 em {
  font-style: normal;
  color: var(--natrium);
}
.head__beweis {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--stahl);
  max-width: 42ch;
  margin-bottom: 1.9rem;
  line-height: 1.5;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--ford);
  color: var(--chrom);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.95rem 1.9rem;
  border-radius: 2px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition:
    transform 0.16s var(--ease-zuendung),
    background-color 0.2s ease;
}
.btn:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: #0954c2;
  }
}
.btn--geist {
  background: transparent;
  border: 1px solid var(--nacht-3);
  color: var(--chrom);
}
@media (hover: hover) and (pointer: fine) {
  .btn--geist:hover {
    border-color: var(--stahl);
  }
}

/* Fakten-Leiste — flache Zeile, kein Kasten, überlappt Head-Unterkante */
.fakten {
  position: relative;
  z-index: 5;
  margin-top: -3.5rem;
  padding: 1.6rem 7vw 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 3rem;
}
.fakten__item {
  font-family: var(--f-body);
  font-size: 0.92rem;
  color: var(--stahl);
  font-feature-settings: "tnum";
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
}
.fakten__item strong {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--chrom);
}

/* ============ A2 — Manifest, Vollbild ============ */
.buehne {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--nacht);
  display: flex;
}
.buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(0.92) brightness(0.9);
  pointer-events: none;
}
.buehne__grad-ul {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top right,
    rgba(11, 14, 19, 0.86) 0%,
    rgba(11, 14, 19, 0.3) 42%,
    transparent 68%
  );
}
.buehne__grad-ur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top left,
    rgba(11, 14, 19, 0.86) 0%,
    rgba(11, 14, 19, 0.3) 42%,
    transparent 68%
  );
}
/* Fremd-Blick #4/#5 + Nachtrag: kräftigerer Verlauf für Bühnen mit hellem Bildgrund
   (Preistafeln auf Speichen/Transporter, Zitat auf Heckleuchte). Gerichtet, kein Kasten. */
.buehne__grad-ul--kraeftig {
  background: linear-gradient(
    to top right,
    rgba(11, 14, 19, 0.94) 0%,
    rgba(11, 14, 19, 0.58) 38%,
    rgba(11, 14, 19, 0.16) 64%,
    transparent 82%
  );
}
/* Auf schmalen Viewports steht die Textinsel öfter über hellen Bildzonen (Bild deckt die
   ganze Breite) — Scrim wird gerade statt diagonal und trägt weiter nach oben. */
@media (max-width: 640px) {
  .buehne__grad-ul,
  .buehne__grad-ul--kraeftig {
    background: linear-gradient(
      to top,
      rgba(11, 14, 19, 0.94) 0%,
      rgba(11, 14, 19, 0.74) 40%,
      rgba(11, 14, 19, 0.32) 64%,
      transparent 88%
    );
  }
}
.buehne__insel {
  position: relative;
  z-index: 2;
  max-width: 46ch;
  margin-top: auto;
  padding: 0 7vw 3rem;
}
.buehne__insel--re {
  margin-left: auto;
  text-align: right;
  padding: 0 7vw 3rem;
}
.buehne--a2 {
  height: 74vh;
  align-items: flex-end;
}
.manifest__zitat {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.16;
  color: var(--chrom);
  margin: 0.8rem 0 1.2rem;
}
.manifest__text {
  color: var(--stahl);
  font-size: 1rem;
  max-width: 48ch;
  margin-bottom: 1.6rem;
}
.zahlen {
  display: flex;
  gap: clamp(1.4rem, 3vw, 3rem);
  flex-wrap: wrap;
}
.zahlen__item strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--chrom);
  font-feature-settings: "tnum";
  line-height: 1;
}
.zahlen__item span {
  font-size: 0.82rem;
  color: var(--stahl);
  letter-spacing: 0.04em;
}

/* ============ A3 — Signature Sticky-Szene ============ */
.durchfahrt {
  position: relative;
  margin: 5rem 0 16rem;
}
.durchfahrt__head {
  padding: 0 7vw;
  margin-bottom: 3rem;
  max-width: 62ch;
}
.durchfahrt__head h2 {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  color: var(--chrom);
  margin: 0.8rem 0 0;
}
.durchfahrt__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
.durchfahrt__buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--nacht);
}
.durchfahrt__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  filter: contrast(1.06) saturate(0.92) brightness(0.9) brightness(0.32)
    saturate(0.8);
  transform: scale(1.055);
  transition:
    opacity 0.7s var(--ease-zuendung),
    filter 0.7s var(--ease-zuendung),
    transform 0.7s var(--ease-zuendung);
}
.durchfahrt__bild[data-aktiv="true"] {
  opacity: 1;
  filter: contrast(1.06) saturate(0.92) brightness(0.9);
  transform: scale(1);
}
.durchfahrt__basis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(0.92) brightness(0.9);
  pointer-events: none;
}
.durchfahrt__schleier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(11, 14, 19, 0.92) 0%,
    rgba(11, 14, 19, 0.42) 38%,
    transparent 64%
  );
}
.durchfahrt__kapitelfeld {
  position: absolute;
  left: 7vw;
  right: 7vw;
  bottom: 12%;
  z-index: 2;
  max-width: 46ch;
}
.kapitel-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--natrium);
  margin-bottom: 1rem;
}
.kapitel-marke .balken {
  width: 88px;
}
.kapitel__titel {
  font-size: clamp(2rem, 3.2vw, 3rem);
  color: var(--chrom);
  margin-bottom: 0.8rem;
}
.kapitel__text {
  color: var(--stahl);
  font-size: 1.05rem;
  max-width: 44ch;
  margin-bottom: 0;
}
.durchfahrt__kapitel {
  position: relative;
  z-index: 1;
}
.durchfahrt__kapitel-block {
  height: 100svh;
}
.durchfahrt__abschluss {
  padding: 3rem 7vw 0;
  max-width: 56ch;
}
.durchfahrt__abschluss p {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--chrom);
}

/* ============ A4 — Preis-Anker ============ */
.buehne--a4 {
  height: 88vh;
}
.preistafel {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  margin-top: auto;
  padding: 0 7vw 4rem;
  max-width: 640px;
}
.preistafel h2 {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  color: var(--chrom);
  margin-bottom: 1.4rem;
}
.preisliste {
  display: grid;
  gap: 0.1rem;
}
.preisliste__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(232, 237, 243, 0.14);
}
.preisliste__zeile:last-child {
  border-bottom: 0;
}
.preisliste__label {
  color: var(--chrom);
  font-size: 1rem;
}
.preisliste__wert {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  color: var(--natrium);
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.preistafel__hinweis {
  margin-top: 1.4rem;
  font-size: 0.88rem;
  color: var(--stahl);
  max-width: 48ch;
}
.preistafel__cta {
  margin-top: 1.6rem;
}

/* ============ A5 — Fahrzeug-Anriss ============ */
.fahrzeugreihe {
  position: relative;
  margin: 4rem 0 17rem;
  padding: 0 7vw;
}
/* Fremd-Blick #6: die 17rem-Weite ist Pflicht (Rhythmus-Karte design.md §2.3), aber leer
   wirkte sie wie ein Rendering-Fehler statt wie eine Atempause. Eine leise Lichtquelle
   (Ford-Blau, dieselbe Sprache wie §7 "eine Lichtquelle pro Bild") statt totem Schwarz. */
.fahrzeugreihe::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 15rem;
  background: radial-gradient(
    65% 100% at 50% 100%,
    rgba(11, 99, 229, 0.28),
    rgba(11, 99, 229, 0.08) 45%,
    transparent 75%
  );
  pointer-events: none;
}
.fahrzeugreihe__kopf {
  max-width: 60ch;
  margin-bottom: 3rem;
}
.fahrzeugreihe__kopf h2 {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  color: var(--chrom);
  margin: 0.8rem 0 1rem;
}
.fahrzeugreihe__kopf p {
  color: var(--stahl);
  max-width: 56ch;
}
.fahrzeugreihe__hinweis {
  font-size: 0.88rem;
  color: var(--stahl);
  margin-top: 0.6rem;
}
.fbahn {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 1.4rem;
}
.fbahn--gross {
  height: 88vh;
}
.fbahn--klein {
  height: 62vh;
}
.fbahn__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(0.92) brightness(0.9);
  pointer-events: none;
}
.fbahn__schleier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(11, 14, 19, 0.82) 0%,
    rgba(11, 14, 19, 0.14) 40%,
    transparent 62%
  );
}
.fbahn__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem clamp(1.2rem, 3vw, 2.4rem);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.fbahn__titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  color: var(--chrom);
}
.fbahn__zusatz {
  color: var(--stahl);
  font-size: 0.88rem;
  margin-top: 0.3rem;
}
.fbahn__preis {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--natrium);
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.fbahn-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.fbahn-paar .fbahn--klein:nth-child(2) {
  margin-top: 3rem;
}
@media (max-width: 767px) {
  .fbahn-paar {
    grid-template-columns: 1fr;
  }
  .fbahn-paar .fbahn--klein:nth-child(2) {
    margin-top: 0;
  }
}
.fahrzeugreihe__cta {
  margin-top: 1rem;
}

/* ============ A6 — Bewertungs-Diashow ============ */
/* Härtetest 15.08.: Die feste Bühnenhöhe (82vh) deckelte den Bewertungs-Zug auf
   277 px, während die Karten 380 px hoch sind — `overflow:hidden` schnitt den
   Kartenfuß mit Name und Quelle komplett ab (auf 390 px zusätzlich das Zitat
   mitten im Satz). Ausgerechnet der Vertrauensbeweis, wegen dem die Sektion
   existiert, war weg. Die Bühne behält ihr Mindestmaß, wächst aber mit dem Inhalt. */
.buehne--a6 {
  min-height: 82vh;
  height: auto;
  display: block;
}
.bewertungen {
  position: relative;
  z-index: 2;
  padding: 5rem 0 4rem;
  display: flex;
  flex-direction: column;
  height: auto;
}
.zug {
  flex: none;
}
.bewertungen__kopf {
  padding: 0 7vw;
  margin-bottom: 2.4rem;
}
.bewertungen__kopf h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--chrom);
  margin: 0.8rem 0 0;
}
.bewertungen__gesamt {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.6rem;
  color: var(--stahl);
  font-size: 0.95rem;
}
.bewertungen__gesamt strong {
  color: var(--natrium);
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 800;
}
.zug {
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 2.5%,
    black 97.5%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 2.5%,
    black 97.5%,
    transparent 100%
  );
  margin-top: auto;
}
.zug__spur {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  padding: 0 7vw;
  animation: zug-lauf 42s linear infinite;
}
.zug:hover .zug__spur,
.zug:focus-within .zug__spur {
  animation-play-state: paused;
}
@keyframes zug-lauf {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.karte {
  flex: 0 0 min(340px, 82vw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(11, 14, 19, 0.72);
  border: 1px solid var(--nacht-3);
  border-radius: 2px;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  backdrop-filter: blur(6px);
}
.karte__sterne {
  color: var(--natrium);
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}
.karte__zitat {
  color: var(--chrom);
  font-size: 0.98rem;
  line-height: 1.5;
  flex: 1;
}
.karte__fuss {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--nacht-3);
}
.karte__name {
  font-weight: 600;
  color: var(--chrom);
  font-size: 0.9rem;
}
.karte__quelle {
  color: var(--stahl);
  font-size: 0.82rem;
}
.bewertungen__fuss {
  padding: 1.4rem 7vw 0;
  font-size: 0.82rem;
  color: var(--stahl);
  max-width: 60ch;
}
.bewertungen__grid {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .zug {
    display: none;
  }
  .bewertungen__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    padding: 0 7vw;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .bewertungen__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ A7 — Mensch + Kontakt-Anriss ============ */
.buehne--a7 {
  margin-top: 2.5rem;
  height: 64vh;
}
.kontaktanriss__insel {
  z-index: 2;
  padding: 0 7vw 3rem;
}
.kontaktanriss__insel h2 {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  color: var(--chrom);
  margin: 0.8rem 0 1rem;
}
.kontaktanriss__namen {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
.kontaktanriss__namen div strong {
  display: block;
  color: var(--chrom);
  font-size: 1rem;
}
.kontaktanriss__namen div span {
  color: var(--stahl);
  font-size: 0.85rem;
}
.kontaktanriss__aktionen {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* ============ A8 — Footer ============ */
.fusszeile {
  position: relative;
  min-height: 62vh;
  margin-top: 9rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--nacht);
}
.fusszeile__bild {
  position: absolute;
  top: -6rem;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% + 6rem);
  object-fit: cover;
  object-position: top;
  filter: contrast(1.06) saturate(0.92) brightness(0.9);
  pointer-events: none;
}
.fusszeile__schleier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(11, 14, 19, 0.97) 0%,
    rgba(11, 14, 19, 0.68) 46%,
    rgba(11, 14, 19, 0.2) 78%,
    transparent 100%
  );
}
.fusszeile__inhalt {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 4rem 7vw 2rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.4rem;
}
@media (max-width: 900px) {
  .fusszeile__inhalt {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .fusszeile__inhalt {
    grid-template-columns: 1fr;
  }
}
.fusszeile__marke .kopf__logo {
  height: 34px;
  margin-bottom: 1rem;
}
.fusszeile__marke p {
  color: var(--stahl);
  font-size: 0.9rem;
  max-width: 34ch;
}
.fusszeile h3 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stahl);
  margin-bottom: 1rem;
}
.fusszeile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.fusszeile a {
  text-decoration: none;
  color: var(--chrom);
  font-size: 0.92rem;
}
@media (hover: hover) and (pointer: fine) {
  .fusszeile a:hover {
    color: var(--ford-hell);
  }
}
.fusszeile__unten {
  position: relative;
  z-index: 2;
  padding: 1.4rem 7vw 1.8rem;
  border-top: 1px solid var(--nacht-3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.82rem;
  color: var(--stahl);
}

/* ============ Schwebende Aktionen ============ */
.schweb {
  position: fixed;
  right: clamp(1rem, 2vw, 1.8rem);
  bottom: clamp(1rem, 2vw, 1.8rem);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.schweb a {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ford);
  color: var(--chrom);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.16s var(--ease-zuendung);
}
.schweb a:active {
  transform: scale(0.94);
}
.schweb a.schweb--anfrage {
  background: var(--natrium-tief);
}
@media (max-width: 640px) {
  .schweb {
    display: none;
  }
  .leiste-unten {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    background: var(--nacht-2);
    border-top: 1px solid var(--nacht-3);
  }
  .leiste-unten a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 0;
    text-decoration: none;
    color: var(--chrom);
    font-size: 0.92rem;
    font-weight: 600;
  }
  .leiste-unten a:first-child {
    border-right: 1px solid var(--nacht-3);
  }
  body {
    padding-bottom: 58px;
  }
}
@media (min-width: 641px) {
  .leiste-unten {
    display: none;
  }
}

/* ============ Reveal-System (Lichtanlauf) ============ */
[data-reveal] {
  opacity: 0;
  transform: scale(1.03);
  filter: brightness(0.32) saturate(0.8);
  transition:
    opacity 0.7s var(--ease-zuendung),
    transform 0.7s var(--ease-zuendung),
    filter 0.7s var(--ease-zuendung);
}
[data-reveal].ist-sichtbar {
  opacity: 1;
  transform: scale(1);
  filter: brightness(1) saturate(1);
}
[data-reveal-text] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s var(--ease-zuendung) 0.14s,
    transform 0.5s var(--ease-zuendung) 0.14s;
}
[data-reveal-text].ist-sichtbar {
  opacity: 1;
  transform: translateY(0);
}

/* Gegenlauf-Parallax */
[data-parallax-bild] {
  will-change: transform;
}
[data-parallax-text] {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-text] {
    transition: opacity 0.3s ease;
    transform: none !important;
    filter: none !important;
  }
  [data-reveal] {
    opacity: 0;
  }
  [data-reveal].ist-sichtbar {
    opacity: 1;
  }
  [data-parallax-bild],
  [data-parallax-text] {
    transform: none !important;
  }
}

/* Overlay Legal */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(11, 14, 19, 0.94);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1.5rem;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-zuendung);
}
.overlay[data-offen="true"] {
  opacity: 1;
  pointer-events: auto;
}
.overlay__karte {
  background: var(--nacht-2);
  border: 1px solid var(--nacht-3);
  border-radius: 4px;
  max-width: 720px;
  width: 100%;
  padding: 2.5rem clamp(1.5rem, 3vw, 3rem);
}
.overlay__schliessen {
  float: right;
  background: none;
  border: 0;
  color: var(--stahl);
  font-size: 1.4rem;
  cursor: pointer;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--ford);
  color: var(--chrom);
  padding: 0.8rem 1.2rem;
  z-index: 100;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* Härtetest 15.08.: Szenen-/Sektionstitel nicht hinter der festen Kopfleiste landen lassen. */
.durchfahrt__head,
[id] > h2,
section[id] {
  scroll-margin-top: 6.5rem;
}


/* Fremd-Blick-Nachlauf M1 (15.08.): Bei 390 liegt die obere Fußzeilen-Hälfte
   ("Ford-Händler und Werkstatt …", Label "BETRIEB") im transparenten Ende des
   Schleiers — auf dem hellen Himmel des Fußzeilen-Fotos ist Stahlgrau dort
   praktisch unsichtbar. Bei 1440 fällt es nicht auf, weil dieselben Zeilen
   tiefer im Verlauf sitzen. Betraf alle 9 Seiten. */
@media (max-width: 900px) {
  .fusszeile__schleier {
    background: linear-gradient(
      to top,
      rgba(11, 14, 19, 0.98) 0%,
      rgba(11, 14, 19, 0.93) 50%,
      rgba(11, 14, 19, 0.8) 100%
    );
  }
}

/* Fremd-Blick-Nachlauf M5 (15.08., §0e-108): Die Kennzahl-Reihe ist ein
   flex-wrap in einer schmalen Textspalte — die dritte Zahl rutschte allein in
   eine zweite Zeile, rechts daneben blieb die halbe Spalte leer. Ein Raster
   hält die Familie zusammen: drei gleich breite Spalten, auf 560 px zwei. */
.zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}
@media (max-width: 560px) {
  .zahlen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}