/* =====================================================================
   site.css — CarCenter Erding · Haut A „Der Hof im Tageslicht"
   Statik: ~/.claude/vorlagen/auto-statik.md (kopiert), Haut: bau-brief.md.
   Kopf/Kontaktleiste 1:1 aus _arbeit/kopf-markup.html (Schritt 4, gemessen).
   Farben NUR über tokens.css. Animiert werden nur transform/opacity/clip-path.
   ===================================================================== */

/* ---------- Rhythmus-Karte (bau-brief §9, mobil ≤ 5 rem) ---------- */
:root {
  --r8: clamp(4rem, 8vw, 8rem);
  --r7: clamp(3.5rem, 7vw, 7rem);
  --r6: clamp(3.25rem, 6vw, 6rem);
  --r5: clamp(3rem, 5vw, 5rem);
  --r4: clamp(2.5rem, 4vw, 4rem);
  --r3: clamp(2rem, 3vw, 3rem);
  --r25: 2.5rem;
}
@media (min-width: 1100px) {
  /* die schwebende Ruf-Spalte (.ruf) lebt im Seitenrand — der Rand trägt sie */
  :root {
    --rand: max(5vw, 84px);
  }
}

/* ---------- Grundlagen ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--leiste-h) + 1rem);
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--txt);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img,
video,
iframe {
  display: block;
  max-width: 100%;
}
figure {
  margin: 0;
}
a {
  color: var(--rot-text);
  text-underline-offset: 0.18em;
}
button {
  font: inherit;
  appearance: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
:focus-visible {
  outline: 3px solid var(--rot-text);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: var(--rot);
  color: var(--auf-rot);
}
.sr-only,
.nurSR {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprung {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: var(--tinte);
  color: var(--grund);
  font-weight: 600;
  text-decoration: none;
}
.sprung:focus {
  top: 1rem;
}
.bahn {
  width: 100%;
  max-width: var(--bahn-max);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.sek {
  position: relative;
}

/* ---------- Typo-Bausteine ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--txt);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
}
.h-1 {
  font-family: var(--disp);
  font-weight: 760;
  font-stretch: var(--breit-l);
  font-size: var(--fs-h1-sub);
  line-height: 1.02;
  letter-spacing: var(--spur-l);
  text-transform: var(--dsp-case);
  text-wrap: balance;
}
.h-2 {
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: var(--breit-h2);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--spur-h2);
  text-transform: var(--dsp-case);
  text-wrap: balance;
}
.h-3 {
  font-family: var(--disp);
  font-weight: 650;
  font-stretch: var(--breit-h3);
  font-size: var(--fs-h3);
  line-height: 1.25;
  text-transform: var(--dsp-case);
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--meta);
  max-width: 40rem;
  text-wrap: pretty;
}
.akzent {
  color: var(--rot-text);
}
.fakten-wert {
  font-family: var(--disp);
  font-weight: 800;
  font-stretch: var(--breit-wert);
  font-size: var(--fs-wert);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.kapitel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.klein {
  color: var(--meta);
  font-size: 0.88rem;
  line-height: 1.6;
}
.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 650;
  color: var(--rot-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
}
.pfeil-link span {
  transition: transform var(--dauer-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .pfeil-link:hover span {
    transform: translateX(4px);
  }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.85rem 1.45rem;
  border: 1px solid var(--rot);
  border-radius: 999px;
  background: var(--rot);
  color: var(--auf-rot);
  font-family: var(--txt);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dauer-ui) var(--ease),
    border-color var(--dauer-ui) var(--ease),
    color var(--dauer-ui) var(--ease),
    transform 140ms var(--ease);
}
.knopf:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .knopf:hover {
    background: #c00014;
    border-color: #c00014;
  }
}
.knopf--rand {
  background: transparent;
  color: var(--tinte);
  border-color: var(--kante);
}
@media (hover: hover) and (pointer: fine) {
  .knopf--rand:hover {
    background: var(--flaeche);
    border-color: var(--tinte);
    color: var(--tinte);
  }
}
.knopf--randT {
  background: transparent;
  color: var(--tinte);
  border-color: var(--kante);
}
@media (hover: hover) and (pointer: fine) {
  .knopf--randT:hover {
    background: var(--flaeche);
    border-color: var(--tinte);
  }
}
.knopf--voll {
  width: 100%;
}
.knopf[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* =====================================================================
   1 · KOPFLEISTE — themenfest hell + deckend (Regel-53-Zeile 3)
   ===================================================================== */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--leiste-h);
  border-bottom: 1px solid var(--leiste-kante-fest);
}
.kopfleiste__innen {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.5rem);
  max-width: var(--bahn-max);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.kopfleiste__logo {
  flex: none;
  display: block;
  line-height: 0;
}
.kopfleiste__logo img {
  width: 288px; /* Höhe 60 px über die Breite (GESETZ Kap. 4) */
  height: auto;
}
.kopfleiste__nav {
  margin-left: auto;
}
.kopfleiste__nav ul {
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.7rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kopfleiste__nav a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--leiste-tinte-fest);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.kopfleiste__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
.kopfleiste__nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
  .kopfleiste__nav a:hover::after {
    transform: scaleX(1);
  }
}
.kopfleiste__werkzeug {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.werkzeug-knopf,
.nav__merk {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--leiste-kante-fest);
  border-radius: 50%;
  background: transparent;
  color: var(--leiste-tinte-fest);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dauer-ui) var(--ease),
    transform 140ms var(--ease);
}
.werkzeug-knopf:active,
.nav__merk:active {
  transform: scale(0.95);
}
@media (hover: hover) and (pointer: fine) {
  .werkzeug-knopf:hover,
  .nav__merk:hover {
    background: var(--leiste-flaeche-fest);
  }
}
.werkzeug-knopf svg,
.nav__merk svg {
  width: 19px;
  height: 19px;
}
.nav__merk svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.nav__merkzahl {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--rot);
  color: var(--auf-rot);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
/* Schalter: Mond im hellen, Sonne im dunklen Thema */
.werkzeug-knopf .ic-sonne {
  display: none;
}
[data-theme="dark"] .werkzeug-knopf .ic-sonne {
  display: block;
}
[data-theme="dark"] .werkzeug-knopf .ic-mond {
  display: none;
}
.kopfleiste__burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--leiste-tinte-fest);
  color: var(--leiste-fest);
  cursor: pointer;
  place-items: center;
}
.kopfleiste__burger span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 2px auto;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 220ms var(--ease),
    opacity 160ms var(--ease);
}
.kopfleiste[data-offen="ja"] .kopfleiste__burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.kopfleiste[data-offen="ja"] .kopfleiste__burger span:nth-child(2) {
  opacity: 0;
}
.kopfleiste[data-offen="ja"] .kopfleiste__burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
/* Mobil-Menü: eigene Fläche unter der Leiste, Schrift folgt diesem Grund */
.kopfleiste__mobil {
  position: fixed;
  top: var(--leiste-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 49;
  overflow-y: auto;
  padding: 1.5rem var(--rand) 6rem;
  background: var(--leiste-fest);
  color: var(--leiste-tinte-fest);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 200ms var(--ease),
    transform 240ms var(--ease),
    visibility 0s linear 240ms;
}
.kopfleiste[data-offen="ja"] .kopfleiste__mobil {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 200ms var(--ease),
    transform 240ms var(--ease),
    visibility 0s;
}
.kopfleiste__mobil ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kopfleiste__mobil li + li {
  border-top: 1px solid var(--leiste-kante-fest);
}
.kopfleiste__mobil a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  color: var(--leiste-tinte-fest);
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: var(--breit-h2);
  font-size: clamp(1.4rem, 5.6vw, 1.9rem);
  text-transform: var(--dsp-case);
  text-decoration: none;
}
.kopfleiste__mobil a[aria-current="page"] {
  color: #c00014;
}
.kopfleiste__mobil-fuss {
  margin-top: 2rem;
  display: grid;
  gap: 0.7rem;
}
.kopfleiste__mobil-fuss p {
  color: var(--leiste-meta-fest);
  font-size: 0.95rem;
}
@media (max-width: 1359px) {
  .kopfleiste__nav {
    display: none;
  }
  .kopfleiste__werkzeug {
    margin-left: auto;
  }
  .kopfleiste__burger {
    display: inline-grid;
  }
}
@media (min-width: 1360px) {
  .kopfleiste__mobil {
    display: none;
  }
}
@media (max-width: 599px) {
  :root {
    --leiste-h: 76px;
  }
  .kopfleiste__innen {
    gap: 0.5rem;
    padding-inline: 1rem;
  }
  .kopfleiste__logo {
    min-width: 0;
    flex: 1 1 auto;
  }
  .kopfleiste__logo img {
    width: min(212px, 100%);
  }
  .kopfleiste__werkzeug {
    gap: 0.25rem;
  }
  .werkzeug-knopf,
  .nav__merk {
    width: 40px;
    height: 40px;
  }
  .kopfleiste__werkzeug .nav__merk {
    display: none;
  } /* Merkliste steht mobil im Menü */
}
html.menue-offen {
  overflow: hidden;
}

/* =====================================================================
   2 · KOPF (Start + Unterseiten) — 1:1 aus kopf-markup.html (Schritt 4)
   ===================================================================== */
.kopf {
  position: relative;
  height: calc(100svh - var(--leiste-h));
  min-height: 520px;
  overflow: hidden;
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
  isolation: isolate;
}
.kopf__medium {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.kopf__medium video,
.kopf__medium img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--dunkel-fest);
}
/* Kein flächiger Scrim über dem Video (GESETZ Kap. 11, Hamada 29.09.2026: „da drauf ist eine
   schicht die weg gemacht werden soll"). Der Schatten sitzt NUR direkt hinter dem Textblock
   (.kopf__text::before) — weiche Kanten, das Video bleibt rundum hell. Werte gemessen: hero-abnahme.md „Neu-Lauf 29.09.". */
