/* site.css — Painscheri Automobile (Autohaus 23) · Schritt 6 (web-designer), 25.10.2026
   Das gemeinsame Gerüst ALLER Seiten: Grundlagen, Kopfleiste + Klappmenü + Mobil-Menü, Hell/Dunkel, Knöpfe, Formular,
   Fuß, feste Knöpfe unten rechts, Motion „Die Flucht“ — dazu die Startseiten-Sektionen nach bau-brief §10 (Sieger A „Das Datenblatt“).
   Liest NUR Tokens aus tokens.css (Navy + Messing, Inter Tight / Inter, Kante scharf). Hell = Start; Dunkel nur über [data-theme="dark"].
   Abweichung vom bau-brief (je 1 Zeile): Klappmenü Radius 6 px statt 0/2 px — GESETZ Kap. 2 verlangt eine schwebende Karte ≥ 4 px. */

/* ---------- 0 Rollen-Tokens, die tokens.css nicht führt (bau-brief §2) ---------- */
:root {
  --leiste-h: 80px;
  --akzent-text: oklch(
    0.5 0.095 95
  ); /* Messing als Schrift auf Hell: 1–2 Wörter, Kürzel-Plus */
  --akzent-tief: var(--marke-hover);
  --abstand-band: 1.5rem;
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
}
[data-theme="dark"] {
  --akzent-text: var(--akzent);
}

/* ---------- 1 Grundlagen ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  background: var(--grund);
  overflow-x: clip;
  scroll-padding-top: calc(var(--leiste-h) + 1rem);
}
body {
  margin: 0;
  padding-top: var(--leiste-h);
  background: var(--grund);
  color: var(--text);
  font: 400 var(--t-body) / 1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.mit-buehne {
  padding-top: 0;
}
img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
}
p,
h1,
h2,
h3,
figure,
blockquote,
ol,
ul,
dl,
dd {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  -webkit-appearance: none;
  appearance: none;
}
:focus-visible {
  outline: 2px solid var(--leit-text);
  outline-offset: 3px;
}
::selection {
  background: color-mix(in oklch, var(--akzent) 35%, transparent);
}
.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;
  font-size: 0;
}
.sr-only:focus {
  position: fixed !important;
  left: 1rem;
  top: 1rem;
  z-index: 300;
  width: auto;
  height: auto;
  clip: auto;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  background: var(--grund);
  color: var(--text);
  outline: 2px solid var(--leit-text);
}
.wrap,
.bahn {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ---------- 2 Typo ---------- */
.h2,
.h-2 {
  font: 700 clamp(2.1rem, 1rem + 2.6vw, 3.25rem) / 1.05 var(--font-display);
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
  color: var(--text);
  text-wrap: balance;
}
.h-3 {
  font: 650 var(--t-h3) / 1.15 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text);
}
.lead {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--text-leise);
  max-width: 36rem;
  text-wrap: pretty;
}
.eyebrow {
  font: 600 0.8125rem / 1.3 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
}
/* Das Plus (bau-brief §5): 12 × 12 px, Strich 2 px, Messing, rechtwinklig — Kapitelmarke, nie Muster */
.plus,
.mit-plus::before,
.chip__plus {
  content: "";
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--akzent), var(--akzent)) center / 100% 2px no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) center / 2px 100% no-repeat;
}
.mit-plus::before {
  margin: 0 0.85rem 0 0;
  vertical-align: 0.32em;
}

/* ---------- 3 Knöpfe + Links ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--leit);
  border-radius: 2px;
  background: var(--leit);
  color: var(--auf-leit);
  font: 600 0.95rem / 1.15 var(--font-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--t-ui) var(--ease-ui),
    border-color var(--t-ui) var(--ease-ui),
    color var(--t-ui) var(--ease-ui),
    transform 160ms var(--ease-ui);
}
.knopf:active {
  transform: scale(0.98);
}
.knopf--akzent {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}
.knopf--rand {
  background: transparent;
  border-color: var(--linie);
  color: var(--text);
}
.knopf--voll {
  width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .knopf:hover {
    background: color-mix(in oklch, var(--leit) 84%, var(--grund));
  }
  .knopf--akzent:hover {
    background: var(--akzent-tief);
    border-color: var(--akzent-tief);
  }
  .knopf--rand:hover {
    background: transparent;
    border-color: var(--text);
  }
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
  white-space: nowrap;
}
.link svg {
  flex: none;
  transition: transform var(--t-ui) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover svg {
    transform: translateX(3px);
  }
}

/* ---------- 4 Kopfleiste (alle Seiten) ---------- */
.kopfleiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--leiste-h);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--rand-leiste);
  color: var(--kalk-fest);
  background: transparent;
  transition:
    background-color var(--t-ui) var(--ease),
    color var(--t-ui) var(--ease),
    box-shadow var(--t-ui) var(--ease);
}
/* Ausgangszustand ohne Attribut (6d): Seiten ohne Bühne starten hell; Bühnen-Seiten (body.mit-buehne) über dem Bild */
.kopfleiste[data-zustand="hell"],
body:not(.mit-buehne) .kopfleiste:not([data-zustand]) {
  background: var(--grund);
  color: var(--text);
  --logo-fuellung: var(--leit-text);
  box-shadow: 0 1px 0 var(--linie);
}
.kopfleiste__marke {
  display: block;
  flex: none;
  line-height: 0;
  margin-right: auto;
}
.kopfleiste__logo {
  display: block;
  height: 62px; /* sichtbar ≥ 60 px (GESETZ Kap. 4), viewBox auf die Pfade zugeschnitten */
  width: auto;
  aspect-ratio: 1146 / 270;
  overflow: visible;
}
.nav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.8vw, 2rem);
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 500 0.95rem / 1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* aktiver Punkt: das Plus statt Unterstrich (bau-brief §5) */
.nav__link[aria-current="page"]::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 0.15rem;
  background:
    linear-gradient(var(--akzent), var(--akzent)) center / 100% 2px no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) center / 2px 100% no-repeat;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-ui) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover::after {
    transform: scaleX(1);
  }
}
.nav__pfeil {
  transition: transform var(--t-ui) var(--ease-ui);
}
.nav__auf[aria-expanded="true"] .nav__pfeil {
  transform: rotate(180deg);
}
.nav__gruppe {
  position: relative;
}
/* Klappmenü = schwebende Karte (GESETZ Kap. 2): Rundung, Schatten, 2 Spalten, sanft */
.nav__klapp {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, auto));
  gap: 0 1.2rem;
  padding: 0.9rem;
  border-radius: 6px;
  background: var(--grund);
  color: var(--text);
  border: 1px solid var(--linie);
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--schatten) 10%, transparent),
    0 18px 40px -16px color-mix(in oklch, var(--schatten) 38%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: 2rem 0;
  transition:
    opacity 180ms var(--ease-ui),
    transform 180ms var(--ease-ui),
    visibility 0s linear 180ms;
}
.kopfleiste[data-zustand="video"] .nav__klapp,
body.mit-buehne .kopfleiste:not([data-zustand]) .nav__klapp {
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
  border-color: color-mix(in oklch, var(--kalk-fest) 14%, transparent);
}
.nav__auf[aria-expanded="true"] + .nav__klapp {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 180ms var(--ease-ui),
    transform 180ms var(--ease-ui),
    visibility 0s;
}
.nav__spalte {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__klapp a {
  display: block;
  padding: 0.7rem 0.75rem;
  border-radius: 3px;
  color: inherit;
  text-decoration: none;
  font: 500 0.95rem / 1.2 var(--font-text);
  white-space: nowrap;
}
.nav__klapp a[aria-current="page"] {
  font-weight: 650;
}
@media (hover: hover) and (pointer: fine) {
  .nav__klapp a:hover {
    background: color-mix(in oklch, currentColor 8%, transparent);
  }
}
.nav__kontakt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.15rem;
  border-radius: 2px;
  background: var(--akzent);
  color: var(--auf-akzent);
  font: 600 0.95rem / 1 var(--font-text);
  text-decoration: none;
  transition:
    background-color var(--t-ui) var(--ease-ui),
    transform 160ms var(--ease-ui);
}
.nav__kontakt:active {
  transform: scale(0.98);
}
@media (hover: hover) and (pointer: fine) {
  .nav__kontakt:hover {
    background: var(--akzent-tief);
  }
}
.kopfleiste__rechts {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
}
.kopfleiste__merk,
.thema-knopf,
.burger {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-ui);
}
.kopfleiste__merk:active,
.thema-knopf:active,
.burger:active {
  transform: scale(0.95);
}
.kopfleiste__merk-zahl {
  position: absolute;
  top: 4px;
  right: -2px;
  font: 700 0.68rem / 1 var(--font-text);
}
.thema-knopf__sonne {
  display: none;
}
[data-theme="dark"] .thema-knopf__sonne {
  display: block;
}
[data-theme="dark"] .thema-knopf__mond {
  display: none;
}
.burger {
  display: none;
}
.burger span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-ui) var(--ease-ui);
}
.burger span:first-child {
  transform: translateY(-4px);
}
.burger span:last-child {
  transform: translateY(4px);
}
.burger[aria-expanded="true"] span:first-child {
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] span:last-child {
  transform: rotate(-45deg);
}

