/* =====================================================================================================
   Zulassungsheld – Stile unterhalb des ersten Bildschirms (lädt nicht blockierend, ohne JavaScript per <noscript>).
   Herkunft: 05-design/prototyp/startseite-v3/styles.css (Abschnitt 1, unverändert) und der seitenspezifische Teil aus
   05-design/prototyp/leistung-ummeldung/styles.css (Abschnitt 2). Abschnitt 3 enthält Ergänzungen des Grundgerüsts
   (Rechtstexte, Fehlerseite, Varianten ohne Platzhalter).
   Regel: Klassen der Startseite nicht umdefinieren; Neues immer mit eigener Klasse oder Modifikator.
   ===================================================================================================== */

/* ---------- 0. Schrift Archivo, lokal (keine Drittanfragen). Dateien und Lizenz: src/assets/fonts/.
   Bewusst hier und nicht im kritischen CSS: Die Schrift lädt erst nach dem ersten Bild (wie im Prototyp). ---------- */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Grundlage: Startseite v3 ---------- */
/* Zulassungsheld – Startseite v3 (Grundlage v2 und Animation 1): Stile unterhalb der Bühne (lädt nicht blockierend).
   Die Stile für den ersten Bildschirm (Grundlagen, Tasten, Kennzeichen, Kopf, Bühne, Kontaktleiste)
   stehen in kritisch.css und werden per build-kritisch.py inline in index.html eingesetzt (Regelwerk Q3). */