.kopf__text {
  position: absolute;
  z-index: 1;
  left: var(--rand);
  bottom: clamp(2.5rem, 11vh, 6rem);
  width: min(46rem, 62vw);
  --tinte: var(--kalk-fest);
  --meta: var(--kalk-fest);
  color: var(--kalk-fest);
  text-shadow: 0 1px 2px rgb(11 15 21 / 0.45);
}
/* Schatten direkt hinter dem Text: weiche Fläche genau über dem Textblock, Kanten laufen aus */
.kopf__text::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -2.5rem -1.5rem -2.5rem calc(-1 * var(--rand));
  background: rgb(11 15 21 / 0.6);
  -webkit-mask-image:
    linear-gradient(to right, #000 calc(100% - 4rem), transparent),
    linear-gradient(
      to bottom,
      transparent,
      #000 3rem,
      #000 calc(100% - 3rem),
      transparent
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 calc(100% - 4rem), transparent),
    linear-gradient(
      to bottom,
      transparent,
      #000 3rem,
      #000 calc(100% - 3rem),
      transparent
    );
  mask-composite: intersect;
}
.kopf__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kopf__live {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--rot);
  box-shadow: 0 0 0 0 rgb(228 0 21 / 0.6);
}
.kopf h1 {
  margin: 0;
  font-weight: inherit;
}
.kopf__z1 {
  display: block;
  font-family: var(--txt);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: var(--fs-z1);
  line-height: 1.3;
  margin-bottom: 0.55rem;
}
.kopf__pointe {
  display: block;
  font-family: var(--disp);
  font-weight: 760;
  font-stretch: var(--breit-l);
  font-size: var(--fs-l);
  line-height: 1;
  letter-spacing: var(--spur-l);
  text-transform: var(--dsp-case);
  text-wrap: balance;
  word-spacing: 0.04em;
}
.kopf__akzent {
  color: var(--kalk-fest);
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}
.kopf__beweis {
  margin: 1.1rem 0 0;
  max-width: 38rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--kalk-fest);
}
.kopf__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  border: 0;
  background: var(--rot);
  color: var(--kalk-fest);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition:
    background-color 180ms var(--ease),
    transform 140ms var(--ease);
}
.kopf__cta:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .kopf__cta:hover {
    background: #c00014;
  }
}
.kopf__cta:focus-visible {
  outline: 3px solid var(--kalk-fest);
  outline-offset: 3px;
}
/* Zeilen-Wrapper für das Text-Reveal — Luft unten, damit Umlaute/Unterlängen nicht geköpft werden */
.kopf .zeile {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  padding-top: 0.08em;
  margin-top: -0.08em;
}
.kopf .wort {
  display: inline-block;
}
@media (max-width: 899px) {
  .kopf {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .kopf__medium {
    position: relative;
    inset: auto;
    aspect-ratio: 4/3;
    max-height: 62svh;
    width: 100%;
  }
  .kopf__text::before {
    display: none;
  }
  .kopf__text {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    min-width: 0;
    text-align: center;
    padding: 1.75rem 1.25rem 2rem;
    background: var(--dunkel-fest);
    text-shadow: none;
  }
  .kopf__eyebrow {
    justify-content: center;
  }
  .kopf__pointe {
    font-size: clamp(1.9rem, 8.2vw, 2.4rem);
  }
  .kopf__beweis {
    margin-inline: auto;
  }
}
/* Choreografie 0–3 s (Schritt 4): CSS, No-Motion-First, Medium steht ab Frame 0 */
@media (prefers-reduced-motion: no-preference) {
  @keyframes kopf-hoch {
    from {
      transform: translateY(105%);
    }
    to {
      transform: none;
    }
  }
  @keyframes kopf-ein {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes kopf-puls {
    0% {
      box-shadow: 0 0 0 0 rgb(228 0 21 / 0.55);
    }
    70%,
    100% {
      box-shadow: 0 0 0 0.6rem rgb(228 0 21 / 0);
    }
  }
  .kopf__eyebrow {
    animation: kopf-ein 0.7s var(--ease) 0.15s backwards;
  }
  .kopf__z1 .wort {
    animation: kopf-hoch 0.8s var(--ease) calc(0.3s + var(--i, 0) * 0.04s)
      backwards;
  }
  .kopf__pointe .wort {
    animation: kopf-hoch 0.95s var(--ease) calc(0.45s + var(--i, 0) * 0.09s)
      backwards;
  }
  .kopf__beweis {
    animation: kopf-ein 0.8s var(--ease) 1s backwards;
  }
  .kopf__cta {
    animation: kopf-ein 0.7s var(--ease) 1.2s backwards;
  }
  .kopf__live {
    animation: kopf-puls 2.2s ease-out 1.6s infinite;
  }
}

/* =====================================================================
   3 · KONTAKTLEISTE — bündig 0 px (GESETZ Kap. 5)
   ===================================================================== */
.kontaktleiste {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--karte);
  border-bottom: 1px solid var(--kante);
}
.kontaktleiste > a,
.kontaktleiste > div {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem var(--rand);
  color: var(--tinte);
  text-decoration: none;
  min-width: 0;
  border-right: 1px solid var(--kante);
  font-weight: 650;
  line-height: 1.3;
  transition: background-color var(--dauer-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .kontaktleiste > a:hover {
    background: var(--flaeche);
  }
}
.kontaktleiste > :last-child {
  border-right: 0;
}
.kontaktleiste small {
  display: block;
  color: var(--meta);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.kontaktleiste__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--rot-text);
  display: grid;
  place-items: center;
}
.kontaktleiste__icon svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 899px) {
  .kontaktleiste {
    grid-template-columns: 1fr;
  }
  .kontaktleiste > a,
  .kontaktleiste > div {
    border-right: 0;
    border-bottom: 1px solid var(--kante);
    padding: 0.95rem 1.25rem;
  }
  .kontaktleiste > :last-child {
    border-bottom: 0;
  }
}

/* =====================================================================
   4 · FAKTEN-LEISTE (einzige medienlose Fläche, bündig)
   ===================================================================== */
.fakten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--kante);
}
.fakt {
  padding: clamp(1.6rem, 3vw, 2.6rem) var(--rand);
  border-right: 1px solid var(--kante);
  min-width: 0;
}
.fakt:last-child {
  border-right: 0;
}
.fakt__wert {
  display: flex;
  align-items: flex-start;
}
.fakt__stern {
  color: var(--rot);
  font-size: 0.5em;
  margin: 0.08em 0 0 0.08em;
}
.fakt__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--meta);
  white-space: nowrap;
}
@media (max-width: 1099px) and (min-width: 900px) {
  .fakt {
    padding-inline: 2rem;
  }
}
@media (max-width: 899px) {
  .fakten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fakt {
    padding: 1.4rem 1.25rem;
  }
  .fakt:nth-child(2n) {
    border-right: 0;
  }
  .fakt:nth-child(-n + 2) {
    border-bottom: 1px solid var(--kante);
  }
  .fakt__label {
    white-space: normal;
  }
}

/* =====================================================================
   5 · MANIFEST — Riesensatz auf dem Grund, darunter Bühne randlos
   ===================================================================== */
.manifest {
  padding-top: var(--r7);
}
.manifest__satz {
  max-width: 62rem;
  font-family: var(--disp);
  font-weight: 740;
  font-stretch: var(--breit-l);
  font-size: var(--fs-l);
  line-height: 1.04;
  letter-spacing: var(--spur-l);
  text-transform: var(--dsp-case);
  text-wrap: balance;
}
.manifest__zeile {
  margin-top: 1.4rem;
}
.buehne-bild {
  position: relative;
  margin: 3.25rem 0 0; /* <figure> ohne Browser-Rand (Duell-Befund) */
  height: 78vh;
  min-height: 460px;
  max-height: 900px;
  overflow: hidden;
  background: var(--dunkel-fest);
}
.buehne-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.buehne-bild figcaption {
  position: absolute;
  left: var(--rand);
  bottom: 1.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgb(11 15 21 / 0.62);
  color: var(--kalk-fest);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 899px) {
  .buehne-bild {
    height: auto;
    min-height: 0;
    aspect-ratio: 4/3;
    margin-top: 2rem;
  }
}

/* =====================================================================
   6 · ⭐ SIGNATURE „Das Live-Fenster" — Sticky-Media
   ===================================================================== */
.live {
  padding-top: var(--r25);
}
.live__raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
}
.live__text {
  grid-column: 1 / span 7;
  min-width: 0;
  padding-top: 3.5rem;
}
.live__h2 {
  margin-top: 0.9rem;
}
.live__wort {
  display: flex;
  align-items: flex-start;
  gap: 0.06em;
  font-family: var(--disp);
  font-weight: 820;
  font-stretch: var(--breit-xxl);
  font-size: var(--fs-xxl);
  line-height: 0.86;
  letter-spacing: var(--spur-xxl);
  text-transform: var(--dsp-case);
}
.live__punkt {
  flex: none;
  width: 0.13em;
  height: 0.13em;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--rot);
  box-shadow: 0 0 0 0.045em rgb(228 0 21 / 0.18);
}
.live__satz {
  display: block;
  margin-top: 1.5rem;
  max-width: 32rem;
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: var(--breit-h2);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--spur-h2);
  text-transform: var(--dsp-case);
  text-wrap: balance;
}
.stationen {
  list-style: none;
  margin: 2.8rem 0 0;
  padding: 0;
  max-width: 40rem;
  counter-reset: station;
}
.station {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.25rem 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--kante);
  transition: opacity 360ms var(--ease);
}
.station:last-child {
  border-bottom: 1px solid var(--kante);
}
.station__nr {
  grid-row: span 2;
  font-family: var(--disp);
  font-weight: 750;
  font-stretch: 115%;
  font-size: 1rem;
  color: var(--rot-text);
  padding-top: 0.25rem;
}
.station__nr::after {
  content: "";
  display: block;
  width: 1.6rem;
  height: 2px;
  margin-top: 0.5rem;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}