/* Mobil-Menü unter 1100 px: dieselbe Nav als Tafel unter der Leiste */
@media (max-width: 1099.98px) {
  .kopfleiste {
    gap: 0.5rem;
    padding: 0 1rem;
  }
  .burger {
    display: inline-grid;
  }
  .kopfleiste__merk {
    display: none;
  }
  .nav {
    position: fixed;
    inset: var(--leiste-h) 0 0 0;
    z-index: 49;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 6rem;
    background: var(--grund);
    color: var(--text);
    border-top: 1px solid var(--linie);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 200ms var(--ease-ui),
      transform 200ms var(--ease-ui),
      visibility 0s linear 200ms;
  }
  .kopfleiste[data-menue="offen"] {
    background: var(--grund);
    color: var(--text);
    --logo-fuellung: var(--leit-text);
    box-shadow: 0 1px 0 var(--linie);
  }
  .kopfleiste[data-menue="offen"] .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 200ms var(--ease-ui),
      transform 200ms var(--ease-ui),
      visibility 0s;
  }
  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__liste > li {
    border-bottom: 1px solid var(--linie);
  }
  .nav__link {
    width: 100%;
    min-height: 58px;
    font: 650 1.3rem / 1 var(--font-display);
    letter-spacing: -0.01em;
  }
  .nav__link::after {
    display: none;
  }
  .nav__auf {
    pointer-events: none;
  }
  .nav__pfeil {
    display: none;
  }
  /* visibility erbt von .nav: zugeklappt unsichtbar UND nicht antippbar (werkzeug-gate Lauf A: fing Taps über dem Inhalt ab);
     keine eigene Übergangszeit, sonst erschienen die Unterpunkte 180 ms nach dem Aufklappen */
  .nav__klapp,
  .kopfleiste[data-zustand="video"] .nav__klapp,
  body.mit-buehne .kopfleiste:not([data-zustand]) .nav__klapp {
    position: static;
    opacity: 1;
    visibility: inherit;
    transform: none;
    transition: none;
    grid-template-columns: 1fr 1fr;
    padding: 0 0 0.8rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--grund);
    color: var(--text);
  }
  .nav__klapp a {
    padding: 0.6rem 0;
    font-size: 1rem;
    color: var(--text);
  }
  .nav__kontakt-li {
    border-bottom: 0 !important;
    padding-top: 1.25rem;
  }
  .nav__kontakt {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 1rem;
  }
}
@media (max-width: 430px) {
  .kopfleiste {
    padding: 0 0.85rem;
  }
  .kopfleiste__logo {
    height: 60px;
  }
  .thema-knopf,
  .burger {
    width: 40px;
    height: 44px;
  }
}
@media (max-width: 379.98px) {
  .kopfleiste__logo {
    height: 52px;
  }
}

/* ---------- 4b Unterseiten-Bühne (bau-brief §8: eigenes Bühnenbild, vollflächig, 72svh, Text unten links, Brotkrume darüber)
   EINE Fassung für alle Unterseiten (6d, 25.10.2026: vorher .unterkopf/.bkopf/.c-buehne aus den Frischläufen A/B/C).
   Markup: section.unterkopf[data-buehne] > img.unterkopf__bild + div.unterkopf__text > nav.brotkrume + span.unterkopf__linie
           + h1.unterkopf__h1 > span.unterkopf__z1 + span.unterkopf__pointe. Bildausschnitt über style="--fokus: x% y%". ---------- */
