/* ==========================================================================
   Autohaus N. Fly GbR — fly.css
   Haut nach bau-brief.md §2. Statik nach ~/.claude/vorlagen/auto-statik.md.
   Start DUNKEL, hell per Schalter (GESETZ Kap. 1). Themenfeste Bühnenfarben (Kap. 11).
   ========================================================================== */

@font-face {
  font-family: "Big Shoulders";
  src: url("../fonts/big-shoulders-display-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

/* ---------- Rollen (dunkel = Start) ---------- */
:root {
  /* Hoehe der festen Ruf-Leiste auf Mobil — der Kopf reserviert sie sich (Runde 5). */
  --ruf-h: 64px;
  --grund: #1c060b;
  --flaeche: #2a1419;
  --flaeche-2: #392529;
  --linie: #4b373a;
  --text: #f4f0e9;
  --meta: #b8afa8;
  --akzent: #e6813c;
  --akzent-hell: #ffaf7d;
  --akzent-dim: #a55c2a;
  --signal: #e04a72;

  /* themenfest: liegt IMMER über Video/Bühne, wird im Hell-Thema NICHT überschrieben */
  --kalk-fest: #f4f0e9;
  --meta-fest: #cfc6be;

  --nav-h: 88px;
  --rand: clamp(1.15rem, 4.5vw, 4.5rem);
  --max: 1560px;
  --rund: 2px;
  --uebergang: 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html[data-thema="hell"] {
  --grund: #faf6f1;
  --flaeche: #f1eae3;
  --flaeche-2: #e6dcd3;
  --linie: #d2c4b9;
  --text: #281619;
  --meta: #6b565b;
  --akzent: #b75a17;
  --akzent-hell: #8c420e;
  --akzent-dim: #c97b45;
  --signal: #a8123f;
}

/* ---------- Grundlagen ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family:
    "Instrument Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.11rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition:
    background var(--uebergang),
    color var(--uebergang);
}
img,
video {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
button {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}
.nurSR {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  font-size: 0;
}

h1,
h2,
h3,
.dsp {
  font-family: "Big Shoulders", "Instrument Sans", system-ui, sans-serif;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: none;
  margin: 0;
  overflow-wrap: break-word;
}
.dsp--xxl {
  font-size: clamp(3.4rem, 11.5vw, 9.5rem);
}
.dsp--xl {
  font-size: clamp(2.9rem, 8.2vw, 7rem);
}
.dsp--l {
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
}
.satz {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-size: clamp(1.7rem, 3.4vw, 3.4rem);
  margin: 0;
}
.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--meta);
  font-weight: 600;
  margin: 0 0 1.1rem;
}
.eyebrow--fest {
  color: var(--meta-fest);
}
.akz {
  color: var(--akzent-hell);
}
.sig-wort {
  color: var(--signal);
  font-style: italic;
}
p {
  margin: 0 0 1.05em;
}
.lead {
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.32rem);
  color: var(--meta);
  max-width: 62ch;
}

.bahn {
  width: min(100% - var(--rand) * 2, var(--max));
  margin-inline: auto;
}
.abschnitt {
  padding-block: clamp(4.5rem, 9vw, 9rem);
}
.abschnitt--eng {
  padding-block: clamp(2.6rem, 5vw, 4.5rem);
}
.abschnitt--weit {
  padding-block: clamp(7rem, 14vw, 15rem);
}

/* ---------- Kopfleiste ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nav-h);
  z-index: 70;
  display: flex;
  align-items: center;
  transition:
    background var(--uebergang),
    border-color var(--uebergang);
  border-bottom: 1px solid transparent;
}
.nav__innen {
  width: min(100% - var(--rand) * 2, var(--max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.nav__logo img {
  height: 64px;
  width: auto;
}
.nav__liste {
  display: flex;
  gap: clamp(0.8rem, 1.9vw, 2.1rem);
  margin-left: auto;
  align-items: center;
}
.nav__link {
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--kalk-fest);
  padding: 0.4rem 0;
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.05rem;
  height: 1px;
  background: var(--akzent);
  transition: right 0.3s ease;
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  right: 0;
}
.nav--fest {
  background: var(--grund);
  border-bottom-color: var(--linie);
}
.nav--fest .nav__link,
.nav--fest .nav__schalter {
  color: var(--text);
}
.nav__schalter {
  background: none;
  border: 1px solid rgba(244, 240, 233, 0.28);
  color: var(--kalk-fest);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav--fest .nav__schalter {
  border-color: var(--linie);
}
.nav__burger {
  display: none;
  background: none;
  border: 1px solid rgba(244, 240, 233, 0.28);
  color: var(--kalk-fest);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
}
.nav--fest .nav__burger {
  border-color: var(--linie);
  color: var(--text);
}
@media (max-width: 1279px) {
  .nav__burger {
    display: grid;
    place-items: center;
    margin-left: auto;
  }
  .nav__liste {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem var(--rand) 1.8rem;
    margin: 0;
    display: none;
  }
  .nav__liste[data-offen="true"] {
    display: flex;
  }
  .nav__liste .nav__link {
    color: var(--text);
    font-size: 1.22rem;
    padding: 0.75rem 0;
    width: 100%;
    border-bottom: 1px solid var(--linie);
  }
  /* 11.09.2026: Schalter + Merkliste sind Geschwister der Liste (sie lagen im zugeklappten
     Menue und massen dort 0x0 - auf Handy und Tablet gab es keinen Themenschalter und keinen
     Merklisten-Zugang). order haelt die Reihenfolge: Merkliste, Schalter, Burger ganz rechts. */
  .nav__merk {
    order: 1;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
  }
  .nav__schalter {
    order: 2;
    margin-left: 0.5rem;
  }
  .nav__burger {
    order: 3;
    margin-left: 0.5rem;
  }
}

/* ---------- Kopf / Bühne ---------- */
.kopf {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #120409;
}
.kopf--sub {
  min-height: 76svh;
}
.kopf__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kopf__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12,3,6,0.96) 0%, rgba(12,3,6,0.80) 24%, rgba(12,3,6,0.26) 58%, rgba(12,3,6,0.46) 100%),
    linear-gradient(to right, rgba(12,3,6,0.58) 0%, rgba(12,3,6,0.18) 48%, rgba(12,3,6,0) 76%);
}