.station[data-aktiv="ja"] .station__nr::after {
  transform: scaleX(1);
}
.station p {
  color: var(--meta);
  max-width: 34rem;
}
.live__link {
  margin-top: 2rem;
}
.live__geraet {
  grid-column: 9 / span 4;
  justify-self: end;
  width: min(340px, 100%);
  margin-top: calc(-120px - var(--r25)); /* B1: ragt 120 px in die Bühne */
  position: relative;
  z-index: 3;
}
.geraet {
  position: sticky;
  top: calc(var(--leiste-h) + 2rem);
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  padding: 10px;
  background: var(--karte-fest);
  box-shadow:
    0 50px 90px -34px rgb(14 20 28 / 0.55),
    0 18px 30px -18px rgb(14 20 28 / 0.35),
    inset 0 0 0 1px rgb(255 255 255 / 0.16); /* Glaskante */
}
.geraet::before {
  /* Kamera-Insel */
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 4;
  width: 30%;
  height: 22px;
  border-radius: 99px;
  background: #05070a;
  transform: translateX(-50%);
}
.schirm {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: #111;
  color: var(--kalk-fest);
}
.schirm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
}
.schirm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.5),
    rgb(0 0 0 / 0) 24%,
    rgb(0 0 0 / 0) 58%,
    rgb(0 0 0 / 0.82)
  );
}
.schirm__oben {
  position: absolute;
  z-index: 2;
  top: 54px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.schirm__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  background: var(--rot);
  color: #fff;
}
.schirm__chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
.schirm__unten {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 22px;
}
.schirm__station {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-fest);
}
.schirm__titel {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 1.15rem;
  line-height: 1.2;
  transition:
    opacity 220ms var(--ease),
    transform 220ms var(--ease);
}
.schirm__titel[data-wechsel="ja"] {
  opacity: 0;
  transform: translateY(6px);
}
.schirm__balken {
  display: flex;
  gap: 5px;
  margin-top: 0.9rem;
}
.schirm__balken i {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.28);
  overflow: hidden;
}
.schirm__balken i::after {
  content: "";
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}
.schirm__balken i[data-an="ja"]::after {
  transform: scaleX(1);
}
@media (max-width: 1099px) {
  .live__text {
    grid-column: 1 / span 7;
  }
  .live__geraet {
    grid-column: 8 / span 5;
  }
}
@media (max-width: 899px) {
  .live__raster {
    display: block;
  }
  .live__text {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
  }
  .live__geraet {
    width: min(270px, 74vw);
    margin: 2.2rem auto 0;
  }
  .geraet {
    position: relative;
    top: 0;
  }
  .live__mobil-geraet {
    order: 2;
  }
  .stationen {
    order: 3;
  }
  .live__link {
    order: 4;
  }
}

/* =====================================================================
   7 · LEITFAHRZEUG — Einfahrt von rechts (einmalig, kein Pin/Scrub)
   ===================================================================== */
.leit {
  padding-top: var(--r8);
}
.leit__raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: center;
}
.leit__bild {
  grid-column: 1 / span 8;
  position: relative;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--karte);
  box-shadow: var(--schatten-kontakt);
  aspect-ratio: 4 / 3;
}
.leit__bild img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Showroom-Prinzip: Fahrzeug komplett sichtbar */
}
.leit__text {
  grid-column: 9 / span 4;
  min-width: 0;
}
.leit__titel {
  margin-top: 0.8rem;
}
.leit__unter {
  margin-top: 0.5rem;
  color: var(--meta);
  font-size: 0.95rem;
}
.leit__preis {
  margin-top: 1.6rem;
}
.leit__daten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--kante);
}
.leit__daten div {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--kante);
}
.leit__daten div:nth-child(odd) {
  padding-right: 1rem;
}
.leit__daten dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
}
.leit__daten dd {
  margin: 0.2rem 0 0;
  font-weight: 650;
}
.leit__knopf {
  margin-top: 1.8rem;
}
@media (max-width: 899px) {
  .leit__raster {
    display: block;
  }
  .leit__text {
    margin-top: 1.8rem;
  }
}

/* =====================================================================
   8 · BESTAND — das eine Card-Grid (Teaser + Liste)
   ===================================================================== */
.bestand {
  padding-top: var(--r4);
}
.bestand__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  padding-top: var(--r4);
  border-top: 1px solid var(--kante);
}
.bestand__kopf .lead {
  margin-top: 0.7rem;
}
.fzg-gross {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.fzg-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem 1.5rem;
  margin-top: 2.25rem;
}
.fzg-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fzg-karte__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--karte);
  box-shadow: var(--schatten-klein);
}
.fzg-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .fzg-karte:hover .fzg-karte__bild img {
    transform: scale(1.03);
  }
  .fzg-karte:hover .fzg-karte__name {
    color: var(--rot-text);
  }
}
.fzg-karte__nr {
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgb(11 15 21 / 0.72);
  color: var(--kalk-fest);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.fzg-karte__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1rem;
  padding-top: 1rem;
}
.fzg-karte__name {
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: 105%;
  font-size: 1.15rem;
  line-height: 1.2;
  text-transform: var(--dsp-case);
  transition: color var(--dauer-ui) var(--ease);
}
.fzg-karte__link {
  color: inherit;
  text-decoration: none;
}
.fzg-karte__link::after {
  /* ganze Kachel klickbar (GESETZ Kap. 10) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}
.fzg-karte__link:focus-visible {
  outline: none;
}
.fzg-karte__link:focus-visible::after {
  outline: 3px solid var(--rot-text);
  outline-offset: 4px;
}
.fzg-karte__preis {
  font-family: var(--disp);
  font-weight: 750;
  font-stretch: 110%;
  font-size: 1.15rem;
  white-space: nowrap;
}
.fzg-karte__eck {
  grid-column: 1 / -1;
  color: var(--meta);
  font-size: 0.9rem;
}
.fzg-karte .merk {
  z-index: 3;
}
.fzg-karte--gross .fzg-karte__name,
.fzg-karte--gross .fzg-karte__preis {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}
.bestand__fuss {
  margin-top: 2.5rem;
}
@media (max-width: 1099px) {
  .fzg-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .fzg-gross,
  .fzg-raster {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* =====================================================================
   9 · STATEMENT / Bühne 2 — ragt 160 px in die Bewertungen (B3)
   ===================================================================== */
.statement {
  position: relative;
  z-index: 2;
  margin-top: var(--r6);
  margin-bottom: -160px;
  margin-right: clamp(
    0px,
    8vw,
    9rem
  ); /* Anschnitt links, rechts frei für den Überstand */
  height: 74vh;
  min-height: 460px;
  max-height: 820px;
  overflow: hidden;
  border-radius: 0 var(--radius-gross) var(--radius-gross) 0;
}
.statement__bild {
  position: absolute;
  inset: -6% 0;
}
.statement__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  will-change: transform;
}
.statement::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 90% 85% at 0% 100%,
    rgb(11 15 21 / 0.86) 0%,
    rgb(11 15 21 / 0.6) 45%,
    rgb(11 15 21 / 0) 85%
  );
}
.statement__satz {
  position: absolute;
  z-index: 2;
  left: var(--rand);
  right: var(--rand);
  bottom: clamp(2.5rem, 8vh, 5rem);
  max-width: 44rem;
  font-family: var(--disp);
  font-weight: 760;
  font-stretch: var(--breit-l);
  font-size: var(--fs-l);
  line-height: 1.02;
  letter-spacing: var(--spur-l);
  text-transform: var(--dsp-case);
  color: var(--kalk-fest);
  text-wrap: balance;
}
@media (max-width: 899px) {
  .statement {
    margin-right: 0;
    border-radius: 0;
    height: 62svh;
    min-height: 380px;
    margin-bottom: -80px;
  }
}

/* =====================================================================
   10 · BEWERTUNGEN — Laufband nach rechts (GESETZ Kap. 9)
   ===================================================================== */
.stimmen {
  position: relative;
  z-index: 1;
  background: var(--flaeche);
  padding: calc(160px + var(--r8)) 0 var(--r6);
}
.stimmen__schnitt {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--disp);
  font-weight: 750;
  font-stretch: 112%;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}
.stimmen__schnitt .stern {
  display: inline;
  width: auto;
  height: auto;
  color: var(--rot);
}
.stimmen__schnitt small {
  font-family: var(--txt);
  font-weight: 500;
  font-stretch: 100%;
  font-size: 0.95rem;
  color: var(--meta);
}
.stimmen .h-2 {
  margin-top: 0.8rem;
}
/* Laufband = horizontale Sequenz, läuft endlos ohne Scroll-Kopplung (Kap. 9) */
.laufband {
  --abstand: 1.25rem;
  --dauer: 22s;
  margin: 2.6rem var(--rand) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}