.unterkopf {
  --text: var(--kalk-fest);
  --text-leise: var(--meta-fest);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: 72svh;
  min-height: 560px;
  max-height: 880px;
  overflow: hidden;
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
}
.unterkopf__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fokus, 50% 50%);
}
/* Schleier nur oben (Leiste + Logo) und Verlauf nur hinter der Textecke — das Bild wird nie flächig abgedunkelt (GESETZ Kap. 11) */
.unterkopf::before,
.unterkopf::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.unterkopf::before {
  inset: 0 0 auto 0;
  height: 190px;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--nacht-fest) 74%, transparent) 0%,
    color-mix(in oklch, var(--nacht-fest) 34%, transparent) 56%,
    transparent 100%
  );
}
.unterkopf::after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 66%;
  background: linear-gradient(
    0deg,
    color-mix(in oklch, var(--nacht-fest) 84%, transparent) 0%,
    color-mix(in oklch, var(--nacht-fest) 64%, transparent) 38%,
    color-mix(in oklch, var(--nacht-fest) 24%, transparent) 70%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 58rem,
    transparent 84rem
  );
  mask-image: linear-gradient(90deg, #000 0, #000 58rem, transparent 84rem);
}
/* Text links bündig mit der Inhaltsspalte (--max), unten mit Luft */
.unterkopf__text {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--rand) clamp(2.6rem, 7svh, 5rem);
}
.unterkopf__text > * {
  max-width: 58rem;
}
.brotkrume ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0 0 1.4rem;
  padding: 0;
  font: 500 0.8125rem / 1.4 var(--font-text);
  letter-spacing: 0.02em;
  color: var(--meta-fest);
}
.brotkrume li + li::before {
  content: "/";
  margin: 0 0.6rem;
  color: color-mix(in oklch, var(--meta-fest) 60%, transparent);
}
.brotkrume a {
  color: var(--kalk-fest);
  text-decoration: none;
  border-bottom: 1px solid
    color-mix(in oklch, var(--kalk-fest) 40%, transparent);
  transition: border-color var(--t-ui) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .brotkrume a:hover {
    border-bottom-color: var(--kalk-fest);
  }
}
.brotkrume a:focus-visible {
  outline-color: var(--kalk-fest);
}
/* aktueller Punkt hell genug auch auf hellem Bildteil (Kontrast-WARN Lauf C: 3,97:1) */
.brotkrume [aria-current] {
  color: color-mix(in oklch, var(--kalk-fest) 88%, var(--meta-fest));
}
.unterkopf__linie {
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 0 0 1.1rem;
  background: var(--akzent-buehne);
  transform-origin: 0 50%;
}
.unterkopf__h1 {
  margin: 0;
  font-weight: inherit;
}
.unterkopf__z1 {
  display: block;
  font: 600 var(--t-z1) / 1.3 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kalk-fest);
}
/* Pointe 600 wie der Startseiten-Kopf (head.css .kopf__pointe) */
.unterkopf__pointe {
  display: block;
  margin-top: 0.8rem;
  font: 600 clamp(2.4rem, 1.1rem + 2.8vw, 3.4rem) / 1.06 var(--font-display);
  letter-spacing: -0.03em;
  word-spacing: 0.08em;
  color: var(--kalk-fest);
  text-wrap: balance;
}
.unterkopf__pointe strong {
  font-weight: inherit;
  color: var(--akzent-buehne);
}
.unterkopf__z1,
.brotkrume {
  text-shadow:
    0 1px 2px color-mix(in oklch, var(--nacht-fest) 55%, transparent),
    0 0 18px color-mix(in oklch, var(--nacht-fest) 42%, transparent);
}
/* Eingang beim Laden (einmalig, 0–1 s): Linie zieht, dann Pfad → Z1 → Pointe, Staffel 60 ms — ease-out, nur transform + opacity */
@keyframes unterkopf-ein {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes unterkopf-linie {
  from {
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .unterkopf__linie {
    animation: unterkopf-linie 700ms var(--ease-ui) 120ms both;
  }
  .unterkopf .brotkrume,
  .unterkopf__z1,
  .unterkopf__pointe {
    animation: unterkopf-ein 760ms var(--ease-ui) both;
  }
  .unterkopf .brotkrume {
    animation-delay: 60ms;
  }
  .unterkopf__z1 {
    animation-delay: 220ms;
  }
  .unterkopf__pointe {
    animation-delay: 280ms;
  }
}
/* Unter 900 px wie die Startseite: Bühnenbild als eigenes Band unter der Leiste (Motiv frei, Bildmitte), Text darunter auf der themenfesten Fläche */
@media (max-width: 899.98px) {
  .unterkopf {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: var(--leiste-h);
  }
  .unterkopf__bild {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .unterkopf::before {
    height: var(--leiste-h);
    background: var(--dunkel-fest);
  }
  .unterkopf::after {
    display: none;
  }
  .unterkopf__text {
    padding: 1.7rem var(--rand) 2.3rem;
  }
  .unterkopf__text > * {
    max-width: none;
  }
  .brotkrume ol {
    margin-bottom: 1.2rem;
  }
  .unterkopf__z1 {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
  .unterkopf__pointe {
    margin-top: 0.7rem;
    font-size: clamp(1.85rem, 7.4vw, 2.4rem);
  }
}
@media print {
  .unterkopf {
    display: none !important;
  }
}

/* ---------- 5 Startseite: Fakten-Leiste (GESETZ Kap. 2, Duell-Korrektur 2) ---------- */
.fakten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--linie);
}
.fakt {
  padding: clamp(1.6rem, 2.6vw, 2.4rem) var(--rand-leiste)
    clamp(1.5rem, 2.4vw, 2.2rem);
  border-right: 1px solid var(--linie);
  min-width: 0;
}
.fakt:last-child {
  border-right: 0;
}
.fakt__wert {
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  font: 700 clamp(2.5rem, 1.4rem + 2.6vw, 4rem) / 1 var(--font-display);
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--text);
}
.fakt__vor {
  font: 600 0.32em / 1 var(--font-text);
  letter-spacing: 0;
  color: var(--text-leise);
  margin-right: 0.35em;
  align-self: center;
}
.fakt__einheit {
  font-size: 0.55em;
  letter-spacing: 0;
  margin-left: 0.1em;
}
.fakt__stern {
  font-size: 0.5em;
  color: var(--akzent);
  margin-left: 0.15em;
  align-self: center;
}
.fakt__label {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-leise);
}

