/* ==========================================================
   Bodensee Autocenter — NACHTSEE — geteiltes Token-/Komponenten-CSS
   Tokens nach bau-brief.md §3.1/§3.2, Farb-Korrektur aus medien-manifest.md §10.
   Klassennamen design-neutral (lektionen.md „Bau/Code" 2026-06-28):
   Total-Reskin muss allein ueber diese Datei moeglich sein.
   ========================================================== */

@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-var-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Tiefe */
  --tiefe-0: #080d11;
  --tiefe-1: #0d141a;
  --tiefe-2: #141e26;
  --tiefe-3: #1d2a33;
  --kalk: #e8edef;
  --kalk-2: #9daab2;
  --kalk-3: #7c8b94;
  /* Seeblau — gesampelt aus logo-original.png, medien-manifest.md §10 */
  --seeblau: #2c6295;
  --seeblau-hell: #5ca0e0;
  --seeblau-tief: #1c4a73;
  --linie-1: rgba(232, 237, 239, 0.09);
  --linie-2: rgba(232, 237, 239, 0.16);
  --linie-3: rgba(232, 237, 239, 0.28);
  --fehler: #b0432f;

  --ease-auftrieb: cubic-bezier(0.32, 0.78, 0.2, 1);
  --rand: clamp(1.25rem, 4vw, 3.5rem);
  /* Reserve fuer die fixen Kontakt-FABs (§0e-12) — dieselben Werte, die
     .hero__foot bereits sitewide vorgibt. Auf rechtskantige Listen/Karten/
     Formulare anwenden, damit nichts unter den Buttons verschwindet. */
  --fab-raum: 4.6rem;
  --fab-raum-mobil: 4.5rem;

  /* Type-Scale, bau-brief §3.2 */
  --f-display-xl: clamp(3.3rem, 10.2vw, 9.5rem);
  --f-display-s: clamp(2.5rem, 6.2vw, 6.2rem);
  --f-h1: clamp(2.3rem, 5.2vw, 5rem);
  --f-h2: clamp(1.85rem, 3.2vw, 3.25rem);
  --f-h3: clamp(1.2rem, 1.6vw, 1.55rem);
  --f-lead: clamp(1.12rem, 1.45vw, 1.45rem);
  --f-body: clamp(1rem, 1.02vw, 1.1rem);
  --f-meta: 0.8rem;
  --f-datenwert: clamp(1.22rem, 1.45vw, 1.5rem);
  --f-preis-karte: clamp(1.35rem, 1.6vw, 1.65rem);
  --f-preis-detail: clamp(2.2rem, 4vw, 3.6rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--tiefe-1);
  color: var(--kalk);
  font-family: "Instrument Sans", system-ui, sans-serif;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