.laufband__spur {
  display: flex;
  gap: var(--abstand);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
@keyframes laufband-rechts {
  from {
    transform: translate3d(calc(-50% - var(--abstand) / 2), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .laufband__spur {
    animation: laufband-rechts var(--dauer) linear infinite;
  }
  .laufband:hover .laufband__spur,
  .laufband:focus-within .laufband__spur,
  .laufband:active .laufband__spur {
    animation-play-state: paused;
  }
}
.stimme {
  flex: 0 0 min(360px, 82vw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.6rem 1.6rem 1.4rem;
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  background: var(--karte);
}
.stimme blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.58;
}
.stimme__wer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.stimme__ini {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--rot-text);
  font-family: var(--disp);
  font-weight: 750;
  font-size: 0.9rem;
}
.stimme__name {
  display: block;
  font-weight: 700;
  line-height: 1.25;
}
.stimme__meta {
  display: block;
  color: var(--meta);
  font-size: 0.85rem;
}
@media (prefers-reduced-motion: reduce) {
  .laufband {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .laufband__spur {
    width: auto;
    flex-wrap: wrap;
  }
  .laufband__spur [data-klon] {
    display: none;
  }
}
@media (max-width: 899px) {
  .laufband {
    margin-inline: 0;
  }
}

/* =====================================================================
   11 · BEWERTEN-KARTE (SEH-Aufbau, GESETZ Kap. 9: drei Zeilen, nichts sonst)
   ===================================================================== */
.bewerten-cta {
  margin-top: var(--r3);
}
.bewerten-cta__rahmen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-gross);
  padding: clamp(3.5rem, 9vw, 6.5rem) 1.25rem;
  background: var(--dunkel-fest);
}
.bewerten-cta__buehne {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bewerten-cta__buehne img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bewerten-cta__buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(11 15 21 / 0.42);
}
.bewerten-cta__karte {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.4rem, 4vw, 3rem);
  background: var(--karte-fest);
  border: 1px solid var(--rand-fest);
  border-radius: var(--radius-gross);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.7);
}
.bewerten-cta__titel {
  font-family: var(--txt);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kalk-fest);
}
.bewerten-cta__sterne {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin: 1.4rem 0 1.7rem;
}
.bewerten-cta__sterne svg {
  width: clamp(2rem, 5vw, 2.8rem);
  height: auto;
  fill: var(--rot-fest);
}
.bewerten-cta .knopf {
  min-height: 56px;
  font-size: 1.05rem;
}

/* =====================================================================
   12 · ANKAUF-BAND — Bild läuft über die rechte Kante
   ===================================================================== */
.ankauf-band {
  margin-top: var(--r6);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-left: max(
    var(--rand),
    calc((100vw - var(--bahn-max)) / 2 + var(--rand))
  );
}
.ankauf-band__text p {
  margin-top: 1.1rem;
}
.ankauf-band__text .knopf {
  margin-top: 1.8rem;
}
.ankauf-band__bild {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-gross) 0 0 var(--radius-gross);
  box-shadow: var(--schatten-kontakt);
}
.ankauf-band__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 899px) {
  .ankauf-band {
    grid-template-columns: 1fr;
    padding-left: var(--rand);
  }
  .ankauf-band__bild {
    order: -1;
    margin-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
  }
}

/* =====================================================================
   13 · HAUS / Wer hier steht — B2 Anschnitt über die linke Kante
   ===================================================================== */
.haus {
  margin-top: var(--r5);
}
.haus__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
  padding-right: max(
    var(--rand),
    calc((100vw - var(--bahn-max)) / 2 + var(--rand))
  );
}
.haus__bild {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 0 var(--radius-gross) var(--radius-gross) 0;
  box-shadow: var(--schatten-kontakt);
}
.haus__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 40%;
}
.haus__text {
  padding-top: clamp(0rem, 2vw, 2rem);
  min-width: 0;
}
.haus__text > p {
  margin-top: 1.1rem;
}
.haus__urkunden {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kante);
}
.haus__urkunden img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--schatten-klein);
}
.haus__urkunden figcaption {
  color: var(--meta);
  font-size: 0.92rem;
  line-height: 1.45;
}
.team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: var(--r4) 0 0;
  padding: 0;
  border-top: 1px solid var(--kante);
}
.team li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--kante);
  min-width: 0;
}
.team__ini {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--flaeche);
  border: 1px solid var(--kante);
  font-family: var(--disp);
  font-weight: 750;
  font-size: 0.85rem;
}
.team li:first-child .team__ini {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--auf-rot);
}
.team__name {
  display: block;
  font-weight: 700;
  line-height: 1.25;
}
.team__rolle {
  display: block;
  color: var(--meta);
  font-size: 0.88rem;
}
.haus__link {
  margin-top: 1.8rem;
}
@media (max-width: 899px) {
  .haus__raster {
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  .haus__bild {
    margin-right: var(--rand);
  }
  .haus__text {
    padding-inline: var(--rand);
  }
  .team {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================================
   14 · KARTE — sofort geladen (GESETZ Kap. 10 „Die Karte ist DA")
   ===================================================================== */
.anfahrt {
  padding-top: var(--r7);
}
.anfahrt__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem 2rem;
}
.anfahrt__kopf p {
  margin-top: 0.7rem;
}
.anfahrt__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.anfahrt__raster {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 1.5rem;
  margin-top: 2.2rem;
}
.anfahrt__karte,
.anfahrt__foto {
  height: clamp(340px, 34vw, 500px);
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
}
.anfahrt__karte iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* 30.09.2026 (Augen-Tor rot, Vorbild Blumenhaus Jasmin 28.09.): Die Karte ist IMMER
   da — ein echtes Kartenbild der Umgebung (Google-Karte, einmal aufgenommen) liegt als
   Unterlage im Rahmen. Solange Google noch keine Kacheln gemalt hat, steht diese
   Unterlage statt einer leeren grauen Fläche; die Live-Karte blendet sich darüber ein. */
.anfahrt__karte {
  background: var(--flaeche) url("../karte/karte-erding.webp") center / cover
    no-repeat;
}
.js .anfahrt__karte iframe:not([data-karte-bereit]) {
  visibility: hidden;
}
.anfahrt__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}
@media (max-width: 899px) {
  .anfahrt__raster {
    grid-template-columns: 1fr;
  }
  .anfahrt__foto {
    height: auto;
    aspect-ratio: 16/10;
  }
}

/* =====================================================================
   15 · ANFRAGE-FORMULAR — volle Ausstattung (Termin + Uhrzeit)
   ===================================================================== */
.anfrage {
  padding-top: var(--r3);
}
.anfrage__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
  padding-top: var(--r4);
  border-top: 1px solid var(--kante);
}
.anfrage__seite {
  min-width: 0;
}
.zeiten {
  margin: 2rem 0 0;
  border-top: 1px solid var(--kante);
}
.zeiten div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--kante);
}
.zeiten dt {
  color: var(--meta);
}
.zeiten dd {
  margin: 0;
  font-weight: 650;
  text-align: right;
}
.anfrage__direkt {
  display: grid;
  gap: 0.35rem;
  margin-top: 1.6rem;
}
.anfrage__direkt a {
  font-weight: 650;
  text-decoration: none;
}
.form-karte {
  min-width: 0;
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  border: 1px solid var(--kante);
  border-radius: var(--radius-gross);
  background: var(--karte);
  box-shadow: var(--schatten-klein);
}
.form {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.form__reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.feld {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}
.feld label {
  font-size: 0.9rem;
  font-weight: 650;
}
.feld label small {
  font-weight: 500;
  color: var(--meta);
}
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--kante);
  border-radius: 10px;
  background: var(--grund);
  color: var(--tinte);
  font: inherit;
  font-size: 1rem;
  transition:
    border-color var(--dauer-ui) var(--ease),
    box-shadow var(--dauer-ui) var(--ease);
}
.feld textarea {
  resize: vertical;
  min-height: 7rem;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--rot-text);
  box-shadow: 0 0 0 3px rgb(228 0 21 / 0.16);
}
.einwilligung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--meta);
}
.einwilligung input {
  width: 20px;
  height: 20px;
  margin: 0.1rem 0 0;
  accent-color: var(--rot);
}
.form .knopf {
  justify-self: start;
  min-width: 14rem;
}
.form__meldung {
  font-weight: 600;
}
.form__meldung[data-art="gut"] {
  color: var(--tinte);
}
.form__meldung[data-art="schlecht"] {
  color: var(--rot-text);
}
.form__zusage {
  color: var(--meta);
  font-size: 0.9rem;
}
@media (max-width: 899px) {
  .anfrage__raster {
    grid-template-columns: 1fr;
  }
  .form__reihe {
    grid-template-columns: 1fr;
  }
  .form .knopf {
    width: 100%;
  }
}

/* =====================================================================
   16 · FUSS — 4 Blöcke (Leistungen · Kontakt · Kanal · Rechtliches)
   ===================================================================== */