/* ---------- 6 Manifest (Layout-Bruch 1: Bühne über die rechte Kante) ---------- */
.manifest {
  margin-top: 7rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: center;
  padding-left: max(var(--rand), calc((100% - var(--max)) / 2 + var(--rand)));
}
.manifest__wort {
  font: 800 clamp(3.5rem, 1rem + 7vw, 8.5rem) / 0.9 var(--font-display);
  letter-spacing: -0.04em;
  word-spacing: 0.06em;
  color: var(--text);
}
.manifest__absatz {
  margin-top: 1.8rem;
  max-width: 31rem;
  color: var(--text-leise);
  text-wrap: pretty;
}
.manifest__zeile {
  position: relative;
  margin-top: 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linie);
  font: 600 0.84rem / 1.6 var(--font-text);
  letter-spacing: 0.04em;
  max-width: 31rem;
}
.manifest__modell {
  display: block;
  color: var(--text-leise);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.manifest__kuerzel i,
.kachel__plus i {
  font-style: normal;
  font-weight: 700;
  color: var(--akzent-text);
  padding: 0 0.2em;
}
.manifest__buehne {
  position: relative;
  height: clamp(640px, 48vw, 760px);
  overflow: hidden;
  background: var(--dunkel-fest);
}
.manifest__buehne img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/* ---------- 7 Bestand-Teaser (2er-Reihe + 3er-Reihe, GESETZ Kap. 10) ---------- */
.bestand {
  margin-top: 3rem;
}
.kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.2rem;
}
.kopfzeile .lead {
  margin-top: 0.9rem;
}
.reihe2,
.reihe3 {
  display: grid;
  gap: 1.5rem;
}
.reihe2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.reihe3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.5rem;
  position: relative;
  z-index: 2;
  margin-bottom: -6rem; /* Layout-Bruch 2: die Reihe ragt in die Werkzeug-Fläche */
}
.kachel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  background: var(--grund);
}
.kachel__bild {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--flaeche);
}
.kachel__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .kachel:hover .kachel__bild img {
    transform: scale(1.025);
  }
}
.kachel__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
}
.kachel__name {
  font: 650 clamp(1.2rem, 1rem + 0.5vw, 1.45rem) / 1.2 var(--font-display);
  letter-spacing: -0.015em;
  min-width: 0;
}
.kachel__preis {
  flex: none;
  font: 700 clamp(1.3rem, 1.1rem + 0.7vw, 1.85rem) / 1 var(--font-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.kachel--gross .kachel__preis {
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
}
.kachel__plus {
  margin-top: 0.4rem;
  font: 600 0.72rem / 1.5 var(--font-text);
  letter-spacing: 0.05em;
  color: var(--text-leise);
}
.kachel__daten {
  margin-top: 0.75rem;
  padding: 0.7rem 0 0.2rem;
  border-top: 1px solid var(--linie);
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.reihe3 .kachel__kopf {
  flex-direction: column;
  gap: 0.35rem;
}

/* ---------- 8 ⭐ Werkzeug „Plus für Plus“ ---------- */
.werkzeug {
  background: var(--flaeche);
  padding: calc(6rem + 5.5rem) 0 5rem;
}
.wz {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "kopf ergebnis"
    "wahl ergebnis"
    "treffer treffer"
    "hinweis hinweis";
  column-gap: clamp(2rem, 5vw, 5rem);
}
.wz__kopf {
  grid-area: kopf;
}
.wz__kopf .lead {
  margin-top: 0.9rem;
}
.wz__wahl {
  grid-area: wahl;
}
.wz__gruppe {
  margin: 1.7rem 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.wz__gruppe legend,
.wz__legende {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0;
  margin-bottom: 0.75rem;
  font: 600 0.75rem / 1 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: 2px;
  background: var(--grund);
  color: var(--text);
  font: 600 0.92rem / 1 var(--font-text);
  cursor: pointer;
  transition:
    background-color 160ms var(--ease-ui),
    border-color 160ms var(--ease-ui),
    color 160ms var(--ease-ui),
    transform 160ms var(--ease-ui);
}
.chip:active {
  transform: scale(0.97);
}
.chip[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--grund);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    border-color: var(--text);
  }
}
.wz__budget-wert {
  font: 700 0.95rem / 1 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.regler {
  --anteil: 50%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.regler::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--text) var(--anteil),
    var(--linie) var(--anteil)
  );
}
.regler::-moz-range-track {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--text) var(--anteil),
    var(--linie) var(--anteil)
  );
}
.regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 2px 6px color-mix(in oklch, var(--schatten) 30%, transparent);
}
.regler::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 2px 6px color-mix(in oklch, var(--schatten) 30%, transparent);
}
.wz__skala {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-leise);
}
.wz__ergebnis {
  grid-area: ergebnis;
  align-self: start;
  padding-top: 0.2rem;
}
.wz__zahl {
  position: relative;
  height: 0.9em;
  overflow: hidden;
  font: 800 clamp(6rem, 2rem + 11vw, 13rem) / 0.86 var(--font-display);
  letter-spacing: -0.045em;
  font-variant-numeric: proportional-nums;
  color: var(--text);
}
.wz__ziffern {
  display: block;
  will-change: transform;
}
.wz__ziffern--alt {
  position: absolute;
  inset: 0 auto auto 0;
}
.wz__zahl-text {
  margin-top: 0.8rem;
  font: 600 1.05rem / 1.3 var(--font-text);
}
.wz__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}
.wz__treffer,
.wz__leer {
  grid-area: treffer;
}
.wz__treffer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  min-height: 21rem;
  transition: opacity 190ms var(--ease-ui);
}
.wz__treffer.ist-wechsel {
  opacity: 0;
}
.treffer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--grund);
  color: var(--text);
  text-decoration: none;
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--schatten) 8%, transparent),
    0 14px 30px -18px color-mix(in oklch, var(--schatten) 34%, transparent);
  transition: transform 220ms var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .treffer:hover {
    transform: translateY(-3px);
  }
}
.treffer img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--flaeche);
}
.treffer__text {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 1.05rem 1.1rem;
}
.treffer__name {
  font: 650 1.08rem / 1.25 var(--font-display);
}
.treffer__daten {
  font-size: 0.8rem;
  color: var(--text-leise);
}
.treffer__plus {
  font: 600 0.72rem / 1.45 var(--font-text);
  letter-spacing: 0.05em;
  color: var(--akzent-text);
}
.treffer__preis {
  margin-top: 0.25rem;
  font: 700 1.3rem / 1 var(--font-display);
  letter-spacing: -0.02em;
}
.wz__leer {
  align-self: start;
  margin-top: 3rem;
  max-width: 40rem;
  min-height: 21rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--text);
}
.wz__leer p {
  font: 650 clamp(1.3rem, 1rem + 1vw, 1.75rem) / 1.3 var(--font-display);
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.wz__leer[hidden] {
  display: none;
}
.wz__hinweis {
  grid-area: hinweis;
  margin-top: 1.4rem;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

/* ---------- 9 Ablauf (Layout-Bruch 3: Bild über die linke Kante, Sticky-Media) ---------- */
.ablauf {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-right: max(var(--rand), calc((100% - var(--max)) / 2 + var(--rand)));
}
.ablauf__bild {
  position: sticky;
  top: calc(var(--leiste-h) + 1.5rem);
  align-self: stretch;
  height: 100%;
  max-height: calc(100svh - var(--leiste-h) - 3rem);
  min-height: 520px;
  overflow: hidden;
  background: var(--dunkel-fest);
}
.ablauf__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 60%;
}
.ablauf__schritte {
  padding-top: 0.5rem;
}
.schritte {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}
.schritt {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  padding: 1.5rem 0;
  border-top: 1px solid transparent;
}
.schritt__nr {
  font: 700 1.5rem / 1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.schritt__titel {
  font: 650 1.35rem / 1.2 var(--font-display);
  letter-spacing: -0.015em;
}
.schritt p {
  margin-top: 0.45rem;
  color: var(--text-leise);
  max-width: 30rem;
}

/* ---------- 10 Finanzierungs-Band ---------- */
.band {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.band__teil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 2.3rem 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.band__teil + .band__teil {
  padding-left: 3rem;
  border-left: 1px solid var(--linie);
}
.band__teil:first-child {
  padding-right: 3rem;
}
.band__titel {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font: 700 1.5rem / 1.15 var(--font-display);
  letter-spacing: -0.02em;
}
.band__teil p {
  color: var(--text-leise);
  max-width: 30rem;
  margin-bottom: 0.4rem;
}

/* ---------- 11 Bewertungs-Laufband (GESETZ Kap. 9: nach rechts, Klon per JS, Naht 0 px) ---------- */
.bewertungen {
  margin-top: 6rem;
}
.bewertungen__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  margin-top: 0.9rem;
  color: var(--text-leise);
}
.bewertungen__kopf b {
  color: var(--text);
  font-weight: 700;
}
/* s7 Runde 3 — Werkzeug live-bewertungen: Stand-Zeile (Datum · Quellen · Weg zu allen Google-Rezensionen) */
.bewertungen__stand {
  margin-top: 0.75rem;
  max-width: 62rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-leise);
}
.bewertungen__stand .link {
  gap: 0.4rem;
  padding-bottom: 0.05rem;
  font-size: inherit;
}
.register-sek .bewertungen__stand {
  margin: 0.9rem 0 1.4rem;
}
.laufband {
  margin-top: 2.4rem;
  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 {
  --abstand: 1.5rem;
  display: flex;
  gap: var(--abstand);
  width: max-content;
  padding: 0.3rem 0;
}
.laufband.ist-an .laufband__spur {
  animation: laufband var(--dauer, 80s) linear infinite;
}
@keyframes laufband {
  from {
    transform: translate3d(calc(-50% - var(--abstand) / 2), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.laufband:hover .laufband__spur,
.laufband:focus-within .laufband__spur,
.laufband:active .laufband__spur {
  animation-play-state: paused;
}
.zitat {
  flex: 0 0 clamp(17rem, 26vw, 25rem);
  display: flex;
  flex-direction: column;
  padding-top: 1.1rem;
  border-top: 2px solid var(--text);
}
.zitat__sterne {
  display: flex;
  gap: 3px;
}
.zitat__sterne svg {
  width: 15px;
  height: 15px;
  fill: var(--akzent);
}
.zitat__text {
  margin: 0.75rem 0 1rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.zitat__text p {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zitat__quelle {
  margin-top: auto;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

/* ---------- 12 Über-uns-Zeile ---------- */
.ueber {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding-block: 2rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background-clip: content-box;
}
.tafel {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  background: var(--leit);
  color: var(--auf-leit);
  font: 700 2rem / 1 var(--font-display);
  letter-spacing: -0.02em;
}
.tafel--klein {
  width: 56px;
  height: 56px;
  font-size: 1.1rem;
}
.ueber__name {
  font: 700 1.4rem / 1.2 var(--font-display);
  letter-spacing: -0.015em;
}
.ueber p + p {
  margin-top: 0.35rem;
  color: var(--text-leise);
}

/* ---------- 13 Bewerten-Aufruf (SEH-Aufbau, themenfeste Bühne) ---------- */
.bewerten-cta {
  --text: var(--kalk-fest);
  --text-leise: var(--meta-fest);
  position: relative;
  isolation: isolate;
  margin-top: 8rem;
  height: 440px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--dunkel-fest);
}
.bewerten-cta__bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
.bewerten-cta__karte {
  display: grid;
  justify-items: center;
  gap: 1.3rem;
  margin: 0 1.25rem;
  padding: 2.5rem clamp(1.5rem, 4vw, 3.2rem);
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
  text-align: center;
  box-shadow: 0 30px 60px -30px
    color-mix(in oklch, var(--schatten) 80%, transparent);
}
.bewerten-cta__titel {
  font: 700 clamp(1.2rem, 1rem + 0.8vw, 1.6rem) / 1.15 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kalk-fest);
}
.bewerten-cta__sterne {
  display: flex;
  gap: 0.45rem;
}
.bewerten-cta__sterne svg {
  width: clamp(2rem, 1.5rem + 1.5vw, 2.6rem);
  height: auto;
  fill: var(--akzent-buehne);
}
.bewerten-cta__knopf {
  display: inline-flex;
  justify-content: center;
  min-width: min(20rem, 100%);
  padding: 1.05rem 2rem;
  border: 1px solid color-mix(in oklch, var(--kalk-fest) 42%, transparent);
  border-radius: 2px;
  background: var(--leit);
  color: var(--auf-leit);
  font: 600 1rem / 1 var(--font-text);
  text-decoration: none;
  transition:
    background-color var(--t-ui) var(--ease-ui),
    transform 160ms var(--ease-ui);
}
.bewerten-cta__knopf:active {
  transform: scale(0.98);
}
@media (hover: hover) and (pointer: fine) {
  .bewerten-cta__knopf:hover {
    background: color-mix(in oklch, var(--leit) 80%, var(--kalk-fest));
  }
}

/* ---------- 14 Anfrage + Karte (Variante B hell) ---------- */
.anfrage {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--linie);
}
.anfrage__form {
  min-width: 0;
  padding: 3.5rem clamp(1.5rem, 4vw, 4rem) 4rem;
  padding-left: max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand)));
}
.anfrage__form .h2 {
  font-size: clamp(2rem, 1rem + 2vw, 2.6rem);
  max-width: 30rem;
}
.person {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 1.8rem;
}
.person p {
  display: grid;
}
.person span {
  color: var(--text-leise);
}
/* die BP-Tafel ist ebenfalls ein span in .person — sie bleibt hell auf Navy (A-c/B-1) */
.person .tafel {
  color: var(--auf-leit);
}
.person a {
  color: var(--text);
}
.form {
  display: grid;
  gap: 0.9rem;
  max-width: 34rem;
}
.form__zeile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.feld {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.feld label,
.feld legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font: 600 0.85rem / 1.3 var(--font-text);
  color: var(--text);
}
.feld legend small {
  font-weight: 400;
  color: var(--text-leise);
}
.feld input,
.feld textarea,
.feld select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: 2px;
  background: var(--grund);
  color: var(--text);
  font-size: 1rem;
  transition: border-color var(--t-ui) var(--ease-ui);
}
.feld input:focus,
.feld textarea:focus {
  border-color: var(--leit-text);
}
.feld textarea {
  resize: vertical;
  min-height: 6.5rem;
}
.feld--termin .form__zeile {
  gap: 0.75rem;
}
.einwilligung {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-leise);
}
.einwilligung input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0.15rem 0 0;
  accent-color: var(--leit);
}
.einwilligung a {
  color: var(--text);
}
.form__meldung {
  font-weight: 600;
  font-size: 0.92rem;
}
.form__meldung[data-art="ok"] {
  color: var(--ok);
}
.form__meldung[data-art="fehler"] {
  color: var(--error);
}
.form__zusage {
  font-size: 0.82rem;
  color: var(--text-leise);
}
.anfrage-formular {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  padding: clamp(1.1rem, 2vw, 1.6rem);
}
.karte {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background: var(--flaeche);
}
.karte__rahmen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.06) brightness(1.03);
}
[data-theme="dark"] .karte__rahmen {
  filter: grayscale(1) invert(0.9) contrast(0.92);
}
/* Logo-Pin auf dem Standort (GESETZ Kap. 10), pulsierend, Klick = Route */
.karte__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 150px;
  height: 56px;
  padding: 0.55rem 0.9rem;
  border-radius: 28px;
  background: var(--hell-fest);
  box-shadow: 0 10px 26px -10px
    color-mix(in oklch, var(--schatten) 55%, transparent);
  transform: translate(-50%, calc(-50% - 22px));
  --logo-fuellung: #202050;
}
.karte__pin svg {
  width: 100%;
  height: auto;
}
.karte__pin::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 32px;
  border: 2px solid var(--akzent);
  animation: pin-puls 2.4s var(--ease-ui) infinite;
}
@keyframes pin-puls {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(1.32, 1.7);
    opacity: 0;
  }
}
.karte__adresse {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  display: grid;
  gap: 0.8rem;
  padding: 1.2rem 1.4rem;
  background: var(--grund);
  color: var(--text);
  box-shadow: 0 12px 30px -16px
    color-mix(in oklch, var(--schatten) 45%, transparent);
}
.karte__adresse p {
  display: grid;
}
.karte__adresse span {
  color: var(--text-leise);
}