/* clip statt hidden — hidden toetet jedes position:sticky (bau-brief §5.7) */
.wrap {
  overflow-x: clip;
}
img,
video {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--seeblau);
  color: var(--kalk);
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  transition: top 0.2s var(--ease-auftrieb);
}
.skip-link:focus {
  top: 1rem;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

/* ---------- Display / Headings ---------- */
.display-xl {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--f-display-xl);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.display-s {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--f-display-s);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h1 {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--f-h1);
  line-height: 0.94;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h2 {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--f-h2);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.h3 {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--f-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lead {
  font-size: var(--f-lead);
  line-height: 1.5;
  color: var(--kalk-2);
  max-width: 46%;
}
.body-text {
  font-size: var(--f-body);
  line-height: 1.62;
  max-width: 68ch;
  color: var(--kalk-2);
}
.eyebrow {
  font-size: var(--f-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seeblau-hell);
  display: block;
  margin-bottom: 1rem;
}
@media (max-width: 720px) {
  .lead {
    max-width: 100%;
  }
}

/* ---------- Sektionskopf-Formel (max. 2x pro Seite, §0b-2) ---------- */
.kopf {
  max-width: 46rem;
}
.kopf .h2 {
  margin-top: 0.9rem;
}
.kopf .lead {
  margin-top: 1.3rem;
  max-width: 100%;
}

/* ---------- Rhythmus (bau-brief §3.3) ---------- */
.rhythm {
  padding-block-start: var(--pt, 6rem);
}
@media (max-width: 720px) {
  .rhythm {
    padding-block-start: calc(var(--pt, 6rem) * 0.55);
  }
}

/* ---------- Container / Bruch-Werkzeuge ---------- */
.container {
  padding-inline: var(--rand);
}
.bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.bruch-links {
  margin-left: calc(var(--rand) * -1 - 6vw);
}
@media (max-width: 900px) {
  .bruch-links {
    margin-left: 0;
  }
}

/* ---------- Wasserlinie (Hairline auf wechselnder Hoehe) ---------- */
.wasserlinie {
  position: relative;
}
.wasserlinie::before {
  content: "";
  position: absolute;
  left: var(--rand);
  right: var(--rand);
  top: var(--wl, 25%);
  height: 1px;
  background: var(--linie-2);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.wasserlinie.in-view::before {
  transform: scaleX(1);
  transition: transform 1.1s var(--ease-auftrieb);
}
.no-anim .wasserlinie::before {
  transform: scaleX(1);
}

/* ---------- Foto-Buehne (Lichtinsel-Vignette, bau-brief §2 Tiefe/Material) ----------
   Faengt nebenbei Fremdschriftzuege/Hintergrund-Claims an den Bildraendern ab
   (z. B. "Museum Friedrichshafen" auf 3 Bestandsfotos, medien-manifest.md §6a) —
   ohne das Fahrzeug physisch anzuschneiden (Showroom-Prinzip, autohaus-rezept §3). */
.foto-buehne {
  position: relative;
}
.foto-buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Himmel-Daempfer: die Bestandsfotos sind Tageslicht-Aufnahmen,
       ihr Himmel liegt gemessen bei Helligkeit 139–168, waehrend die
       Seite bei 13 steht. Ohne diesen Verlauf bricht jedes Foto die
       dunkle Bildwelt auf (Hamada 06.08.2026, „es soll /premium
       werden"). Unten bleibt das Bild offen — dort steht das
       Fahrzeug. */
    linear-gradient(
      to bottom,
      rgba(6, 9, 12, 0.62) 0%,
      rgba(6, 9, 12, 0.26) 22%,
      rgba(6, 9, 12, 0) 46%
    ),
    radial-gradient(
      122% 108% at 50% 60%,
      transparent 58%,
      rgba(6, 9, 12, 0.18) 84%,
      rgba(6, 9, 12, 0.44) 100%
    );
}
/* Grading auf das Foto selbst: leicht abdunkeln, Kontrast anziehen,
   Saettigung zuruecknehmen — zieht Handy-Schnappschuesse in die
   „Seetiefe"-Palette, ohne das Fahrzeug unkenntlich zu machen. */
.foto-buehne > img,
.foto-buehne > picture > img {
  filter: brightness(0.84) contrast(1.14) saturate(0.86);
}

/* ---------- Seemarke (Akzent-Device, radius-Ausnahme) ---------- */
.seemarke {
  display: inline-block;
  width: 13px;
  height: 6.7px;
  -webkit-mask: url("../bodensee-umriss.svg") center / contain no-repeat;
  mask: url("../bodensee-umriss.svg") center / contain no-repeat;
  background: currentColor;
  flex: none;
}

/* ---------- NAV ---------- */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem var(--rand);
}
.nav--solid {
  position: sticky;
  background: var(--tiefe-0);
  border-bottom: 1px solid var(--linie-1);
}
.nav__logo {
  display: block;
  /* Kein heller Traeger mehr (Hamada 06.08.2026: „Das Logo auch transparent
     machen ohne den weissen Block und die Karte im Hintergrund dafuer
     deutlicher"). Moeglich, weil logo-hell.png die Wortmarke in Kalk und
     Seeblau fuehrt statt in Dunkelgrau — die Bodensee-Silhouette steht darin
     als eigener, dunklerer Blauton und ist erstmals als Karte erkennbar. */
  padding: 0;
  line-height: 0;
}
.nav__logo img {
  display: block;
  height: 62px;
  width: auto;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav__links a {
  color: var(--kalk);
  text-decoration: none;
  opacity: 0.86;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  opacity: 1;
}
.nav__links a[aria-current="page"] {
  border-bottom: 1px solid var(--seeblau-hell);
  padding-bottom: 0.2rem;
}
.nav__cta {
  border: 1px solid var(--linie-3);
  padding: 0.7rem 1.15rem;
  opacity: 1 !important;
}
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie-2);
  background: transparent;
  color: var(--kalk);
  align-items: center;
  justify-content: center;
}
@media (max-width: 860px) {
  .nav__links {
    display: none;
  }
  .nav__burger {
    display: flex;
  }
  .nav__logo img {
    height: 44px;
  }
  .nav__logo {
    padding: 9px;
  }
}

/* Mobil-Menue (einfach, ohne JS-Framework) */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--tiefe-0);
  display: flex;
  flex-direction: column;
  padding: 1.5rem var(--rand);
  transform: translateY(-100%);
  transition: transform 0.35s var(--ease-auftrieb);
}
.mnav.is-open {
  transform: translateY(0);
}
.mnav__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie-2);
  background: transparent;
  color: var(--kalk);
}
.mnav__links {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 3rem;
  list-style: none;
  padding: 0;
}
.mnav__links a {
  font-family: "Unbounded", sans-serif;
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--kalk);
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--seeblau);
  color: var(--kalk);
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    background 0.2s var(--ease-auftrieb),
    transform 0.16s var(--ease-auftrieb);
  border: 1px solid var(--seeblau);
  cursor: pointer;
}
.cta:hover {
  background: var(--seeblau-tief);
  border-color: var(--seeblau-tief);
}
.cta:active {
  transform: scale(0.97);
}
.cta svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.cta--ghost {
  background: transparent;
  color: var(--kalk);
  border-color: var(--linie-3);
}
.cta--ghost:hover {
  background: var(--tiefe-3);
  border-color: var(--linie-3);
}
.cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Fixe Kontakt-FABs (§0e-12) ---------- */
.fabs {
  position: fixed;
  right: clamp(0.9rem, 2vw, 1.6rem);
  bottom: clamp(0.9rem, 2vw, 1.6rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fab {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--tiefe-3);
  border: 1px solid var(--linie-2);
  color: var(--kalk);
  text-decoration: none;
  transition: background 0.2s var(--ease-auftrieb);
}
.fab:active {
  transform: scale(0.97);
}
.fab:hover {
  background: var(--seeblau);
}
.fab--wa {
  background: var(--seeblau);
  border-color: transparent;
}
.fab svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 720px) {
  .fabs {
    flex-direction: row;
  }
  .fab {
    width: 46px;
    height: 46px;
  }
}

