/* ============================================================
   Grammatik A "Das Archiv" + Grammatik B "Die Wagenkarte"
   (bau-brief.md §5) — getrennt über body.gram-a / body.gram-b
   ============================================================ */

/* ============================================================
   GEMEINSAM: ⭐ Signature "Die Jahresspur" (S3)
   ============================================================ */
.jahresspur {
  position: relative;
  padding: 7rem 0 8rem;
}
.jahresspur__intro {
  padding: 0 var(--rand) 3.5rem;
  max-width: 46rem;
}
.jahresspur__kette {
  position: relative;
}
.jahresspur__glied {
  position: relative;
  margin-bottom: 2.5rem;
  padding-left: clamp(3.5rem, 9vw, 7rem);
}
.jahresspur__jahr {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-jahr);
  line-height: 0.82;
  color: var(--bernstein);
  position: absolute;
  top: 50%;
  /* Hamada 17.08.2026: vorher -0.7*var(--rand) — die Null jeder Kapitelzahl hing
     halb außerhalb des Viewports (§0e-155: kein gewollter Ausbruch, sondern Beschnitt).
     Jetzt sitzt die Zahl vollständig sichtbar im Randbereich. */
  left: calc(var(--rand) * 0.25);
  transform: translateY(-50%);
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transition: opacity 260ms var(--ease-auslauf);
}
.jahresspur__bild {
  position: relative;
  overflow: hidden;
}
.jahresspur__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jahresspur__marginalie {
  position: absolute;
  left: var(--rand);
  bottom: 1.4rem;
  z-index: 3;
  max-width: 28rem;
  background: linear-gradient(to top, rgba(11, 14, 12, 0.86), transparent);
  padding: 2.2rem 1.4rem 0.9rem 0;
}
.jahresspur__modell {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-h3);
  color: var(--hallenweiss);
}
.jahresspur__urteil {
  font-size: 0.88rem;
  color: var(--hallenweiss);
  opacity: 0.85;
  margin-top: 0.3rem;
}
.jahresspur__schluss {
  padding: 3rem var(--rand) 0;
  font-family: var(--f-display);
  font-size: var(--t-displayL);
  font-weight: 500;
  line-height: 1.08;
  max-width: 26ch;
}

@media (max-width: 899px) {
  .jahresspur__glied {
    padding-left: 0;
  }
  .jahresspur__jahr {
    position: static;
    display: block;
    transform: none;
    font-size: clamp(3rem, 16vw, 4.5rem);
    margin: 0 0 0.6rem;
  }
  .jahresspur__marginalie {
    position: static;
    background: none;
    padding: 1rem 0 0;
  }
}

/* ============================================================
   GRAMMATIK A — "Das Archiv"
   ============================================================ */