.fuss {
  margin-top: var(--r6);
  padding: var(--r5) 0 1.5rem;
  background: var(--flaeche);
  border-top: 1px solid var(--kante);
}
.fuss__oben {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--kante);
}
.fuss__marke {
  font-family: var(--disp);
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: var(--dsp-case);
}
.fuss__claim {
  margin-top: 0.6rem;
  color: var(--meta);
}
.fuss__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  padding-top: 2.2rem;
}
.fuss__block h2 {
  margin-bottom: 0.9rem;
  font-family: var(--txt);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
}
.fuss__block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.fuss__block a {
  color: var(--tinte);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .fuss__block a:hover {
    color: var(--rot-text);
    text-decoration: underline;
  }
}
.fuss__block address {
  font-style: normal;
}
.fuss__kanal {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.fuss__kanal svg {
  width: 22px;
  height: 22px;
  color: var(--rot-text);
}
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--kante);
  color: var(--meta);
  font-size: 0.88rem;
}
.fuss__unten a {
  color: var(--meta);
}
@media (max-width: 899px) {
  .fuss__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 479px) {
  .fuss__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   17 · FESTE LEISTE „Anrufen" + „WhatsApp" (GESETZ Kap. 10)
   Desktop: schmale Spalte im Seitenrand (--rand ≥ 84 px) — liegt nie über
   Text oder Knöpfen. Mobil: eigene Fußzeile, der Body hält ihre Höhe frei.
   ===================================================================== */
.ruf {
  position: fixed;
  z-index: 40;
  right: 12px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ruf .ruf__knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 64px;
  padding: 0;
  color: var(--tinte);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 140ms var(--ease);
}
.ruf__knopf:active {
  transform: scale(0.95);
}
/* 30.09.2026 („weicht“): am Rechner blendet die schwebende Ruf-Spalte aus,
   sobald die Fuß-Knopfzeile im Sichtfeld ist — der Fuß trägt Telefon + Knopf selbst,
   die Spalte klebt dann nicht mehr am roten „Fahrzeuge ansehen“.
   30.09.2026 (Lauf 2, „halb"): rein per opacity/visibility blenden, NIE per transform
   hinausschieben — ein Vollbild-Screenshot kann eine laufende Transform-Animation
   mitten im Schritt einfangen, dann ragt die Spalte halb aus dem Bild. Opacity 0
   ist entweder ganz da oder ganz weg, nie „halb". */
@media (min-width: 1100px) {
  .ruf {
    transition:
      opacity 200ms var(--ease),
      visibility 0s linear 0s;
  }
  .ruf.ruf--weicht {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 200ms var(--ease),
      visibility 0s linear 200ms;
  }
}
.ruf__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--rot);
  color: #fff;
  box-shadow: 0 14px 28px -14px rgb(14 20 28 / 0.6);
}
.ruf__knopf--wa .ruf__icon {
  background: var(--karte-fest);
  color: var(--kalk-fest);
  box-shadow:
    0 14px 28px -14px rgb(14 20 28 / 0.6),
    inset 0 0 0 1px rgb(255 255 255 / 0.18);
}
.ruf__icon svg {
  width: 22px;
  height: 22px;
}
.ruf__label {
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--karte);
  border: 1px solid var(--kante);
}
@media (hover: hover) and (pointer: fine) {
  .ruf__knopf:hover .ruf__icon {
    transform: translateY(-2px);
  }
  .ruf__icon {
    transition: transform var(--dauer-ui) var(--ease);
  }
}
@media (max-width: 1099px) {
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
  .ruf {
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--karte);
    border-top: 1px solid var(--kante);
  }
  .ruf .ruf__knopf {
    flex: 1;
    width: auto;
    padding: 0 0.5rem;
    flex-direction: row;
    justify-content: center;
    gap: 0.55rem;
    height: 58px;
    font-size: 0.98rem;
  }
  .ruf__knopf--tel {
    background: var(--rot);
    color: var(--auf-rot);
  }
  .ruf__icon,
  .ruf__knopf--wa .ruf__icon {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    color: inherit;
  }
  .ruf__label {
    padding: 0;
    background: none;
    border: 0;
  }
}

/* =====================================================================
   18 · UNTERSEITEN — Liste, Suchauftrag, Text-/Hilfsseiten
   ===================================================================== */
.liste-einleitung {
  padding-top: var(--r5);
}
.liste-einleitung .lead {
  margin-top: 0.9rem;
  color: var(--tinte);
}
.klassen-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.klassen-nav a {
  padding: 0.55rem 1rem;
  border: 1px solid var(--kante);
  border-radius: 999px;
  color: var(--tinte);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background-color var(--dauer-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .klassen-nav a:hover {
    background: var(--flaeche);
  }
}
.klasse {
  padding-top: var(--r6);
}
.klasse__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--kante);
}
.klasse__zahl {
  color: var(--meta);
  font-weight: 600;
}
.klasse .fzg-raster {
  margin-top: 2rem;
}
.klasse--spitze .fzg-karte__name,
.klasse--spitze .fzg-karte__preis {
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
}
@media (min-width: 1280px) {
  .klasse:not(.klasse--spitze) .fzg-raster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.25rem;
  }
  .klasse:not(.klasse--spitze) .fzg-karte__name,
  .klasse:not(.klasse--spitze) .fzg-karte__preis {
    font-size: 1.05rem;
  }
}
/* Suchauftrags-Tafel füllt die angebrochene letzte Reihe (keine Waisen-Karte) */
.fzg-tafel {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: 100%;
  padding: 1.6rem;
  border: 1px dashed var(--kante);
  border-radius: var(--radius);
  background: var(--karte);
  color: var(--tinte);
  text-decoration: none;
}
.fzg-tafel p {
  color: var(--meta);
}
/* ≥1280: Spitze 3 Spalten, Rest 4 Spalten */
@media (min-width: 1280px) {
  .klasse--spitze[data-rest3="1"] .fzg-tafel {
    display: flex;
    grid-column: span 2;
  }
  .klasse--spitze[data-rest3="2"] .fzg-tafel {
    display: flex;
  }
  .klasse:not(.klasse--spitze)[data-rest4="1"] .fzg-tafel {
    display: flex;
    grid-column: span 3;
  }
  .klasse:not(.klasse--spitze)[data-rest4="2"] .fzg-tafel {
    display: flex;
    grid-column: span 2;
  }
  .klasse:not(.klasse--spitze)[data-rest4="3"] .fzg-tafel {
    display: flex;
  }
}
/* 1100–1279: alle 3 Spalten */
@media (min-width: 1100px) and (max-width: 1279px) {
  .klasse[data-rest3="1"] .fzg-tafel {
    display: flex;
    grid-column: span 2;
  }
  .klasse[data-rest3="2"] .fzg-tafel {
    display: flex;
  }
}
/* 640–1099: 2 Spalten */
@media (min-width: 640px) and (max-width: 1099px) {
  .klasse[data-rest2="1"] .fzg-tafel {
    display: flex;
  }
}
.such-band {
  margin-top: var(--r7);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.such-band__bild {
  position: sticky;
  top: calc(var(--leiste-h) + 1.5rem);
  /* 30.09.2026 (Augen-Tor rot „SEIT WANN LISTEN WIR DIE SCHMAL UND SENKRECHT?“):
     quer 4:3 wie die Ausstellungsraum-Fotos selbst — Auto ganz, Wandlogo ganz. */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten-kontakt);
}
.such-band__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.such-band .lead {
  margin-top: 0.9rem;
}
.such-band .form-karte {
  margin-top: 2rem;
}
@media (max-width: 899px) {
  .such-band {
    grid-template-columns: 1fr;
  }
  .such-band__bild {
    position: relative;
    top: 0;
    aspect-ratio: 16/10;
  }
}
/* Text- und Hilfsseiten (Impressum, Datenschutz, danke, 404, Merkliste) */
.seitenkopf {
  padding: var(--r5) 0 var(--r3);
  border-bottom: 1px solid var(--kante);
}
.seitenkopf .eyebrow {
  margin-bottom: 1rem;
}
.seitenkopf .lead {
  margin-top: 1rem;
}
.text-seite {
  padding: var(--r4) 0 0;
}
.text-seite__inhalt {
  max-width: 46rem;
}
.text-seite h2 {
  margin: 2.6rem 0 0.8rem;
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.2;
  text-transform: var(--dsp-case);
}
.text-seite h3 {
  margin: 1.6rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.text-seite p,
.text-seite ul {
  margin: 0 0 0.9rem;
}
.text-seite ul {
  padding-left: 1.2rem;
}
.text-seite address {
  font-style: normal;
}
.hinweis-seite {
  padding: var(--r7) 0 0;
}
/* 30.09.2026 (Augen-Tor gelb, danke 390): kurze Hinweisseiten füllen am Handy den
   ersten Bildschirm bis zur festen Ruf-Leiste — sonst schaut der rote Fuß-Knopf halb
   unter der Leiste hervor. */
@media (max-width: 699px) {
  .hinweis-seite {
    min-height: calc(
      100svh - var(--leiste-h) - 58px - env(safe-area-inset-bottom)
    );
    padding-bottom: var(--r5);
  }
}
.hinweis-seite__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}
.hinweis-seite__zeile {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--kante);
  color: var(--meta);
}

/* =====================================================================
   19 · BEWEGUNG unter dem Kopf — No-Motion-First, einmalig
   (1) Sticky-Media: Live-Fenster steht, Stationen ziehen vorbei (site.js)
   (2) Einfahrt: Leitfahrzeug gleitet horizontal von rechts herein
   (3) Laufband: Bewertungen ziehen nach rechts (oben, Kap. 9)
   dazu: Bild-Aufdecken per clip-path (Manifest-Bühne) und
   Gegenlauf-Parallax der Statement-Bühne (GESETZ Kap. 2 erlaubt).
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-auftritt] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 700ms var(--ease),
      transform 800ms var(--ease);
    transition-delay: calc(var(--stufe, 0) * 60ms);
  }
  .js [data-auftritt].ist-da {
    opacity: 1;
    transform: none;
  }
  .js [data-einfahrt] {
    opacity: 0;
    transform: translate3d(6vw, 0, 0);
    transition:
      opacity 700ms var(--ease),
      transform 900ms var(--ease);
  }
  .js [data-einfahrt].ist-da {
    opacity: 1;
    transform: none;
  }
  .js [data-aufdecken] img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1100ms var(--ease);
  }
  .js [data-aufdecken].ist-da img {
    clip-path: inset(0 0 0 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
  .station,
  .schirm__titel {
    transition: none;
  }
}

/* ---------- Feinschliff 390 (Sehen-Loop Runde 1) ---------- */
@media (max-width: 639px) {
  .bestand .fzg-raster .fzg-karte:nth-child(n + 4) {
    display: none; /* Startseite mobil: 2 groß + 3 — der Rest steht in der Übersicht */
  }
}
@media (max-width: 899px) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
  }
  .team li {
    gap: 0.6rem;
    padding-right: 0;
  }
  .team__ini {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.75rem;
  }
  .team__name {
    font-size: 0.92rem;
  }
  .team__rolle {
    font-size: 0.8rem;
  }
}