/* Der fahrzeuge-Kopf spielt als einziger bei Tageslicht (Grund unter der Leiste rgb(61,67,75) gegen
   rgb(8,3,5) auf der Startseite). Der gemeinsame Schleier reicht dort nicht: der Eyebrow lag im
   schlimmsten Frame zu 64,8 % unter 4,5:1 (Fremd-Blick Runde 4, live gemessen). Dieser Kopf bekommt
   deshalb einen eigenen, tieferen Verlauf — und ruecht damit zugleich in die Lichtfamilie der anderen
   sechs Koepfe zurueck, statt ins Blaugraue zu kippen. */
.kopf--fahrzeuge .kopf__schleier {
  background:
    linear-gradient(to top, rgba(12,3,6,0.97) 0%, rgba(12,3,6,0.88) 30%, rgba(12,3,6,0.58) 62%, rgba(12,3,6,0.62) 100%),
    linear-gradient(to right, rgba(12,3,6,0.72) 0%, rgba(12,3,6,0.42) 52%, rgba(12,3,6,0.16) 100%);
}
.kopf--fahrzeuge .kopf__film {
  /* waermer und dunkler: der Tageslicht-Grade wird an die Amber/Weinschwarz-Familie angeglichen. */
  filter: saturate(0.82) brightness(0.78) sepia(0.18);
}
/* Textkorridor hinter dem Kopftext (11.09.2026, gemessen statt geschaetzt).
   Der grosse Schleier deckt das ganze Bild und muss deshalb durchsichtig bleiben — genau da, wo die
   Schrift steht, reicht er nicht: aufbereitung lag am Eyebrow im schlimmsten Frame zu 18,8 % unter
   4,5:1 (schlechtester Pixel 1,10:1), weil das abfliessende Wasser dort hell aufblitzt. Statt je Seite
   einen Sonderschleier bekommt der TEXTBLOCK seinen eigenen, schmalen Grund. Er waechst mit dem Text
   und trifft damit jeden Kopf, auch kuenftige. */