.gram-a .archiv-bahn {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.gram-a .archiv-bahn--ueberhang {
  margin-top: -4rem;
}
@media (min-width: 900px) {
  .gram-a .archiv-bahn--ueberhang {
    margin-top: -6vw;
  }
}
.gram-a .archiv-bahn__media {
  position: relative;
  width: 100%;
  margin-left: 12%;
  overflow: hidden;
}
.gram-a .archiv-bahn__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gram-a .archiv-bahn__marge {
  padding: 1.6rem var(--rand) 0;
  display: flex;
  justify-content: flex-end;
}
.gram-a .archiv-bahn__text {
  max-width: 30ch;
  text-align: right;
}
.gram-a .archiv-bahn__statement {
  padding: 2.4rem var(--rand) 0;
}
.gram-a .archiv-bahn__statement h2 {
  font-size: var(--t-displayL);
  font-weight: 500;
  max-width: 20ch;
  margin-left: auto;
  text-align: right;
}
@media (max-width: 899px) {
  .gram-a .archiv-bahn__media {
    margin-left: 8%;
  }
  .gram-a .archiv-bahn__text,
  .gram-a .archiv-bahn__statement h2 {
    max-width: 100%;
    text-align: left;
    margin-left: 0;
  }
  .gram-a .archiv-bahn__marge {
    justify-content: flex-start;
  }
}

/* Bodenschnitt: Bild-Doppel läuft über die Sektionsgrenze (S5) */
.gram-a .halle {
  position: relative;
  padding-top: 3rem;
}
.gram-a .halle__reihe {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
}
.gram-a .halle__bild {
  position: relative;
  overflow: hidden;
}
.gram-a .halle__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gram-a .halle__bild--eins {
  height: 84vh;
}
.gram-a .halle__bild--zwei {
  height: 84vh;
  margin-top: 10vh;
  margin-bottom: -10vh;
  position: relative;
  z-index: 2;
}
.gram-a .halle__kopf-statisch {
  padding: 5.5rem var(--rand) 2.6rem;
  max-width: 30rem;
}
@media (max-width: 899px) {
  .gram-a .halle__reihe {
    grid-template-columns: 1fr;
  }
  .gram-a .halle__bild--eins,
  .gram-a .halle__bild--zwei {
    height: 46vh;
    margin: 0;
  }
  .gram-a .halle__kopf-statisch {
    padding: 3.4rem var(--rand) 1.6rem;
    max-width: 100%;
  }
}

/* ============================================================
   GRAMMATIK B — "Die Wagenkarte"
   ============================================================ */
.gram-b .wagenkarte {
  position: relative;
  overflow: hidden;
}
.gram-b .wagenkarte__media {
  position: absolute;
  inset: 0;
}
.gram-b .wagenkarte__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gram-b .wagenkarte__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 14, 12, 0.88) 0%,
    rgba(11, 14, 12, 0.15) 46%,
    transparent 68%
  );
}
.gram-b .wagenkarte__inhalt {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--rand) 2.2rem;
}
.gram-b .wagenkarte__zeile {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(3.4rem, 11vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  transform: translateY(15%);
  width: 100%;
  color: var(--hallenweiss);
}
.gram-b .wagenkarte--100 {
  height: 100svh;
}
.gram-b .wagenkarte--88 {
  height: 88svh;
}
.gram-b .wagenkarte--96 {
  height: 96svh;
}
@media (max-width: 899px) {
  .gram-b .wagenkarte--100,
  .gram-b .wagenkarte--88,
  .gram-b .wagenkarte--96 {
    height: 62vh;
    min-height: 420px;
  }
  .gram-b .wagenkarte__zeile {
    font-size: clamp(2.2rem, 10vw, 3.4rem);
    transform: none;
  }
}

.gram-b .band {
  min-height: 2rem;
  padding: 1.5rem var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--kante);
}
.gram-b .band__statement {
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--hallenweiss);
  opacity: 0.86;
  max-width: 44ch;
}
.gram-b .band__meta {
  max-width: 24ch;
  text-align: right;
}
@media (max-width: 899px) {
  .gram-b .band {
    flex-direction: column;
    align-items: flex-start;
  }
  .gram-b .band__meta {
    text-align: left;
  }
}

/* ============================================================
   "Die Bühne" — Startseite, Nachtrag 17.08.2026 (Auftrag 1c)
   Die drei teuersten Fahrzeuge des mobile.de-Bestands. Bewusst KEIN
   Karten-Raster (galerie.html trägt bereits das eine erlaubte Grid,
   §0b Nr. 1) — stattdessen eine asymmetrische Reihe mit einer großen
   und zwei kleineren Karten, mobil als Swipe-Bahn.
   ============================================================ */