[data-theme="dark"] .geraet {
  box-shadow:
    0 50px 90px -34px rgb(0 0 0 / 0.8),
    0 0 0 1px #2c3744,
    inset 0 0 0 1px rgb(255 255 255 / 0.16);
}

/* =====================================================================
   20 · BEWERTEN-SEITE (dunkle Bühne, große Frage, gerahmte Karte — Kap. 9)
   ===================================================================== */
.bewerten {
  padding: var(--r7) 0 var(--r7);
}
.bewerten__innen {
  text-align: center;
}
.bewerten__frage {
  margin-top: 1rem;
  font-family: var(--disp);
  font-weight: 800;
  font-stretch: var(--breit-xxl);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.95;
  /* -0.04em (--spur-xxl) klebt bei 6rem Schriftgröße die Wörter aneinander
     (fremd-blick 29.09.2026) — bei dieser Größe reicht eine leichtere Spur. */
  letter-spacing: -0.015em;
  text-transform: var(--dsp-case);
  color: var(--kalk-fest);
}
.bewerten__karte {
  max-width: 36rem;
  margin: 2.6rem auto 0;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 2px solid var(--rot);
  border-radius: var(--radius-gross);
  background: rgb(255 255 255 / 0.04);
  text-align: left;
}
.bewerten__karte > div > p {
  margin-top: 0.8rem;
  color: var(--meta-fest);
}
.bewerten__karte .knopf {
  margin-top: 1.4rem;
}
.bewerten__karte .form {
  margin-top: 1.4rem;
}
.bewerten__karte .feld input,
.bewerten__karte .feld textarea {
  background: rgb(255 255 255 / 0.06);
  border-color: var(--rand-fest);
  color: var(--kalk-fest);
}
.bewerten__karte .einwilligung {
  color: var(--meta-fest);
}
.bewerten__karte a:not(.knopf) {
  color: var(--rot-fest);
}
.sterne {
  border: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}
.sterne__reihe {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}
.stern {
  display: grid;
  place-items: center;
  width: clamp(3rem, 12vw, 4rem);
  height: clamp(3rem, 12vw, 4rem);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  transition: transform 140ms var(--ease);
}
/* 30.09.2026 (Augen-Tor gelb): nicht angetippte Sterne als helle Kontur auf dem
   dunklen Grund — sichtbar und antippbar, nicht „ausgegraut“. */
.stern svg {
  width: 82%;
  height: auto;
  fill: rgb(255 255 255 / 0.1);
  stroke: rgb(255 255 255 / 0.78);
  stroke-width: 1.3;
  stroke-linejoin: round;
  transition:
    fill 160ms var(--ease),
    stroke 160ms var(--ease);
}
.stern.an svg {
  fill: var(--rot-fest);
  stroke: var(--rot-fest);
}
.stern:active {
  transform: scale(0.94);
}
.stern:focus-visible {
  outline: 2px solid var(--kalk-fest);
}
.sterne__hinweis {
  margin-top: 0.9rem !important;
  text-align: center;
  font-size: 0.92rem;
}
.bewerten__fein {
  margin-top: 1.4rem;
  font-size: 0.92rem;
  text-align: center;
}
.fehler-zahl {
  font-family: var(--disp);
  font-weight: 820;
  font-stretch: var(--breit-xxl);
  font-size: var(--fs-xxl);
  line-height: 0.9;
  letter-spacing: var(--spur-xxl);
  color: var(--rot-text);
  margin-bottom: 1.2rem;
}
.merk-seite {
  padding-bottom: 0;
}
.merk-seite .verg__karte img {
  border-radius: var(--radius);
}

.bahn.text-seite__inhalt {
  max-width: var(--bahn-max);
}
.text-seite__inhalt > * {
  max-width: 46rem;
}

/* Fakten/Kontaktleiste: nur die erste Zelle fluchtet mit dem Seitenrand (qa-layout 1280: Label-Clip) */
@media (min-width: 900px) {
  .fakt,
  .kontaktleiste > a,
  .kontaktleiste > div {
    padding-inline: clamp(1.25rem, 2.6vw, 2.75rem);
  }
  .fakt:first-child,
  .kontaktleiste > :first-child {
    padding-left: var(--rand);
  }
}

/* Feste Leiste mobil: Beschriftung folgt ihrem eigenen Grund (38b-Befund 390) */
.ruf .ruf__knopf--tel .ruf__label {
  color: inherit;
}
@media (max-width: 1099px) {
  .ruf .ruf__knopf--tel {
    background: var(--rot);
    color: var(--auf-rot);
  }
  .ruf .ruf__knopf--wa {
    color: var(--tinte);
  }
  .ruf .ruf__label {
    color: inherit;
  }
}
@media (min-width: 1100px) {
  .ruf .ruf__label {
    color: var(--tinte);
  }
}
/* 390: die Leiste liegt beim Laden nie über Text — unter dem Start-CTA bleibt dunkle Luft,
   kurze Hilfsseiten füllen den ersten Bildschirm, der Fuß beginnt darunter. */
@media (max-width: 899px) {
  .kopf[data-kopf="start"] .kopf__text {
    padding-bottom: 6.25rem;
  }
}

/* WebKit 390: die Einfahrt (translateX 6vw) darf nie Seitwärts-Scroll erzeugen */
body,
.leit,
.stimmen {
  overflow-x: clip;
}

/* 390: das Live-Fenster steht zwischen Kopf und Stationen, nicht am Ende */
@media (max-width: 899px) {
  .live__raster {
    display: flex;
    flex-direction: column;
  }
  .live__text {
    display: contents;
  }
  .live__text > .eyebrow {
    order: 1;
    padding-top: 1rem;
  }
  .live__h2 {
    order: 2;
  }
  .live__geraet {
    order: 3;
  }
  .stationen {
    order: 4;
  }
  .live__link {
    order: 5;
  }
}

/* 390/768: Überstand-Luft halbiert sich mit dem Statement-Überstand; Team ohne Waise
   (Inhaber führt als ganze Zeile, darunter 4 × 2) */
@media (max-width: 899px) {
  .stimmen {
    padding-top: calc(80px + var(--r5));
  }
}
@media (max-width: 1199px) {
  .team li:first-child {
    grid-column: 1 / -1;
  }
}

/* bewerten.html: die Bühne trägt den ersten Bildschirm, der Fuß schließt ohne Grund-Streifen an */
.bewerten {
  min-height: calc(88svh - var(--leiste-h));
  display: grid;
  align-content: center;
}
body:has(.bewerten) .fuss {
  margin-top: 0;
}

/* 390: lange deutsche Wörter trennen statt mitten im Wort brechen (Datenschutzerklärung) */
.h-1,
.h-2 {
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (max-width: 479px) {
  .seitenkopf .h-1 {
    font-size: clamp(1.8rem, 8.4vw, 2.2rem);
  }
}

/* =====================================================================
   Lauf 2b · CSS-WÜNSCHE (garantie · ueber-uns · kontakt) — @web-designer 28.09.2026
   Vorschau-Datei: in den drei Seiten per <link … data-lauf2b-wunsch> eingebunden,
   damit der Sehen-Loop echte Bilder hat. Bauleiter: Inhalt ans Ende von
   assets/css/site.css hängen, danach die <link data-lauf2b-wunsch>-Zeile in
   garantie.html / ueber-uns.html / kontakt.html löschen. Nur Tokens, keine neuen Farben.
   ===================================================================== */

/* W1 · Bildunterschrift im Split-Bild (garantie: galerie-4) */
.haus__bild--zeile {
  position: relative;
}
.haus__bild--zeile figcaption {
  position: absolute;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 2.4vw, 1.5rem);
  max-width: min(30rem, calc(100% - 2rem));
  padding: 0.6rem 0.95rem;
  border-radius: 12px;
  background: rgb(11 15 21 / 0.74);
  color: var(--kalk-fest);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

/* W2 · Zwei Tarife als Hairline-Zeilen (garantie) */
.tarife {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--kante);
}
.tarif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1.5rem;
  align-items: end;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--kante);
}
.tarif > * {
  min-width: 0;
}
.tarif .h-3 {
  grid-column: 1;
}
.tarif p {
  grid-column: 1;
  color: var(--meta);
}
.tarif .tarif__ab {
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
  font-family: var(--disp);
  font-weight: 800;
  font-stretch: var(--breit-wert);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tinte);
  white-space: nowrap;
}
.tarif__ab small {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--txt);
  font-stretch: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
}
.garantie-pdf {
  margin-top: 1.9rem;
}