/* ---------- Abschnitte allgemein ---------- */
.section { padding-block: clamp(64px, 9vw, 128px); }
.section--mist { background: var(--mist); }
.section-head { max-width: 860px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head p { margin-top: 16px; font-size: 1.125rem; color: var(--muted); max-width: 60ch; }
.section-head--night p { color: var(--muted-night); }

/* ---------- Vorab: Antwortblock ---------- */
.brief { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 104px); }
.brief__title {
  font-family: var(--font); font-stretch: 100%; font-size: 1.25rem; letter-spacing: -.005em; line-height: 1.25;
  color: var(--muted); font-weight: 700; margin-bottom: 18px;
}
.brief__list { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--night); }
.brief__item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-content: start;
  padding: 18px 0 20px; border-bottom: 1px solid var(--line);
}
.brief__icon {
  grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--yellow); color: var(--night);
}
.brief__icon .icon { width: 22px; height: 22px; }
.brief__item h3 { font-size: .9375rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.brief__answer {
  margin-top: 2px; font-family: var(--font-wide); font-size: 1.5rem; font-weight: 800; font-stretch: 108%;
  letter-spacing: -.02em; line-height: 1.1; color: var(--night);
}
.brief__item p:last-child { margin-top: 6px; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.trust__din .nw { white-space: normal; } /* Kurz-Karte der Bühne: „Reg.-Nr. …“ ragte bis 52 px über den Rand (Abnahme 06.10.) */
.trust__din .nw .nw { white-space: nowrap; } /* „Reg.-Nr.“ selbst nie trennen */
.trust li { -webkit-hyphens: auto; hyphens: auto; } /* schmale Kacheln: „Zulassungsdienst,“ ragte bei 1.024–1.100 px über den Rand (Nachprüfung 06.10.) */
.brief__hint, .docs__hinweis { margin-top: 20px; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 68ch; } /* Weg für Selbermacher (BEFUNDE Nr. 362) */
@media (min-width: 640px) { .brief__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1100px) {
  .brief__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-bottom: 1px solid var(--line); }
  .brief__item { grid-template-columns: minmax(0, 1fr); padding: 24px 28px 28px; border-bottom: 0; border-left: 1px solid var(--line); }
  .brief__item:first-child { border-left: 0; padding-left: 0; }
  .brief__icon { grid-row: auto; margin-bottom: 18px; }
  .brief__answer { font-size: 1.625rem; }
}

/* ---------- Nacht-Bühnen ---------- */
.night { position: relative; background: var(--night); color: #fff; isolation: isolate; }
.night .skyline { position: absolute; left: 0; right: 0; top: 18px; pointer-events: none; z-index: -1; opacity: .9; }

/* Weg-Finder */
.ways { padding-block: clamp(120px, 14vw, 190px) clamp(64px, 9vw, 120px); }
.ways .section-head h2 { color: #fff; }
.finder {
  position: relative; margin-bottom: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  background: #fff; color: var(--night); border-radius: 28px; padding: 22px 18px 20px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
}
.finder[hidden] { display: none; }
.finder__form { display: grid; gap: 18px; }
.finder__q:first-child legend { padding-right: 84px; min-height: 56px; }
.finder__q { border: 0; margin: 0; padding: 0; min-width: 0; transition: opacity .25s; }
.finder__q:disabled { opacity: .38; }
.finder__q legend { display: flex; align-items: center; gap: 10px; padding: 0; font-family: var(--font-wide); font-stretch: 108%; font-weight: 800; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.015em; }
.finder__num {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--night); color: var(--yellow); font-family: var(--font); font-stretch: 100%; font-size: .9375rem; font-weight: 800;
}
.finder__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.opt { position: relative; flex: 1 1 0; min-width: 76px; }
.opt--wide { flex-grow: 1.5; min-width: 118px; }
.opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opt span {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 14px;
  border: 2px solid var(--night); border-radius: 14px; background: #fff;
  font-weight: 700; font-size: 1.0625rem; white-space: nowrap;
  transition: transform .18s var(--ease-out);
}
.opt input:hover + span { box-shadow: 0 0 0 3px rgba(0, 6, 25, .1); }
.opt input:active + span { transform: scale(.96); }
.opt input:checked + span { background: var(--night); color: #fff; box-shadow: inset 0 -3px 0 var(--yellow); }
.opt input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.finder__q:disabled .opt input { cursor: not-allowed; }
.finder__hint { margin-top: 8px; font-size: .9375rem; color: var(--muted); }
.finder__result { margin-top: 20px; min-height: 120px; }
.finder__empty {
  display: grid; place-items: center; min-height: 120px; padding: 18px; text-align: center;
  border: 2px dashed var(--line); border-radius: 18px; color: var(--muted); font-size: 1rem;
}
.result {
  position: relative; display: grid; gap: 12px; padding: 20px 18px 18px; border-radius: 20px;
  background: var(--yellow); color: var(--night);
}
.result .plate { justify-self: start; }
.result__title { font-family: var(--font-wide); font-stretch: 108%; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.12; hyphens: manual; } /* v3: „Zulassungs-bescheinigung“ per &shy; trennen */
.result__facts { display: grid; gap: 10px; }
.result__facts div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
.result__facts dt { font-weight: 700; font-size: .9375rem; padding-top: 2px; }
.result__facts dd { font-size: 1rem; line-height: 1.45; }
.result__text { font-size: 1.0625rem; }
.result__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 4px; }
.result__cta .btn { width: 100%; font-size: 1rem; padding-inline: .6em; gap: .45em; }
.result__more { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.result--photo { background: var(--night); color: #fff; }
.result__cam { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--yellow); color: var(--night); }
.result__cam .icon { width: 28px; height: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .finder__result.is-new .result { animation: result-in .55s var(--ease-spring) both; }
  .finder__result.is-new .result .plate { animation: plate-turn .7s .12s var(--ease-spring) both; }
}
@keyframes result-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes plate-turn { from { transform: perspective(500px) rotateX(-110deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Der Held zeigt auf die Fragen */
.guide { position: absolute; pointer-events: none; z-index: 2; }
.guide img { width: 100%; height: auto; }
.guide--point { width: 92px; top: -66px; right: 2px; }
.guide--point img { filter: drop-shadow(0 18px 14px rgba(0, 6, 25, .35)); transform: scaleX(-1); }
.finder__reset {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; padding: 0 4px;
  border: 0; background: none; font: inherit; font-weight: 700; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
}
.finder__reset:hover { color: var(--night); }
.finder__result { display: grid; grid-template-columns: minmax(0, 1fr); }
.finder__result > *, .result > * { min-width: 0; }

@media (min-width: 640px) {
  .finder { padding: 30px 30px 28px; }
  .finder__q:first-child legend { padding-right: 130px; }
  .result { padding: 26px; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .result .plate, .result__cam { grid-row: 1 / span 3; }
  .result__cta .btn { width: auto; }
  .guide--point { width: 124px; top: -84px; right: 18px; }
}
@media (min-width: 1024px) {
  .finder {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 40px; align-items: start;
    margin-left: 180px; padding: 36px 36px 36px 40px;
  }
  .finder__q:first-child legend { padding-right: 0; min-height: 0; }
  .finder__result { margin-top: 0; min-height: 100%; }
  .finder__empty { min-height: 100%; }
  .result { grid-template-columns: minmax(0, 1fr); }
  .result .plate, .result__cam { grid-row: auto; }
  .guide--point { width: 186px; top: auto; bottom: -6px; right: auto; left: -190px; }
  .guide--point img { transform: none; }
}
@media (min-width: 1280px) {
  .finder { margin-left: 220px; }
  .guide--point { width: 236px; left: -244px; }
}

/* Weg-Karten (ohne JavaScript die eigentliche Information) */
.ways__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.way {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--night-2); border: 1px solid var(--night-3); border-radius: var(--radius-card);
  transition: opacity .3s, transform .45s var(--ease-out);
}
.way::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 199, 44, .35); transition: opacity .45s var(--ease-out);
}
.way__media { position: relative; }
.way__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0; }
.way__media .plate { position: absolute; left: 18px; bottom: -22px; }
.way__body { display: flex; flex-direction: column; gap: 14px; padding: 36px 20px 20px; flex: 1; }
.way h3 { font-family: var(--font-wide); font-stretch: 106%; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.15; }
.way__label { color: var(--yellow); }
.way__fit { color: var(--muted-night); }
.way__fit strong { color: #fff; }
.way__facts { display: grid; gap: 10px; padding: 14px 0; border-block: 1px solid var(--night-3); }
.way__facts div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
.way__facts dt { color: var(--yellow); font-weight: 700; font-size: .9375rem; padding-top: 2px; }
.way__facts dd { font-size: 1rem; line-height: 1.5; color: #e6e9f2; }
.way__facts dd strong { color: #fff; }
.way__more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  cursor: pointer; list-style: none; font-weight: 700;
}
.way__more summary::-webkit-details-marker { display: none; }
.way__more summary .icon { transition: transform .25s var(--ease-out); color: var(--yellow); }
.way__more[open] summary .icon { transform: rotate(45deg); }
.mini-steps { margin: 6px 0 4px; padding-left: 1.3em; display: grid; gap: 8px; color: #e6e9f2; font-size: 1rem; }
.mini-steps strong { color: #fff; }
.note { margin-top: 10px; font-size: .9375rem; color: var(--muted-night); }
.way__cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px;
  border-radius: 14px; border: 2px solid var(--wa); color: #fff; font-weight: 700; text-decoration: none;
  transition: transform .35s var(--ease-out);
}
.way__cta .icon { color: var(--wa); }
.way__cta:hover { background: var(--wa); color: var(--night); }
.way__cta:hover .icon { color: var(--night); }
.way__cta:active { transform: scale(.97); }
.way.is-match { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow), 0 30px 60px -30px rgba(255, 199, 44, .45); }
@media (hover: hover) and (pointer: fine) {
  .way:hover { transform: translate3d(0, -4px, 0); }
  .way:hover::after { opacity: 1; }
  .way__cta:hover { transform: translate3d(0, -2px, 0); }
}
.ways__grid.has-match .way:not(.is-match) { opacity: .62; }
@media (min-width: 1024px) {
  .ways__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.unsure {
  margin-top: 28px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px 16px; align-items: center;
  padding: 22px 20px; border-radius: var(--radius-card); background: var(--yellow); color: var(--night);
}
.unsure__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--night); color: var(--yellow); }
.unsure__icon .icon { width: 26px; height: 26px; }
/* Anruftaste im gelben Kasten: gelber Fokusring wäre auf Gelb unsichtbar (Abnahme Kern FO1, WCAG 2.4.7) */
.unsure .btn--call:focus-visible { outline-color: var(--night); box-shadow: 0 0 0 3px #fff; }
.unsure__title { hyphens: manual; font-family: var(--font-wide); font-stretch: 106%; font-weight: 800; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.015em; }
.unsure .btn { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .unsure { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 26px 30px; }
  .unsure .btn { grid-column: auto; }
}

/* ---------- Ablauf ---------- */
.statement {
  font-family: var(--font-wide); font-weight: 800; font-stretch: 125%;
  font-size: clamp(2.6rem, 1rem + 6.4vw, 7rem); line-height: .92; letter-spacing: -.045em;
  color: var(--night); margin: 0 0 clamp(36px, 5vw, 64px);
  background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 88%, transparent 88%);
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.steps { list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.step {
  position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr) 104px; gap: 0 14px; align-items: start;
  padding: 14px 0;
}
.step .flip { position: relative; z-index: 1; justify-self: start; }
.step__body h3 { font-size: 1.1875rem; }
.step__body p { margin-top: 4px; color: var(--muted); font-size: 1rem; }
.step__pic img { width: 104px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
@media (min-width: 1024px) {
  /* oben ein Band für die Flugroute: Kennzeichen-Mitte bei 132 px (Wert steht auch in main.js) */
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-top: 112px; }
  /* v3: align-content: start, sonst verteilt das Raster die Höhe des längsten Textes auf alle Zeilen und die Bilder
     sitzen je nach Textlänge unterschiedlich hoch (Schritt 3 lag 17 px über Schritt 1 und 2). */
  .step { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0; align-content: start; }
  .step__pic { transform-origin: 50% 0; } /* Szene: Verkleinern und Aufleuchten ändern die Oberkante nicht */
  .step__pic { order: 2; }
  .step__body { order: 3; }
  .step__pic img { width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; }
  .step__body p { font-size: 1.0625rem; }
}

/* ---------- Ablauf-Szene (Animation 1): goldene Route, fliegender Held, Abschluss ----------
   Grundzustand = Endzustand: Route ganz gezeichnet, Held am Ziel, Kennzeichen gedreht (gelb), Abschluss sichtbar.
   So bleibt es ohne JavaScript, bei „Bewegung reduzieren“ und in Browsern ohne Scroll-Animationen ohne Skript.
   Bewegung: Route und Held per animation-timeline (CSS); sonst setzt main.js --p (Klasse .route-js, gleiche Keyframes).
   Kennzeichen, Bilder und Abschluss schalten per .is-on (main.js), Vorzustand erst mit .route-ready.
   Animiert werden nur transform, opacity und stroke-dashoffset. Kein Pinning, kein Eingriff ins Scrollen.
   Mobil (< 1024 px): senkrechte Schiene durch die Kennzeichen, der Held taucht kopfüber mit, Ziel ist das Häkchen.
   Desktop: geschwungene Flugroute über den Karten (drei Bögen), der Held fliegt mit und landet über Schritt 4. */
.route-scene { position: relative; margin-top: 64px; }
.route { position: absolute; z-index: 0; left: 25px; top: 34px; bottom: 22px; width: 0; pointer-events: none; }
.route::before {
  /* noch nicht geflogene Strecke: rote Strichellinie wie in v2 */
  content: ""; position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px; opacity: .5;
  background: repeating-linear-gradient(var(--red) 0 7px, transparent 7px 13px);
}
.route__svg { position: absolute; display: block; overflow: visible; fill: none; }
.route__svg--rail { left: -2px; top: 0; width: 4px; height: 100%; }
.route__svg--band { display: none; }
.route__draw { stroke: var(--yellow); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.route__rider { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.route__hop { position: absolute; left: 0; bottom: 0; width: 0; height: 0; }
.route__hero { position: absolute; left: 0; top: -29px; width: 124px; transform-origin: 0 50%; transform: rotate(-80deg); } /* Faust an der Spitze, Körper bleibt in der Kennzeichen-Spalte */
.route__hero img { width: 100%; height: auto; }
.plate--on { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow), inset 0 0 0 3px rgba(0, 6, 25, .14), 0 10px 20px -14px rgba(0, 6, 25, .75); }
.step .flip__inner { transform: rotateX(180deg); }
.step .flip::after, .route-finish__check::after {
  /* Lichtring beim Erreichen (nur über .is-on) */
  content: ""; position: absolute; inset: -7px; border: 2.5px solid var(--yellow); border-radius: 12px; opacity: 0; transform: scale(.7); pointer-events: none;
}
.route-finish {
  position: relative; z-index: 1; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 12px 14px; align-items: center; padding-top: 22px;
}
.route-finish__plate { grid-column: 2; grid-row: 1; justify-self: start; }
.route-finish__plate .plate--xl { --h: 46px; }
.route-finish__check {
  position: relative; grid-column: 1; grid-row: 2; justify-self: start; margin-left: 5px; width: 41px; height: 41px; border-radius: 50%;
  display: grid; place-items: center; background: var(--night); color: var(--yellow); box-shadow: 0 0 0 4px #fff;
}
.route-finish__check::after { border-radius: 50%; }
.route-finish__check .icon { width: 24px; height: 24px; }
.route-finish__text { grid-column: 2; grid-row: 2; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
@media (min-width: 1024px) {
  .route { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 140px; }
  .route::before, .route__svg--rail { display: none; }
  .route__svg--band { display: block; left: 0; top: 0; width: 100%; height: 100%; }
  .route__track { stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 7 6; opacity: .5; }
  .route__svg--band .route__draw { stroke-width: 4; stroke-linecap: round; }
  .route__rider { left: 2.4%; width: 77%; top: 0; bottom: auto; height: 132px; }
  .route__hop { left: auto; right: 0; bottom: 26px; }
  .route__hero { top: auto; bottom: 0; left: -46px; width: 152px; transform: none; transform-origin: 30% 100%; } /* Spitze bei 30 % der Breite */
  .route__hero img { transform: scaleX(-1); filter: drop-shadow(0 12px 10px rgba(0, 6, 25, .18)); }
  .route-finish { display: flex; justify-content: flex-end; gap: 14px; padding-top: 44px; }
  .route-finish__plate { order: -1; margin-right: 8px; }
  .route-finish__plate .plate--xl { --h: 54px; }
  .route-finish__check { margin: 0; }
  .route-finish__text { font-size: 1.1875rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Mobil: Fortschritt 0, wenn der Schienenanfang 55 % der Fensterhöhe erreicht, 1 beim Schienenende.
       Der Einzug (inset) rechnet in Prozent des echten Sichtbereichs, nicht in vh (Adressleiste mobil). */
    .route { view-timeline: --route block; view-timeline-inset: 55% 45%; }
    .route__rider { animation: route-y linear both; animation-timeline: --route; animation-range: cover 0% cover 100%; }
    .route__svg--rail .route__draw { animation: route-draw linear both; animation-timeline: --route; animation-range: cover 0% cover 100%; }
    .route__hop { animation: route-in linear both; animation-timeline: --route; animation-range: cover 0% cover 100%; }
    @media (min-width: 1024px) {
      /* Desktop: Fortschritt 0, wenn die Kennzeichenlinie (132 px im 140 px hohen Band) bei 80 % der Fensterhöhe steht, 1 bei 35 % */
      .route { view-timeline-inset: 35% 20%; }
      .route__rider { animation-name: route-x; animation-range: cover 132px cover calc(100% - 8px); }
      .route__hop { animation: route-hop linear both; animation-timeline: --route; animation-range: cover 132px cover calc(100% - 8px); }
      .route__hero { animation: route-tilt linear both; animation-timeline: --route; animation-range: cover 132px cover calc(100% - 8px); }
      .route__svg--band .route__draw { animation: route-draw-band linear both; animation-timeline: --route; animation-range: cover 132px cover calc(100% - 8px); }
    }
  }
  /* Rückfall: dieselben Keyframes, angehalten; main.js setzt --p (0–1), die negative Verzögerung wählt das Bild */
  .route-js .route__rider, .route-js .route__draw, .route-js .route__hop, .route-js .route__hero {
    animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both;
    animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s);
    animation-timeline: auto; animation-range: normal; /* nur wirksam, falls ein Browser die Zeitachse kennt, aber nicht meldet */
  }
  .route-js .route__rider { animation-name: route-y; }
  .route-js .route__hop { animation-name: route-in; }
  .route-js .route__svg--rail .route__draw { animation-name: route-draw; }
  @media (min-width: 1024px) {
    .route-js .route__rider { animation-name: route-x; }
    .route-js .route__hop { animation-name: route-hop; }
    .route-js .route__hero { animation-name: route-tilt; }
    .route-js .route__svg--band .route__draw { animation-name: route-draw-band; }
  }
  /* Kennzeichen drehen sich (vorhandene Flip-Mechanik), Bild leuchtet auf, Lichtring.
     Alle umgeschalteten Zustände behalten eine Transformation (nie „none“), so braucht ein Wechsel kein Layout. */
  .route-ready .step:not(.is-on) .flip__inner { transform: rotateX(0deg); }
  .route-ready .step__pic { transform: scale(1); transition: opacity .6s var(--ease-out), transform .8s var(--ease-spring); }
  .route-ready .step:not(.is-on) .step__pic { opacity: .4; transform: scale(.94); }
  .route-ready .step.is-on .flip::after { animation: route-ping .9s var(--ease-out) .12s both; }
  /* Abschluss: Rohling dreht sich zu „B ZH 2026“, dann Häkchen und Satz */
  .route-ready .route-finish .flip__inner { transform: rotateX(0deg); }
  .route-ready .route-finish:not(.is-on) .flip__inner { transform: rotateX(-180deg); }
  .route-ready .route-finish__check { transform: scale(1); transition: transform .55s var(--ease-spring) .3s; }
  .route-ready .route-finish:not(.is-on) .route-finish__check { transform: scale(0); }
  .route-ready .route-finish.is-on .route-finish__check::after { animation: route-ping .9s var(--ease-out) .45s both; }
  .route-ready .route-finish__text { transform: translateX(0); transition: opacity .5s var(--ease-out) .45s, transform .6s var(--ease-out) .45s; }
  .route-ready .route-finish:not(.is-on) .route-finish__text { opacity: 0; transform: translateX(-14px); }
}
@keyframes route-y { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes route-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes route-in { 0% { opacity: 0; } 4%, 100% { opacity: 1; } }
@keyframes route-x { 0%, 6% { transform: translateX(-100%); } 78%, 100% { transform: none; } }
@keyframes route-draw-band { 0%, 6% { stroke-dashoffset: 1; } 78%, 100% { stroke-dashoffset: 0; } }
/* Drei Bögen: hoch mit „ease-out quad“, runter mit „ease-in quad“ = genau die Parabel der SVG-Bögen (Kontrollpunkt 88 px, Scheitel 44 px) */
@keyframes route-hop {
  0%, 6%, 30%, 54% { transform: translateY(0); animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  18%, 42%, 66% { transform: translateY(-44px); animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  78%, 100% { transform: translateY(0); }
}
@keyframes route-tilt {
  0%, 6%, 18%, 30%, 42%, 54%, 66%, 78%, 100% { transform: rotate(0deg); }
  10%, 34%, 58% { transform: rotate(-9deg); }
  26%, 50%, 74% { transform: rotate(8deg); }
}
@keyframes route-ping { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.6); } }

/* ---------- Zusagen ---------- */
.promise { padding-top: 0; }
.promise__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.promise__col { padding: 24px 22px; border-radius: var(--radius-card); }
.promise__col h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-wide); font-stretch: 106%; font-size: 1.375rem; letter-spacing: -.02em; margin-bottom: 14px; }
.promise__col ul { padding: 0; list-style: none; display: grid; gap: 12px; }
.promise__col li { position: relative; padding-left: 24px; }
.promise__col li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 3px; }
.promise__col--yes { background: var(--yellow); }
.promise__col--yes li::before { background: var(--night); }
.promise__col--no { border: 2px solid var(--line); }
.promise__col--no h3 .icon { color: var(--muted); }
.promise__col--no li { color: var(--ink-soft); }
.promise__col--no li::before { border: 2px solid var(--muted); }
.post-note {
  margin-top: 20px; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 14px; border-radius: var(--radius-card); background: var(--mist);
}
.post-note img { width: 104px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.post-note figcaption { font-size: 1rem; color: var(--ink-soft); }
@media (min-width: 768px) {
  .promise__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .promise__col { padding: 32px 34px; }
  .post-note { grid-template-columns: 200px minmax(0, 1fr); padding: 18px 28px 18px 18px; gap: 28px; }
  .post-note img { width: 200px; aspect-ratio: 16 / 10; }
  .post-note figcaption { font-size: 1.0625rem; }
}

/* ---------- Leistungen ---------- */
.tiles { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tile__link {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px; min-height: 100%; border-radius: 18px; background: #fff; text-decoration: none; color: var(--night);
  box-shadow: 0 1px 0 var(--line), 0 0 0 1px rgba(0, 6, 25, .04);
  transition: transform .4s var(--ease-out);
}
.tile { position: relative; isolation: isolate; }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 18px; pointer-events: none; opacity: 0;
  box-shadow: var(--shadow-lift); transition: opacity .4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tile__link:hover { transform: translate3d(0, -4px, 0); }
  .tile:hover::after { opacity: 1; }
}
.tile__link:active { transform: scale(.985); }
.tile__media img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.tile__body { display: grid; gap: 6px; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.tile__title { font-weight: 800; font-size: 1.125rem; line-height: 1.2; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(0, 6, 25, .18); text-underline-offset: 4px; }
.tile__link:hover .tile__title { text-decoration-color: var(--red); }
.tile__text { color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.tile__price { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-weight: 700; font-size: .9375rem; }
.tile__price--tbc { color: var(--muted); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .tile__link { grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; gap: 0; border-radius: var(--radius-card); }
  .tile::after { border-radius: var(--radius-card); }
  .tile__media { position: relative; overflow: hidden; }
  .tile__media img { width: 100%; aspect-ratio: 16 / 10; border-radius: 0; transition: transform .6s var(--ease-out); }
  .tile__link:hover .tile__media img { transform: scale(1.04); }
  .tile__body { padding: 20px 22px 24px; gap: 8px; }
  .tile__title { font-size: 1.25rem; }
  .tile__text { font-size: 1rem; }
}
.more-services { margin-top: 28px; padding: 24px 22px; border-radius: var(--radius-card); background: #fff; box-shadow: 0 1px 0 var(--line); }
.more-services h3 { font-size: 1.25rem; margin-bottom: 8px; }
.more-services ul { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.more-services li { border-bottom: 1px solid var(--line); }
.more-services li a { display: flex; align-items: center; min-height: 48px; font-weight: 600; text-underline-offset: 4px; }
.more-services__plain { display: flex; align-items: center; min-height: 48px; color: var(--muted); }
.more-services__all { margin-top: 18px; }
@media (min-width: 768px) {
  .more-services { padding: 30px 34px; }
  .more-services ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 1100px) { .more-services ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Preise ---------- */
.prices__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.pricestage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 4px 10px; align-items: end;
  padding: 24px 6px 22px 18px; border-radius: 28px; background: var(--yellow); overflow: hidden;
}
.pricestage::after {
  /* feines Kennzeichen-Raster im Hintergrund */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 1px 1px, rgba(0, 6, 25, .14) 1.2px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 100%); mask-image: linear-gradient(120deg, transparent 30%, #000 100%);
}
.pricestage > * { position: relative; z-index: 1; }
.guide--present { position: relative; width: 104px; align-self: end; margin-bottom: -22px; }
.pricestage__body { display: grid; gap: 14px; align-content: start; padding-bottom: 4px; }
.pricestage .flip { justify-self: start; filter: drop-shadow(0 16px 18px rgba(0, 6, 25, .3)); }
.pricestage .plate--hero { --h: 46px; }
@media (min-width: 400px) { .pricestage .plate--hero { --h: 56px; } }
.pricestage__title { font-size: 1.0625rem; line-height: 1.35; }
.pricestage__title strong { font-family: var(--font-wide); font-stretch: 110%; font-size: 1.375rem; letter-spacing: -.02em; display: block; }
.checks { list-style: none; padding: 0; display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 1rem; line-height: 1.35; }
.checks .icon { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--night); color: var(--yellow); margin-top: -1px; }
.checks--plain .icon { background: var(--yellow); color: var(--night); }
@media (min-width: 640px) {
  .pricestage { grid-template-columns: minmax(0, 1fr) 160px; padding: 36px 14px 30px 32px; gap: 6px 22px; }
  .guide--present { width: 160px; margin-bottom: -30px; }
  .pricestage .plate--hero { --h: 76px; }
}
@media (min-width: 1024px) {
  .prices__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
  .pricestage { position: sticky; top: calc(var(--header-h) + 24px); grid-template-columns: minmax(0, 1fr); padding: 40px 40px 0; align-items: start; }
  .pricestage__body { order: -1; padding-bottom: 0; }
  .guide--present { width: 200px; margin: 8px 0 0 auto; }
  .pricestage .plate--hero { --h: 92px; }
  .pricestage__title strong { font-size: 1.75rem; }
}

.table-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--line); }
.price-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.price-table th, .price-table td { padding: 16px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.price-table thead th { font-size: .875rem; font-weight: 700; color: var(--muted); background: var(--mist); padding-block: 12px; }
.price-table tbody th { font-weight: 700; }
.price-table td { text-align: right; white-space: nowrap; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.price-table thead th:last-child { text-align: right; }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: 0; }
.price-table__sub { display: block; margin-top: 4px; font-weight: 400; font-size: .9375rem; color: var(--muted); }
.price-table__unit { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.price-table .is-main { background: var(--yellow-soft); }
.price-table .is-main td { font-size: 1.375rem; }
.price-table td.is-tbc { font-size: .9375rem; font-weight: 700; color: var(--muted); white-space: normal; }
.prices__excluded { margin-top: 18px; font-size: 1rem; color: var(--ink-soft); }
.prices__pay { margin-top: 14px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--mist); }
.prices__pay .icon { width: 26px; height: 26px; color: var(--red-ink); margin-top: 1px; }
.savings { margin-top: 18px; }
.savings__title { font-weight: 800; margin-bottom: 10px; }
@media (min-width: 640px) { .savings .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Bewertungen: großes Vertrauensmodul ---------- */
.reviews { border-top: 1px solid var(--line); }
.reviews__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: end; }
.reviews__score h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
.score { margin-top: 6px; line-height: .8; }
.score__num {
  font-family: var(--font-wide); font-weight: 800; font-stretch: 125%;
  font-size: clamp(7rem, 4rem + 18vw, 15rem); letter-spacing: -.06em; color: var(--night);
  font-variant-numeric: tabular-nums;
}
.score__stars { display: flex; gap: 4px; margin-top: 10px; color: var(--star); }
.score__stars .icon { width: clamp(30px, 5vw, 48px); height: clamp(30px, 5vw, 48px); }
.reviews__facts { display: grid; gap: 14px; justify-items: start; }
.reviews__line { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.3; font-weight: 500; }
.reviews__sub { color: var(--muted); }
.reviews__ph-link { font-size: .9375rem; color: var(--muted); }
/* v3: echte Google-Bewertungen, wörtlich (Kürzungen mit „…“). Mobil 3, Tablet 4, Desktop 5 sichtbar. */
.quotes { list-style: none; padding: 0; margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.quote figure { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 20px 20px 18px; border-radius: 18px; background: var(--mist); }
.quote__stars .stars { display: inline-flex; gap: 2px; color: var(--star); }
.quote__stars .icon { width: 18px; height: 18px; }
.quote__text { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--night); }
.quote__meta { font-size: .875rem; line-height: 1.4; color: var(--muted); }
.quote__meta strong { color: var(--night); }
.quote:nth-child(n+4) { display: none; }
.quote--more { align-content: center; justify-items: start; gap: 6px; padding: 22px; border-radius: 18px; border: 2px solid var(--line); }
.quote__more-num { font-family: var(--font-wide); font-stretch: 125%; font-weight: 800; font-size: 3.5rem; line-height: .9; letter-spacing: -.05em; }
.quote__more-text { color: var(--muted); margin-bottom: 10px; }
.reviews__note { margin-top: 18px; font-size: .9375rem; color: var(--muted); max-width: 90ch; }
@media (min-width: 640px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quote:nth-child(4) { display: block; } }
@media (min-width: 1024px) {
  .reviews__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; }
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .quote:nth-child(n) { display: block; }
  .quote.quote--more { display: grid; }
}

/* ---------- Laden ---------- */
.shop__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.shop__photo {
  position: relative; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center;
  aspect-ratio: 4 / 3; padding: 24px; border-radius: var(--radius-frame);
  border: 2px dashed #b9c2d3; background: #fff; color: var(--muted);
}
.shop__photo .proto { position: absolute; top: 16px; left: 16px; }
.shop__photo .icon { width: 44px; height: 44px; color: var(--night); }
.shop__photo p { max-width: 32ch; }
.shop__photo strong { color: var(--night); }
.shop__info h2 { margin-bottom: 16px; }
.shop__info > p { color: var(--ink-soft); }
.shop__info > p + p { margin-top: 14px; } /* Spez. B 2.2: Absätze im Laden nicht zusammenkleben (Abnahme 06.10.) */
.shop__address { display: flex; gap: 12px; margin-top: 20px; font-style: normal; font-weight: 700; font-size: 1.125rem; line-height: 1.4; }
.shop__address .icon { color: var(--red-ink); margin-top: 3px; }
.hours { margin-top: 18px; display: grid; gap: 10px; }
.hours div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.hours dt { font-weight: 700; font-size: .9375rem; color: var(--muted); }
.lang-note { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--yellow-soft); font-weight: 700; font-size: .9375rem; }
.shop__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (min-width: 900px) {
  .shop__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .hours div { grid-template-columns: 170px minmax(0, 1fr); }
}

/* ---------- Wer wir sind (SEO-Text) ---------- */
.proto-note { margin-bottom: 22px; font-size: .9375rem; color: var(--muted); max-width: 80ch; }
.seo__head { max-width: 900px; }
.seo__head h2 { font-size: clamp(1.625rem, 1rem + 2.4vw, 2.9rem); }
.seo__intro { margin-top: 20px; font-size: 1.1875rem; color: var(--ink-soft); }
.seo__intro a { font-weight: 700; text-underline-offset: 4px; }
.seo__cols { margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.seo__cols > div { padding-top: 18px; border-top: 2px solid var(--night); }
.seo__cols h3 { margin-bottom: 8px; }
.seo__cols p { color: var(--ink-soft); }
.seo__cols a { font-weight: 700; text-underline-offset: 4px; }
@media (min-width: 768px) { .seo__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 36px; } }
@media (min-width: 1100px) { .seo__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.faq__intro { position: relative; }
.faq__intro > p { margin-top: 14px; color: var(--muted); font-size: 1.0625rem; }
.faq__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.guide--phone { display: none; }
.faq__list { display: grid; gap: 10px; }
.qa { border-radius: 16px; background: #fff; box-shadow: 0 1px 0 var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 12px 18px;
  cursor: pointer; list-style: none; font-weight: 700; font-size: 1.0625rem; line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .icon { flex: none; width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: var(--mist); transition: transform .25s var(--ease-out); }
.qa[open] summary .icon { transform: rotate(45deg); background: var(--yellow); }
.qa__a { padding: 0 18px 18px; display: grid; gap: 10px; color: var(--ink-soft); }
.qa__a .sep { color: var(--muted); }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
  .faq__intro { position: sticky; top: calc(var(--header-h) + 32px); }
  .guide--phone { display: block; position: relative; width: 132px; margin-top: 18px; }
}

/* ---------- Quellen ---------- */
.sources { padding-block: 40px 56px; border-top: 1px solid var(--line); }
.sources__title { font-family: var(--font); font-stretch: 100%; font-size: 1.125rem; letter-spacing: 0; margin-bottom: 10px; }
.sources ul { padding-left: 1.1em; display: grid; gap: 6px; font-size: .9375rem; color: var(--muted); }
.sources a { color: var(--night); text-underline-offset: 3px; }

/* ---------- Abschluss (Nacht 2) ---------- */
.finale { padding-block: clamp(150px, 16vw, 220px) clamp(56px, 7vw, 96px); overflow: hidden; }
.finale .skyline--finale { top: 40px; }
.guide--fly { width: 210px; top: 18px; right: 6%; z-index: 1; }
.finale__inner { position: relative; z-index: 2; }
.finale__title {
  font-family: var(--font-wide); font-weight: 800; font-stretch: 122%;
  font-size: clamp(2.5rem, 1.2rem + 5.6vw, 6.2rem); line-height: .94; letter-spacing: -.045em;
  max-width: 13ch; text-wrap: balance;
}
.finale__text { margin-top: 20px; font-size: 1.125rem; color: var(--muted-night); max-width: 48ch; }
.finale__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 479px) { .finale__cta .btn { width: 100%; } }
@media (min-width: 1024px) {
  .guide--fly { width: 400px; top: 70px; right: 7%; }
}

/* ---------- Fuß ---------- */
.site-footer { background: var(--night); color: var(--muted-night); padding-block: 48px 40px; font-size: 1rem; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 36px; border-top: 1px solid var(--night-3); }
.site-footer__brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-wide); font-weight: 800; font-stretch: 118%; font-size: 1.25rem; letter-spacing: -.03em; }
.site-footer__brand picture { flex: none; }
.site-footer__brand img { width: 56px; height: 56px; }
.site-footer__fact { margin-top: 12px; }
.site-footer address { margin-top: 14px; font-style: normal; color: #fff; }
.site-footer address a { display: inline-flex; min-height: 48px; align-items: center; font-weight: 700; }
.site-footer__h { color: #fff; font-weight: 800; margin-bottom: 8px; }
.site-footer p + p { margin-top: 8px; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; color: #fff; text-underline-offset: 3px; }
.site-footer__meta { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--night-3); font-size: .9375rem; display: grid; gap: 8px; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1.2fr 1fr 1fr; } }

/* ---------- v3: Vergleich „Selbst zur Zulassungsstelle“ gegen „Mit Zulassungsheld“ (nur belegte Fakten, Quelle darunter) ---------- */
.compare { margin-top: clamp(48px, 7vw, 88px); }
.compare__title {
  font-family: var(--font-wide); font-stretch: 108%; font-weight: 800; font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem);
  line-height: 1.1; letter-spacing: -.02em; margin-bottom: 18px; max-width: 30ch; text-wrap: balance;
}
.compare__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.compare__col { padding: 22px 20px; border-radius: var(--radius-card); border: 2px solid var(--line); background: #fff; }
.compare__col--zh { border-color: var(--night); background: var(--night); color: #fff; }
.compare__head { font-weight: 800; font-size: 1.125rem; margin-bottom: 12px; }
.compare__list { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; color: var(--ink-soft); }
.compare__list li::marker { font-weight: 800; color: var(--muted); }
.compare__col--zh .compare__list { color: #e6e9f2; }
.compare__col--zh .compare__list li::marker { color: var(--yellow); }
.compare__src { margin-top: 14px; font-size: .875rem; color: var(--muted); max-width: 90ch; }
@media (min-width: 768px) {
  .compare__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .compare__col { padding: 28px 30px; }
}

/* ---------- v3: Wer kommt zu Ihnen? (Foto folgt, kein KI-Gesicht) ---------- */
.person {
  margin-top: 20px; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px 18px; align-items: start;
  padding: 20px; border-radius: var(--radius-card); background: #fff; border: 2px solid var(--line);
}
.person__photo {
  width: 88px; height: 88px; border-radius: 18px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 4px;
  background: var(--mist); border: 2px dashed #b9c2d3; color: var(--night); text-align: center;
}
.person__photo .icon { width: 24px; height: 24px; }
.person__photo .tbc { font-size: .6875rem; line-height: 1.2; padding: 0 .2em; }
.person__title { font-weight: 700; color: var(--muted); font-size: .9375rem; line-height: 1.55; letter-spacing: normal; text-wrap: pretty; } /* seit 06.10. H3: Werte wie vorher als <p> */
.person__name { margin: 2px 0 6px; font-family: var(--font-wide); font-stretch: 106%; font-weight: 800; font-size: 1.375rem; line-height: 1.15; letter-spacing: -.02em; }
.person__text p:last-child { color: var(--ink-soft); }
.person__quote { grid-column: 1 / -1; display: grid; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--yellow-soft); }
.person__quote blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.person__quote figcaption { font-size: .875rem; color: var(--muted); }
.person__quote figcaption strong { color: var(--night); }
@media (max-width: 899px) {
  /* mobil: Foto neben Frage und Name, Text und Zitat darunter in voller Breite */
  .person { grid-template-columns: 80px minmax(0, 1fr); gap: 0 16px; align-items: center; }
  .person__text { display: contents; }
  .person__photo { grid-row: 1 / span 2; width: 80px; height: 80px; }
  .person__photo .tbc { max-width: 70px; }
  .person__title { grid-column: 2; align-self: end; }
  .person__name { grid-column: 2; align-self: start; margin-bottom: 0; }
  .person__text p:last-child { grid-column: 1 / -1; margin-top: 14px; }
  .person__quote { margin-top: 16px; }
}
@media (min-width: 900px) {
  .person { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; padding: 28px; align-items: center; }
  .person__photo { width: 120px; height: 120px; }
  .person__photo .tbc { font-size: .8125rem; }
  .person__quote { grid-column: auto; padding: 20px 22px; }
}

/* ---------- v3: kurze Aufforderung nach großen Info-Blöcken (ehrlich, ohne Antwortzeit) ---------- */
.nudge {
  margin-top: 24px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; align-items: center;
  padding: 16px 18px; border-radius: 18px; background: var(--yellow-soft); border: 1px solid #f0d78a;
}
.nudge__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--yellow); color: var(--night); }
.nudge__icon .icon { width: 24px; height: 24px; }
.nudge__text { font-size: 1.0625rem; line-height: 1.4; color: var(--night); }
.nudge__btn { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .nudge { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 18px 22px; gap: 18px; }
  .nudge__btn { grid-column: auto; }
}

/* ---------- v3: Erreichbarkeit nach Berliner Uhrzeit (ohne JavaScript statischer Text) ---------- */
.avail {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.35;
}
.avail__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted-night); }
.avail.is-open .avail__dot { background: var(--wa); box-shadow: 0 0 0 4px rgba(37, 211, 102, .22); }
.avail.is-closed .avail__dot { background: var(--yellow); }

/* ---------- v3: DIN-CERTCO-Siegel (echtes Zeichen, immer mit Registernummer) ---------- */
.din-seal {
  margin-top: 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: center;
  padding: 20px 22px; border-radius: var(--radius-card); background: #fff;
  box-shadow: 0 1px 0 var(--line), inset 0 0 0 1px rgba(0, 6, 25, .06), inset 4px 0 0 var(--yellow);
}
.din-seal__title { font-family: var(--font-wide); font-stretch: 106%; font-weight: 800; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.015em; }
.din-seal__meta { margin-top: 4px; font-size: .875rem; font-weight: 700; letter-spacing: .01em; color: var(--muted); font-variant-numeric: tabular-nums; }
.din-seal__lead { margin-top: 8px; color: var(--ink-soft); }
@media (max-width: 479px) { .din-seal { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) {
  .din-seal { padding: 24px 30px; gap: 26px; }
  .din-seal .din-mark img { width: 76px; }
}
/* Fuß: helle Plakette auf Nachtblau (das Zeichen ist schwarz) */
.din-badge {
  display: flex; align-items: center; gap: 12px; max-width: 360px; margin-top: 16px; padding: 10px 14px; border-radius: 14px;
  background: #fff; color: var(--night); font-size: .875rem; font-weight: 700; line-height: 1.35;
}

/* ---------- Bewegung (v3): ruhig, zeitbasiert, in Chrome, Safari und Firefox gleich ----------
   Ursache „am PC keine Animationen“ und Messung: README, Abschnitt „Bewegung“.
   Grundzustand ist immer sichtbar. Den Vorzustand (.rv, .draw) setzt main.js nur für Elemente, die beim Laden unter dem Fenster
   liegen, und nimmt ihn beim ersten Erscheinen wieder weg (IntersectionObserver, dazu ein Sicherheitsnetz nach dem Scrollen und vor dem Drucken).
   Animiert werden nur opacity, transform und stroke-dashoffset. Bei „Bewegung reduzieren“ setzt main.js nichts, und das CSS greift nicht. */
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--rv-d, 0ms); }
  .rv:not(.is-in) { opacity: 0; transform: translate(0, 24px); } /* 0 statt leicht transparent: Prüfwerkzeuge werten halbtransparenten Text als Kontrastfehler */
  /* Endzustand mit Transformation statt „none“: Ein Wechsel zwischen „none“ und einer Transformation macht das Element zum
     Bezugsrahmen und kostet je Element einen Layout-Lauf. Nach dem Reveal setzt main.js .rv-fin (gleiche Transformation, eigene Übergänge). */
  .rv.is-in, .rv-fin { transform: translate(0, 0); }
  .rv.guide--point:not(.is-in) { opacity: 0; transform: translate(-48px, 24px) rotate(-5deg); }
  .rv.guide--present:not(.is-in) { opacity: 0; transform: translate(0, 48px); }
  .rv.guide--phone:not(.is-in) { opacity: 0; transform: translate(0, 32px); }
  .rv.guide--fly { transition-duration: 1.2s, 1.6s; }
  .rv.guide--fly:not(.is-in) { opacity: 0; transform: translate(22vw, -32px) rotate(-6deg); }
  /* Skyline zeichnet sich (pathLength = 1 an den beiden Pfaden; stroke-dash* erbt in den <use>-Baum) */
  .skyline.draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.45, .05, .25, 1); transition-delay: var(--rv-d, 0ms); }
  .skyline.draw.is-in { stroke-dashoffset: 0; }

  /* Bühnenbild am Desktop: sehr dezente Parallaxe und Skalierung über die erste Bildschirmhöhe. Beim Laden (Scroll 0) unverändert,
     also kein Einfluss auf LCP. Rahmen, Foto und Umhang-Freisteller bewegen sich gemeinsam und bleiben deckungsgleich. */
  @media (min-width: 900px) {
    @supports (animation-timeline: scroll()) {
      .stage__media { animation: stage-drift linear both; animation-timeline: scroll(root block); animation-range: 0px 900px; }
      .stage__photo img, .stage__spill img { animation: stage-zoom linear both; animation-timeline: scroll(root block); animation-range: 0px 900px; }
    }
    /* Rückfall ohne scroll(): main.js setzt --sp (0–1), dieselben Keyframes laufen angehalten */
    .sp-js .stage__media, .sp-js .stage__photo img, .sp-js .stage__spill img {
      animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; animation-play-state: paused;
      animation-delay: calc(var(--sp, 0) * -1s); animation-timeline: auto; animation-range: normal;
    }
    .sp-js .stage__media { animation-name: stage-drift; }
    .sp-js .stage__photo img, .sp-js .stage__spill img { animation-name: stage-zoom; }
  }
}
@keyframes stage-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 44px, 0); } }
@keyframes stage-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .way, .way::after, .way__cta, .tile__link, .tile::after, .tile__media img, .opt span, .finder__q, .way__more summary .icon, .qa summary .icon { transition: none !important; }
  .way:hover, .way__cta:hover, .tile__link:hover, .tile__link:hover .tile__media img { transform: none !important; }
}
@media print {
  .rv { opacity: 1 !important; transform: none !important; }
  .skyline.draw { stroke-dasharray: none !important; }
}