.buehne {
  padding: 6rem 0;
}
.buehne__kopf {
  max-width: 46rem;
  padding-bottom: 3rem;
}
.buehne__reihe {
  display: flex;
  gap: 1rem;
  padding: 0 var(--rand);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.buehne__reihe::-webkit-scrollbar {
  display: none;
}
.buehne__karte {
  position: relative;
  display: block;
  flex: 0 0 78%;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  background: var(--fuge);
  border: 1px solid var(--kante);
}
@media (min-width: 900px) {
  .buehne__reihe {
    overflow-x: visible;
  }
  .buehne__karte {
    flex: 1 1 0;
  }
  .buehne__karte--gross {
    flex: 1.5 1 0;
  }
}
.buehne__bild {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.buehne__karte--gross .buehne__bild {
  aspect-ratio: 16 / 11;
}
.buehne__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms var(--ease-auslauf);
}
@media (hover: hover) and (pointer: fine) {
  .buehne__karte:hover .buehne__bild img {
    transform: scale(1.035);
  }
}
.buehne__info {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.buehne__marke {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-h3);
}
.buehne__preis {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--bernstein);
  font-size: 1.1rem;
}
.buehne__zustand {
  font-size: 0.8rem;
  color: var(--zinn);
}
.buehne__fuss {
  padding: 2.6rem var(--rand) 0;
}

/* ============================================================
   UNTERSEITEN — gemeinsame Bausteine (bau-brief §2/§9, flacher
   Rhythmus als die Startseite; Aufgabe 3)
   ============================================================ */