.kopf__innen::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(100%, 74ch);
  background: linear-gradient(to right, rgba(12,3,6,0.82) 0%, rgba(12,3,6,0.62) 58%, rgba(12,3,6,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.kopf__innen > * {
  position: relative;
  z-index: 1;
}
.kopf__innen {
  position: relative;
  width: min(100% - var(--rand) * 2, var(--max));
  margin-inline: auto;
  padding-bottom: clamp(3rem, 7vh, 6.5rem);
  padding-top: calc(var(--nav-h) + 2rem);
}
.kopf__h1 {
  color: var(--kalk-fest);
  max-width: 19ch;
}
.kopf__beweis {
  color: var(--meta-fest);
  max-width: 52ch;
  margin-top: 1.5rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
}
.kopf__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.2rem;
}
@media (max-width: 899px) {
  .kopf {
    min-height: auto;
    display: block;
  }
  .kopf__band {
    position: relative;
    /* 42svh statt 52svh: sonst liegen Beweis-Satz und CTAs bei 390 px unter der Falte
       (Fremd-Blick 11.09.2026). Das Video bleibt formatfuellend, nur flacher. */
    height: 26svh;
    overflow: hidden;
  }
  .kopf__band .kopf__film {
    position: absolute;
  }
  .kopf__innen {
    /* 64 px extra: die feste Ruf-Leiste liegt sonst auf den Kopf-CTAs (Fremd-Blick 11.09.2026). */
    padding: 2.6rem 0 calc(var(--ruf-h) + 1.2rem);
    text-align: left;
  }
  .kopf__h1 {
    font-size: clamp(2.5rem, 9.4vw, 3.4rem);
    max-width: none;
  }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.02rem 1.9rem;
  border-radius: var(--rund);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.knopf:hover {
  transform: translateY(-2px);
}
.knopf--voll {
  background: var(--akzent);
  color: #180509;
}
.knopf--voll:hover {
  background: var(--akzent-hell);
}
.knopf--rand {
  border-color: rgba(244, 240, 233, 0.42);
  color: var(--kalk-fest);
}
.knopf--rand:hover {
  border-color: var(--akzent);
  color: var(--akzent-hell);
}
.knopf--randT {
  /* ohne background greift der UA-Default buttonface und der Knopf wird weiss
     (Fremd-Blick 11.09.2026: Schrift auf Kasten 1,06:1). */
  background: transparent;
  border-color: var(--linie);
  color: var(--text);
}
.knopf--randT:hover {
  border-color: var(--akzent);
  color: var(--akzent);
}

/* ---------- Fakten-Leiste (§0e-170) ---------- */
.fakten {
  border-block: 1px solid var(--linie);
  background: var(--flaeche);
}
.fakten__reihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.fakten__zelle {
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--linie);
}
.fakten__zelle:first-child {
  border-left: 0;
}
.fakten__wert {
  font-family: "Big Shoulders", sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 0.9;
  color: var(--text);
}
.fakten__label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 0.55rem;
}
@media (max-width: 899px) {
  .fakten__reihe {
    grid-template-columns: repeat(2, 1fr);
  }
  .fakten__zelle:nth-child(odd) {
    border-left: 0;
  }
  .fakten__zelle:nth-child(n + 3) {
    border-top: 1px solid var(--linie);
  }
}

/* ---------- Bühnen-Sektionen ---------- */
.buehne {
  position: relative;
  min-height: clamp(60vh, 78vh, 86vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.buehne__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12,3,6,0.97) 0%, rgba(12,3,6,0.88) 20%, rgba(12,3,6,0.42) 52%, rgba(12,3,6,0.30) 78%, rgba(12,3,6,0.58) 100%),
    linear-gradient(to right, rgba(12,3,6,0.62) 0%, rgba(12,3,6,0.22) 46%, rgba(12,3,6,0) 74%);
}
.buehne__innen {
  position: relative;
  width: min(100% - var(--rand) * 2, var(--max));
  margin-inline: auto;
  padding-block: clamp(2.6rem, 6vw, 5rem);
}
.buehne__satz {
  color: var(--kalk-fest);
  max-width: 22ch;
}
.buehne__text {
  color: var(--meta-fest);
  max-width: 56ch;
  margin-top: 1.3rem;
}
.buehne--voll {
  width: 100%;
}