/* ---------- 2. Leistungsseiten (aus dem Prototyp „Auto ummelden“) ---------- */
/* =====================================================================================================
   LEISTUNGSSEITE (Vorlage C2) – Prototyp „Auto ummelden“ (P04), Stand 04.10.2026.
   Seitenspezifische Teile: Fall-Weiche, Antwortblock, Unterlagen-Checkliste mit Haken, Weg-Karten A/B/C mit Kennzeichen-Flip,
   Zeitstrahl, Zusagen, Kosten, Fließtext-Abschnitte, FAQ-Akkordeon, Fußnoten und Quellenblock, Kontaktbox C4.
   Alles darüber ist unverändert aus startseite-v2/styles.css übernommen.
   Interaktion sparsam: seit dem v3-Feedback nur dezente Reveals wie in startseite-v3 (siehe Abschnitt „Bewegung“); früher:
   die Skyline der Nacht-Abschnitte steht still. Bewegung nur beim Kennzeichen-Flip der Weg-Karten.
   ===================================================================================================== */
.leistung .night .skyline { animation: none; }

.section--compact { padding-block: clamp(48px, 7vw, 104px); }
.section-head--sub { max-width: 820px; }
.section-head--sub p { color: var(--ink-soft); font-size: 1.125rem; line-height: 1.6; }
.leistung h3 { font-family: var(--font-wide); font-stretch: 104%; font-size: 1.3125rem; letter-spacing: -.015em; line-height: 1.2; }

/* Fußnoten: hochgestellt, führen zu „Quellen und Stand“ */
sup.fn { font-size: .7em; line-height: 0; vertical-align: super; }
sup.fn a { padding: 0 .12em; color: var(--red-ink); font-weight: 700; text-decoration: none; }
sup.fn a:hover, sup.fn a:focus-visible { text-decoration: underline; }
.night sup.fn a { color: var(--yellow); }