/* ---------- Unterseiten-Head (flacher als der Startseiten-Hero) ---------- */
.uhead {
  position: relative;
  height: 62vh;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.uhead__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Gleiche Kurve wie .hero__scrim in base.css — und zwar aus demselben Grund:
   Auch die Unterseiten-Heads sind Videos, durch die helle Karosserien fahren.
   Der Textblock sitzt per align-items:flex-end genau in der Zone, die vorher
   nur mit 0.5/0.08 abgedeckt war; gemessen sank der Eyebrow-Kontrast dort über
   die Videolaufzeit auf 1,26:1 (fahrzeuge), 1,39:1 (galerie), 1,01:1 (kontakt/390).
   Ein Kontrast-Defekt am Head gehört der Komponente, nicht der einzelnen Seite —
   deshalb dieselbe Kurve, nachgemessen mit data/head-kontrast-alle.mjs. */
.uhead__scrim {
  position: absolute;
  inset: 0;
  /* Zwei Lagen, weil der Kopftext hier NICHT unten sitzt (gemessen mit
     data/head-kontrast-alle.mjs: Eyebrow bei ~31 %, Lead bei ~89 % der Kopfhöhe):
     ein reiner Verlauf von unten lässt die obere Hälfte ungeschützt, und genau dort
     fahren die hellen Karosserien durch. Lage 1 = gleichmäßige Grundabdunklung,
     Lage 2 = der gerichtete Verlauf nach unten. Zusammen tragen sie den Text über
     die ganze Videolaufzeit, ohne dass ein Kasten entsteht (§0e-129). */
  background:
    linear-gradient(
      to top,
      rgba(11, 14, 12, 0.94) 0%,
      rgba(11, 14, 12, 0.72) 38%,
      rgba(11, 14, 12, 0.42) 68%,
      rgba(11, 14, 12, 0.38) 100%
    ),
    rgba(11, 14, 12, 0.44);
}
.uhead__inhalt {
  position: relative;
  z-index: 2;
  padding: 0 var(--rand) 3rem;
  max-width: 48rem;
}
.uhead__eyebrow {
  margin-bottom: 1rem;
}
.uhead__zeile {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.06;
  color: var(--hallenweiss);
}
.uhead__lead {
  margin-top: 1.1rem;
}
@media (max-width: 899px) {
  .uhead {
    height: 50vh;
    min-height: 340px;
  }
}

/* ---------- fahrzeuge.html — Editorial-Bahnen ---------- */
.editorial {
  padding: 5rem 0 2rem;
}
.editorial__gruppe-kopf {
  padding: 3.4rem var(--rand) 1.6rem;
  border-top: 1px solid var(--kante);
}
.editorial__gruppe-kopf:first-child {
  border-top: none;
}
.editorial__zeile {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;
}
.editorial__zeile:nth-child(even) {
  direction: rtl;
}
.editorial__zeile:nth-child(even) > * {
  direction: ltr;
}
.editorial__text {
  padding: 2.2rem var(--rand) 2.2rem 0;
  margin-left: var(--rand);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}
.editorial__modell {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-h3);
}
.editorial__urteil {
  font-size: 0.92rem;
  color: var(--hallenweiss);
  opacity: 0.86;
  max-width: 40ch;
}
.editorial__bild {
  position: relative;
  overflow: hidden;
  min-height: 17rem;
}
.editorial__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 899px) {
  .editorial__zeile,
  .editorial__zeile:nth-child(even) {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .editorial__text {
    margin-left: 0;
    padding: 1.8rem var(--rand);
  }
  .editorial__bild {
    min-height: 15rem;
  }
}

/* ---------- Bestand (fahrzeuge.html, Nachtrag 17.08.2026, Auftrag 1b) ----------
   Gleiche Zeilen-Grammatik wie .editorial (Bild + Text, alternierende Richtung),
   um Bestand und Referenzarchiv sichtbar aus derselben Sprache zu sprechen. */
.bestand {
  padding: 3.5rem 0 2rem;
}
.bestand__liste {
  margin-top: 1rem;
}
.bestand__zeile {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  border-top: 1px solid var(--kante);
}
.bestand__zeile:nth-child(even) {
  direction: rtl;
}
.bestand__zeile:nth-child(even) > * {
  direction: ltr;
}
.bestand__liste .bestand__zeile:last-child {
  border-bottom: 1px solid var(--kante);
}
.bestand__bild {
  position: relative;
  overflow: hidden;
  min-height: 20rem;
}
.bestand__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms var(--ease-auslauf);
}
@media (hover: hover) and (pointer: fine) {
  .bestand__bild:hover img {
    transform: scale(1.02);
  }
}
.bestand__info {
  padding: 2.2rem var(--rand) 2.2rem 0;
  margin-left: var(--rand);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: center;
}
.bestand__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.bestand__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-h3);
  color: var(--hallenweiss);
  text-decoration: none;
}
.bestand__name:hover {
  color: var(--bernstein);
}
.bestand__preis {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--bernstein);
  white-space: nowrap;
}
.bestand__zustand {
  font-size: 0.82rem;
  color: var(--zinn);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bestand__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  font-size: 0.88rem;
  color: var(--hallenweiss);
  opacity: 0.86;
}
.bestand__specs span {
  white-space: nowrap;
}
.bestand__cta {
  margin-top: 0.4rem;
  width: fit-content;
}
@media (max-width: 899px) {
  .bestand__zeile,
  .bestand__zeile:nth-child(even) {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .bestand__info {
    margin-left: 0;
    padding: 1.8rem var(--rand);
  }
  .bestand__bild {
    min-height: 16rem;
  }
}

/* ---------- Fahrzeug-Detailseite (fahrzeug-<slug>.html) ---------- */
.fzgdetail {
  padding: 4rem 0 2rem;
}
.fzgdetail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding-top: 1rem;
}
.fzgdetail__preis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.fzgdetail__wert {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-displayL);
  color: var(--bernstein);
  line-height: 1;
}
.fzgdetail__zustand {
  font-size: 0.95rem;
  color: var(--zinn);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fzgdetail__fussnote {
  font-size: 0.76rem;
  color: var(--zinn);
  margin-top: 0.4rem;
}
.fzgdetail__specs {
  margin: 0;
  border-top: 1px solid var(--kante);
  padding-top: 1.4rem;
}
.fzgdetail__specs div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--kante);
}
.fzgdetail__specs dt {
  color: var(--zinn);
  font-size: 0.85rem;
}
.fzgdetail__specs dd {
  margin: 0;
  font-weight: 500;
}
.fzgdetail__hinweis {
  margin-top: 3rem;
  max-width: 60ch;
  font-size: 0.85rem;
  color: var(--zinn);
}
@media (max-width: 899px) {
  .fzgdetail__grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

/* ---------- Ehrlichkeits-Box (fahrzeuge.html, Pflicht) ---------- */
.ehrlichkeit {
  margin: 2rem var(--rand) 5rem;
  padding: 2.4rem;
  border: 1px solid var(--kante);
  background: var(--fuge);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  max-width: 46rem;
}
/* h2 UND h3: auf der Bestandsliste steht der Block hinter echten h2-Titeln
   (dort ist h3 richtig), auf der Fahrzeug-Detailseite ist er die erste
   Unterueberschrift nach der h1 und muss h2 sein. Gleiche Optik, richtige
   Ebene — die Ueberschriften-Groesse haengt hier am Block, nicht am Tag. */
.ehrlichkeit h2,
.ehrlichkeit h3 {
  font-size: var(--t-h3);
  font-weight: 600;
}

/* ---------- galerie.html — das eine Card-Grid (§0b Nr. 1) ---------- */
.galerie {
  padding: 5rem 0 6rem;
}
.galerie__gruppe-kopf {
  padding: 3rem var(--rand) 1.4rem;
  border-top: 1px solid var(--kante);
}
.galerie__gruppe-kopf:first-child {
  border-top: none;
}
.galerie__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 0 var(--rand);
}
@media (max-width: 1279px) {
  .galerie__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .galerie__grid {
    grid-template-columns: 1fr;
  }
}
.galerie__kachel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  border: none;
  padding: 0;
  background: var(--fuge);
}
.galerie__kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms var(--ease-auslauf);
}
@media (hover: hover) and (pointer: fine) {
  .galerie__kachel:hover img {
    transform: scale(1.03);
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11, 14, 12, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.lightbox.ist-offen {
  opacity: 1;
  pointer-events: auto;
}
.lightbox__bild {
  max-width: min(92vw, 74rem);
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(0.97);
  transition: transform 200ms var(--ease-auslauf);
}
.lightbox.ist-offen .lightbox__bild {
  transform: scale(1);
}
.lightbox__schliessen,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(233, 234, 229, 0.06);
  border: 1px solid var(--kante);
  color: var(--hallenweiss);
  cursor: pointer;
  padding: 0.7rem 1rem;
  font-family: var(--f-body);
  font-size: 0.85rem;
  transition: transform 160ms var(--ease-auslauf);
}
.lightbox__schliessen:active,
.lightbox__prev:active,
.lightbox__next:active {
  transform: scale(0.97);
}
.lightbox__schliessen {
  top: 1.4rem;
  right: var(--rand);
}
.lightbox__prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- Kontakt-Karte, 2-Klick-Muster ---------- */
.karte {
  position: relative;
  min-height: 22rem;
  background: var(--fuge);
  border: 1px solid var(--kante);
  display: flex;
  align-items: center;
  justify-content: center;
}
.karte iframe {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  border: 0;
  position: absolute;
  inset: 0;
}
.karte__hinweis {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}
.karte.ist-geladen .karte__hinweis {
  display: none;
}

/* ---------- Rechtsseiten (impressum/datenschutz) ---------- */
.prose {
  max-width: 66ch;
  margin: 0 auto;
  padding: 8rem var(--rand) 6rem;
}
.prose h1 {
  font-size: var(--t-h1);
  margin-bottom: 2.4rem;
}
.prose h2 {
  font-size: var(--t-h3);
  margin: 2.4rem 0 0.8rem;
}
.prose p,
.prose ul {
  margin: 0 0 1rem;
  color: var(--hallenweiss);
  opacity: 0.9;
}
.prose a {
  color: var(--bernstein);
}

/* ---------- 404 ---------- */
.fehler {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--rand);
  gap: 1.4rem;
}
.fehler__ziffer {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-jahr);
  color: var(--bernstein);
  line-height: 0.82;
}