/* ---------- Hairline-Register (Listen statt Card-Grid, §0b-1) ---------- */
.register {
  list-style: none;
  padding: 0;
  padding-right: var(--fab-raum);
  margin: 0;
  border-top: 1px solid var(--linie-1);
}
.register__row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linie-1);
  min-height: 64px;
  text-decoration: none;
  color: inherit;
}
.register__row .seemarke {
  color: var(--seeblau-hell);
}
.register__name {
  flex: 1 1 auto;
  font-weight: 500;
}
.register__meta {
  color: var(--kalk-3);
  font-size: 0.85rem;
  display: flex;
  gap: 1.5rem;
  flex: 0 0 auto;
}
.register__meta span {
  font-variant-numeric: tabular-nums;
}
.register__preis {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  min-width: 6.5rem;
  text-align: right;
}
@media (max-width: 720px) {
  .register__row {
    flex-wrap: wrap;
  }
  .register__meta {
    order: 3;
    flex-basis: 100%;
    gap: 1rem;
  }
  /* Der Preis stand rechtsbuendig an der Kante und lag damit im
     Streifen der mobilen FAB-Reihe. Statt ihn immer weiter
     einzuruecken (die Reihe belegt die volle Breite), wandert er auf
     schmalen Viewports in die zweite Zeile — linksbuendig unter den
     Namen, neben die Metadaten. Damit ist er nie unter den Buttons
     und gleichzeitig besser lesbar. */
  .register__preis {
    order: 4;
    padding-right: 0;
    margin-left: auto;
  }
}