/* ---------- 15 Fuß (alle Seiten, hell) ---------- */
.fuss {
  --logo-fuellung: var(--leit-text);
  margin-top: 0;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: 0.92rem;
}
.fuss__innen {
  max-width: var(--max);
  margin-inline: auto;
  padding: 4rem var(--rand) 2.8rem;
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 1.25fr)
    minmax(0, 0.85fr);
  gap: 2.5rem;
}
.fuss__logo {
  display: inline-block;
  line-height: 0;
}
.fuss__logo svg {
  height: 60px;
  width: auto;
  aspect-ratio: 1146 / 270;
}
.fuss__nap {
  display: grid;
  margin-top: 1.2rem;
  font-style: normal;
  color: var(--text);
}
.fuss__kontakt,
.fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fuss__kontakt {
  display: grid;
  gap: 0.15rem;
  margin-top: 1rem;
}
.fuss__kontakt span {
  color: var(--text-leise);
}
.fuss a {
  color: var(--text);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .fuss a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}
.fuss__titel {
  margin-bottom: 0.9rem;
  font: 600 0.75rem / 1 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.fuss__zeiten div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--linie);
}
.fuss__zeiten dt {
  color: var(--text-leise);
}
.fuss__zeiten dd {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.fuss__liste {
  display: grid;
  gap: 0.45rem;
}
.fuss__liste--zwei {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1.5rem;
}
/* Ratgeber mit seinen drei Artikeln (6d, gegen Waisen): volle Zeile, Artikel eingerückt an einer Hairline */
.fuss__liste--zwei > .fuss__mit-unter {
  grid-column: 1 / -1;
}
.fuss__unter {
  list-style: none;
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 0.15rem;
  padding: 0 0 0 0.9rem;
  border-left: 1px solid var(--linie);
  font-size: 0.92em;
}
.fuss__unter a {
  color: var(--text-leise);
}
.fuss__unten {
  max-width: var(--max);
  margin-inline: auto;
  padding: 1.3rem var(--rand) 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  border-top: 1px solid var(--linie);
  font-size: 0.84rem;
}
.fuss__signatur a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- 16 Feste Knöpfe unten rechts (GESETZ Kap. 10: Verb, verdeckt nichts) ---------- */
.ruf-fix {
  position: fixed;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 40;
  display: grid;
  gap: 0.45rem;
}
.ruf-fix__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.95rem 0 0.8rem;
  border-radius: 2px;
  background: var(--leit);
  color: var(--auf-leit);
  font: 600 0.88rem / 1 var(--font-text);
  text-decoration: none;
  box-shadow: 0 10px 24px -10px
    color-mix(in oklch, var(--schatten) 55%, transparent);
  transition: transform 160ms var(--ease-ui);
}
.ruf-fix__knopf:active {
  transform: scale(0.97);
}
.ruf-fix__knopf svg {
  flex: none;
}