/* Platzhalter-Marken auf hellem Gelb lesbar halten */
.tbc { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- B2: Fall-Weiche und Antwortblock ---------- */
.switch { padding-block: 28px clamp(48px, 7vw, 88px); }
.switch__title { font-family: var(--font-wide); font-stretch: 108%; font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; }
.chips { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* ungerade Anzahl im 2er-Raster: letzte Kachel über die volle Breite statt Loch rechts daneben */
@media (max-width: 767px) { .chips:not(.chips--drei) > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.chip {
  display: flex; align-items: center; gap: 10px; height: 100%; min-height: 60px; padding: 6px 10px 6px 0; overflow: hidden;
  border: 2px solid var(--night); border-radius: 10px; background: #fff; color: var(--night);
  font-weight: 700; font-size: .9375rem; line-height: 1.2; text-decoration: none;
  box-shadow: inset 0 0 0 2px #fff, 0 8px 16px -14px rgba(0, 6, 25, .7);
  transition: transform .18s var(--ease-out), box-shadow .18s;
}
.chip__band { align-self: stretch; width: 12px; margin: -6px 0; background: var(--eu); flex: none; }
.chip__txt { flex: 1; min-width: 0; }
.chip__sub { display: block; margin-top: 3px; font-weight: 600; font-size: .8125rem; color: var(--muted); }
.chip__icon { width: 18px; height: 18px; color: var(--red-ink); }
.chip--page { background: var(--mist); }
.chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #fff, 0 14px 22px -14px rgba(0, 6, 25, .7); }
.chip:active { transform: scale(.97); transition-duration: .06s; }
.chips__pair { display: grid; gap: 0; align-content: start; }
.chips__pair .chip { height: auto; }
.chip__also { display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; font-size: .875rem; color: var(--muted); padding-left: 2px; }
.chip__also a { display: inline-flex; align-items: center; min-height: 48px; color: var(--night); font-weight: 700; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } .chip:hover, .chip:active { transform: none; } }

.answer {
  margin-top: 22px; max-width: 72ch; padding: 18px 18px 18px 20px; border-left: 5px solid var(--yellow); border-radius: 0 18px 18px 0;
  background: var(--mist); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft);
}
.answer a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.ausweg { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; max-width: 72ch; font-size: 1.0625rem; line-height: 1.6; }
.ausweg > .icon { width: 22px; height: 22px; margin-top: 3px; color: var(--red-ink); }
.ausweg__link, .wa-inline { color: var(--wa-ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 768px) {
  .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1040px; }
  .chip { font-size: 1rem; min-height: 64px; }
}

/* ---------- B3: Unterlagen-Checkliste mit Haken ---------- */
.docs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.docs__card { padding: 22px 18px 18px; border-radius: var(--radius-card); background: #fff; box-shadow: 0 1px 0 var(--line), 0 24px 40px -36px rgba(0, 6, 25, .6); }
.docs__card h3 { margin-bottom: 14px; }
.docs__card--plain { background: transparent; box-shadow: none; padding: 0; }
.docs__card--plain h3 { margin-bottom: 8px; }
.docs__card--plain p { color: var(--ink-soft); }
.checklist { list-style: none; padding: 0; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.4; }
.checklist .icon { width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: var(--yellow); color: var(--night); }
.checklist__if .icon { background: #fff; box-shadow: inset 0 0 0 2px var(--yellow); }
.checklist__if span { color: var(--ink-soft); }
.docs__note { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-weight: 600; }
.docs__side { display: grid; gap: 18px; align-content: start; }
.sign { padding: 16px; border-radius: 16px; background: var(--yellow-soft); }
.sign p { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; line-height: 1.5; }
.sign .icon { width: 24px; height: 24px; color: var(--night); margin-top: 1px; }
.docs__cta { width: 100%; }
.checked { display: flex; gap: 8px; align-items: flex-start; font-size: .9375rem; color: var(--muted); }
.checked .icon { width: 20px; height: 20px; color: var(--red-ink); margin-top: 1px; }
.docs__figure { margin-top: 26px; }
.docs__figure img, .flow__figure img { width: 100%; aspect-ratio: 800 / 448; object-fit: cover; border-radius: var(--radius-card); }
.docs__figure figcaption, .flow__figure figcaption { margin-top: 10px; font-size: .9375rem; color: var(--muted); }
@media (min-width: 900px) {
  .docs__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: start; }
  .docs__card { padding: 30px 30px 26px; }
  .docs__cta { width: auto; justify-self: start; }
  .docs__figure { max-width: 860px; }
}

/* ---------- B4: Weg-Karten A/B/C mit Kennzeichen-Flip ---------- */
.ways--sub { padding-block: clamp(118px, 13vw, 170px) clamp(56px, 8vw, 104px); }
.questions { list-style: none; padding: 0; display: grid; gap: 12px; max-width: 860px; }
.questions li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; color: #e6e9f2; line-height: 1.55; }
.questions strong { color: #fff; }
.questions__num {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--yellow); color: var(--night); font-weight: 800; font-family: var(--font-wide);
}
.questions__rest { margin-top: 14px; margin-bottom: clamp(28px, 4vw, 44px); color: var(--muted-night); font-size: 1.0625rem; }
.way--sub { padding: 20px 20px 20px; gap: 14px; }
.way__top { display: flex; align-items: center; gap: 12px; }
.way__top .flip { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.way__price { font-weight: 800; color: var(--yellow); font-size: 1.125rem; line-height: 1.35; }
.way--sub h3 { font-size: 1.375rem; color: #fff; }
.way--sub .way__fit { color: var(--muted-night); }
.way--sub .way__more { border-top: 1px solid var(--night-3); }
.way--sub .way__more p { color: #e6e9f2; margin-top: 6px; }
.way--sub .way__more p + p { margin-top: 10px; }
.way--sub .way__more a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.way--sub .way__cta { margin-top: auto; }
.way--sub .plate--way .plate__txt { min-width: 1.6em; }
.unsure--sub, .ways--sub .unsure { grid-template-columns: 52px minmax(0, 1fr); }
.ways--sub .unsure p { line-height: 1.55; font-weight: 600; }
@media (min-width: 1024px) {
  .ways--sub .ways__grid { align-items: stretch; }
  /* am Desktop stehen die Einzelheiten offen (main.js setzt open); der Schalter wird dann nicht gebraucht */
  .js .way--sub .way__more > summary { display: none; }
  .js .way--sub .way__more { border-top: 0; }
}
@media (min-width: 900px) {
  .ways--sub .unsure { grid-template-columns: 56px minmax(0, 1fr) auto; }
}

/* ---------- B5: Zeitstrahl „Was bekommen Sie wann?“ ---------- */
.flow__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.timeline { list-style: none; padding: 0; position: relative; display: grid; gap: 4px; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 40px; bottom: -14px; border-left: 3px dashed var(--red); }
.timeline li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; }
.timeline .plate { position: relative; z-index: 1; --h: 40px; justify-self: start; }
.timeline p { padding-top: 7px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); }
.flow__side { display: grid; gap: 18px; align-content: start; }
.flow__online { padding: 16px 18px; border-radius: 16px; background: var(--mist); color: var(--ink-soft); }
.flow__online a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-row .btn { flex: 1 1 auto; }
@media (min-width: 1024px) {
  .flow__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
  .flow__side { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Zusagen (H3 unter dem Ablauf) */
.promise--sub { margin-top: clamp(44px, 6vw, 80px); padding: 0; }
.promise__title { font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem) !important; max-width: 30ch; }
.promise__intro { margin-top: 12px; margin-bottom: 20px; max-width: 70ch; color: var(--ink-soft); font-size: 1.0625rem; }
.promise__h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--font-wide); font-stretch: 104%; font-size: 1.25rem; }
.promise__h .icon { flex: none; }
.promise__col--no .promise__h .icon { color: var(--muted); }

/* ---------- Kosten ---------- */
.cost__cols .promise__col h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1.25rem; }
.cost__cols li a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.cost__cols .promise__col--no { background: #fff; }
.cost__pay { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-top: 22px; max-width: 80ch; color: var(--ink-soft); line-height: 1.6; }
.cost__pay .icon { width: 24px; height: 24px; color: var(--red-ink); margin-top: 2px; }
.cost__pay a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }

/* ---------- Fließtext-Abschnitte (Dauer, Halterwechsel, Umzug nach Berlin, Häufige Fehler) ---------- */
/* .prose { max-width: 860px } steht nur noch im kritischen CSS (Lesespalte ab 1100 px hebt die Breite dort auf; hier würde die Regel sie zurücksetzen) */
.prose h2 { margin-bottom: 18px; }
.prose h3 { margin-top: 32px; margin-bottom: 10px; }
.prose p { color: var(--ink-soft); line-height: 1.65; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 14px; }
.prose__lead { font-size: 1.1875rem; color: var(--night) !important; }
.prose a { color: var(--night); font-weight: 600; text-underline-offset: 3px; }
.prose .wa-inline { color: var(--wa-ink); font-weight: 700; }
.hint-line { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--yellow-soft); color: #5a4300 !important; font-weight: 600; font-size: .9375rem; }
.dots { padding: 0; list-style: none; display: grid; gap: 10px; }
.dots li { position: relative; padding-left: 22px; color: var(--ink-soft); line-height: 1.55; }
.dots li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--red); }
.move__cta { margin-top: 22px; }
.errors__list { list-style: none; padding: 0; display: grid; gap: 10px; }
.errors__list li { padding: 14px 16px 14px 18px; border-radius: 14px; background: #fff; border-left: 4px solid var(--red); color: var(--ink-soft); line-height: 1.55; box-shadow: 0 1px 0 var(--line); }
.errors__list strong { color: var(--night); }
@media (max-width: 479px) { .move__cta { width: 100%; } }

/* ---------- FAQ-Akkordeon ---------- */
.faq--sub { background: #fff; }
.faq__narrow { max-width: 900px; }
.faq__narrow h2 { margin-bottom: 22px; }
.faq--sub .qa { background: var(--mist); box-shadow: none; }
.faq--sub .qa__a p { line-height: 1.6; }
.qa--tbc summary { font-weight: 600; }

/* ---------- Quellen und Stand ---------- */
.sources--sub { padding-block: 48px 64px; background: var(--mist); border-top: 0; }
.sources--sub .sources__title { font-family: var(--font-wide); font-stretch: 106%; font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: 14px; }
.sources__list { padding-left: 1.4em; display: grid; gap: 8px; font-size: .9375rem; color: var(--muted); line-height: 1.5; max-width: 90ch; }
.sources__list li { padding: 4px 6px; border-radius: 8px; scroll-margin-top: calc(var(--header-h) + 24px); }
.sources__list li:target { background: var(--yellow-soft); color: var(--night); }
.sources__list a { color: var(--night); text-underline-offset: 3px; }
.sources__own { margin-top: 18px; font-size: .9375rem; color: var(--muted); }
.reviewed { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; max-width: 90ch; border-radius: 14px; background: #fff; font-size: .9375rem; color: var(--ink-soft); line-height: 1.5; }
.reviewed .icon { width: 22px; height: 22px; color: var(--red-ink); flex: none; }
.reviewed a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }

/* ---------- C4: Kontaktbox am Seitenende ---------- */
.finale--sub { padding-block: clamp(150px, 16vw, 210px) clamp(48px, 6vw, 80px); }
.finale--sub .finale__title { font-size: clamp(2rem, 1rem + 4vw, 4.4rem); max-width: 18ch; font-stretch: 116%; }
.finale__mail { margin-top: 20px; color: var(--muted-night); }
.finale__mail a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.finale__also { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--night-3); color: var(--muted-night); }
.finale__also-label { display: block; color: #fff; font-weight: 800; margin-bottom: 2px; }
.finale__also a { display: inline-flex; align-items: center; min-height: 48px; color: #fff; font-weight: 600; text-underline-offset: 3px; }
.finale__also .sep { color: var(--muted-night); }
.sameday { margin-top: 18px; color: var(--muted-night); font-size: .9375rem; }
.sameday a { display: inline-flex; align-items: center; min-height: 48px; color: #fff; font-weight: 600; text-underline-offset: 3px; }
.sameday__label { display: table; margin-top: 2px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--night-3); color: var(--muted-night); font-size: .8125rem; }
@media (max-width: 767px) {
  .finale__also { display: flex; flex-direction: column; align-items: flex-start; }
  .finale__also .sep { display: none; }
}

/* ---------- 3. Ergänzungen des Grundgerüsts (04.10.2026) ----------
   Varianten ohne Platzhalter, Rechtstexte, Fehlerseite, einheitliche Fall-Weiche, kleine Korrekturen. */

/* „Wer kommt zu Ihnen?“ ohne Foto (Foto von Team oder Laden folgt, kein KI-Gesicht) */
.person--ohne-foto { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) {
  .person--ohne-foto .person__title, .person--ohne-foto .person__name { grid-column: 1 / -1; }
  .person--ohne-foto .person__name { margin-bottom: 0; }
}
@media (min-width: 900px) {
  .person--ohne-foto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

/* Laden ohne Foto (echtes Foto folgt, kein KI-Bild): Text über die ganze Breite, gut lesbare Zeilenlänge */
.shop__grid--ohne-foto { grid-template-columns: minmax(0, 1fr); }
.shop__grid--ohne-foto .shop__info { max-width: 820px; }
@media (min-width: 900px) { .shop__grid--ohne-foto { grid-template-columns: minmax(0, 1fr); } }

/* Bewertungszeile ohne bestätigten Profil-Link: reiner Text, nicht wie ein Link unterstrichen */
.rating--text .rating__text { text-decoration: none; }
p.rating { margin: 0; }

/* Große „5,0“: Die Unterlänge des Kommas darf die Sterne nicht berühren (Desktop) */
@media (min-width: 900px) { .score__stars { margin-top: clamp(10px, 2.4vw, 40px); } }

/* Fall-Weiche: alle Karten gleich (auch Karten mit Unterzeile oder Link auf eine andere Seite) */
.chip__sub { display: block; margin-top: 3px; font-weight: 600; font-size: .8125rem; color: var(--muted); }
span.chip { cursor: default; }

/* Rechtstexte (Impressum, Datenschutz, AGB): ruhig, gut lesbar, keine Werbelinks */
.rechtstext-seite { padding-block: 24px clamp(56px, 8vw, 104px); }
.rechtstext-wrap { max-width: 860px; }
.rechtstext__h1 {
  margin: 18px 0 24px; font-family: var(--font-wide); font-stretch: 108%; font-weight: 800;
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.2rem); line-height: 1.05; letter-spacing: -.03em;
  -webkit-hyphens: auto; hyphens: auto;
}
.rechtstext { color: var(--ink-soft); line-height: 1.65; }
.rechtstext h2, .rechtstext h3, .rechtstext h4 {
  margin: 32px 0 10px; color: var(--night); font-family: var(--font); font-stretch: 100%;
  font-size: 1.375rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em;
}
.rechtstext h3, .rechtstext h4 { font-size: 1.1875rem; }
.rechtstext p, .rechtstext ul, .rechtstext ol { margin: 0 0 14px; }
.rechtstext ul, .rechtstext ol { padding-left: 1.3em; }
.rechtstext li + li { margin-top: 6px; }
.rechtstext a { color: var(--night); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rechtstext strong, .rechtstext b { color: var(--night); }

/* Fehlerseite (404): Überschrift, Anliegen-Leiste wie auf der Startseite, Tasten, Motiv 34 */
.fehler { padding-block: 28px clamp(56px, 8vw, 104px); }
.fehler__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.fehler__h1 {
  font-family: var(--font-wide); font-stretch: 108%; font-weight: 800;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.8rem); line-height: 1.02; letter-spacing: -.03em;
}
.fehler__text { margin-top: 14px; font-size: 1.125rem; color: var(--ink-soft); max-width: 46ch; }
.fehler__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fehler__bild img { width: 100%; height: auto; border-radius: var(--radius-card); }
.fehler .tasks { margin-top: 28px; padding-inline: 0; }
@media (min-width: 900px) { .fehler__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }

/* === Paket C: neue Leistungsseiten (Wunschkennzeichen P07, Hol- und Bringservice P17, Anhänger/Wohnmobil/Lkw P33, Umweltplakette P38) === */
/* Zwei Weg-Karten statt drei: keine leere dritte Spalte */
@media (min-width: 1024px) { .ways__grid--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; } }
/* Hinweissatz unter den Weg-Karten (Nacht-Abschnitt) */
.ways__hint { margin-top: 22px; max-width: 72ch; color: var(--muted-night); font-size: 1.0625rem; line-height: 1.6; }
.ways__hint a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
/* Kosten als Haken-Liste mit Fließtext darunter */
.cost__box { max-width: 860px; padding: 20px 18px; border-radius: var(--radius-card); background: #fff; box-shadow: 0 1px 0 var(--line); }
.cost__box .checks li { line-height: 1.45; }
.cost__box a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.cost__text { margin-top: 18px; }
@media (min-width: 768px) { .cost__box { padding: 26px 28px; } }
/* Antwortkacheln mit Sprungmarken (Fall-Weiche als „Das Wichtigste vorab“): lange Unterzeilen, mobil einspaltig */
.vorab .chip__sub { font-size: .8125rem; line-height: 1.35; }
@media (max-width: 599px) { .vorab .chips { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 600px) and (max-width: 767px) { .vorab .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Zeitstrahl mit kleinem Bild je Schritt (bausteine/schritte-bilder.njk) */
.timeline--bilder li { padding-bottom: 14px; }
.timeline__fig { margin-top: 10px; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: center; }
.timeline__fig img { width: 100%; height: auto; aspect-ratio: 800 / 446; object-fit: cover; border-radius: 12px; }
.timeline__fig figcaption { font-size: .875rem; line-height: 1.45; color: var(--muted); }
@media (min-width: 1024px) { .timeline__fig { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; } }
/* Kernantwort direkt unter der Bühne (ohne Fall-Weiche) */
.kernantwort { padding-top: 8px; padding-bottom: 8px; }
.kernantwort .answer { margin-top: 0; }
.kernantwort .answer a { white-space: nowrap; }
/* „Welcher Weg passt?“ ohne Weg-Karten (nur Weg C bestätigt): Einleitungssatz, Zwischenüberschrift, Zusagen daneben */
.flow__lead { max-width: 72ch; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; }
.flow__lead a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.flow__h3 { margin: 28px 0 12px; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); scroll-margin-top: calc(var(--header-h) + 16px); }
.promise--side { margin-top: 10px; }
.promise--side .promise__title { font-size: 1.25rem !important; margin-bottom: 4px; }
.promise--side .promise__cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* Aufklappbare Blöcke („> Aufklappbar“ im Seitentext) im Stil der FAQ-Fragen */
.aufklapp { margin-top: 16px; }
.aufklapp .qa { background: var(--mist); box-shadow: none; }
.section--mist .aufklapp .qa { background: #fff; }
.aufklapp .qa__a p { line-height: 1.6; }
/* Preistabelle ohne freigegebene Beträge und Kennzeichen-Block unter den Kosten */
.cost__table { margin-top: 4px; max-width: 860px; background: #fff; }
.cost__table .text-link { font-weight: 700; }
.cost__plates { margin-top: clamp(32px, 5vw, 56px); max-width: 860px; }
.cost__plates h3 { margin-bottom: 14px; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); scroll-margin-top: calc(var(--header-h) + 16px); }
.cost__plates p { margin-top: 14px; color: var(--ink-soft); line-height: 1.6; }
.cost__plates a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 768px) { .vorab--drei .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; } }
/* Laden-Bühne (bausteine/buehne-laden.njk): Ladenzeile mit Symbol und Taste „Route planen“ auch mobil */
.stage__shop { display: flex; gap: 6px; align-items: flex-start; }
.stage__shop .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--red-ink); }
.stage__shop a { color: var(--ink-soft); font-weight: 600; text-underline-offset: 3px; }
.stage__route { margin-top: 4px; }
.stage__route .btn { min-height: 48px; }
/* Zwei kurze Weg-Karten ohne Bild (z. B. „Im Laden“ / „Mit Ihrer Zulassung“) */
.karten2 { display: grid; gap: 14px; max-width: 980px; margin-bottom: 28px; }
.karten2 .docs__card { background: var(--mist); box-shadow: none; }
.karten2 p { color: var(--ink-soft); line-height: 1.6; }
.karten2 strong { color: var(--night); }
@media (min-width: 768px) { .karten2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flow__grid--kurz .flow__side { align-content: start; }
.flow__grid--kurz .cost__pay { margin-top: 0; }
/* === Paket A: Leistungsseiten (Abstände für Tasten unter Karten und Zeitstrahl) === */
.paket-a__cta { margin-top: 24px; }
.docs__card .timeline + .btn { margin-top: 16px; }
/* Antwortkacheln mit langer Unterzeile: mobil sauber trennen statt mitten im Wort umbrechen */
.leistung .chip__txt { -webkit-hyphens: auto; hyphens: auto; }
/* Zwei Varianten-Karten (Kurzzeitkennzeichen): am Desktop zwei Spalten statt einer leeren dritten */
@media (min-width: 768px) { .ways__grid--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
/* Hinweiskasten im Ablauf auf grauem Abschnitt sichtbar halten */
.section--mist .flow__online { background: #fff; }
/* Antwortblock mit zwei Absätzen; aufklappbare Zusatzinfos in Fließtext-Abschnitten */
.answer p + p { margin-top: 10px; }
.papiere__mehr { margin-top: 18px; }
.prose .qa summary { color: var(--night); }
/* Lange Amtsbegriffe in Überschriften (z. B. „Zulassungsbescheinigung“) mobil trennen statt mitten im Wort umbrechen */
@media (max-width: 599px) { .leistung main h2, .leistung main h3, main h1, .finale__title, .rechtstext-seite h2 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } }

/* === Paket D: Gebiets- und Standortseiten (Reinickendorf, Einsatzgebiet, Oberhavel, Potsdam), 04.10.2026 ===
   Bausteine buehne-gebiet.njk, tabelle.njk und linkzeile.njk (WhatsApp-Zählfelder: knoepfe.njk); Seiten in src/seiten/gebiet/.
   Mobil steht die Bühne allein mit dem kritischen CSS (keine Verschiebung beim Nachladen); die Bühnen-Regeln hier wirken erst ab 768 px. */

/* Laden ohne Foto: Telefonzeile in der Adresse, Hinweis vor dem Besuch */
.shop__phone { display: block; margin-top: 8px; font-weight: 600; font-size: 1rem; }
.shop__phone a { font-weight: 800; white-space: nowrap; text-underline-offset: 3px; }
.shop__hint { margin-top: 16px; }

/* Fließtext-Ergänzungen: Aufzählung mit fetten Einstiegen, aufklappbarer Block (<details>) im Fließtext */
.dots--weit { gap: 14px; }
.aufklapp { margin-top: 22px; }
.aufklapp .qa { background: var(--mist); box-shadow: none; }
.section--mist .aufklapp .qa { background: #fff; }
.aufklapp .qa__a .dots { margin-top: 2px; }

/* Datentabellen (Baustein tabelle.njk): mobil je Zeile eine Karte, ab 640 px eine normale Tabelle */
.data-table-wrap { margin-top: 24px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; color: var(--ink-soft); }
.data-table caption { caption-side: top; text-align: left; margin-bottom: 10px; font-weight: 700; color: var(--night); line-height: 1.35; }
.data-table a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.data-table tbody th { color: var(--night); font-weight: 700; text-align: left; }
@media (max-width: 639px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .data-table tbody, .data-table tr, .data-table tbody th, .data-table td { display: block; }
  .data-table tr { padding: 14px 16px; border-radius: 16px; background: var(--mist); }
  .section--mist .data-table tr { background: #fff; }
  .data-table tr + tr { margin-top: 10px; }
  .data-table tbody th { margin-bottom: 6px; font-size: 1.0625rem; }
  .data-table td { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 12px; padding: 3px 0; }
  .data-table td::before { content: attr(data-label); font-weight: 700; font-size: .875rem; line-height: 1.6; color: var(--muted); }
  /* Lange Wörter („Zulassungsbehörde“) passten bei 320 px nicht in die 108 px breite Wertspalte; das Dokument wurde breiter und die feste Anrufleiste ragte aus dem Bild (OA-58, 08.10.2026) */
  .data-table tbody th, .data-table td { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}
@media (min-width: 640px) {
  .data-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; overflow: hidden; }
  .data-table caption { padding: 16px 18px 4px; margin: 0; }
  .data-table th, .data-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
  .data-table thead th { font-size: .875rem; font-weight: 700; line-height: 1.35; color: var(--muted); background: var(--mist); }
  .data-table tbody tr:last-child > * { border-bottom: 0; }
}

/* Einsatzgebiet: Abschnittsbild, Satz unter der Umland-Tabelle, WhatsApp-Textlink je Bezirk */
.gebiet__figure { margin-top: 28px; }
.gebiet__frage { margin-top: 18px; }
.prose .gebiet__wa { margin-top: 4px; }
.prose .gebiet__wa a { color: var(--wa-ink); font-weight: 700; }

/* Gebietsseiten mit eigener Behörde (Oberhavel, Potsdam): Unterlagen-Karten mit Titelzeile statt H3, Block unter den Karten */
.docs__titel { margin-bottom: 14px; font-size: 1.125rem; line-height: 1.35; color: var(--night); }
.docs__unten { display: grid; gap: 16px; max-width: 860px; margin-top: 22px; color: var(--ink-soft); line-height: 1.6; }
.docs__unten .docs__cta { justify-self: start; }
@media (max-width: 479px) { .docs__unten .docs__cta { justify-self: stretch; } }
.prose .flow__online { margin-top: 16px; }
.docs__text { color: var(--ink-soft); line-height: 1.6; }
/* === Paket B: Übersichts-, Vertrauens- und Ratgeberseiten (Leistungen, Preise, Über uns, Kontakt, FAQ, Ratgeber, Formulare) ===
   Nur Ergänzungen mit eigenen Klassen; der erste Bildschirm nutzt die Bühnen-Klassen aus kritisch.css. */

/* Kopf ohne Bühnenbild (Baustein kopfSeite) */
.seitenkopf .stage__benefit { max-width: 60ch; }
.stage__more--ohne-linie { padding-top: 0; }
@media (min-width: 768px) { .seitenkopf__inner { padding-top: 22px; } }
@media (min-width: 900px) { .seitenkopf__inner { padding-top: clamp(20px, 3.5vh, 48px); } }

/* Kontakt: große Tasten auch mobil in der Bühne (Vorlage C10), Kontaktwege, Laden, Englisch */
@media (min-width: 900px) { .stage--kontakt .stage__deal > .btn { justify-self: start; min-width: 320px; } }
.kontaktwege { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 12px; }
.kontaktwege li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-soft); line-height: 1.55; }
.kontaktwege .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--red-ink); }
.kontaktwege a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.kontaktwege .wa-inline { color: var(--wa-ink); }
.shop__abgabe { margin-top: 14px; color: var(--ink-soft); }
.english__cta { margin-top: 22px; max-width: 860px; }
.ablauf__mehr { margin-top: 18px; color: var(--ink-soft); }
.ablauf__mehr a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.fakten__text { max-width: 75ch; }

/* Preise: Haken im Preisblock der Bühne, Preisliste mit vier Spalten (mobil gestapelt), Vergleichstabelle */
.preis__haken .icon { color: var(--night); }
.preis__enthalten { margin-block: 18px; }
.preisliste__caption { caption-side: top; padding: 14px 16px; text-align: left; font-weight: 700; color: var(--muted); background: #fff; border-bottom: 1px solid var(--line); }
.preisliste { background: #fff; }
.preisliste td { text-align: left; white-space: normal; font-weight: 400; font-size: .9375rem; color: var(--ink-soft); }
.preisliste tbody th { font-weight: 700; line-height: 1.4; }
.preisliste tbody th a { color: var(--night); text-underline-offset: 3px; }
.preisliste td.preisliste__preis { white-space: nowrap; font-weight: 800; font-size: 1.125rem; color: var(--night); }
.preisliste .is-main td.preisliste__preis { font-size: 1.25rem; }
.preisliste td.preisliste__preis--vorab { font-size: .9375rem; color: var(--muted); }
.preisliste .wa-inline { text-decoration-thickness: 1px; }
.preisliste__gruppe th { background: var(--mist); font-weight: 400 !important; color: var(--ink-soft); }
.preisliste__gruppe strong { color: var(--night); }
/* Kartenansicht der Preistabelle bis 799 px: bei 768–795 px wurde die Spalte „Per WhatsApp“ abgeschnitten (Abnahme Preise P7) */
@media (max-width: 799px) {
  .preisliste thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .preisliste, .preisliste tbody, .preisliste caption { display: block; width: 100%; }
  .preisliste tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .preisliste th, .preisliste td { display: block; padding: 0; border: 0 !important; }
  .preisliste tbody th { grid-column: 1; }
  .preisliste td.preisliste__preis { grid-column: 2; grid-row: 1; text-align: right; }
  .preisliste td.preisliste__preis--vorab { white-space: normal; max-width: 9em; }
  .preisliste td.preisliste__drin, .preisliste td.preisliste__wa { grid-column: 1 / -1; }
  .preisliste td.preisliste__drin:empty, .preisliste td.preisliste__drin.is-leer { display: none; }
  .preisliste__gruppe { grid-template-columns: minmax(0, 1fr) !important; }
}
.sparen__figure { margin-block: 26px 8px; max-width: 860px; }
.sparen__figure img { width: 100%; height: auto; border-radius: var(--radius-card); }
.sparen__figure figcaption { margin-top: 10px; font-size: .9375rem; color: var(--muted); }
.vergleichstabelle__wrap { margin-top: 18px; max-width: 1040px; background: #fff; }
.vergleichstabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.vergleichstabelle th, .vergleichstabelle td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.vergleichstabelle thead th { background: var(--mist); color: var(--night); font-weight: 800; }
.vergleichstabelle thead th:last-child, .vergleichstabelle td:last-child { background: var(--yellow-soft); color: var(--night); }
.vergleichstabelle tbody th { font-weight: 700; color: var(--night); width: 22%; }
.vergleichstabelle tr:last-child th, .vergleichstabelle tr:last-child td { border-bottom: 0; }
.preisliste .is-main td.preisliste__drin, .preisliste .is-main td.preisliste__wa { font-size: .9375rem; }
.preisliste thead th:last-child { text-align: left; }
@media (max-width: 767px) {
  .vergleichstabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vergleichstabelle, .vergleichstabelle tbody, .vergleichstabelle tr, .vergleichstabelle th, .vergleichstabelle td { display: block; width: auto !important; }
  .vergleichstabelle tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .vergleichstabelle tr:last-child { border-bottom: 0; }
  .vergleichstabelle th, .vergleichstabelle td { padding: 4px 0; border: 0; }
  .vergleichstabelle td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; }
  .vergleichstabelle td::before { content: attr(data-spalte); font-weight: 700; color: var(--muted); }
  .vergleichstabelle td:last-child { margin-inline: -8px; padding-inline: 8px; border-radius: 8px; }
}

/* Über uns: Erfahrungszeile im Kopf, aufklappbarer Kasten, Bewertungen ohne Kopfzeile des Startseiten-Bausteins */
.seitenkopf__erfahrung { color: var(--night); }
.seitenkopf .stage__cta { margin-top: 12px; }
.ueber__mehr { margin-top: 22px; background: #fff; }
.ueber__reviews { border-top: 0; }
.ueber__quotes { margin-top: 24px; }
.ueber__reviews .btn { margin-top: 18px; }
.ueber__reviews .quote figure { background: #fff; }

/* FAQ: Themen-Leiste im Kopf (Anliegen-Optik der Startseite), Bild unter dem Kopf, Themenblöcke, „Weitere Antworten“ */
.seitenkopf__themen { margin-top: 22px; }
.seitenkopf__themen .tasks__list { max-width: 1040px; }
@media (max-width: 599px) { .seitenkopf__themen .tasks__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.seitenbild { margin-top: 8px; }
.seitenbild figure { max-width: 860px; }
.seitenbild img { width: 100%; height: auto; border-radius: var(--radius-card); }
.fragen--mist { background: var(--mist); }
.fragen--mist .qa { background: #fff; }
.fragen__lead { margin-bottom: 20px; max-width: 70ch; font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); }
.weitere { margin-top: 22px; padding: 18px 20px; border-radius: 16px; border: 2px solid var(--line); background: #fff; }
.weitere__titel { font-weight: 800; margin-bottom: 8px; }
.weitere__liste { list-style: none; padding: 0; display: grid; gap: 6px; }
.weitere__liste li { display: grid; gap: 0; line-height: 1.45; color: var(--ink-soft); }
.weitere__ziele { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.weitere__frage { font-weight: 600; color: var(--night); }
.weitere__pfeil { color: var(--red-ink); }
.weitere__liste a { display: inline-flex; align-items: center; min-height: 44px; color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.weitere__liste .sep { color: var(--muted); }
.fragen__wa { margin-top: 18px; }
.fragen .text-link, .fragen__wa .text-link { display: inline-flex; align-items: center; gap: 6px; }
.fragen .text-link .icon { width: 20px; height: 20px; color: var(--wa-ink); }

/* Leistungen: Preisblock im Kopf, Anlass-Leiste, Kachelraster ohne Bild (Name als Link-Text, Kennzeichen-Band links) */
.leistungen__preis { max-width: 640px; }
.leistungsgruppe .section-head { margin-bottom: 22px; }
.raster { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.raster__kachel { display: grid; align-content: start; gap: 8px; }
.raster__link {
  display: flex; height: 100%; overflow: hidden; border: 2px solid var(--night); border-radius: 14px; background: #fff; color: var(--night);
  text-decoration: none; box-shadow: inset 0 0 0 2px #fff, 0 10px 20px -16px rgba(0, 6, 25, .6);
  transition: transform .18s var(--ease-out), box-shadow .18s;
}
a.raster__link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #fff, 0 16px 26px -16px rgba(0, 6, 25, .6); }
a.raster__link:active { transform: scale(.985); transition-duration: .06s; }
.raster__band { width: 12px; flex: none; background: var(--eu); }
.raster__body { display: grid; gap: 6px; padding: 14px 16px 16px; min-width: 0; }
.raster__name { font-weight: 800; font-size: 1.125rem; line-height: 1.25; }
a.raster__link .raster__name { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(0, 6, 25, .2); text-underline-offset: 4px; }
a.raster__link:hover .raster__name { text-decoration-color: var(--red); }
.raster__text { color: var(--ink-soft); font-size: .9375rem; line-height: 1.45; }
.raster__preis { margin-top: 2px; font-weight: 700; font-size: .9375rem; }
.raster__nachsatz { padding-left: 4px; font-size: .9375rem; color: var(--ink-soft); }
.raster__nachsatz a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.leistungen__ausweg { margin-top: 26px; }
@media (min-width: 640px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) {
  .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .raster__kachel--breit { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .raster__link { transition: none; } a.raster__link:hover, a.raster__link:active { transform: none; } }
@media (min-width: 1100px) { .tasks__list--anlass .task { white-space: normal; } }

/* === Paket A2: Leistungsseiten P10–P13 (Listenkopf in Unterlagen-Karten, kompakte Weg-Karte ohne H2, Fall-Weiche mit H2) === */
.docs__label { margin-bottom: 12px; color: var(--night); font-size: 1.0625rem; line-height: 1.35; }
.docs__label--next { margin-top: 24px; }
.wegkarte__card { border: 1px solid var(--line); }
.wegkarte__card p { color: var(--ink-soft); line-height: 1.6; }
.wegkarte__card strong { color: var(--night); }
.wegkarte__card .dots { margin-top: 12px; }
.wegkarte.section--compact { padding-block: clamp(36px, 4vw, 56px); }
@media (min-width: 900px) { .wegkarte__card, .wegkarte .unsure { max-width: 860px; } }
/* Fall-Weiche mit H2 (Baustein fallweiche.njk, fallWeicheH2): mobil drei Karten, Einleitung und H3-Unterabschnitte */
.chips--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips--drei .chip { padding-right: 6px; gap: 8px; }
@media (max-width: 479px) { .chips--drei .chip { font-size: .875rem; padding-right: 4px; } .chips--drei .chip__icon { display: none; } }
@media (min-width: 768px) { .chips--drei { max-width: 780px; } }
.switch__lead { margin-top: 20px; max-width: 72ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }
.switch__more { margin-top: 8px; }
/* Aufklappbare Zusagen unter einer H3 (Baustein faq.njk, frage); .aufklapp kommt aus dem Block „Paket C“ */
.zusagen-auf { margin-top: 18px; max-width: 860px; }
.zusagen-auf .qa { background: var(--mist); box-shadow: none; }
.zusagen-auf .qa__a .promise__cols { margin-top: 4px; }
/* H3-Unterabschnitt unter dem Zeitstrahl (z. B. „Oldtimer-Motorrad anmelden“) */
.flow .motorrad { margin-top: clamp(28px, 4vw, 48px); }
.flow .motorrad h3 { margin-top: 0; }
/* === Paket C2: neue Leistungsseiten (Motorrad P32, Firmen und Autohäuser P14, Zulassungsservice online P18, Kennzeichen kaufen und prägen P15) === */
/* Fall-Weiche mit fünf Fällen (P32): mobil zwei, Tablet drei, Desktop fünf Spalten */
@media (min-width: 768px) { .faelle-fuenf .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .faelle-fuenf .chips { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; } }
/* Aufklappbare Vertiefungen im Text („> Aufklappbar“ der Seitentexte, Baustein faq.njk) */
.mehr-details { margin-top: 22px; max-width: 860px; }
.mehr-details .qa { background: var(--mist); box-shadow: none; }
.section--mist .mehr-details .qa { background: #fff; }
.mehr-details .qa__a > p { line-height: 1.6; }
.mehr-details .promise__cols { margin-top: 4px; }
/* Zeitstrahl ohne Bildspalte, Tasten darunter */
.ablauf-schmal { max-width: 760px; }
.ablauf-schmal .cta-row { margin-top: 18px; }
@media (min-width: 600px) { .ablauf-schmal .cta-row .btn { flex: 0 1 auto; } }
/* „Unsicher?“-Kasten mit zwei Tasten (WhatsApp und E-Mail, P14) */
.unsure__tasten { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.unsure__tasten .btn { flex: 1 1 auto; }
@media (min-width: 900px) { .unsure__tasten { grid-column: auto; } .unsure__tasten .btn { flex: 0 1 auto; } }
/* Absatz nach einer aufklappbaren Vertiefung */
.prose .nach-details { margin-top: 18px; }
/* Zwei Weg-Karten (P18): Kartentitel als fetter Text statt H3 (Spezifikation), am Desktop zwei Spalten ohne leere dritte */
.way__titel { font-family: var(--font-wide); font-stretch: 106%; font-weight: 800; font-size: 1.375rem; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.way--sub .way__facts a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 1024px) { .ways__grid--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; } }
/* Ja/Nein-Liste als Tabelle (P18) */
.janein { margin-top: 22px; overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--line); background: #fff; }
.janein__tabelle { width: 100%; min-width: 340px; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.janein__tabelle th, .janein__tabelle td { padding: 12px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.janein__tabelle thead th { font-size: .8125rem; font-weight: 700; color: var(--muted); background: var(--mist); padding-block: 10px; }
.janein__tabelle tbody th { width: 42%; font-weight: 600; color: var(--night); }
.janein__tabelle td { color: var(--ink-soft); }
.janein__tabelle td a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.janein__tabelle tr:last-child th, .janein__tabelle tr:last-child td { border-bottom: 0; }
@media (max-width: 599px) { .janein__tabelle th, .janein__tabelle td { padding: 10px 8px; } .janein__tabelle { min-width: 0; font-size: .875rem; } }
@media (min-width: 600px) { .janein__tabelle tbody th { width: 50%; } .janein__tabelle td:nth-of-type(1) { white-space: nowrap; } }
@media (min-width: 768px) { .janein__tabelle { font-size: 1rem; } .janein__tabelle th, .janein__tabelle td { padding: 14px 16px; } }
.voraussetzungen__cta { margin-top: 14px; }
/* Einzelnes Kundenzitat mit Hinweis zu den Bewertungen (P18) */
.zitat-c2 { margin-top: 24px; max-width: 720px; }
.zitat-c2 .person__quote { padding: 18px 20px; }
.prose .zitat-c2__hinweis { margin-top: 8px; font-size: .875rem; color: var(--muted); }
/* Zwei Bewertungen auf Leistungsseiten (ABLAUF Nr. 75), z. B. Neuzulassung unter „Was wir zusagen“ */
.zitat-c2--zwei { display: grid; gap: 14px; max-width: none; margin-top: clamp(28px, 4vw, 44px); }
.zitat-c2__titel { font-size: 1.1875rem; }
.zitat-c2--zwei .zitat-c2__hinweis { font-size: .875rem; color: var(--muted); }
@media (min-width: 768px) { .zitat-c2--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zitat-c2--zwei .zitat-c2__titel, .zitat-c2--zwei .zitat-c2__hinweis { grid-column: 1 / -1; } }
.prose .voraussetzungen__cta + p { margin-top: 14px; }
/* Fußnoten im SameDay-Hinweis der Kontaktbox (P18): nicht wie die großen Tipp-Links der Zeile behandeln */
.sameday sup.fn a { display: inline; min-height: 0; padding: 0 .12em; }
@media (min-width: 600px) { .voraussetzungen__cta .btn { flex: 0 1 auto; } }
/* Bühne ohne Bild (P15: Laden und Prägung nur als echtes Foto, Motiv 20 ist ein Platzhalter): am Desktop Text links, Kasten rechts,
   keine leere Bildspalte. Gleiche Regel wie Block „Paket D“ (buehne-gebiet.njk); beim Zusammenführen einmal behalten. */
@media (min-width: 900px) {
  .stage--ohne-bild .stage__first {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-rows: auto;
    grid-template-areas: "text deal";
    align-items: end;
    min-height: 0;
    padding-bottom: clamp(20px, 3vh, 40px);
  }
  .stage--ohne-bild .stage__deal { padding-top: 0; }
}
/* Antwortkacheln mit Sprungmarken und langen Unterzeilen (P15): mobil einspaltig */
.vorab-c2 .chip__sub { font-size: .8125rem; line-height: 1.35; }
@media (max-width: 599px) { .vorab-c2 .chips { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) { .vorab-c2 .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
/* Drei Karten „Abholen, liefern, mit Zulassung“ (P15) */
.karten-c2 { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.karte-c2 { display: grid; gap: 8px; align-content: start; padding: 20px 18px; border-radius: var(--radius-card); background: var(--mist); color: var(--ink-soft); line-height: 1.55; }
.karte-c2 strong { color: var(--night); }
.karte-c2__titel { display: flex; align-items: center; gap: 10px; font-family: var(--font-wide); font-stretch: 104%; font-weight: 800; font-size: 1.1875rem; color: var(--night); }
.karte-c2__titel .icon { width: 22px; height: 22px; color: var(--red-ink); flex: none; }
.karte-c2 a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.karte-c2 .sep { color: var(--muted); }
.karten-c2__nach { margin-top: 18px; max-width: 72ch; color: var(--ink-soft); line-height: 1.6; }
.karten-c2__nach a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.karten-c2__nach .wa-inline { color: var(--wa-ink); }
@media (min-width: 900px) { .karten-c2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .karte-c2 { padding: 24px 22px; } }
/* Prägen: DIN-Karte und Text unter dem Zeitstrahl, Preistabelle mit Zahlungszeile */
.flow .din-seal { margin-top: 26px; max-width: 860px; }
.praegen-c2__text { margin-top: 18px; }
.praegen-c2__cta { margin-top: 20px; }
@media (min-width: 600px) { .praegen-c2__cta .btn { flex: 0 1 auto; } }
.kosten-c2 { max-width: 760px; }
/* === Paket F: englische Seiten (P34–P37, Welle W5) === */
/* Echtes Google-Zitat auf Deutsch mit gekennzeichneter eigener Übersetzung („Translated by us“) */
.en-quote { display: grid; gap: 8px; margin-top: 26px; padding: 18px 18px 16px; border-radius: 16px; background: var(--yellow-soft); }
.en-quote blockquote { margin: 0; }
.en-quote blockquote p, .prose .en-quote blockquote p { font-size: 1.0625rem; line-height: 1.5; color: var(--night); }
.en-quote figcaption { font-size: .875rem; color: var(--muted); }
.en-quote figcaption strong { color: var(--night); }
.en-quote p + p, .prose .en-quote p + p { margin-top: 0; }
.en-quote__translation, .prose .en-quote__translation { padding-top: 8px; border-top: 1px dashed rgba(90, 67, 0, .3); font-size: .9375rem; }
.en-quote__note, .prose .en-quote__note { margin-top: 10px; font-size: .875rem; color: var(--muted); }
.en-quote, .en-quote__note { max-width: 72ch; } /* Zitat außerhalb von .prose (P34): Zeilenlänge wie in der Lesespalte (Abnahme E-H2) */
@media (min-width: 768px) { .en-quote { padding: 20px 22px 18px; } }
/* Längerer Hinweis unter der Checkliste in normaler Schrift */
.docs__note.en-note { font-weight: 400; color: var(--ink-soft); line-height: 1.55; }
/* Satz zur Post-Zustellung unter den Weg-Karten (Nacht-Abschnitt) */
.en-ways-note { margin-top: 22px; max-width: 72ch; color: var(--muted-night); font-size: 1.0625rem; line-height: 1.6; }
/* Drei Kacheln statt vier (P37 ohne Kachel „Time“): mobil die dritte über die volle Breite */
@media (max-width: 767px) { .en-tiles .chips > li:nth-child(3):last-child { grid-column: 1 / -1; } }
/* Drei Möglichkeiten nebeneinander (P37 „Deregister your car yourself or with our help?“), unsere hervorgehoben */
.prose .en-options { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.en-options li { padding: 16px 18px; border-radius: 14px; background: var(--mist); color: var(--ink-soft); line-height: 1.55; }
.en-options strong { display: block; margin-bottom: 4px; color: var(--night); }
.en-options .en-options__ours { background: var(--yellow-soft); }
.prose .en-options + p { margin-top: 18px; }
@media (min-width: 768px) { .prose .en-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Zwei Ablauf-Karten (P37 „Step by step“) */
.en-steps2 { display: grid; gap: 18px; }
.en-steps2__note { margin-top: 20px; max-width: 72ch; color: var(--ink-soft); line-height: 1.6; }
.en-steps2__note + .cta-row { margin-top: 18px; max-width: 620px; }
@media (min-width: 768px) { .en-steps2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; } }
.en-steps2 .docs__card { background: var(--mist); box-shadow: none; }
/* „Who comes to you?“ unter den Zusagen (/en/) */
.en-who { margin-top: 20px; max-width: 72ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }
.en-who strong { color: var(--night); }
/* === Paket B2: Startseite (Volltext „Mehr dazu“), Ratgeber /blogs/ und Dauer-Ratgeber, Formulare (04.10.2026) === */

/* Startseite, ranking-tragender Text: Vertiefung je H3 zugeklappt (natives <details>, der Text steht im HTML) */
.seo__mehr { margin-top: 8px; }
.seo__mehr > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--night); text-decoration: underline; text-decoration-color: rgba(0, 6, 25, .3); text-underline-offset: 4px;
}
.seo__mehr > summary::-webkit-details-marker { display: none; }
.seo__mehr > summary .icon { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--mist); transition: transform .25s var(--ease-out); }
.seo__mehr[open] > summary .icon { transform: rotate(45deg); background: var(--yellow); }
.seo__mehr-text { display: grid; gap: 12px; padding-top: 2px; }
.seo__mehr-text .sep { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .seo__mehr > summary .icon { transition: none; } }

/* Ratgeber-Beitrag (Vorlage C8), Ratgeber-Übersicht und Formulare: Der Kopf nutzt nur Klassen aus dem kritischen CSS
   (wrap stage__more, stage__title, stage__benefit, trust, stage__cta); hier stehen nur Ergänzungen, die nichts verschieben,
   (Farben, Rundungen, Bildunterschrift). Das Bild hat seine Breite aus width/height (höchstens 800 px). */
.beitrag-kopf { padding-bottom: clamp(24px, 4vw, 48px); }
.beitrag-kopf .stage__cta { margin-bottom: 20px; }
.beitrag-kopf__bild img { border-radius: var(--radius-card); }
.beitrag-kopf__bild figcaption { margin-top: 10px; font-size: .9375rem; color: var(--muted); }

/* Tabelle „Dauer je Weg“: drei Spalten; mobil als Karten untereinander (Spaltenkopf als Zeilenbeschriftung) */
.dauer-tabelle { margin-top: 22px; background: #fff; }
.dauer-tabelle table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.dauer-tabelle caption { padding: 14px 16px 0; text-align: left; font-size: .875rem; font-weight: 600; color: var(--muted); }
.dauer-tabelle th, .dauer-tabelle td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.dauer-tabelle thead th { font-size: .875rem; font-weight: 700; color: var(--muted); background: var(--mist); padding-block: 12px; }
.dauer-tabelle tbody th { font-weight: 800; color: var(--night); }
.dauer-tabelle td { color: var(--ink-soft); }
.dauer-tabelle tr:last-child th, .dauer-tabelle tr:last-child td { border-bottom: 0; }
@media (max-width: 639px) {
  .dauer-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dauer-tabelle table, .dauer-tabelle caption, .dauer-tabelle tbody, .dauer-tabelle tr, .dauer-tabelle th, .dauer-tabelle td { display: block; }
  .dauer-tabelle tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .dauer-tabelle tr:last-child { border-bottom: 0; }
  .dauer-tabelle tbody th, .dauer-tabelle td { padding: 0; border: 0; }
  .dauer-tabelle td { margin-top: 8px; }
  .dauer-tabelle td::before { display: block; font-size: .8125rem; font-weight: 700; color: var(--muted); }
  .dauer-tabelle td:nth-of-type(1)::before { content: "Was passiert"; }
  .dauer-tabelle td:nth-of-type(2)::before { content: "Wann Sie es haben"; }
}
.prose .table-wrap + p { margin-top: 18px; }
.ratgeber .prose .checklist { margin-top: 18px; }
.ratgeber .prose .checklist li span { color: var(--ink-soft); line-height: 1.55; }
.ratgeber .prose .errors__list { margin-top: 18px; }

/* Ratgeber-Übersicht /blogs/: Kopf ohne Bild, Beitragsliste (Titel als Link, ein Satz, Datum, Autor) */
.beitragsliste { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 14px; }
.beitragsliste__eintrag { padding: 20px 22px; border-radius: var(--radius-card); background: #fff; box-shadow: 0 1px 0 var(--line); }
.beitragsliste__eintrag h3 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.25; }
.beitragsliste__eintrag h3 a { color: var(--night); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.beitragsliste__eintrag h3 a:hover { text-decoration-thickness: 3px; }
.beitragsliste__meta { margin-top: 10px; font-size: .9375rem; color: var(--muted) !important; }

/* Kasten „Behördenwissen“ unter dem letzten Handlungsaufruf (gekennzeichnet, Regelwerk J6) */
.sameday-kasten { padding-block: 32px 40px; background: var(--mist); }
.sameday-kasten .wrap > * { max-width: 860px; }
.sameday-kasten__titel { font-weight: 800; font-size: 1.125rem; color: var(--night); }
.sameday-kasten p { margin-top: 6px; color: var(--ink-soft); }
.sameday-kasten ul { list-style: none; padding: 0; margin-top: 6px; display: flex; flex-wrap: wrap; column-gap: 22px; }
.sameday-kasten a { display: inline-flex; align-items: center; min-height: 48px; color: var(--night); font-weight: 600; text-underline-offset: 3px; }
.sameday-kasten__label { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .8125rem; color: var(--muted) !important; }

/* Formulare /formulare/: Hinweis fett unter der H1, Ausweg als gelber Kasten mit zwei Tasten */
.formulare__ausweg { margin-top: 24px; max-width: 860px; }
.formulare__ausweg .unsure__text p + p { margin-top: 6px; line-height: 1.5; }
.formulare__tasten { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .formulare__ausweg { grid-template-columns: 56px minmax(0, 1fr); }
  .formulare__tasten { grid-column: 2 / -1; }
}

/* =====================================================================================================
   4. NACHTBLAU-RHYTHMUS (Variante B, 04.10.2026). Spezifikation: 07-bau/pruefung-2026-10-04/design-panel/b/SPEZIFIKATION.md
   Rhythmus je Seite: Bühne (weiß) → heller Abschnitt (weiß) → heller Abschnitt (Nebelgrau) → NACHTBAND → weiß → Nebelgrau → NACHTBAND …
   Das Nachtband (.section--night) trägt Zwischenbilanz, Zusage, Zitat oder Kontaktaufruf, hat die gelbe Linie oben und macht alle
   Bausteine darin nachtfähig. Dazu: Textmarker (.mark), Zahlen-Chips (plate--inline im Fließtext), Zeitstrahl mit EU-blauen Nummern,
   Symbol-Kacheln in Heldengelb. Nur :root-Farben, keine Verläufe; Bewegung nur bei „Bewegung reduzieren: nein“.
   Die Teile für den ersten Bildschirm (Kurz-Karte, Vertrauens-Kacheln, Lesespalte) stehen am Ende von kritisch.css.
   ===================================================================================================== */

/* ---------- 4a. Lesefreude auf Hell (die Lesespalte selbst steht im kritischen CSS) ---------- */
.section-head p { color: var(--ink-soft); }
.section-head--night p { color: var(--muted-night); } /* Nacht-Bühnen (.ways): die Zeile darüber machte die Einleitung dunkel auf Nacht */
.prose p { font-size: 1.0625rem; }
.prose__lead { font-size: 1.25rem; line-height: 1.5; font-weight: 500; }
@media (min-width: 768px) { .prose__lead { font-size: 1.3125rem; } }
/* Textmarker: ein wichtiger Satz je Abschnitt, gelbe Linie hinter der unteren Zeilenhälfte (kein Verlauf: innerer Schatten) */
.mark {
  box-shadow: inset 0 -.42em 0 var(--yellow); padding: 0 .1em; margin: 0 -.1em; border-radius: 2px; color: var(--night);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Zahlen-Chips im Fließtext: Kennzeichen (plate--inline) ohne die Zeile zu dehnen */
.prose .plate--inline, .fakten__text .plate--inline, .section-head .plate--inline {
  font-size: .9em; line-height: 1.3; vertical-align: -.08em; margin-inline: .05em;
}
/* Symbol-Kacheln in Heldengelb (statt roter Einzelsymbole) */
.kontaktwege .icon, .cost__pay .icon, .ausweg > .icon, .reviewed .icon, .prices__pay .icon, .shop__address .icon, .checked .icon, .sign .icon {
  width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--yellow); color: var(--night); margin-top: 0; flex: none;
}
.kontaktwege li, .cost__pay, .sign p { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.ausweg, .reviewed, .prices__pay, .shop__address { gap: 14px; align-items: flex-start; }
.ausweg > .icon, .shop__address .icon { margin-top: -2px; }
/* Zeitstrahl: Kennzeichen mit EU-blauer Nummer, ruhige blaue Linie statt roter Strichellinie */
.timeline .plate .plate__txt { color: var(--eu); }
.timeline li:not(:last-child)::before { border-left: 2px solid var(--eu); opacity: .4; }
/* Aufklappbare Fragen: Nebelgrau auf Weiß, Weiß auf Nebelgrau */
.qa { background: var(--mist); box-shadow: none; }
.section--mist .qa { background: #fff; }
/* Karten, die auf Nebelgrau sonst verschwinden */
.section--mist .post-note, .section--mist .prices__pay, .section--mist .flow__online { background: #fff; }
.section--mist.promise { padding-top: clamp(64px, 9vw, 128px); }
.tile__link, .more-services { box-shadow: 0 0 0 1px var(--line); }
.section-head--sub p { max-width: 68ch; }

/* ---------- 4b. Nachtband ---------- */
.section--night {
  position: relative; isolation: isolate; background: var(--night); color: #fff; border-top: 0;
}
.section--night::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--yellow); transform-origin: 0 50%; }
.section--night :focus-visible { outline-color: var(--yellow); }
/* Helle Inseln im Nachtband (gelber Kasten „Unsicher?“, Hinweise): gelber Ring wäre unsichtbar → nachtblauer Ring (SEO-Session, Barrierefreiheit) */
.night :is(.unsure, .nudge, .sign, .answer, .hint-line) :focus-visible, .section--night :is(.unsure, .nudge, .sign, .answer, .hint-line) :focus-visible { outline-color: var(--night); }
/* Einleitung der Nacht-Bühne „Welcher Weg passt?“ (.ways): 4a setzt .section-head p auf --ink-soft und überschrieb die Nachtfarbe */
.section-head--night p { color: var(--muted-night); }
.section--night h2, .section--night h3, .section--night .promise__title, .section--night .section-head h2 { color: #fff; }
.section--night .prose__lead, .section--night .fragen__lead { color: #fff !important; }
.section--night .prose p, .section--night .section-head p, .section--night .section-head--sub p, .section--night .fakten__text,
.section--night .dots li, .section--night .promise__intro, .section--night .timeline p, .section--night .docs__text, .section--night .flow__lead,
.section--night .reviews__note, .section--night .reviews__sub, .section--night .quote__more-text, .section--night .shop__info > p,
.section--night .shop__abgabe, .section--night .kontaktwege li, .section--night .ablauf__mehr, .section--night .more-links,
.section--night .sources__list, .section--night .sources__own, .section--night .checklist__if span, .section--night .docs__figure figcaption,
.section--night .flow__figure figcaption, .night .docs__figure figcaption { color: var(--muted-night); } /* .night: Wege-Band, Kundenfoto P36 (Abnahme E36-1) */
.section--night .prose strong, .section--night .dots strong, .section--night .fakten__text strong, .section--night .promise__intro strong,
.section--night .quote__meta strong, .section--night .kontaktwege strong, .section--night .shop__address, .section--night .weitere__frage,
.section--night .checks li, .section--night .checklist li, .section--night .docs__note, .section--night .timeline strong { color: #fff; }
.section--night a:not(.btn):not(.wa-inline):not(.ausweg__link):not(.text-link) { color: #fff; }
.section--night .wa-inline, .section--night .ausweg__link, .section--night .text-link, .section--night .more-links__wa { color: var(--wa); }
.section--night sup.fn a { color: var(--yellow); }
.section--night .mark { box-shadow: inset 0 -3px 0 var(--yellow); color: #fff; padding: 0; margin: 0; }
.section--night .dots li::before { background: var(--yellow); }
.section--night .checks .icon { background: var(--yellow); color: var(--night); }
.section--night .hint-line { background: var(--yellow); color: var(--night) !important; }
.section--night .plate--inline { box-shadow: 0 0 0 2px var(--night-3); }
/* Tasten: die dunkle Anruf-Taste wird hell */
.section--night .btn--call, .section--night .btn--outline { background: #fff; color: var(--night); border-color: #fff; box-shadow: 0 2px 0 rgba(255, 255, 255, .35); }
.section--night .btn--call:hover, .section--night .btn--outline:hover { background: var(--mist); }
.section--night .btn--call:focus-visible { outline-color: var(--yellow); box-shadow: none; }
/* Karten und Kästen auf Nachtblau */
.section--night .qa, .section--night .quote figure, .section--night .post-note, .section--night .person, .section--night .errors__list li,
.section--night .flow__online, .section--night .reviewed, .section--night .docs__card, .section--night .more-services, .section--night .din-seal,
.section--night .karte-c2, .section--night .cost__box, .section--night .weitere, .section--night .en-options li, .section--night .wegkarte__card,
.section--night .beitragsliste__eintrag { background: var(--night-2); color: #fff; box-shadow: none; border-color: var(--night-3); }
.section--night .qa summary { color: #fff; }
.section--night .qa summary .icon { background: var(--night-3); color: #fff; }
.section--night .qa[open] summary .icon { background: var(--yellow); color: var(--night); }
.section--night .qa__a, .section--night .qa__a p, .section--night .post-note figcaption, .section--night .person__text p:last-child,
.section--night .errors__list li, .section--night .flow__online, .section--night .reviewed, .section--night .karte-c2, .section--night .din-seal__lead,
.section--night .din-seal__meta, .section--night .weitere__liste li, .section--night .en-options li, .section--night .wegkarte__card p { color: var(--muted-night); }
/* DIN-Zeichen ist schwarz: auf der Nachtkarte eine helle Plakette wie im Fuß (.din-badge) */
.section--night .din-seal .din-mark { justify-self: start; padding: 8px; border-radius: 12px; background: #fff; }
.section--night .errors__list strong, .section--night .karte-c2 strong, .section--night .karte-c2__titel, .section--night .din-seal__title,
.section--night .wegkarte__card strong, .section--night .weitere__titel { color: #fff; }
.section--night .person__title { color: var(--muted-night); }
.section--night .person__name, .section--night .quote__text { color: #fff; }
.section--night .quote__meta { color: var(--muted-night); }
.section--night .quote__stars .stars, .section--night .score__stars, .section--night .quote--more { color: var(--yellow); }
.section--night .quote--more { border-color: var(--night-3); }
.section--night .quote__more-num, .section--night .score__num { color: #fff; }
.section--night .docs__note { border-color: var(--night-3); }
.section--night .timeline li:not(:last-child)::before { border-color: var(--yellow); opacity: .6; }
.section--night .more-services li { border-color: var(--night-3); }
.section--night .more-services__plain { color: var(--muted-night); }
.section--night .seo__cols > div, .section--night .brief__list { border-color: var(--night-3); }
/* Zusagen-Spalten: Gelb bleibt gelb (Nachtblau-Schrift), die „Amt“-Spalte wird eine Nachtkarte */
.section--night .promise__col--no { background: var(--night-2); border-color: var(--night-3); }
.section--night .promise__col--no li { color: var(--muted-night); }
.section--night .promise__col--no li::before { border-color: var(--muted-night); }
.section--night .promise__col--no h3 .icon, .section--night .promise__col--no .promise__h .icon { color: var(--yellow); }
.section--night .promise__col--yes, .section--night .promise__col--yes h3, .section--night .promise__col--yes strong, .section--night .promise__col--yes li { color: var(--night); }
/* Gelbe Inseln behalten Nachtblau-Schrift */
.section--night .unsure, .section--night .unsure p, .section--night .unsure .unsure__title, .section--night .nudge, .section--night .nudge__text,
.section--night .nudge strong, .section--night .person__quote, .section--night .person__quote p, .section--night .person__quote figcaption strong,
.section--night .sign, .section--night .sign strong, .section--night .en-quote, .section--night .en-quote p, .section--night .answer,
.section--night .answer a, .section--night .result, .section--night .result__title { color: var(--night); }
.section--night .person__quote figcaption, .section--night .en-quote figcaption { color: var(--muted); }
.section--night .en-quote strong { color: var(--night); } /* Name im Zitat: sonst greift „.section--night .prose strong“ (Weiß auf Gelb) */
.section--night .answer { background: var(--yellow-soft); }
/* Tabellen bleiben hell (eigene weiße Fläche) */
.section--night .table-wrap, .section--night .data-table-wrap, .section--night .janein, .section--night .dauer-tabelle { background: #fff; color: var(--night); border-color: var(--line); }
.section--night .table-wrap a, .section--night .data-table-wrap a, .section--night .janein a, .section--night .dauer-tabelle a, .section--night .table-wrap td, .section--night .table-wrap th { color: var(--night); }
.section--night .table-wrap .wa-inline { color: var(--wa-ink); }
.section--night .preisliste td, .section--night .data-table, .section--night .data-table td { color: var(--ink-soft); }
/* Bewertungsmodul als Zitat-Band: die große 5,0 in Weiß, Sterne in Heldengelb */
.section--night.reviews { border-top: 0; }
.section--night .reviews__line { color: #fff; }
/* Fuß-ähnliche Linien */
.section--night .sources__list li:target { background: var(--night-2); color: #fff; }

/* Der eine Bewegungsmoment der Variante: Die gelbe Linie zeichnet sich von links, während das Band ins Bild kommt (nur CSS,
   scroll-gesteuert, ohne JavaScript). Ohne Unterstützung oder bei „Bewegung reduzieren“ steht die Linie von Anfang an. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section--night { view-timeline-name: --band; view-timeline-axis: block; }
    .section--night::before { animation: band-line linear both; animation-timeline: --band; animation-range: entry 0px entry 360px; }
  }
}
@keyframes band-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* === Runde 2 Formular === */
/* Kontaktseite /kontakt/ (07-bau/pruefung-2026-10-04/runde-2/formular.md, design.md 1.4 K2/K3): Kontaktwege als Karten,
   Kontaktformular als weiße Karte auf Nebelgrau (Baustein bausteine/formular.njk, Skript js/kontakt.js), Meldungen
   (Erfolg gelb, Fehler mit rotem Rahmen, Ersatz ohne Einrichtung), Firmen-Block, Englisch-Band. Nur vorhandene :root-Farben.
   Felder 52 px, Rahmen 2 px, Fokus 3 px sichtbar; Tasten mindestens 48 px; mobil eine Spalte. */

/* So erreichen Sie uns: drei Wege als Karten, E-Mail als Zeile darunter */
.kontaktkarten { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .kontaktkarten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.prose a.kontaktkarte, .kontaktkarte {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; align-content: start; height: 100%;
  padding: 18px; border: 2px solid var(--line); border-radius: var(--radius-card); background: var(--mist);
  color: var(--night); font-weight: 400; text-decoration: none; transition: transform .25s var(--ease-out), border-color .25s var(--ease-out);
}
.kontaktkarte:hover { border-color: var(--night); transform: translateY(-2px); }
.kontaktkarte:focus-visible { border-radius: var(--radius-card); }
.kontaktkarte--wa { border-color: var(--wa); }
.kontaktkarte__symbol { grid-row: 1 / span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--night); color: var(--yellow); }
.kontaktkarte__symbol .icon { width: 22px; height: 22px; }
.kontaktkarte__titel { font-weight: 800; font-size: 1.125rem; line-height: 1.25; }
.kontaktkarte__wert { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kontaktkarte--wa .kontaktkarte__wert { color: var(--wa-ink); }
.kontaktkarte__hinweis { font-size: .9375rem; line-height: 1.4; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .kontaktkarte { transition: none; } .kontaktkarte:hover { transform: none; } }
.prose p.kontaktwege__mail { margin-top: 18px; }

/* Bühne: Textlink zum Formular statt der dreizeiligen E-Mail-Zeile */
.stage__reach.kontakt__formular a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }

/* Abschnitt #formular: links Zusagen, rechts die Formularkarte (ab 1024 px nebeneinander) */
.formular__grid { display: grid; gap: 28px; }
@media (min-width: 1024px) {
  .formular__grid, .english__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
  .formular__seite { position: sticky; top: calc(var(--header-h) + 28px); }
  .formular__seite h2, .english__text h2 { font-size: clamp(1.875rem, .9rem + 2.4vw, 3.2rem); }
}
@media (min-width: 1280px) { .formular__grid, .english__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 56px; } }
.formular__seite h2 { margin-bottom: 14px; hyphens: auto; }
.formular__lead { max-width: 46ch; font-size: 1.1875rem; line-height: 1.5; color: var(--night); }
.formular__zusagen { margin-top: 22px; gap: 12px; }
.formular__zusagen li { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.formular__seite .rating { margin-top: 14px; }
.formular__karte { position: relative; min-width: 0; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-lift); }

/* Felder */
.formular__form { display: grid; gap: 22px; }
.formular__form[hidden] { display: none; }
.formular__titel { font-family: var(--font-wide); font-size: 1.375rem; }
.formular__pflicht { font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.feld { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.feld[hidden] { display: none; }
fieldset.feld { display: block; }
.feld > label, .feld > legend { padding: 0; font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--night); }
fieldset.feld > legend, .formular__extra > legend { float: left; width: 100%; margin: 0 0 10px; padding: 0; }
fieldset.feld > legend + *, .formular__extra > legend + * { clear: both; }
fieldset.feld > .feld__hilfe, fieldset.feld > .feld__fehler { margin-top: 8px; }
.feld__pflicht { font-weight: 500; color: var(--muted); }
.feld__eingabe {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 14px;
  border: 2px solid var(--muted); border-radius: 12px; background: #fff; color: var(--night);
  font: inherit; font-size: 1.0625rem; line-height: 1.3;
}
textarea.feld__eingabe { min-height: 140px; resize: vertical; line-height: 1.5; }
.feld__eingabe:hover { border-color: var(--night); }
.feld__eingabe:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; border-color: var(--night); border-radius: 12px; }
.feld__eingabe::placeholder { color: var(--muted); opacity: 1; }
.feld__eingabe[aria-invalid="true"] { border-color: var(--red-ink); }
.feld--plz .feld__eingabe { max-width: 170px; }
.feld__auswahl { position: relative; }
.feld__auswahl select { appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer; }
.feld__auswahl::after {
  content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; pointer-events: none;
  border-right: 2.5px solid var(--night); border-bottom: 2.5px solid var(--night); transform: translateY(-70%) rotate(45deg);
}
.feld__hilfe { font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.feld__hinweis { font-size: .9375rem; font-weight: 700; line-height: 1.45; color: var(--night); }
.feld__hinweis:empty { display: none; }
.feld__fehler { display: flex; gap: 8px; align-items: flex-start; font-size: .9375rem; font-weight: 700; line-height: 1.4; color: var(--red-ink); }
.feld__fehler:empty { display: none; }
.feld__fehler::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; background: var(--red-ink); color: #fff; font-size: .8125rem; font-weight: 800; line-height: 1;
}
.formular__reihe { display: grid; gap: 22px; }
@media (min-width: 600px) { .formular__reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } }

/* Auswahl-Chips (Stil der Weg-Finder-Optionen .opt), mobil gestapelt bzw. dreispaltig */
.formular__chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 520px) { .formular__chips--gruppe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.formular__chips--kanal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formular__chips--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formular__chips .opt { min-width: 0; }
.formular__chips .opt span { height: 100%; padding: 6px 8px; font-size: 1rem; line-height: 1.2; text-align: center; white-space: normal; }
.formular__chips--liste .opt span { justify-content: flex-start; padding-inline: 16px; text-align: left; }
.formular__form .opt input:focus-visible + span { outline-color: var(--night); }
.formular__form .opt input[aria-invalid="true"] + span { border-color: var(--red-ink); }

/* Zusatzfelder je Gruppe */
.formular__extra { min-width: 0; margin: 0; padding: 18px 16px 20px; border: 0; border-radius: 14px; background: var(--mist); }
.formular__extra[hidden] { display: none; }
.formular__extra > legend { font-family: var(--font-wide); font-weight: 800; font-size: 1.0625rem; color: var(--night); }
.formular__extra > .feld + .feld { margin-top: 18px; }

/* Honigtopf: für Menschen unsichtbar, für Bots ein normales Feld */
.formular__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Sammelmeldung, Datenschutz, Taste, Alternative */
.formular__meldung { padding: 14px 16px; border-left: 4px solid var(--red-ink); border-radius: 0 12px 12px 0; background: var(--mist); color: var(--night); font-weight: 600; line-height: 1.45; }
.formular__meldung:empty { display: none; }
.formular__meldung a { color: var(--red-ink); font-weight: 800; text-underline-offset: 3px; }
.formular__recht { font-size: .875rem; line-height: 1.5; color: var(--muted); }
.formular__recht a, .formular__alternativ a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }
.formular__alternativ .wa-inline { color: var(--wa-ink); }
.formular__turnstile:empty { display: none; }
.formular__tasten .btn { width: 100%; }
@media (min-width: 600px) { .formular__tasten .btn { width: auto; min-width: 280px; } }
.formular__senden[disabled] { opacity: .75; cursor: progress; }
.formular__alternativ { font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }
.formular__noscript { padding: 12px 14px; border-radius: 12px; background: var(--yellow-soft); font-weight: 600; }

/* Meldungen nach dem Senden (mit JS per hidden, ohne JS per Sprungmarke :target) */
.formular__ergebnis { display: grid; gap: 10px; padding: 20px 18px; border-radius: var(--radius-card); }
@media (min-width: 600px) { .formular__ergebnis { padding: 24px 26px; } }
.formular__ergebnis[hidden] { display: none; }
.formular__ergebnis:target { display: grid; }
.formular__ergebnis + .formular__ergebnis, .formular__form + .formular__ergebnis { margin-top: 18px; }
.formular__ergebnis:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; border-radius: var(--radius-card); }
.formular__ergebnis-titel { margin: 0; font-family: var(--font-wide); font-size: 1.25rem; line-height: 1.2; font-weight: 800; }
.formular__ergebnis p { color: var(--night); line-height: 1.5; }
.formular__ergebnis .formular__ergebnis-titel { line-height: 1.2; }
.formular__ergebnis p a { color: var(--night); font-weight: 800; white-space: nowrap; text-underline-offset: 3px; }
.formular__ergebnis-tasten { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.formular__erfolg { grid-template-columns: minmax(0, 1fr); gap: 14px 16px; align-items: start; background: var(--yellow); color: var(--night); }
@media (min-width: 480px) { .formular__erfolg { grid-template-columns: 52px minmax(0, 1fr); } }
.formular__ergebnis-symbol { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--night); color: var(--yellow); }
.formular__ergebnis-symbol .icon { width: 26px; height: 26px; }
.formular__ergebnis-text { display: grid; gap: 8px; min-width: 0; }
.formular__fehlerblock { border: 2px solid var(--red-ink); background: #fff; }
.formular__fehlerblock .formular__ergebnis-titel { color: var(--red-ink); }
.formular__ersatz { background: var(--mist); }
@media (max-width: 479px) { .formular__ergebnis-tasten .btn { width: 100%; } }

/* Firmen, Autohäuser und Flotten: Nachtblau-Karte mit E-Mail und Formular */
.firmenblock__karte { display: grid; gap: 14px; max-width: 980px; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-card); }
.firmenblock__karte h2 { color: #fff; hyphens: manual; }
.firmenblock__karte p { color: var(--muted-night); line-height: 1.6; max-width: 62ch; }
.firmenblock__karte p strong { color: #fff; }
.firmenblock__karte p a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.firmenblock__tasten { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 479px) { .firmenblock__tasten .btn { width: 100%; } }

/* Englisch als Band auf Nebelgrau mit Kurzformular (ab 1024 px Text links, Formular rechts) */
.english__grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .english__text { position: sticky; top: calc(var(--header-h) + 28px); } }
.english__formular { max-width: 720px; }
.english__mehr { margin-top: 18px; }
.english__mehr a { color: var(--night); font-weight: 700; text-underline-offset: 3px; }

/* Laden: Anfahrt mit Bus und Bahn */
.shop__info > p.shop__anfahrt, .shop__address + .shop__anfahrt { margin-top: 14px; }

/* Lesespalte (Design B) nicht in Spalten, die schon zweispaltig stehen (Kontakt: Formular-Seite und English-Band) */
@media (min-width: 1100px) {
  .english__text .prose, .formular__seite .prose { display: block; max-width: none; }
  .english__text .prose > h2, .formular__seite .prose > h2 { grid-row: auto; margin-bottom: 18px; padding-right: 0; -webkit-hyphens: manual; hyphens: manual; }
  .english__text .prose > :not(h2), .formular__seite .prose > :not(h2) { grid-column: auto; }
}
/* Kontaktkarten in der rechten Spalte der Lesespalte: untereinander statt drei schmale Spalten (Telefonnummer bricht sonst um; ab 768 px, Abnahme Kern K1) */
@media (min-width: 768px) {
  .prose .kontaktkarten { grid-template-columns: minmax(0, 1fr); }
  .prose .kontaktkarte__wert { white-space: nowrap; }
}
/* === Runde 2 Technik: Druck, Fußnoten === */
/* T25 Fußnoten: Schrift mindestens 12 px (R3), Zielfläche mindestens 24 px (S6) ohne Layoutänderung */
sup.fn { font-size: .75em; }
sup.fn a { padding: 6px calc(.12em + 4px); margin: -6px -4px; }
/* T26 Kontaktwege und Erreichbarkeit: Textlinks als Hauptaktion mit mindestens 28 px Zielhöhe */
.kontaktwege a, .stage__reach a { display: inline-block; padding: 6px 0; margin: -6px 0; }
/* T24 Druckansicht: keine festen Leisten, Tasten, Illustrationen und Kontaktbox; Nachtabschnitte schwarz auf weiß; Quellen mit
   Adresse; Fuß nur mit Anschrift und Erreichbarkeit. zoom .8: Desktop-Raster und etwa 10 pt Grundschrift auf A4
   (Headless Chrome, A4, 04.10.2026: /service/ummeldung/ 10 Seiten statt 16, /kontakt/ 3 statt 8 laut Prüfbericht T24) */
@media print {
  html { zoom: .8; }
  .callbar, .menu-toggle, .site-header__actions, .skip, .site-nav, .cta-row, .btn, .stage__media, .skyline,
  main picture, .finale, .site-footer nav, .site-footer__meta, .site-footer__brand { display: none !important; }
  .site-header { position: static !important; box-shadow: none !important; }
  .night, .night * { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  details > summary { list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
  .sources a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  @page { margin: 15mm; }
}

/* Abstand unter dem Zeitstrahl in der Lesespalte (Ratgeber) */
.prose .timeline + p { margin-top: 14px; }

/* ---------- 5. Kurzvideo (selbst gehostet; Baustein bausteine/video.njk, Skript main.js Teil 7, Daten videos.js) ----------
   Zwei Formate (Inhaber, 06.10.2026): hoch (9:16) auf dem Handy, quer (16:9) ab 768 px; dieselbe Grenze steht in videos.js
   (querAb), beide zusammen ändern. Fassade: Startbild mit gelbem Abspielknopf und kleinem Kennzeichen mit der Dauer; das
   <video> entsteht erst beim Klick. Knopf und Kennzeichen sitzen unten auf einer Linie, damit das Gesicht frei bleibt.
   Handy: Karte, Startbild links (höchstens 220 px), Text rechts; beim Abspielen (.spielt) wächst das Bild auf volle Breite
   (höchstens 360 px), der Text rutscht darunter. Ab 768 px: Querformat in voller Breite, Text darunter. Startseite ab
   1.024 px: Überschrift über beide Spalten, darunter links „Sie müssen dafür nicht los.“, rechts das Video. Über uns: Video
   in der Lesespalte nach dem ersten Absatz. Nur Farben und Maße aus Design-System B. */
.kurzvideo { display: grid; grid-template-columns: min(44%, 220px) minmax(0, 1fr); gap: 14px 18px; align-items: center; margin: 0; }
.kurzvideo__rahmen {
  --kv-k: 56px; --kv-r: 12px; /* Knopfgröße, Randabstand */
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-card); background: var(--night); box-shadow: var(--shadow-lift); color: var(--night);
}
.kurzvideo__bild, .kurzvideo__bild img, .kurzvideo__video { display: block; width: 100%; height: 100%; }
.kurzvideo__bild img { object-fit: cover; }
.kurzvideo__bild img[data-src] { display: none; } /* Startbild noch ohne Adresse (main.js 7b setzt sie nach dem Laden) */
.kurzvideo__rahmen noscript img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; } /* ohne Skript */
.kurzvideo__video { object-fit: contain; background: var(--night); }
.kurzvideo__start {
  --kv-s: 1;
  position: absolute; right: var(--kv-r); bottom: var(--kv-r); width: var(--kv-k); height: var(--kv-k);
  display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--night);
  box-shadow: 0 0 0 5px rgba(0, 6, 25, .28), 0 16px 30px -12px rgba(0, 6, 25, .85);
  transform: scale(var(--kv-s)); transition: transform .45s var(--ease-spring);
}
.kurzvideo__start .icon { width: 44%; height: 44%; }
.kurzvideo__rahmen:hover .kurzvideo__start, .kurzvideo__rahmen:focus-visible .kurzvideo__start { --kv-s: 1.1; }
.kurzvideo__rahmen:focus-visible { outline-offset: 4px; border-radius: var(--radius-card); }
.plate--video { --h: 30px; position: absolute; left: var(--kv-r); bottom: calc(var(--kv-r) + (var(--kv-k) - var(--h)) / 2); border-width: 2px; }
.kurzvideo__text { display: grid; gap: 6px; align-content: center; }
.kurzvideo__name { font-family: var(--font-wide); font-stretch: 106%; font-weight: 800; font-size: 1.1875rem; line-height: 1.15; letter-spacing: -.015em; color: var(--night); -webkit-hyphens: auto; hyphens: auto; }
.kurzvideo__zeile { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.kurzvideo__hinweis { color: var(--muted); font-size: .875rem; line-height: 1.4; }
.kurzvideo__abschrift { margin-top: 4px; } /* Aufklapper wie „Mehr dazu“ (.seo__mehr) */
.kurzvideo__abschrift p { color: var(--ink-soft); font-size: .9375rem; line-height: 1.6; }
.kurzvideo:has(.kurzvideo__abschrift[open]) .kurzvideo__text { grid-column: 1 / -1; } /* Karte: aufgeklappter Text unter dem Bild statt in der schmalen Spalte */
.kurzvideo.spielt { grid-template-columns: minmax(0, 1fr); }
/* Fokus auf dem Video: overflow: hidden schneidet dessen Rahmen ab, deshalb zeigt ihn der Bildrahmen (WCAG 2.4.7, Abnahme 06.10.) */
.kurzvideo__video:focus-visible { outline: none; }
.kurzvideo__rahmen:has(.kurzvideo__video:focus-visible) { outline: 3px solid var(--night); outline-offset: 4px; }
/* sehr schmale Handys (Bildrahmen unter etwa 160 px): Knopf und Kennzeichen kleiner, damit sie sich nicht überlappen */
@media (max-width: 399px) {
  .kurzvideo__rahmen { --kv-k: 46px; --kv-r: 9px; }
  .plate--video { --h: 24px; border-width: 1.5px; }
}
/* Tablet und PC: Querformat, Text unter dem Video */
@media (min-width: 768px) {
  .kurzvideo { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .kurzvideo__rahmen, .kurzvideo__rahmen:focus-visible { --kv-k: 68px; --kv-r: 18px; aspect-ratio: 16 / 9; border-radius: var(--radius-frame); }
  .plate--video { --h: 34px; }
}
/* Das spielende Video behält das Seitenverhältnis seines Formats, auch wenn sich die Fensterbreite danach ändert */
.kurzvideo__rahmen--spielt.kurzvideo__rahmen--hoch { aspect-ratio: 9 / 16; width: min(100%, 360px); }
.kurzvideo__rahmen--spielt.kurzvideo__rahmen--quer { aspect-ratio: 16 / 9; }
/* Startseite: Kopf des Ablaufs mit Video */
.ablauf-kopf--video { display: grid; gap: 32px; }
.ablauf-kopf--video .section-head { margin-bottom: clamp(20px, 3vw, 32px); }
@media (min-width: 1024px) {
  .ablauf-kopf--video { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "kopf kopf" "satz video"; column-gap: clamp(40px, 5vw, 72px); row-gap: 0; align-items: center; }
  .ablauf-kopf--video .section-head { grid-area: kopf; }
  .ablauf-kopf--video .ablauf-kopf__satz { grid-area: satz; }
  .ablauf-kopf--video .kurzvideo { grid-area: video; }
  .ablauf-kopf--video .statement { font-size: clamp(3rem, 1rem + 3.4vw, 4.75rem); } /* neben dem Video: „müssen“ passt in die Spalte */
}
/* Über uns: Video in der Lesespalte nach dem ersten Absatz (ab 1.100 px rechte Spalte) */
.prose--video > .kurzvideo { margin-block: 22px 8px; } /* ab 1.100 px (Raster) addieren sich die Abstände zum folgenden Absatz */
.prose--video > .kurzvideo + p { margin-top: 14px; }
@media (min-width: 1100px) { .prose--video > .kurzvideo { margin-bottom: 0; } } /* Raster: Abstände addieren sich, so bleibt es bei 14 px */
@media (prefers-reduced-motion: reduce) {
  .kurzvideo__start { transition: none; }
  .kurzvideo__rahmen:hover .kurzvideo__start, .kurzvideo__rahmen:focus-visible .kurzvideo__start { --kv-s: 1; }
}
@media print { .kurzvideo { display: none !important; } }