/* Mobil-Verstärkung der Kopf-Scrims (gemessen mit data/head-kontrast-alle.mjs).
   Unter 900 px ist der Kopf nur noch ein Band, das Video zeigt durch object-fit:cover
   einen engeren, oft helleren Ausschnitt, und der Text rückt prozentual weiter nach oben.
   Die Desktop-Kurve reicht dort nicht: gemessen 2,2–3,9:1 statt der geforderten 4,5:1.
   Das Video bleibt erkennbar — auf dieser Breite trägt ohnehin die Typo, nicht das Bild. */
@media (max-width: 900px) {
  .uhead__scrim {
    background:
      linear-gradient(
        to top,
        rgba(11, 14, 12, 0.96) 0%,
        rgba(11, 14, 12, 0.82) 38%,
        rgba(11, 14, 12, 0.6) 68%,
        rgba(11, 14, 12, 0.48) 100%
      ),
      rgba(11, 14, 12, 0.42);
  }
  .hero__scrim {
    background:
      linear-gradient(
        to top,
        rgba(11, 14, 12, 0.96) 0%,
        rgba(11, 14, 12, 0.9) 30%,
        rgba(11, 14, 12, 0.62) 60%,
        rgba(11, 14, 12, 0.3) 88%
      ),
      rgba(11, 14, 12, 0.22);
  }
}