/* ---------- 17 Motion „Die Flucht“ (bau-brief §6): y 10 → 0 + Deckkraft, 1100 ms, Staffel 60 ms, Hairline zuerst ---------- */
.hl::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--linie);
  transform-origin: 0 50%;
  transition: transform 700ms var(--ease);
}
.manifest__zeile.hl {
  border-top: 0;
}
html.flucht [data-flucht] {
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
html.flucht [data-flucht]:not(.ist-da) {
  opacity: 0;
  transform: translateY(10px);
}
html.flucht .hl:not(.ist-da)::before {
  transform: scaleX(0);
}
html.flucht .hl > * {
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms + 220ms);
}
html.flucht .hl:not(.ist-da) > * {
  opacity: 0;
  transform: translateY(10px);
}

/* ---------- 18 Responsive ---------- */
@media (max-width: 1100px) {
  .wz {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }
}
@media (max-width: 900px) {
  .fakten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fakt:nth-child(2) {
    border-right: 0;
  }
  .fakt:nth-child(-n + 2) {
    border-bottom: 1px solid var(--linie);
  }
  .manifest {
    margin-top: 4rem;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--rand);
    gap: 2rem;
  }
  .manifest__buehne {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .ablauf {
    margin-top: 3rem;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--rand);
    gap: 1.5rem;
  }
  .ablauf__bild {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 3;
  }
  .anfrage {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 3rem;
  }
  .anfrage__form {
    padding: 2.5rem var(--rand) 3rem;
  }
  .karte {
    min-height: 420px;
  }
  .fuss__innen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .kopfzeile {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .reihe2,
  .reihe3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
  }
  .reihe3 {
    margin-top: 2.2rem;
    margin-bottom: 0;
  }
  .reihe3 .kachel__kopf {
    flex-direction: row;
  }
  .bestand {
    margin-top: 2rem;
  }
  .werkzeug {
    margin-top: 3rem;
    padding: 3rem 0 3rem;
  }
  .wz {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "kopf"
      "ergebnis"
      "wahl"
      "treffer"
      "hinweis";
  }
  .wz__ergebnis {
    margin-top: 1.6rem;
    padding: 1.2rem 0 0;
    border-top: 1px solid var(--linie);
  }
  .wz__zahl {
    font-size: clamp(5.5rem, 30vw, 8rem);
  }
  .wz__treffer {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 1.2rem;
    margin-top: 2rem;
  }
  .treffer {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
  }
  .treffer img {
    height: 100%;
  }
  .treffer__text {
    padding: 0.8rem 0.9rem;
  }
  .wz__leer {
    min-height: 0;
    margin-top: 2rem;
  }
  .band {
    margin-top: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .band__teil:first-child {
    padding-right: 0;
  }
  .band__teil + .band__teil {
    padding-left: 0;
    border-left: 0;
    border-top: 0;
  }
  .bewertungen {
    margin-top: 4rem;
  }
  .ueber {
    margin-top: 2rem;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.2rem;
  }
  .ueber .tafel {
    width: 64px;
    height: 64px;
    font-size: 1.35rem;
  }
  .ueber .link {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .bewerten-cta {
    margin-top: 5rem;
    height: 420px;
  }
  .form__zeile {
    grid-template-columns: minmax(0, 1fr);
  }
  .feld--termin .form__zeile {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
  .karte__adresse {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
  .fuss__innen {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-top: 3rem;
  }
  /* feste Knöpfe am Handy: schmale Leiste ganz unten, der Seiteninhalt bekommt die Höhe als Luft (verdeckt nie) */
  body {
    padding-bottom: 52px;
  }
  .ruf-fix {
    left: 0;
    right: 0;
    bottom: 0;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--linie);
  }
  .ruf-fix__knopf {
    justify-content: center;
    min-height: 52px;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.95rem;
  }
}
@media (min-width: 761px) {
  .fuss__unten {
    padding-right: max(var(--rand), 9rem);
  }
}

/* ---------- 19 Bewegung aus ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
  .laufband {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .laufband .laufband__spur {
    animation: none !important;
    width: auto;
    flex-wrap: wrap;
  }
  .laufband [data-klon] {
    display: none;
  }
  .karte__pin::after {
    animation: none;
    opacity: 0;
  }
  .kachel__bild img,
  .treffer,
  .wz__treffer {
    transition: none;
  }
}

/* ---------- 20 Druck: Leiste, Fuß und feste Knöpfe nur am Bildschirm (GESETZ Kap. 1 Exposé) ---------- */
@media print {
  .kopfleiste,
  .fuss,
  .ruf-fix,
  .nav {
    display: none !important;
  }
  body {
    padding: 0 !important;
  }
}

/* ---------- 21 Sehen-Loop Runde 1 (1440): Seitenlänge Richtung ≤ 7.000 px (Duell-Korrektur 5), Kanten bündig ---------- */
@media (min-width: 901px) {
  .manifest__buehne {
    height: clamp(560px, 42vw, 620px);
  }
}
.kachel--gross .kachel__bild {
  aspect-ratio: 3 / 2;
}
.reihe3 .kachel__bild {
  aspect-ratio: 3 / 2;
}
.werkzeug {
  padding: calc(6rem + 4.5rem) 0 4rem;
}
.wz__treffer {
  margin-top: 2.4rem;
  min-height: 19rem;
}
.treffer img {
  aspect-ratio: 16 / 10;
}
.schritt {
  padding: 1.25rem 0;
}
.zitat__text p {
  -webkit-line-clamp: 6;
}
.ueber.wrap {
  width: min(100% - 2 * var(--rand), var(--max) - 2 * var(--rand));
  padding-inline: 0;
}
.anfrage__form {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 901px) {
  .fuss__innen {
    grid-template-columns:
      minmax(0, 1.3fr) minmax(0, 1.05fr) minmax(0, 1.25fr)
      minmax(0, 0.8fr);
  }
}
.fuss__zeiten dt {
  white-space: nowrap;
}

/* Kontaktleiste am Handy: die Spalte darf schrumpfen (Inter breiter als die Systemschrift der Kopf-Messung) */
@media (max-width: 899.98px) {
  .kontaktleiste {
    grid-template-columns: minmax(0, 1fr);
  }
  .kontaktleiste__text {
    min-width: 0;
  }
}
@media (max-width: 430px) {
  .kontaktleiste__text strong {
    font-size: 0.93rem;
  }
  .kontaktleiste__text span {
    font-size: 0.78rem;
    white-space: normal;
  }
}

/* ---------- 22 bewerten.html (SEH-Aufbau: dunkle Bühne, große Frage, gerahmte Karte in der Leitfarbe, GESETZ Kap. 9) ---------- */
.bewerten-seite {
  --karte-leit: var(--leit);
  position: relative;
  isolation: isolate;
  min-height: max(100svh, 640px);
  display: grid;
  place-items: center;
  padding: calc(var(--leiste-h) + 3rem) 1.25rem 4rem;
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
}
[data-theme="dark"] .bewerten-seite {
  --karte-leit: var(--dunkel-fest);
}
.bewerten-seite__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* s7 Runde 3 (Augen-Tor rot „Kopf zu dunkel“): kein Vollflächen-Schleier mehr — nur ein Band oben für die Leiste
   und ein weicher Hof hinter der Frage; das Auto bleibt im Abendlicht sichtbar. */
.bewerten-seite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--nacht-fest) 50%, transparent) 0,
      transparent 9rem
    ),
    radial-gradient(
      ellipse 46rem 15rem at 50% var(--frage-y, 38%),
      color-mix(in oklch, var(--nacht-fest) 42%, transparent),
      transparent 72%
    );
}
.bewerten-seite__frage {
  text-shadow: 0 2px 28px
    color-mix(in oklch, var(--nacht-fest) 55%, transparent);
}
/* Handy: Frage + Karte oben, darunter Front und Scheinwerfer frei (vorher lag die Karte genau auf dem Auto) */
@media (max-width: 760px) {
  .bewerten-seite {
    --frage-y: 14%;
    place-items: start center;
  }
  .bewerten-seite__bild {
    object-position: 76% 50%;
  }
}
.bewerten-seite__innen {
  width: min(48rem, 100%);
  text-align: center;
}
.bewerten-seite__frage {
  font: 800 clamp(2.6rem, 1.4rem + 4vw, 4.8rem) / 0.98 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--kalk-fest);
  margin-bottom: 2rem;
  text-wrap: balance;
}
.bewerten-karte {
  max-width: 38rem;
  margin-inline: auto;
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.25rem, 4vw, 2.6rem);
  background: var(--karte-leit);
  border: 1px solid color-mix(in oklch, var(--kalk-fest) 30%, transparent);
  color: var(--kalk-fest);
  box-shadow: 0 30px 60px -30px
    color-mix(in oklch, var(--schatten) 80%, transparent);
  --text: var(--kalk-fest);
  --text-leise: var(--meta-fest);
}
.bewerten-karte p {
  color: var(--meta-fest);
}
.bewerten-karte a:not(.knopf) {
  color: var(--kalk-fest);
}
.bewerten-karte__titel {
  font: 700 1.6rem / 1.15 var(--font-display);
  margin-bottom: 0.7rem;
}
.bewerten__stufe > * + * {
  margin-top: 1rem;
}
.sterne {
  margin: 0;
  padding: 0;
  border: 0;
}
.sterne__legende {
  padding: 0;
  margin: 0 auto 1rem;
  font: 600 0.8rem / 1.3 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-fest);
}
.sterne__reihe {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}
.stern {
  padding: 0.25rem;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-ui);
}
.stern svg {
  width: clamp(2.6rem, 9vw, 3.4rem);
  height: auto;
  fill: color-mix(in oklch, var(--akzent-buehne) 28%, transparent);
  transition: fill 160ms var(--ease-ui);
}
.stern.an svg {
  fill: var(--akzent-buehne);
}
.stern:active {
  transform: scale(0.94);
}
.sterne__hinweis,
.bewerten__fein {
  font-size: 0.88rem;
}
.sterne__hinweis {
  margin-top: 0.8rem;
}
.bewerten__form {
  text-align: left;
  max-width: none;
}
.bewerten__form .feld input,
.bewerten__form .feld textarea {
  background: var(--hell-fest);
  color: var(--dunkel-fest);
  border-color: transparent;
}
.bewerten__form .einwilligung {
  color: var(--meta-fest);
}