/* ---------- Kennzahlen ---------- */
.kennzahlen {
  display: flex;
  align-items: baseline;
  gap: clamp(1.1rem, 2.6vw, 2.6rem);
  flex-wrap: wrap;
  margin: 0;
  padding: 1.05rem 0 0;
  border-top: 1px solid var(--linie-2);
  list-style: none;
}
.kennzahl {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.kennzahl b {
  font-weight: 600;
  font-size: var(--f-datenwert);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kennzahl span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kalk-3);
  line-height: 1.3;
}

/* ---------- Bestandsnummer ---------- */
.bestandsnr {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--seeblau-hell);
}

/* ---------- Sub-Head (bewegter Kopf auf Unterseiten) ---------- */
.subhead {
  position: relative;
  min-height: var(--sh-h, 72vh);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}
.subhead__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.subhead__bed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      110% 60% at 72% 8%,
      rgba(92, 160, 224, 0.28) 0%,
      rgba(8, 13, 17, 0) 62%
    ),
    linear-gradient(to bottom, #06090c 0%, #0b1620 46%, #12222e 100%);
}
.subhead__poster,
.subhead__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.subhead__video {
  opacity: 0;
  transition: opacity 0.6s linear;
}
.subhead__video.is-ready {
  opacity: 1;
}
.subhead__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(6, 9, 12, 0.5) 0%, rgba(6, 9, 12, 0) 32%),
    linear-gradient(to top, rgba(6, 9, 12, 0.86) 0%, rgba(6, 9, 12, 0) 58%);
}
.subhead__body {
  position: relative;
  z-index: 2;
  padding: 0 var(--rand) 3rem;
  width: 100%;
}
.subhead__eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--seeblau-hell);
  display: block;
  margin-bottom: 0.9rem;
}
@media (max-width: 720px) {
  .subhead {
    min-height: 56vh;
  }
  .subhead__body {
    padding-bottom: 2.1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .subhead__video {
    display: none;
  }
}

/* Sicherheitsnetz: wenn der Browser ein fokussiertes Feld ins Bild scrollt
   (z. B. virtuelle Tastatur), soll es nicht unter den fixen FABs landen. */
@media (max-width: 900px) {
  input,
  select,
  textarea,
  button[type="submit"] {
    scroll-margin-bottom: var(--fab-raum-mobil);
  }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--tiefe-0);
  border-top: 1px solid var(--linie-1);
  padding-bottom: 6.5rem; /* Platz fuer die fixen FABs, §5.7 */
}
.footer__top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: 4.5rem 3rem;
}
.footer__logo {
  display: inline-block;
  /* Kein heller Traeger mehr — der Header wurde am 06.08.2026 auf die helle
     Logo-Fassung umgestellt, der Footer war uebersehen worden (Haertetest). */
  padding: 0;
  line-height: 0;
  margin-bottom: 1.5rem;
}
.footer__logo img {
  display: block;
  height: 84px;
  width: auto;
}
.footer h4 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kalk-3);
  margin: 0 0 1.1rem;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer__col a {
  color: var(--kalk-2);
  text-decoration: none;
  font-size: 0.92rem;
}
.footer__col a:hover {
  color: var(--kalk);
}
.footer__bottom {
  border-top: 1px solid var(--linie-1);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--kalk-3);
}
.footer__bottom a {
  color: var(--kalk-3);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .footer__top {
    grid-template-columns: 1fr;
  }
}