/* ---------- Signature „Die Grube" ---------- */
.grube {
  position: relative;
  background: var(--grund);
  padding-block: clamp(4.5rem, 8vw, 8rem);
  overflow: hidden;
}
.grube__schlitz {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 6%;
  height: clamp(90px, 16vw, 190px);
  transform: translateY(50%);
  background: linear-gradient(
    to top,
    rgba(230, 129, 60, 0) 0%,
    rgba(230, 129, 60, 0.1) 34%,
    rgba(230, 129, 60, 0.52) 50%,
    rgba(230, 129, 60, 0.1) 66%,
    rgba(230, 129, 60, 0) 100%
  );
  filter: blur(1px);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 38%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 38%, transparent 78%);
}
.grube__linie {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 6%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--akzent) 12%,
    var(--akzent-hell) 50%,
    var(--akzent) 88%,
    transparent
  );
}
.grube__innen {
  position: relative;
  width: min(100% - var(--rand) * 2, var(--max));
  margin-inline: auto;
  text-align: center;
}
.grube__satz {
  color: var(--text);
}
.grube__text {
  color: var(--meta);
  max-width: 52ch;
  margin: 1.6rem auto 0;
}
.grube--leiste {
  padding-block: clamp(2.4rem, 5vw, 4.5rem);
}
.grube--leiste .grube__schlitz {
  height: clamp(46px, 7vw, 80px);
}

/* ---------- Fahrzeug-Karten ---------- */
.fzg-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
.fzk {
  position: relative;
  background: var(--grund);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease;
}
.fzk:hover {
  background: var(--flaeche);
}
.fzk__bild {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--flaeche-2);
}
.fzk__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fzk:hover .fzk__bild img {
  transform: scale(1.045);
}
.fzk__inhalt {
  padding: 1.35rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.fzk__titel {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.fzk__zusatz {
  font-size: 0.82rem;
  color: var(--meta);
  line-height: 1.4;
}
.fzk__daten {
  font-size: 0.85rem;
  color: var(--meta);
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--linie);
}
.fzk__preis {
  font-family: "Big Shoulders", sans-serif;
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--akzent-hell);
}
.fzk__ganz {
  position: absolute;
  inset: 0;
}
.fzk--gross .fzk__bild {
  aspect-ratio: 16/10;
}
.fzk--gross .fzk__preis {
  font-size: 2.5rem;
}
@media (min-width: 900px) {
  .fzg-raster--zwei {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Klassen-Kopf ---------- */
.klasse__kopf {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linie);
}
.klasse__zahl {
  font-family: "Big Shoulders", sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--akzent);
}

/* ---------- Bewertungs-Diashow ---------- */
.bew {
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.bew__spur {
  display: flex;
  gap: 1px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.bew:hover .bew__spur,
.bew:focus-within .bew__spur {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.bew__karte {
  flex: 0 0 min(340px, 82vw);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.bew__sterne {
  color: var(--akzent);
  letter-spacing: 0.16em;
  font-size: 0.95rem;
}
.bew__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.bew__wer {
  font-size: 0.8rem;
  color: var(--meta);
  margin-top: auto;
}
@media (prefers-reduced-motion: reduce) {
  .bew__spur {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .bew__karte {
    flex: 1 1 min(340px, 100%);
  }
  .bew__karte[data-doppel="ja"] {
    display: none;
  }
}

/* ---------- Formulare ---------- */
.form {
  display: grid;
  gap: 1.1rem;
}
.form__reihe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}
@media (max-width: 699px) {
  .form__reihe {
    grid-template-columns: 1fr;
  }
}
.feld {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}
.feld label {
  font-size: 0.79rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--meta);
  font-weight: 600;
}
.feld input,
.feld select,
.feld textarea {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  color: var(--text);
  border-radius: var(--rund);
  padding: 0.92rem 1rem;
  font: inherit;
  font-size: 1rem;
  width: 100%;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: var(--akzent);
  outline: none;
}
.feld textarea {
  min-height: 140px;
  resize: vertical;
}
.einwilligung {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--meta);
}
.einwilligung input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 0.15rem;
  accent-color: var(--akzent);
}
.form__zusage {
  font-size: 0.86rem;
  color: var(--meta);
  margin: 0;
}

/* ---------- Kontakt-Knöpfe unten rechts ---------- */
.ruf {
  position: fixed;
  right: clamp(0.8rem, 2vw, 1.6rem);
  bottom: clamp(0.8rem, 2vw, 1.6rem);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
}
.ruf__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.ruf__knopf--tel {
  background: var(--akzent);
  color: #180509;
}
.ruf__knopf--wa {
  background: #1f8a57;
  color: #fff;
}
.ruf__knopf svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
@media (max-width: 899px) {
  .ruf {
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    justify-content: stretch;
    gap: 1px;
    background: var(--linie);
    border-top: 1px solid var(--linie);
  }
  .ruf__knopf {
    flex: 1;
    justify-content: center;
    border-radius: 0;
    box-shadow: none;
    padding: 1.05rem 0.5rem;
  }
  body {
    padding-bottom: 64px;
  } /* die Leiste verdeckt nie Inhalt */
}

/* ---------- Karte ---------- */
.karte {
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
.karte__vorschau {
  position: relative;
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--flaeche-2);
}
.karte__vorschau img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.karte__hinweis {
  position: relative;
  text-align: center;
  padding: 2rem;
  max-width: 44ch;
}
.karte iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
}