/* [hidden] schlägt jede display-Regel (Knöpfe sind inline-flex) */
[hidden] {
  display: none !important;
}

/* Sehen-Loop 768: die schwebenden Knöpfe lagen über der rechtsbündigen Kontaktleisten-Zeile → Leiste unten schon bis 900 px */
@media (max-width: 899.98px) {
  body {
    padding-bottom: 52px;
  }
  .ruf-fix {
    left: 0;
    right: 0;
    bottom: 0;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--linie);
  }
  .ruf-fix__knopf {
    justify-content: center;
    min-height: 52px;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.95rem;
  }
  .fuss__unten {
    padding-right: var(--rand);
  }
}
/* Luft für die Knopfleiste im Fuß statt am body (sonst heller Streifen unter dem Fuß) */
@media (max-width: 899.98px) {
  body {
    padding-bottom: 0;
  }
  .fuss {
    padding-bottom: 52px;
  }
}

/* ---------- 23 Fix-Runde s7 (25.10.2026): Ruf-Leiste verdeckt nie Inhalt — Platz schaffen, nicht verstecken (GESETZ Kap. 10) ----------
   Unter 900 px liegt die Leiste (52 px) vollbreit unten. Der erste Bildschirm endet deshalb ÜBER ihr:
   (a) Startseite: Bildband 16:10 statt 4:3 (zeigt 90 % statt 75 % der Videobreite), Textblock straffer,
       Kontaktleiste 3 × 48 px — die Uhrzeit steht nur in der Öffnungs-Zeile (in der Probefahrt-Zeile war sie doppelt).
   (b) Unterseiten-Bühne füllt den ersten Bildschirm; das Bild wächst, unter dem Text liegt die Leistenhöhe als Luft. */