/* ---------- Formulare ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  max-width: 34rem;
}
.form__label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--kalk-2);
}
.form__label span {
  letter-spacing: 0.04em;
}
.form__input,
.form__select,
.form__textarea {
  background: var(--tiefe-3);
  border: 1px solid var(--linie-2);
  color: var(--kalk);
  padding: 0.95rem 1.1rem;
  font: inherit;
  font-size: 1rem;
  width: 100%;
  border-radius: 0;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: 2px solid var(--seeblau-hell);
  outline-offset: 1px;
}
.form__textarea {
  resize: vertical;
  min-height: 8rem;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
}
@media (max-width: 640px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}
.form__check {
  display: flex;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--kalk-2);
  align-items: flex-start;
}
.form__check input {
  margin-top: 0.25rem;
  accent-color: var(--seeblau);
}
.form__check a {
  color: var(--kalk);
  text-decoration: underline;
}
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__status {
  font-size: 0.9rem;
  min-height: 1.4em;
}
.form__status--ok {
  color: var(--seeblau-hell);
}
.form__status--err {
  color: var(--fehler);
}
.form__steps {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.form__step {
  flex: 1;
  height: 2px;
  background: var(--linie-2);
}
.form__step.is-done,
.form__step.is-active {
  background: var(--seeblau-hell);
}
.form__stepbody {
  display: none;
}
.form__stepbody.is-active {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.form__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* ---------- Legal (Impressum/Datenschutz) ---------- */
.legal {
  max-width: 46rem;
  padding-block: 8rem 8rem;
}
.legal h2 {
  font-family: "Unbounded", sans-serif;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 600;
  margin: 2.6rem 0 0.9rem;
  letter-spacing: -0.01em;
}
.legal h2:first-child {
  margin-top: 0;
}
.legal p,
.legal li {
  color: var(--kalk-2);
  font-size: 0.96rem;
  line-height: 1.7;
}
.legal ul {
  padding-left: 1.2rem;
}
.legal a {
  color: var(--kalk);
}