/* Die Eyebrow im Seitenkopf liegt auf bewegtem Video, nicht auf ruhiger Fläche.
   In --zinn (#97A09B) misst sie dort bis auf 3,86:1 herunter (Messung
   data/head-kontrast-alle.mjs, fahrzeuge @1440, t=0,5 s) — H1 und Lead liegen
   mit 11:1 bzw. 13,7:1 dagegen weit im Grünen. Meta-Grau ist die richtige Farbe
   auf der dunklen Bühne, aber nicht über einem hellen Karosserie-Video:
   im Kopf deshalb Hallenweiß, überall sonst bleibt --zinn unangetastet. */
.uhead__eyebrow,
.hero__meta {
  color: var(--hallenweiss);
}

/* Preisklassen-Ordnung (Hamada 17.08.2026 — „wie bei Thiel", §0e-148: 3 benannte
   Klassen aus dem ECHTEN Bestand: ab 60k / 25–40k / bis 15k, je 3 Fahrzeuge = volle
   Reihen ohne Waise; eigene Listen je Klasse, damit die even/odd-Zickzack-Logik der
   Zeilen pro Klasse neu ansetzt statt über Kopfzeilen zu stolpern) */
.bestand__klasse {
  margin-top: 4.6rem;
  margin-bottom: 1.4rem;
  padding-inline: var(--rand);
}
.bestand__klasse:first-of-type {
  margin-top: 2.6rem;
}
.bestand__klasse-titel {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  margin-top: 0.5rem;
}
.bestand__klasse-zeile {
  margin-top: 0.55rem;
  color: var(--zinn);
  max-width: 52ch;
}

/* Anfahrt auf der Startseite (Hamada 17.08.2026) — 2-Klick-Karte wie kontakt.html */
.anfahrt {
  padding: 4.5rem var(--rand) 5rem;
  border-top: 1px solid var(--kante);
}
.anfahrt__innen {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) 1.6fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  max-width: 78rem;
  margin-inline: auto;
}
.anfahrt .karte {
  min-height: 22rem;
}
@media (max-width: 860px) {
  .anfahrt { padding-block: 3rem 3.5rem; }
  .anfahrt__innen { grid-template-columns: 1fr; gap: 1.8rem; }
  .anfahrt .karte { min-height: 17rem; }
}

/* ---------- Bestand als Karten-Raster (Hamada 20.08.2026: „so aufstellen wie
   bei SZ Cars") — löst die Zickzack-Zeilen ab, bei denen ein Wagen fast einen
   ganzen Bildschirm brauchte. Drei Karten je Reihe, ganze Karte klickbar. ---- */