/* W3 · Garantie-Rechner (Fingerabdruck 2) + Tariftabelle */
.rechner {
  padding-top: var(--r7);
}
.rechner__kopf {
  max-width: 46rem;
}
.rechner__kopf .h-2 {
  margin-top: 0.9rem;
}
.rechner__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
  margin-top: 2.4rem;
}
.rechner__ergebnis {
  min-width: 0;
  padding-top: 0.3rem;
}
.rechner__status {
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: var(--breit-h2);
  font-size: var(--fs-h3);
  line-height: 1.25;
}
.rechner__bedingung {
  margin-top: 0.35rem;
  color: var(--meta);
}
.rechner__preise {
  list-style: none;
  margin: 1.7rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--kante);
  border-bottom: 1px solid var(--kante);
}
.rechner__preise li {
  min-width: 0;
  padding: 1.4rem 1.25rem 1.6rem;
  border-right: 1px solid var(--kante);
}
.rechner__preise li:first-child {
  padding-left: 0;
}
.rechner__preise li:last-child {
  border-right: 0;
}
.rechner__lz {
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
}
.rechner__preise .fakten-wert {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  white-space: nowrap;
  transition:
    opacity 160ms var(--ease),
    transform 160ms var(--ease);
}
.rechner__preise .fakten-wert[data-wechsel="ja"] {
  opacity: 0;
  transform: translateY(4px);
}
.rechner[data-zustand="aus"] .rechner__preise {
  opacity: 0.32;
}
.rechner__zweit {
  margin-top: 1.1rem;
  color: var(--meta);
}
.rechner__zweit strong {
  color: var(--tinte);
  font-weight: 700;
}
.rechner__hinweis {
  margin-top: 1.3rem;
  max-width: 38rem;
}
.rechner__eingabe .feld input[type="number"] {
  -moz-appearance: textfield;
}
.tariftabelle-rolle {
  margin-top: var(--r4);
  overflow-x: auto;
}
.tariftabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.tariftabelle caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 1rem;
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: var(--breit-h2);
  font-size: var(--fs-h3);
}
.tariftabelle th,
.tariftabelle td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--kante);
  text-align: right;
  white-space: nowrap;
  transition: background-color var(--dauer-ui) var(--ease);
}
.tariftabelle th:first-child {
  text-align: left;
  white-space: normal;
  padding-left: 0.9rem;
}
.tariftabelle thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  border-bottom-color: var(--tinte);
}
.tariftabelle tbody th {
  font-weight: 650;
}
.tariftabelle tbody th small {
  display: block;
  color: var(--meta);
  font-weight: 500;
  font-size: 0.85rem;
}
.tariftabelle .tarif-gruppe th {
  padding-top: 1.6rem;
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: var(--breit-h3);
  font-size: 1.05rem;
}
.tariftabelle tr[data-treffer="ja"] > * {
  background: var(--karte);
}
.tariftabelle tr[data-treffer="ja"] > th:first-child {
  box-shadow: inset 3px 0 0 var(--rot);
}
@media (max-width: 899px) {
  .rechner__raster {
    grid-template-columns: 1fr;
  }
  .rechner__preise {
    grid-template-columns: 1fr;
  }
  .rechner__preise li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--kante);
  }
  .rechner__preise li:last-child {
    border-bottom: 0;
  }
  .rechner__lz {
    margin: 0;
  }
  .rechner__preise .fakten-wert {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
  .tariftabelle th,
  .tariftabelle td {
    padding: 0.75rem 0.55rem;
    font-size: 0.95rem;
  }
}
.tt-kurz {
  display: none;
}
@media (max-width: 599px) {
  .tt-lang {
    display: none;
  }
  .tt-kurz {
    display: inline;
  }
  .tariftabelle th,
  .tariftabelle td {
    padding: 0.7rem 0.3rem;
    font-size: 0.88rem;
  }
  .tariftabelle th:first-child {
    padding-left: 0.6rem;
  }
  .tariftabelle thead th {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }
  .tariftabelle tbody th small {
    font-size: 0.75rem;
    line-height: 1.3;
  }
}

/* W4 · Großes Einzelzitat + Zahlen (ueber-uns) */
.ueber-stimme {
  padding-top: var(--r7);
}
.zitat {
  max-width: 64rem;
  margin: 0;
}
.zitat blockquote {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: var(--breit-h2);
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: var(--spur-h2);
  text-wrap: pretty;
}
.zitat figcaption {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
}
.ueber-stimme .fakten {
  margin-top: var(--r5);
  border-top: 1px solid var(--kante);
}

/* W5 · Team + Einladung (ueber-uns) */
.ueber-team {
  padding-top: var(--r6);
}
.ueber-team .team {
  margin-top: 2.2rem;
}
.einladung {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem 3rem;
  margin-top: var(--r5);
}
.einladung__satz {
  max-width: 46rem;
  font-family: var(--disp);
  font-weight: 760;
  font-stretch: var(--breit-l);
  font-size: var(--fs-l);
  line-height: 1.04;
  letter-spacing: var(--spur-l);
  text-wrap: balance;
}
.einladung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* W6 · Kontakt: Formular direkt unter der Kontaktleiste, Direktdrähte als Hairline-Liste */
.anfrage--zuerst {
  padding-top: var(--r5);
}
.anfrage--zuerst .anfrage__raster {
  padding-top: 0;
  border-top: 0;
}
.anfrage__seite .lead {
  margin-top: 1rem;
}
.anfrage__seite .h-3 {
  margin-top: 2.2rem;
}
.anfrage__seite .h-3 + .zeiten {
  margin-top: 0.9rem;
}
.zeiten dd a {
  font-weight: 650;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .zeiten dd a:hover {
    text-decoration: underline;
  }
}

/* W7 · Inhaber-Split: kurzer Text steht mittig neben dem Bild statt oben (ueber-uns) */
@media (min-width: 900px) {
  .haus--mitte .haus__raster {
    align-items: center;
  }
}

/* W8 · Kontakt mobil: „Formular zuerst" gilt auch am Handy — Kopf + Lead, dann Formular, dann Direktdrähte/Zeiten */
.zeiten dd a {
  white-space: nowrap;
}
@media (max-width: 899px) {
  .anfrage--zuerst .anfrage__raster {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .anfrage--zuerst .anfrage__seite {
    display: contents;
  }
  .anfrage--zuerst .anfrage__seite > * {
    order: 4;
  }
  .anfrage--zuerst .anfrage__seite > .h-2 {
    order: 1;
  }
  .anfrage--zuerst .anfrage__seite > .lead {
    order: 2;
  }
  .anfrage--zuerst .form-karte {
    order: 3;
    margin: 1.6rem 0 0.4rem;
  }
}

/* Lauf 2a · CSS-Wünsche (online-kaufen / ankauf / finanzierung) — 28.09.2026 */
/* W1 · Überschriften im schmalen Split-Text nicht trennen (ankauf) */
.haus__text .h-2,
.ankauf-band__text .h-2 {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* W2 · Kleine Zitat-Karte unter den Stationen (online-kaufen, Beleg Obergasteiger) — 29.09.2026 */
.zitat-mini {
  max-width: 30rem;
  margin: 2.2rem 0 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--kante);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
}
.zitat-mini__kopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--meta);
}
.zitat-mini__stern {
  color: var(--rot);
}
.zitat-mini__text {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.zitat-mini__wer {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--meta);
}
.zitat-mini__wer .stimme__name {
  color: var(--tinte);
  font-weight: 650;
}

/* W5 · Live-Fenster auf online-kaufen: Gerät bündig mit dem Einleitungssatz */
.liste-einleitung + .live .live__text {
  padding-top: 1rem;
}

/* =====================================================================
   KORREKTUR 1 · 29.09.2026 — Auszeichnungen + Fahrzeugberater
   (copy-seiten.md „Korrektur 1“; Hamada: „MACH DAS“)
   ===================================================================== */

/* K1a · Auszeichnungs-Band — steht in .stimmen VOR der Kopfzeile + Laufband.
   Hairline-Zellen wie die Fakten-Leiste (keine Card-Grid-Kacheln). */
.auszeichnung__h {
  max-width: 17em;
}
.siegel-reihe {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  /* Duell (Sehen-Loop): A = drei gleich breite Zellen ließ die Google-Zelle halb leer;
     B = Urkunde groß links, mobile.de + Google als zwei Zeilen rechts — B gewinnt. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  border-top: 1px solid var(--kante);
  border-bottom: 1px solid var(--kante);
}
.siegel--urkunde {
  grid-row: span 2;
}
.siegel.siegel--wert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: clamp(1.5rem, 3.4vw, 3.5rem);
}
.siegel--wert .siegel__quelle {
  grid-column: 1 / -1;
}
.siegel--wert + .siegel--wert {
  border-top: 1px solid var(--kante);
}
.siegel__rechts {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}
.siegel__rechts .siegel__daten {
  margin-top: 1rem;
}
.siegel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2.2rem clamp(1.25rem, 2.6vw, 2.75rem);
  border-left: 1px solid var(--kante);
}
.siegel:first-child {
  padding-left: 0;
  border-left: 0;
}
.siegel__urkunde {
  margin: 0 0 1.4rem;
  max-width: 34rem;
}
.siegel__urkunde img,
.urkunde-2026 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px var(--kante),
    var(--schatten-klein);
}
.siegel__quelle {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
}
.siegel__text {
  margin-top: 0.55rem;
  max-width: 27rem;
  color: var(--meta);
  font-size: 0.95rem;
  line-height: 1.5;
}
.siegel__wert {
  display: flex;
  align-items: flex-start;
  margin-top: 1rem;
}
.siegel__stern,
.fuss__stern {
  color: var(--rot);
}
.siegel__stern {
  font-size: 0.5em;
  margin: 0.08em 0 0 0.08em;
}
.siegel__zahl {
  margin-top: 0.55rem;
  font-weight: 650;
}
.siegel__daten {
  display: grid;
  gap: 0;
  margin: 1.5rem 0 0;
}
.siegel__daten div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--kante);
}
.siegel__daten dt {
  color: var(--meta);
  font-size: 0.95rem;
}
.siegel__daten dd {
  margin: 0;
  font-family: var(--disp);
  font-weight: 750;
  font-stretch: 112%;
  white-space: nowrap;
}
.siegel__stand {
  margin-top: auto;
  padding-top: 1.5rem;
  color: var(--meta);
  font-size: 0.85rem;
}
.stimmen__kopf {
  margin-top: var(--r7);
}
.stimmen__schnitt {
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
}
.stimmen__quelle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.stimmen__quelle + .stimmen__quelle {
  padding-left: 1.6rem;
  border-left: 1px solid var(--kante);
}
@media (max-width: 899px) {
  .siegel-reihe {
    grid-template-columns: minmax(0, 1fr);
  }
  .siegel,
  .siegel:first-child {
    padding: 1.6rem 0;
    border-left: 0;
  }
  .siegel--urkunde {
    grid-row: auto;
    border-bottom: 1px solid var(--kante);
  }
  .siegel--wert {
    column-gap: 1.4rem;
  }
  .siegel__daten div {
    flex-direction: column;
    gap: 0.1rem;
  }
  .stimmen__schnitt {
    flex-direction: column;
    align-items: flex-start;
  }
  .stimmen__quelle + .stimmen__quelle {
    padding-left: 0;
    border-left: 0;
  }
}

/* K1b · Fuß: kleine Siegel-Zeile (jede Seite, Partial fuss.html) */
.fuss__siegel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kante);
}
.fuss__siegel img {
  width: 96px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--kante);
}
.fuss__siegel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}
.fuss__siegel-quelle {
  font-size: 0.75rem;
  color: var(--meta);
}
.fuss__siegel-text {
  color: var(--meta);
  font-size: 0.95rem;
}
.fuss__siegel-text strong {
  margin-left: 0.35rem;
  color: var(--tinte);
  font-weight: 700;
}
.fuss__siegel + .fuss__unten {
  margin-top: 1.5rem;
}