/* ---------- View-Transitions Progressive Enhancement ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* ---------- Reveal-Utility (SplitText-Ersatz, IO-gesteuert) ---------- */
.reveal-line {
  overflow: hidden;
  display: block;
}
.reveal-line > span {
  display: inline-block;
  will-change: transform;
  transform: translateY(100%);
  transition: transform 0.85s var(--ease-auftrieb);
}
.reveal-line.in-view > span {
  transform: translateY(0);
}
.reveal-fade {
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  transition:
    opacity 0.7s var(--ease-auftrieb),
    transform 0.7s var(--ease-auftrieb);
}
.reveal-fade.in-view {
  opacity: 1;
  transform: none;
}
.no-anim .reveal-line > span,
.no-anim .reveal-fade {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-line > span,
  .reveal-fade {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ---------- Öffnungszeiten-Tafel ----------
   Lag urspruenglich nur im <style> von index.html; ueber-uns.html nutzt
   dieselbe Klasse und rendert ohne diese Regeln eine nackte Bullet-Liste
   ("Montag – Freitag9:00 – 18:00 Uhr"). Geteilte Klassen gehoeren in die
   gemeinsame CSS. */
.oeffnungszeiten {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--linie-1);
}
.oeffnungszeiten li {
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linie-1);
  font-size: 0.95rem;
}
.oeffnungszeiten span:last-child {
  color: var(--kalk-2);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   FAB-Sicherheitszone (Hamada 06.08.2026: „guck die Schriften,
   wie die hinter den Bildern verschwinden")
   ----------------------------------------------------------
   Die drei fixen Kontakt-Buttons liegen als eigene Ebene ueber
   dem Inhalt. An RUHEpositionen (Seitenende) war alles frei —
   BEIM SCROLLEN kollidierten sie aber mit 16 Textstellen,
   praktisch jedem Preis und jeder Kilometerangabe.
   Loesung: die rechten Zeilen-ENDEN bekommen Reserve, die
   Hairlines/Trennlinien laufen weiter voll durch (sonst
   fluchten die Spalten nicht mehr). Alle betroffenen Elemente
   bekommen DENSELBEN Wert, damit sie untereinander fluchten.
   ========================================================== */
:root {
  /* FAB-Spur gemessen: 54px Button + 18px Rand = 72px, dazu Luft
     gegen den Glyphen-Rand -> 7rem. Kleinere Werte lassen die
     Preise weiterhin anschneiden (verifiziert per elementFromPoint
     auf der echten Glyphenbox, nicht auf dem Element-Rechteck). */
  --fab-zone: 7rem;
  /* Hoehe der Nav — die Filterleiste auf garage.html klebt daran, sonst
     verschwindet sie darunter (Haertetest 06.08.). */
  --nav-h: 6.9rem;
}
/* Korrektur 06.08.2026 (Haertetest): `--fab-zone` als padding auf einzelne
   Textknoten hat mehr kaputtgemacht als repariert — im schmalen Preis-Panel
   der Detailseiten brach dadurch das „€" auf 30 von 30 Seiten in die naechste
   Zeile. Die Reserve gilt jetzt nur noch dort, wo die Buttons wirklich
   darueberliegen; `.fzg-panel__preis` ist raus (Panel ist ~412 px breit und
   liegt gar nicht in der Button-Spur). */
.staffelA__preis,
.staffelA__meta,
.marken__ab,
.register__preis,
.direktnummer {
  padding-right: var(--fab-zone);
}
.fzg-panel__preis {
  white-space: nowrap;
}
/* Blocker 3: Auf den Detailseiten lief die Datentabelle unter die Buttons —
   dort fehlte die Reserve ganz (sie lag nur auf Preis-Spans). */
.technik-tabelle,
.filterleiste__count {
  padding-right: var(--fab-zone);
}
/* Die Datenzeile der Staffel ist ein Flex-Ende — dort wirkt
   padding auf dem Container, nicht auf dem Span. */
.staffelA__info {
  padding-right: 0;
}
@media (max-width: 720px) {
  :root {
    --fab-zone: 0rem;
  }
  /* Mobil stehen die FABs als Reihe UNTEN, nicht rechts —
     dort ist die Reserve vertikal, nicht horizontal. */
  .staffelA__preis,
  .staffelA__meta,
  .marken__ab,
  .register__preis,
  .direktnummer {
    padding-right: 0;
  }
}

/* Footer-Schlusszeile lag auf FAB-Hoehe (USt-IdNr. angeschnitten). */
.footer__bottom {
  padding-right: var(--fab-zone);
}
@media (max-width: 720px) {
  .footer__bottom {
    padding-right: 0;
  }
}

@media (max-width: 720px) {
  /* Mobil liegen die drei Kontakt-Buttons als REIHE am unteren Rand
     (nicht gestapelt rechts). Die Preise der Register-Liste standen
     bündig an der rechten Kante und wurden beim Vorbeiscrollen
     angeschnitten. Eine halbe Button-Breite Reserve genügt, damit die
     Glyphen links der Reihe enden — die Hairline bleibt voll. */
  .register__preis {
    padding-right: 2.4rem;
  }
}

/* Rueckzug der Kontakt-Buttons beim Abwaertsscrollen (nur schmal, s. site.js) */
@media (max-width: 720px) {
  .fabs {
    transition:
      transform 0.28s var(--ease-auftrieb),
      opacity 0.28s var(--ease-auftrieb);
  }
  .fabs.ist-versteckt {
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fabs {
    transition: none;
  }
}

@media (max-width: 720px) {
  /* Label und Wert standen mobil ohne Abstand aneinander
     („Samstag9:00 – 15:00 Uhr") — flex mit space-between kollabiert,
     sobald beide Teile zusammen breiter sind als die Zeile. */
  .oeffnungszeiten li {
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
  }
  .oeffnungszeiten li span:last-child {
    margin-left: auto;
  }
}

/* Lange Rechtsseiten-Ueberschriften brachen mobil nicht um und wurden
   am Rand gekappt („DATENSCHUTZE…"). */
.legal .h1 {
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 720px) {
  .legal .h1 {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
  }
}