.bestand__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  padding-inline: var(--rand);
  margin-bottom: 1rem;
}
.wagen {
  display: flex;
  flex-direction: column;
  background: var(--flaeche, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--kante);
  border-radius: 4px;
  overflow: hidden;
  transition:
    transform 240ms var(--ease-auslauf),
    border-color 240ms var(--ease-auslauf);
}
@media (hover: hover) and (pointer: fine) {
  .wagen:hover {
    transform: translateY(-3px);
    border-color: var(--bernstein);
  }
  .wagen:hover .wagen__bild img {
    transform: scale(1.03);
  }
}
.wagen__bild {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.wagen__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--ease-auslauf);
}
.wagen__text {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.2rem 1.3rem 1.3rem;
  flex: 1;
}
.wagen__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--hallenweiss);
  text-decoration: none;
}
.wagen__name:hover {
  color: var(--bernstein);
}
.wagen__zustand {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zinn);
}
.wagen__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  font-size: 0.84rem;
  color: var(--hallenweiss);
  opacity: 0.82;
}
.wagen__specs span {
  white-space: nowrap;
}
/* Keine Trennpunkte: bei zweizeiligen Eckdaten landete das "·" am
   Zeilenanfang. Der Abstand trennt hier genauso gut. */
.wagen__fuss {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--kante);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
.wagen__preis {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--bernstein);
  white-space: nowrap;
}
.wagen__details {
  font-size: 0.85rem;
  color: var(--zinn);
  text-decoration: none;
  white-space: nowrap;
}
.wagen__details:hover {
  color: var(--bernstein);
}
@media (max-width: 1023px) {
  .bestand__raster {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}
@media (max-width: 639px) {
  .bestand__raster {
    grid-template-columns: 1fr;
  }
}

/* ---------- Detailseite ausgebaut (Hamada 20.08.2026: „Mehr Infos wenn man auf
   das Auto auch raufklickt") — Lage im Bestand, Vorher-Preis, Zustandsblock. -- */
.fzgdetail__lage {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--zinn);
}
.fzgdetail__vorher {
  font-size: 0.95rem;
  color: var(--zinn);
  text-decoration: line-through;
}
.fzgdetail__zustand-block {
  padding-top: 2.6rem;
}
.fzgdetail__leistungen {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  max-width: 56ch;
}
.fzgdetail__leistungen li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--hallenweiss);
  opacity: 0.88;
  font-size: 0.94rem;
}
.fzgdetail__leistungen li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--bernstein);
}

/* ---------- Alle Inserats-Bilder je Fahrzeug (Hamada 20.08.2026: „DIE BILDER
   SOLLEN ALLE DRAUF SEIN! Wie bei SSW") — grosses Bild + Miniatur-Raster.
   Die Kacheln tragen zusaetzlich .galerie__kachel, damit die vorhandene
   Lightbox sie ohne zweites Skript findet. -------------------------------- */