@media (max-width: 899.98px) {
  [data-kopf="start"] .kopf__medien {
    aspect-ratio: 16 / 10;
  }
  [data-kopf="start"] .kopf__text {
    padding: 1.2rem 1.25rem 1.25rem;
  }
  [data-kopf="start"] .kopf__linie {
    margin-bottom: 0.8rem;
  }
  [data-kopf="start"] .kopf__beweis {
    margin-bottom: 0;
  }
  [data-kopf="start"] .kopf__cta {
    margin-top: 1.25rem;
  }
  .kontaktleiste__zelle {
    padding-block: 0.55rem;
  }
  .kontaktleiste__zelle:nth-child(2) .kontaktleiste__text span {
    display: none;
  }
  /* Kopf + Kontaktleiste füllen genau den ersten Bildschirm; die letzten 52 px (unter der Ruf-Leiste) sind Luft der Kontaktleiste,
     die Fakten-Leiste beginnt erst darunter */
  .kopf[data-kopf="start"] {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 145px - 52px);
  }
  [data-kopf="start"] .kopf__text {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .kontaktleiste {
    padding-bottom: 52px;
  }
  .unterkopf {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }
  .unterkopf__bild {
    flex: 1 0 auto;
    aspect-ratio: auto;
    min-height: 75vw;
    height: 0;
  }
  .unterkopf__text {
    flex: none;
    padding-bottom: calc(2.3rem + 52px);
  }
}
/* Ab 900 px stehen Anrufen/WhatsApp gestapelt unten rechts (bis x ≈ Viewport − 8,6 rem). Vollbreite Bänder und die Karte
   enden davor — die Knöpfe liegen nur noch über Fläche, nie über Zahl, Label, Link oder Google-Bedienung (Fix s7/S5). */
@media (min-width: 900px) {
  .klassen,
  .fakten,
  .kontaktleiste,
  .kontaktband {
    padding-right: 9.5rem;
  }
  .karte {
    margin-right: 9.5rem;
  }
}
/* Finanzierungs-Band führt mit Bild (Fix s7/S6, GESETZ Kap. 2 „Bild führt“): Bühnenbild der Zielseite zwischen den Haarlinien */
.band {
  grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
}
.band__bild {
  margin: 0 3rem 0 0;
  min-height: 100%;
}
.band__bild img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
  object-position: 50% 55%;
}
.band__bild + .band__teil {
  padding-right: 3rem;
}
@media (max-width: 899.98px) {
  .band {
    grid-template-columns: minmax(0, 1fr);
  }
  .band__bild {
    margin: 0 0 0.5rem;
  }
  .band__bild img {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
  .band__bild + .band__teil {
    padding-right: 0;
  }
}
/* 900–1359 px: der Seitenrand ist schmaler als die gestapelten Knöpfe (Inhaltsspalte bis Viewport − 7 rem) → Anrufen/WhatsApp
   als schmaler Reiter an der rechten Kante, unten, mit Verb beschriftet (44 px breit, liegt nur über dem Seitenrand). */
@media (min-width: 900px) and (max-width: 1359.98px) {
  .ruf-fix {
    left: auto;
    right: 0;
    bottom: 1.25rem;
    gap: 1px;
  }
  .ruf-fix__knopf {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    justify-content: center;
    width: 44px;
    min-height: 0;
    padding: 0.95rem 0;
    border-radius: 0 2px 2px 0;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
  }
  .ruf-fix__knopf svg {
    transform: rotate(
      180deg
    ); /* Symbol aufrecht, Schrift läuft wie ein Buchrücken von unten nach oben */
  }
  .ruf-fix__knopf:active {
    transform: rotate(180deg) scale(0.97);
  }
}
/* Ruf-Knöpfe auch über Navy-Flächen erkennbar: feine helle Kante (auf hellem Grund unsichtbar) */
.ruf-fix__knopf {
  border: 1px solid color-mix(in oklch, var(--kalk-fest) 22%, transparent);
}