/* K1c · Über uns: Zahlen-Zeile mit fünf Werten + Urkunde 2026 im Text */
@media (min-width: 900px) {
  .fakten--5 {
    grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 900px) and (max-width: 1439px) {
  .fakten--5 .fakt__label {
    white-space: normal;
  }
}
@media (max-width: 899px) {
  .fakten--5 .fakt:nth-child(-n + 4) {
    border-bottom: 1px solid var(--kante);
  }
  .fakten--5 .fakt:last-child {
    grid-column: 1 / -1;
  }
}
.urkunde-2026 {
  margin: 2rem 0 0;
  max-width: 16rem;
}

/* K1d · Startseite: zweiter Link im Bestand-Teaser */
.bestand__links {
  display: grid;
  justify-items: end;
  gap: 0.7rem;
}
.bestand__berater {
  color: var(--meta);
  font-size: 0.95rem;
}
.bestand__berater .pfeil-link {
  margin-left: 0.3rem;
}
@media (max-width: 899px) {
  .bestand__links {
    justify-items: start;
  }
}

/* K1e · Fahrzeugberater (ki-berater.html) */
.berater {
  padding-top: var(--r5);
}
.berater__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.berater__lead {
  max-width: 40rem;
  color: var(--tinte);
}
.berater__form {
  margin-top: var(--r3);
}
.frage {
  min-width: 0;
  margin: 0;
  padding: 1.5rem 0 1.7rem;
  border: 0;
  border-top: 1px solid var(--kante);
}
.frage:last-child {
  border-bottom: 1px solid var(--kante);
}
.frage legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0;
}
.frage__nr {
  flex: none;
  min-width: 2.2rem;
  font-family: var(--disp);
  font-weight: 750;
  font-stretch: 125%;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--rot-text);
}
.frage__titel {
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: var(--breit-h3);
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.wahlen {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 1.1rem 0 0 3.2rem;
}
.wahl {
  position: relative;
  display: inline-flex;
}
/* 30.09.2026 (Augen-Tor rot): Auswahlfeld visuell versteckt wie .nurSR — per clip,
   NICHT per opacity (sonst liegt der native Kreis/Kasten sichtbar über dem Chip-Text,
   sobald irgendein Skript opacity aufdeckt). Zustand trägt allein der Chip-Stil;
   Klick geht über das umschließende <label>, Tastatur/Fokus bleiben am echten Input. */
.wahl {
  cursor: pointer;
}
.wahl input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
}
.wahl > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--kante);
  border-radius: 999px;
  background: var(--karte);
  color: var(--tinte);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  pointer-events: none;
  transition:
    background-color var(--dauer-ui) var(--ease),
    border-color var(--dauer-ui) var(--ease),
    color var(--dauer-ui) var(--ease),
    transform 160ms var(--ease);
}
.wahl__n {
  font-style: normal;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--meta);
}
.wahl input:checked + span {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--grund);
}
.wahl input:checked + span .wahl__n {
  color: var(--kante);
}
.wahl--mehr input:checked + span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rot);
}
.wahl.ist-leer > span {
  border-style: dashed;
}
.wahl input:focus-visible + span {
  outline: 3px solid var(--rot-text);
  outline-offset: 3px;
}
.wahl input:active + span {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .wahl:hover > span {
    border-color: var(--tinte);
  }
}

.berater__tafel {
  position: sticky;
  top: calc(var(--leiste-h) + 1.5rem);
  padding: clamp(1.5rem, 2.4vw, 2.4rem);
  border: 1px solid var(--kante);
  border-radius: var(--radius-gross);
  background: var(--karte);
  box-shadow: var(--schatten-kontakt);
}
.tafel__satz {
  font-family: var(--disp);
  font-weight: 750;
  font-stretch: var(--breit-h2);
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: var(--spur-h2);
}
.tafel__zahl {
  display: block;
  margin-bottom: 0.35rem;
  font-stretch: 125%;
  font-size: clamp(4.5rem, 8.4vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: var(--spur-xxl);
}
.tafel__auswahl {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.1rem 0 0;
  padding: 0;
}
.tafel__auswahl li {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--flaeche);
  font-size: 0.85rem;
  font-weight: 600;
}
.tafel__erster {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--kante);
  color: var(--tinte);
  text-decoration: none;
}
.tafel__bild {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--flaeche);
}
.tafel__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tafel__erster-nr {
  display: block;
  color: var(--meta);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.tafel__erster-name {
  display: block;
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: 105%;
  line-height: 1.2;
}
.tafel__erster-preis {
  display: block;
  margin-top: 0.2rem;
  font-weight: 650;
}
@media (hover: hover) and (pointer: fine) {
  .tafel__erster:hover .tafel__erster-name {
    color: var(--rot-text);
  }
}
.tafel__erster:focus-visible {
  outline: 3px solid var(--rot-text);
  outline-offset: 4px;
  border-radius: 6px;
}
.tafel__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  margin-top: 1.6rem;
}
.tafel__zurueck {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0.4rem 0;
  border: 0;
  background: none;
  color: var(--meta);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tafel__hinweis {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--kante);
  color: var(--meta);
  font-size: 0.85rem;
  line-height: 1.55;
}
.tafel__hinweis a {
  color: var(--tinte);
  font-weight: 650;
}

.treffer {
  padding-top: var(--r6);
  scroll-margin-top: calc(var(--leiste-h) + 1rem);
}
.treffer:focus {
  outline: none;
}
.treffer__raster {
  margin-top: 0;
}
.treffer__mehr {
  margin-top: 2.5rem;
  text-align: center;
}
.treffer__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--kante);
}
.treffer__leer {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-top: 1.6rem;
  border-top: 1px solid var(--kante);
}
.berater-anfrage {
  padding-top: var(--r6);
  scroll-margin-top: calc(var(--leiste-h) + 1rem);
}
.berater-anfrage__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.berater-anfrage__mit {
  margin: 0.4rem 0 1rem;
  color: var(--meta);
  font-size: 0.88rem;
  line-height: 1.5;
}
.berater-anfrage[hidden],
.treffer__aktion[hidden],
.treffer__leer[hidden],
.treffer__mehr[hidden],
.tafel__erster[hidden],
.tafel__auswahl[hidden] {
  display: none;
}
@media (max-width: 1099px) {
  .berater__raster {
    grid-template-columns: 1fr;
  }
  .berater__tafel {
    position: relative;
    top: 0;
  }
}
@media (max-width: 899px) {
  .treffer__leer,
  .berater-anfrage__raster {
    grid-template-columns: 1fr;
  }
  .wahlen {
    padding-left: 0;
  }
}

/* K1f · Kopfleiste mit acht Einträgen (+ Fahrzeugberater): Burger bis 1359 px,
   1360–1439 px enger gesetzt, ab 1440 unverändert — gemessen: 8 Einträge liefen
   bei 1180–1400 px über die Werkzeug-Knöpfe hinaus (Leistenhöhe blieb 88 px). */
@media (min-width: 1360px) and (max-width: 1439px) {
  .kopfleiste__innen {
    gap: 1rem;
  }
  .kopfleiste__nav ul {
    gap: 1.05rem;
  }
}

/* K1g · Berater: Suchauftrags-Tafel füllt die angebrochene letzte Reihe (keine Waisen-Karte),
   Überschrift im Leerzustand nicht trennen */
@media (min-width: 1100px) {
  .treffer__raster[data-rest3="1"] .fzg-tafel {
    display: flex;
    grid-column: span 2;
  }
  .treffer__raster[data-rest3="2"] .fzg-tafel {
    display: flex;
  }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .treffer__raster[data-rest2="1"] .fzg-tafel {
    display: flex;
  }
}
.treffer__leer-h {
  hyphens: manual;
  -webkit-hyphens: manual;
}
.treffer__leer {
  scroll-margin-top: calc(var(--leiste-h) + 1rem);
}