.fzgbilder {
  padding: 1rem 0 4.5rem;
  border-top: 1px solid var(--kante);
}
.fzgbilder .eyebrow {
  display: block;
  margin-bottom: 1.1rem;
}
.fzgbilder__gross {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin-bottom: 0.9rem;
}
.fzgbilder__raster {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.55rem;
}
.fzgbilder__kachel {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.fzgbilder__kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 240ms var(--ease-auslauf);
}
@media (hover: hover) and (pointer: fine) {
  .fzgbilder__kachel:hover img {
    transform: scale(1.06);
  }
}
.fzgbilder__zeile {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--zinn);
}
@media (max-width: 1023px) {
  .fzgbilder__raster {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 639px) {
  .fzgbilder__raster {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Fahrzeug-Kopf in SSW-Ordnung (Hamada 20.08.2026): Preis, Eckdaten
   und die drei Wege stehen VOR den Bildern, die Datentabelle dahinter. ------ */
.fzgkopf {
  padding: 3rem 0 2rem;
}
.fzgkopf__innen {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}
.fzgkopf__links {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
}
.fzgkopf__preiszeile {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.fzgkopf__eck {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  font-size: 0.95rem;
  color: var(--hallenweiss);
  opacity: 0.85;
}
.fzgkopf__wege {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 15rem;
}
.fzgkopf__wege .btn {
  text-align: center;
}
.fzgdetail__specs--breit {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 3rem;
}
@media (max-width: 899px) {
  .fzgkopf__innen {
    grid-template-columns: 1fr;
  }
  .fzgkopf__wege {
    min-width: 0;
  }
  .fzgdetail__specs--breit {
    grid-template-columns: 1fr;
  }
}

/* ---------- Eigene Bilder & Videos je Fahrzeug (Kundenwunsch 1, 01.09.2026).
   Die eigenen Aufnahmen stehen im selben Raster wie die Inserats-Bilder — es
   sind Bilder desselben Wagens, keine zweite Galerie. Bewusst OHNE optische
   Markierung: welche Aufnahme aus dem Inserat kam und welche der Haendler
   selbst gemacht hat, geht den Besucher nichts an. Die Klasse bleibt, damit
   man die Kacheln im Code (und im Test) noch auseinanderhalten kann. ------- */

.fzgvideo {
  padding: 0 0 4.5rem;
}
.fzgvideo .eyebrow {
  display: block;
  margin-bottom: 1.1rem;
}
.fzgvideo__spieler,
.fzgvideo__rahmen,
.fzgvideo__tor {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Ein 16:9-Kasten ueber die volle Breite wird auf grossen Schirmen zur Wand.
     Die Hoehendeckelung haelt ihn im Blickfeld. */
  max-height: 64vh;
  margin: 0 auto;
  display: block;
  border: 0;
  border-radius: 4px;
  background: var(--fuge);
}
/* Zwei-Klick-Tor: bis zum Klick geht keine Anfrage an YouTube/Vimeo. */
.fzgvideo__tor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--kante);
  color: var(--hallenweiss);
  transition: border-color 240ms var(--ease-auslauf);
}
.fzgvideo__tor:hover {
  border-color: var(--bernstein);
}
/* Abspiel-Zeichen ueber der Zeile — sonst ist das Tor eine leere Flaeche und
   sieht nach Ladefehler aus statt nach Video. Dreieck als Inline-SVG, damit es
   in beiden Themes dieselbe Form hat und keine Datei nachgeladen wird. */
.fzgvideo__tor::before {
  content: "";
  width: 3.4rem;
  height: 3.4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--bernstein);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5 18 12l-9 5.5z' fill='%23E9A73E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 54% 50%;
  background-size: 1.5rem 1.5rem;
}
.fzgvideo__torTitel {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  color: var(--bernstein);
}
.fzgvideo__torText {
  font-size: 0.82rem;
  color: var(--zinn);
  max-width: 34rem;
  line-height: 1.5;
}
.fzgvideo__zeile {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--zinn);
}

/* ---------- Altfahrzeuge — Galerie der verkauften Wagen (Kundenwunsch 2,
   01.09.2026). Eigene Seite, eigenes Raster; die Lightbox ist dieselbe. ---- */
.altfz {
  padding: 1rem 0 5rem;
}
.altfz__jahr {
  margin: 3rem 0 1.2rem;
  font-family: var(--f-display);
  font-size: var(--t-h2);
  color: var(--hallenweiss);
}
.altfz__jahr:first-of-type {
  margin-top: 1.4rem;
}
.altfz__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
.altfz__kachel {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
}
.altfz__kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms var(--ease-auslauf);
}
@media (hover: hover) and (pointer: fine) {
  .altfz__kachel:hover img {
    transform: scale(1.05);
  }
}
.altfz__bu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 0.7rem 0.55rem;
  font-size: 0.78rem;
  text-align: left;
  color: #e9eae5;
  background: linear-gradient(to top, rgba(10, 13, 12, 0.82), transparent);
  pointer-events: none;
}
.altfz__leer {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--zinn);
}
@media (max-width: 1023px) {
  .altfz__raster {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 639px) {
  .altfz__raster {
    grid-template-columns: repeat(2, 1fr);
  }
}