/* ---------- Fuß ---------- */
.fuss {
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.fuss__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}
@media (max-width: 899px) {
  .fuss__raster {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 519px) {
  .fuss__raster {
    grid-template-columns: 1fr;
  }
}
.fuss__titel {
  font-size: 0.76rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--meta);
  margin: 0 0 1rem;
  font-weight: 600;
}
.fuss a {
  color: var(--text);
  text-decoration: none;
  display: block;
  padding: 0.22rem 0;
  font-size: 0.94rem;
}
.fuss a:hover {
  color: var(--akzent);
}
.fuss__unten {
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--meta);
}

/* ---------- Reveals (nie dauerhaft unsichtbar) ---------- */
.auf {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.auf.da {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .auf {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.keinJS .auf {
  opacity: 1;
  transform: none;
}

/* ---------- Fahrzeug-Detailseite ---------- */
.det{padding-top:calc(var(--nav-h) + clamp(1.6rem,4vw,3rem));padding-bottom:clamp(4rem,8vw,7rem);}
.det__brot{font-size:.82rem;color:var(--meta);display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem;}
.det__brot a{text-decoration:none;color:var(--meta);}
.det__brot a:hover{color:var(--akzent);}
.det__oben{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem;}
.det__h1{max-width:22ch;}
.det__zusatz{color:var(--akzent-hell);font-size:.95rem;margin:.7rem 0 0;letter-spacing:.02em;}
.det__expose{flex:0 0 auto;}
.det__raster{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,.98fr);gap:clamp(1.4rem,3vw,2.8rem);align-items:start;}
@media (max-width:1023px){.det__raster{grid-template-columns:1fr;}}

.gal__haupt{position:relative;background:var(--flaeche-2);border:1px solid var(--linie);}
.gal__haupt img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.gal__pfeil{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:999px;
  background:rgba(18,4,9,.72);color:#F4F0E9;border:1px solid rgba(244,240,233,.3);font-size:1.8rem;line-height:1;cursor:pointer;display:grid;place-items:center;}
.gal__pfeil--links{left:.8rem;} .gal__pfeil--rechts{right:.8rem;}
.gal__pfeil:hover{background:var(--akzent);color:#180509;}
.gal__zaehler{position:absolute;right:.8rem;bottom:.8rem;background:rgba(18,4,9,.75);color:#F4F0E9;padding:.35rem .75rem;font-size:.8rem;border-radius:999px;}
.gal__minis{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px;}
.gal__mini{padding:0;border:1px solid var(--linie);background:none;cursor:pointer;line-height:0;}
.gal__mini img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.gal__mini[aria-current="true"]{border-color:var(--akzent);outline:1px solid var(--akzent);}

.det__panel{border:1px solid var(--linie);background:var(--flaeche);padding:clamp(1.3rem,2.4vw,1.9rem);position:sticky;top:calc(var(--nav-h) + 1rem);display:flex;flex-direction:column;gap:1.05rem;}
@media (max-width:1023px){.det__panel{position:static;}}
.det__preis{font-family:"Big Shoulders",sans-serif;font-weight:800;font-size:clamp(2.6rem,5vw,3.6rem);line-height:.92;color:var(--akzent-hell);}
.det__mwst{font-size:.76rem;color:var(--meta);margin:-.5rem 0 0;line-height:1.45;}
.det__kurz,.det__liste{margin:0;display:grid;gap:0;}
.det__zeile{display:flex;justify-content:space-between;gap:1rem;padding:.52rem 0;border-bottom:1px solid var(--linie);}
.det__zeile dt{color:var(--meta);font-size:.87rem;}
.det__zeile dd{margin:0;font-weight:600;font-size:.87rem;text-align:right;}
.det__liste--zwei{grid-template-columns:repeat(2,1fr);column-gap:clamp(1.5rem,4vw,3.5rem);}
@media (max-width:699px){.det__liste--zwei{grid-template-columns:1fr;}}
.det__tel{justify-content:center;}
.det__block{margin-top:clamp(2.8rem,5vw,4.5rem);}
.det__h2{font-family:"Big Shoulders",sans-serif;font-weight:800;font-size:clamp(1.7rem,3vw,2.5rem);margin:0 0 1.2rem;padding-bottom:.7rem;border-bottom:1px solid var(--linie);}
.det__flies{max-width:78ch;color:var(--text);}
.det__flies p{margin:0 0 .9em;}
.det__ausst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem 1.5rem;}
.det__ausst li{font-size:.9rem;padding:.3rem 0 .3rem 1.1rem;position:relative;color:var(--text);}
.det__ausst li::before{content:"";position:absolute;left:0;top:.95em;width:6px;height:1px;background:var(--akzent);}
.det__envkv{margin-top:clamp(2.8rem,5vw,4.5rem);background:var(--flaeche);border:1px solid var(--linie);padding:clamp(1.3rem,2.6vw,2rem);}
.det__klein{font-size:.76rem;color:var(--meta);line-height:1.5;margin:1rem 0 0;max-width:90ch;}
.det__weiter{display:flex;gap:.8rem;flex-wrap:wrap;}
.det__form{margin-top:.4rem;}

/* ---------- Parallax-Ebenen (Choreografie-Typ 2) ---------- */
.buehne__bild[data-parallax] { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0) scale(1.08); }
@media (prefers-reduced-motion: reduce) { .buehne__bild[data-parallax] { transform: none; } }
.fakten__wert[data-count] { font-variant-numeric: tabular-nums; }

/* Zeile eins der H1: Betrieb, Leistung, Ort (GESETZ Kap. 3) — die Pointe steht darunter groß. */
/* Fremd-Blick 11.09.2026: wiederholt die Eyebrow Wort fuer Wort und schiebt die Pointe aus dem
   ersten Bildschirm. Bleibt im DOM (SEO, Screenreader), verlaesst aber das Bild. */
.kopf__marke{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;font-family:"Instrument Sans",sans-serif;font-weight:600;font-size:clamp(0.82rem, calc(0.78rem + 0.2vw), 1rem) !important;
  letter-spacing:.06em;line-height:1.4;color:var(--meta-fest);margin-bottom:1.1rem;max-width:52ch;text-transform:none;}

@media (max-width:899px){ .gal__minis{grid-template-columns:repeat(4,1fr);} .det__ausst{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:559px){ .gal__minis{grid-template-columns:repeat(3,1fr);} .det__ausst{grid-template-columns:1fr;} }


/* Kurze Geraete (iPhone SE 375x667, 360x640): die feste Ruf-Leiste ist dort derselbe Anteil der
   Hoehe, das Videoband aber nicht. Ohne diesen Schritt liegt der PRIMAERE CTA unter der Leiste
   (Fremd-Blick Runde 5, mit dem Auge bestaetigt). */
@media (max-width: 899px) and (max-height: 700px) {
  .kopf__band {
    height: 20svh;
  }
  .kopf__innen {
    padding: 1.6rem 0 calc(var(--ruf-h) + 1rem);
  }
  .kopf__h1 {
    font-size: clamp(2rem, 8.2vw, 2.6rem);
  }
  .kopf__beweis {
    margin-top: 0.9rem;
  }
  .kopf__ctas {
    margin-top: 1.2rem;
  }
}