/* site.css — gemeinsame Bausteine aller Seiten · ASA KFZ-Meisterbetrieb · Schritt 6a · 07.11.2026
   Lädt NACH tokens.css + kopf.css. Grammatik „Das Schild“ (bau-brief §6): editorial 74 rem · luftig · scharf (0 px) ·
   plakat · randlos. Farben NUR aus Tokens; themenfest nur, was auf Bild/Video/Schild-Rot liegt (GESETZ Kap. 11).
   Motion „Die Torflügel“ (bau-brief §8): Torangel cubic-bezier(.65,0,.15,1) 620 ms · UI 140 ms · Text nur Deckkraft 420 ms. */

/* ---------- Stil-Haken für die Dashboard-Vorlage (EINBAU-KURZ § 5) + Bau-Tokens ---------- */
:root {
  --akzent-text: var(--auf-akzent);
  --schrift-ueberschrift: var(--font-display);
  --schrift-text: var(--font-text);
  /* Torblau auf themenfest dunklen Flächen (Nacht-Karte, Bewerten): aus dem Token aufgehellt, kein Hartwert (fix-A) */
  --akzent-auf-dunkel: color-mix(in oklab, var(--akzent) 58%, var(--hell-fest));
  --logo-hell: url("../logo/asa-logo.svg");

  /* Schild-Rot ist themenfest (bau-brief §3: Schild-Block in beiden Themen #E1051C) */
  --schild-fest: #e1051c;
  --auf-schild: var(--kalk-fest);
  --linie-schild: color-mix(in oklch, var(--kalk-fest) 38%, transparent);

  /* Type-Scale bau-brief §4 */
  --t-xxl: clamp(5rem, 1rem + 9vw, 11.5rem);
  --t-wert: clamp(2.75rem, 1.5rem + 3vw, 4.25rem);
  --t-nr: clamp(2.2rem, 1.6rem + 1.2vw, 3rem);
  --t-h2b: clamp(2rem, 1.2rem + 2.4vw, 3.1rem);
  --t-zitat: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem);
  --t-h3b: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  --t-leadb: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --t-caption: 0.8125rem;

  --spalte: 4.7917rem; /* (74 rem − 11 × 1,5 rem) / 12 */
  --rinne: 1.5rem;
  --torangel: cubic-bezier(0.65, 0, 0.15, 1);
  --t-fluegel: 620ms;
  --kontaktschatten:
    0 1px 2px color-mix(in oklch, var(--schatten) 10%, transparent),
    0 12px 28px -12px color-mix(in oklch, var(--schatten) 32%, transparent);
  --fab-h: 56px;
  /* Torblau für Knöpfe auf Bild/Video — seit fix-A nur über Tokens (Paar --akzent/--auf-akzent hält in beiden Themen ≥ 4,5:1) */
  --tor-fest: var(--akzent);
  --tor-fest-tief: var(--marke-hover);
  --auf-tor-fest: var(--auf-akzent);
}
[data-thema="dunkel"] {
  --kontaktschatten:
    0 1px 2px color-mix(in oklch, var(--schatten) 40%, transparent),
    0 14px 30px -12px color-mix(in oklch, var(--schatten) 70%, transparent);
}

/* ---------- Grundlagen ---------- */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}
body {
  overflow-x: clip;
  font: 400 var(--t-body) / 1.6 var(--schrift-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  appearance: none;
}
:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Raster: Hülle + Bruch-Raster (12 Spalten, äußere Spuren bis zur Viewport-Kante) ---------- */
.huelle {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.bruch {
  display: grid;
  grid-template-columns:
    [voll-start] minmax(max(0px, calc(var(--rand) - var(--rinne))), 1fr)
    repeat(12, minmax(0, var(--spalte)))
    minmax(max(0px, calc(var(--rand) - var(--rinne))), 1fr) [voll-ende];
  column-gap: var(--rinne);
}
/* Spalten a–b laut bau-brief → Linien (a+1) / (b+2) */
.bruch > * {
  grid-column: 2 / 14;
  min-width: 0;
}
@media (max-width: 900px) {
  .bruch {
    grid-template-columns:
      [voll-start] var(--rand) minmax(0, 1fr) var(--rand)
      [voll-ende];
    column-gap: 0;
  }
  .bruch > * {
    grid-column: 2 / 3 !important;
  }
  .bruch > .voll-mobil {
    grid-column: 1 / -1 !important;
  }
}

/* ---------- Typografie ---------- */
.d,
.t-xxl,
.t-h2,
.t-wert,
.t-nr,
.t-zitat {
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-kerning: normal;
}
.t-xxl {
  font-size: var(--t-xxl);
  font-weight: 800;
  letter-spacing: -0.035em;
  word-spacing: 0.08em;
  line-height: 0.86;
  white-space: nowrap;
}
.t-h2 {
  font-size: var(--t-h2b);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.t-wert {
  font-size: var(--t-wert);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.t-nr {
  font-size: var(--t-nr);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.t-zitat {
  font-size: var(--t-zitat);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
.t-h3 {
  font: 650 var(--t-h3b) / 1.25 var(--schrift-text);
}
.t-lead {
  font: 400 var(--t-leadb) / 1.5 var(--schrift-text);
  color: var(--text-leise);
  max-width: 40rem;
}
.t-body {
  max-width: 66ch;
}
.t-cap {
  font: 500 var(--t-caption) / 1.4 var(--schrift-text);
  letter-spacing: 0.02em;
  color: var(--text-leise);
}
.dach {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font: 600 var(--t-caption) / 1.2 var(--schrift-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.punkt {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--leit);
}
.rot {
  color: var(--leit-text);
}
.nw {
  white-space: nowrap;
}
.akzentwort {
  position: relative;
  white-space: nowrap;
}
.akzentwort::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.1em;
  bottom: -0.08em;
  height: 0.12em;
  background: var(--leit);
}

/* ---------- Knöpfe (emil: :active scale .98, nur transform/Farbe, Hover hinter hover:hover) ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 0;
  background: var(--akzent);
  color: var(--akzent-text);
  font: 650 1.0625rem/1.1 var(--schrift-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--t-ui) var(--ease),
    transform var(--t-ui) var(--ease);
}
.knopf svg {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform var(--t-ui) var(--ease);
}
.knopf:active {
  transform: scale(0.98);
}
.knopf--rand {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.knopf--rot {
  background: var(--schild-fest);
  color: var(--auf-schild);
}
.knopf[disabled] {
  opacity: 0.6;
  cursor: progress;
}
@media (hover: hover) and (pointer: fine) {
  .knopf:hover {
    background: var(--marke-hover);
  }
  .knopf:hover svg {
    transform: translateX(3px);
  }
  .knopf--rand:hover {
    background: var(--flaeche);
  }
  .knopf--rot:hover {
    background: color-mix(in oklch, var(--schild-fest) 82%, #000);
  }
}
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 650 1.0625rem/1.3 var(--schrift-text);
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--leit);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.textlink svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .textlink:hover svg {
    transform: translateX(3px);
  }
}

/* ---------- Medien ---------- */
.bild {
  position: relative;
  overflow: hidden;
  background: var(--flaeche);
}
.bild > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bild--43 > img {
  aspect-ratio: 4 / 3;
}
.bild--45 > img {
  aspect-ratio: 4 / 5;
}
.bild--34 > img {
  aspect-ratio: 3 / 4;
}
.bild--1610 > img {
  aspect-ratio: 16 / 10;
}
.bild--32 > img {
  aspect-ratio: 3 / 2;
}
.unterschrift {
  margin-top: 0.75rem;
  font: 500 var(--t-caption) / 1.4 var(--schrift-text);
  letter-spacing: 0.02em;
  color: var(--text-leise);
}

/* Torflügel ① — zwei Torblau-Flügel schwenken nach außen weg (scaleX 1 → 0, Ursprung außen), danach bleibt kein Blau */
.fluegel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}
.fluegel i {
  display: block;
  background: var(--akzent);
  transform-origin: 0 50%;
  transition: transform var(--t-fluegel) var(--torangel);
}
.fluegel i + i {
  transform-origin: 100% 50%;
  transition-delay: 40ms;
}
.fluegel i:first-child {
  box-shadow: inset -1px 0 0
    color-mix(in oklch, var(--schatten) 30%, transparent);
}
[data-fluegel].offen .fluegel i {
  transform: scaleX(0);
}
[data-fluegel].fertig .fluegel {
  display: none;
}
html:not(.bewegt) .fluegel {
  display: none;
}

/* Text-Reveal: nur Deckkraft, 420 ms, Staffel 40 ms, ohne Weg — nie dauerhaft unsichtbar (Fallback in site.js) */
html.bewegt [data-reveal] {
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease);
  transition-delay: calc(var(--n, 0) * 40ms);
}
html.bewegt [data-reveal].da {
  opacity: 1;
}

/* Display-Zeile fährt aus dem Schild hoch (clip-path am Wrapper, Bewegung am inneren Span) */
.zeile {
  display: block;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
  clip-path: inset(-1em -1em 0 -1em);
}
.zeile > span {
  display: inline-block;
}
html.bewegt .zeile > span {
  transform: translateY(105%);
  transition: transform 520ms var(--torangel);
}
html.bewegt .zeile.da > span {
  transform: none;
}

/* ---------- S2 Fakten-Leiste ---------- */
.fakten {
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}
.fakten__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fakt {
  display: grid;
  align-content: center;
  gap: 0.55rem;
  min-height: 9.5rem;
  padding: 1.75rem clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--linie);
}
.fakt:last-child {
  border-right: 1px solid var(--linie);
}
.fakt .t-wert .stern {
  color: var(--akzent);
  font-size: 0.7em;
  vertical-align: 0.12em;
  margin-left: 0.05em;
}
.fakt p {
  font: 500 0.9375rem/1.35 var(--schrift-text);
  color: var(--text-leise);
}
@media (max-width: 900px) {
  .fakten__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 0;
  }
  .fakt {
    min-height: 7.5rem;
    padding: 1.25rem var(--rand);
    border-left: 0;
    border-top: 1px solid var(--linie);
  }
  .fakt:nth-child(-n + 2) {
    border-top: 0;
  }
  .fakt:nth-child(odd) {
    border-right: 1px solid var(--linie);
  }
  .fakt:last-child {
    border-right: 0;
  }
}

/* ---------- S3 Schild-Block (die EINE Rot-Fläche der Startseite, themenfest) ---------- */
.schild {
  --text: var(--auf-schild);
  --text-leise: var(--auf-schild);
  --leit: var(--auf-schild);
  position: relative;
  background: var(--schild-fest);
  color: var(--auf-schild);
  padding-top: 5rem;
}
.schild__display {
  grid-column: 2 / 14;
  grid-row: 1;
  margin-bottom: 2.75rem;
}
.schild__liste {
  grid-column: 2 / 8;
  grid-row: 2;
  align-self: start;
  padding-bottom: 5rem;
}
.schild__liste li {
  display: flex;
  gap: 0.95rem;
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--linie-schild);
  font: 600 clamp(1.2rem, 1rem + 0.6vw, 1.45rem) / 1.3 var(--schrift-text);
}
.schild__liste li:last-of-type {
  border-bottom: 1px solid var(--linie-schild);
}
.schild__liste .punkt {
  background: var(--auf-schild);
  transform: translateY(-0.12rem);
}
.schild__notiz {
  margin-top: 1.4rem;
  font: 500 1rem/1.5 var(--schrift-text);
}
.schild__foto {
  grid-column: 9 / 14;
  grid-row: 2;
  align-self: end;
  margin-bottom: -4rem;
  z-index: 1;
  box-shadow: var(--kontaktschatten);
}
.schild__foto {
  aspect-ratio: 4 / 5;
}
.schild__foto img {
  position: absolute;
  left: 0;
  top: -24px;
  width: 100%;
  height: calc(100% + 48px);
  will-change: transform;
}
@media (max-width: 900px) {
  .schild {
    padding-top: 3.5rem;
  }
  .schild__display {
    margin-bottom: 1.75rem;
  }
  .schild__display .t-xxl {
    font-size: clamp(3.4rem, 17vw, 5rem);
    white-space: normal;
  }
  .schild__liste {
    grid-row: 2;
    padding-bottom: 2.5rem;
  }
  .schild__foto {
    grid-row: 3;
    margin-bottom: -3rem;
  }
}

/* ---------- S4 Leistungsschild (9 Zeilen, kein Card-Grid, kein Sticky) ---------- */
.lschild {
  margin-top: 8rem;
}
.lschild__kopf {
  grid-column: 2 / 10;
  margin-bottom: 2.75rem;
}
.lschild__liste {
  grid-column: 2 / 14;
  border-bottom: 1px solid var(--linie);
}
.lzeile {
  display: grid;
  grid-template-columns: 5.5rem 9rem minmax(0, 1fr) 8rem minmax(11rem, auto);
  align-items: center;
  column-gap: 1.75rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--t-ui) var(--ease);
}
.lzeile__nr {
  color: var(--leit-text);
}
.lzeile__bild {
  width: 9rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--flaeche);
}
.lzeile__titel {
  display: block;
  font: 650 var(--t-h3b) / 1.2 var(--schrift-text);
}
.lzeile__satz {
  display: block;
  margin-top: 0.3rem;
  font: 400 1rem/1.45 var(--schrift-text);
  color: var(--text-leise);
}
.lzeile__dauer {
  font: 500 0.9375rem/1.3 var(--schrift-text);
  color: var(--text-leise);
}
.lzeile__preis {
  justify-self: end;
  text-align: right;
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-weight: 750;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.lzeile__preis--offen {
  font: 600 0.9375rem/1.3 var(--schrift-text);
  letter-spacing: 0;
  color: var(--text-leise);
  white-space: normal;
  max-width: 11rem;
}
.lzeile__pfeil {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .lzeile:hover {
    background: var(--flaeche);
  }
  .lzeile:hover .lzeile__titel {
    text-decoration: underline;
    text-decoration-color: var(--leit);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }
}
.lzeile:active {
  background: var(--flaeche);
}
.lschild__fuss {
  grid-column: 2 / 11;
  margin-top: 1.25rem;
}
@media (max-width: 1100px) {
  .lzeile {
    grid-template-columns: 4rem 7rem minmax(0, 1fr) minmax(8rem, auto);
  }
  .lzeile__dauer {
    display: none;
  }
}
@media (max-width: 900px) {
  .lschild {
    margin-top: 5rem;
  }
  .lzeile {
    grid-template-columns: 112px minmax(0, 1fr) auto;
    grid-template-areas:
      "bild nr preis"
      "bild titel titel";
    column-gap: 0.9rem;
    row-gap: 0.15rem;
    align-items: start;
    padding: 0.9rem 0;
  }
  .lzeile__bild {
    grid-area: bild;
    width: 112px;
  }
  .lzeile__nr {
    grid-area: nr;
    font-size: 1.6rem;
  }
  .lzeile__text {
    grid-area: titel;
  }
  .lzeile__satz {
    display: none;
  }
  .lzeile__titel {
    font-size: 1.0625rem;
  }
  .lzeile__preis {
    grid-area: preis;
    font-size: 1.3rem;
  }
  .lzeile__preis--offen {
    font-size: 0.8125rem;
    max-width: 7.5rem;
  }
}

/* ---------- S5 Die Annahme (Signature-Werkzeug) ---------- */
.annahme {
  margin-top: 6rem;
  padding-block: 6rem;
  background: var(--flaeche);
}
.annahme__links {
  grid-column: 2 / 9;
  grid-row: 1;
}
.annahme__lead {
  margin-top: 1.6rem;
}
/* Spur = Zeile 1 rechts; das Bild klebt NUR innerhalb der Spur (endet an der Zitat-Linie, überdeckt sie nie) */
.annahme__bildspur {
  grid-column: 10 / 15;
  grid-row: 1;
}
.annahme__bild {
  position: sticky;
  top: 100px;
}
.annahme__bild img {
  aspect-ratio: 3 / 4;
  max-height: calc(100svh - 140px);
}
/* Zitat als eigene Zeile über die volle Inhaltsbreite unter Werkzeug + Bild (Fix 6b #8: keine leere halbe Sektion) */
.annahme__zitat {
  grid-column: 2 / 14;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 3rem;
  margin-top: 4.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linie);
}
.annahme__zitat blockquote {
  max-width: 52rem;
}
.annahme__zitat cite {
  display: block;
  margin-top: 0;
  padding-bottom: 0.45rem;
  white-space: nowrap;
  font: 500 var(--t-caption) / 1.4 var(--schrift-text);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--text-leise);
}
@media (max-width: 900px) {
  .annahme {
    margin-top: 4rem;
    padding-block: 3.5rem;
  }
  .annahme__links {
    grid-row: 1;
  }
  .annahme__bildspur {
    grid-row: 2;
    margin-top: 2.5rem;
  }
  .annahme__bild {
    position: relative;
    top: auto;
  }
  .annahme__bild img {
    max-height: none;
  }
  .annahme__zitat {
    grid-row: 3;
    display: block;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
  }
  .annahme__zitat cite {
    margin-top: 0.9rem;
    padding-bottom: 0;
    white-space: normal;
  }
  .annahme .t-xxl {
    font-size: clamp(3.4rem, 16vw, 5rem);
    white-space: normal;
  }
}

/* Werkzeug-Karte */
.wz {
  margin-top: 2.5rem;
  background: var(--grund);
  box-shadow: var(--kontaktschatten);
  border: 1px solid var(--linie);
}
.wz__schritte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--linie);
}
.wz__schritt {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.8rem 1rem;
  font: 600 0.875rem/1.25 var(--schrift-text);
  color: var(--text-leise);
  border-right: 1px solid var(--linie);
}
.wz__schritt:last-child {
  border-right: 0;
}
.wz__schritt b {
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
}
.wz__schritt.ist-dran {
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--akzent);
}
.wz__schritt.ist-fertig b {
  color: var(--leit-text);
}
.wz__koerper {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 2rem;
  padding: 1.75rem;
}
.wz__auto {
  width: 180px;
  height: auto;
  user-select: none;
}
.wz__auto .zone {
  fill: transparent;
  cursor: pointer;
  transition: fill var(--t-ui) var(--ease);
}
.wz__auto .zone:focus-visible {
  outline: none;
  stroke: var(--akzent);
  stroke-width: 4;
}
.wz__auto .zone.an {
  fill: var(--akzent);
}
.wz__auto .zone--rad {
  fill: var(--text);
}
.wz__auto .zone--rad.an {
  fill: var(--akzent);
}
@media (hover: hover) and (pointer: fine) {
  .wz__auto .zone:not(.an):hover {
    fill: color-mix(in oklch, var(--akzent) 22%, transparent);
  }
}
.wz__auto .kontur {
  fill: none;
  stroke: var(--text);
  stroke-width: 3;
  pointer-events: none;
}
.wz__auto .fein {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
  opacity: 0.55;
  pointer-events: none;
}
.wz__auto .rad {
  fill: var(--text);
  pointer-events: none;
}
.wz__frage {
  font: 650 var(--t-h3b) / 1.2 var(--schrift-text);
}
.wz__zonename {
  margin-top: 0.3rem;
  font: 500 0.9375rem/1.4 var(--schrift-text);
  color: var(--text-leise);
  min-height: 1.4em;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.95rem;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: var(--text);
  font: 550 0.9375rem/1 var(--schrift-text);
  cursor: pointer;
  transition:
    background-color var(--t-ui) var(--ease),
    color var(--t-ui) var(--ease),
    border-color var(--t-ui) var(--ease),
    transform var(--t-ui) var(--ease);
}
.chip:active {
  transform: scale(0.98);
}
.chip[aria-pressed="true"],
.chip[aria-checked="true"] {
  background: var(--text);
  color: var(--grund);
  border-color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-pressed="true"]):not([aria-checked="true"]):hover {
    border-color: var(--text);
  }
}
.wz__foto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.wz__foto label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.95rem;
  border: 1px dashed var(--text-leise);
  font: 600 0.9375rem/1 var(--schrift-text);
  cursor: pointer;
}
.wz__foto label svg {
  width: 20px;
  height: 20px;
}
.wz__foto input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.wz__foto input:focus-visible + label {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}
.wz__fotoname {
  font: 500 0.875rem/1.3 var(--schrift-text);
  color: var(--text-leise);
}
.wz__hinweis {
  margin-top: 0.6rem;
  font: 400 0.8125rem/1.45 var(--schrift-text);
  color: var(--text-leise);
}
.wz__hinweis a {
  color: var(--text);
}
.wz__ergebnis {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  font: 600 1rem/1.4 var(--schrift-text);
}
.wz__ergebnis .punkt {
  transform: translateY(-0.05rem);
}
.wz__knopf {
  margin-top: 1.1rem;
}
@media (max-width: 560px) {
  .wz__schritte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wz__schritt:nth-child(2) {
    border-right: 0;
  }
  .wz__schritt:nth-child(-n + 2) {
    border-bottom: 1px solid var(--linie);
  }
  .wz__koerper {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
  }
  .wz__auto {
    width: 150px;
    margin-inline: auto;
  }
  .wz__knopf {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* ---------- S6 Bewertungs-Laufband (GESETZ Kap. 9: nach rechts, ~90 px/s, Abstand im Keyframe herausgerechnet) ---------- */
.stimmen {
  margin-top: 5rem;
  padding-block: 0 4.5rem;
}
.stimmen__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}
.stimmen__wert {
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-weight: 750;
  font-size: var(--t-h2b);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.stimmen__wert .stern {
  color: var(--akzent);
}
.stimmen__wert small {
  font: 600 var(--t-leadb) / 1.3 var(--schrift-text);
  letter-spacing: 0;
  color: var(--text-leise);
}
/* Horizontal-Sequenz: das Bewertungs-Laufband läuft horizontal nach rechts, unabhängig vom scroll (~90 px/s); Pause nur bei :hover/:focus-within/:active */
.lb {
  --abstand: 1.25rem;
  --dauer: 60s;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}
.lb__spur {
  display: flex;
  align-items: stretch;
  gap: var(--abstand);
  width: max-content;
  animation: lbRechts var(--dauer) linear infinite;
}
.lb:hover .lb__spur,
.lb:focus-within .lb__spur,
.lb:active .lb__spur,
.lb.steht .lb__spur {
  animation-play-state: paused;
}
@keyframes lbRechts {
  from {
    transform: translate3d(calc(-50% - var(--abstand) / 2), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.lb__karte {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 22rem;
  padding: 1.5rem 1.5rem 1.35rem;
  background: var(--grund);
  border: 1px solid var(--linie);
}
.lb__sterne {
  display: flex;
  gap: 3px;
  color: var(--akzent);
}
.lb__sterne svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.lb__zitat {
  margin-top: 0.9rem;
  font: 500 1.0625rem/1.5 var(--schrift-text);
  color: var(--text);
  white-space: pre-line;
}
.lb__fuss {
  margin-top: auto !important;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  font: 500 var(--t-caption) / 1.35 var(--schrift-text);
  color: var(--text-leise);
}
.lb__fuss b {
  font-weight: 700;
  color: var(--text);
}
/* „Mehr lesen“ im Laufband: Ausklapp (details) statt Knopf — GESETZ Kap. 9: keine Steuer-Knöpfe im Band.
   Der Auslöser sitzt rechts in der Fußzeile (absolut zur Karte), der volle Wortlaut ersetzt das Kurz-Zitat an Ort und Stelle. */
.lb__karte {
  position: relative;
}
.lb__karte:has(.lb__mehr) .lb__fuss {
  padding-right: 6.5rem;
}
.lb__mehr summary {
  position: absolute;
  right: 1.5rem;
  bottom: 0.9rem;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  list-style: none;
  font: 650 0.875rem/1 var(--schrift-text);
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--leit);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  cursor: pointer;
  white-space: nowrap;
}
.lb__mehr summary::-webkit-details-marker {
  display: none;
}
.lb__mehr-auf,
.lb__mehr[open] .lb__mehr-zu {
  display: none;
}
.lb__mehr[open] .lb__mehr-auf {
  display: inline;
}
.lb__karte:has(.lb__mehr[open]) .lb__zitat {
  display: none;
}
.lb__voll {
  margin-top: 0.9rem;
  font: 500 1rem/1.5 var(--schrift-text);
  color: var(--text);
  white-space: pre-line;
}
/* Sterne an jeder Stimme (GESETZ Kap. 9: jede Karte trägt ihre Sterne) */
/* in Zitat-Rastern (annahme__zitat: Zitat | Quelle) über die volle Zeile, nie als eigene Spalte */
.stimme > .stimme__sterne {
  grid-column: 1 / -1;
}
.stimme__sterne {
  display: block;
  margin-bottom: 0.55rem;
  font: 400 1rem/1 var(--schrift-text);
  letter-spacing: 0.14em;
  color: var(--akzent);
}
.stimmen__link {
  margin-top: 1.75rem;
}
@media (max-width: 900px) {
  .stimmen {
    margin-top: 3rem;
    padding-bottom: 3rem;
  }
  /* augen-fix-2: am Handy ~80 vw breit — eine Stimme füllt den Blick, die nächste lugt rechts herein */
  .lb {
    --abstand: 1rem;
  }
  .lb__karte {
    width: min(80vw, 22rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lb {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* augen-fix-2: ohne Bewegung bleibt es ein Band — eine Reihe zum Wischen/Scrollen (Rast je Karte), nie eine gestapelte Liste */
  .lb {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--rand, 1.25rem), calc((100% - 74rem) / 2));
    scrollbar-width: thin;
    padding-bottom: 0.75rem;
  }
  .lb__spur {
    animation: none;
    width: max-content;
    flex-wrap: nowrap;
    padding-inline: max(var(--rand, 1.25rem), calc((100% - 74rem) / 2));
  }
  .lb__karte {
    scroll-snap-align: start;
  }
  .lb__karte[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- S7 Bewerten-Aufruf (Baustein bewerten-cta, in Build-Farben) ---------- */
.bewerten-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 70vh;
  min-height: 70svh;
  padding: 4rem var(--rand);
  overflow: hidden;
  background: var(--nacht-fest);
}
.bewerten-cta__buehne {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bewerten-cta__buehne img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bewerten-cta__buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(7 2 2 / 0.22), rgb(7 2 2 / 0.48));
}
.bewerten-cta__karte {
  width: min(34rem, 100%);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  background: var(--nacht-fest);
  color: var(--kalk-fest);
  box-shadow: 0 30px 70px -30px rgb(7 2 2 / 0.7);
}
.bewerten-cta__titel {
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--kalk-fest);
}
.bewerten-cta__sterne {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 1.4rem 0 1.75rem;
}
.bewerten-cta__sterne svg {
  width: clamp(2rem, 4.5vw, 2.6rem);
  height: auto;
  fill: var(--akzent-auf-dunkel);
}
.bewerten-cta__knopf {
  width: 100%;
  min-height: 60px;
  font-size: 1.125rem;
}

/* ---------- S8 „0 €“ Festpreis-Zettel ---------- */
.zettel-sek {
  margin-top: 7rem;
}
.zettel-sek__display {
  grid-column: 1 / 9;
  grid-row: 1;
  align-self: start;
  /* Bruch 3: „0 €“ hängt im linken Außenrand vor der Inhaltsspalte — die 0 bleibt ganz (Fix 6b #2, kein Anschnitt) */
  margin-left: clamp(0.25rem, 1.2vw, 1.25rem);
  font-size: clamp(8rem, 2rem + 9vw, 11.5rem);
  word-spacing: 0;
  will-change: transform;
}
.zettel-sek__display .duenn {
  font-size: 0.6em;
}
.zettel-sek__display .rot {
  color: var(--leit-text);
}
.zettel-sek__lead {
  grid-column: 2 / 7;
  grid-row: 2;
  margin-top: 2rem;
  color: var(--text);
}
.zettel-sek__lead + p {
  grid-column: 2 / 7;
  grid-row: 3;
  margin-top: 1.25rem;
}
.zettel {
  grid-column: 8 / 14;
  grid-row: 1 / 5;
  align-self: start;
  margin-top: -10rem;
  position: relative;
  z-index: 2;
  background: var(--grund);
  color: var(--text);
  box-shadow: var(--kontaktschatten);
  border: 1px solid var(--linie);
}
.zettel__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.4rem 1.6rem 1.1rem;
  border-bottom: 2px solid var(--text);
}
.zettel__kopf h3 {
  font: 700 1.125rem/1.2 var(--schrift-text);
}
.zettel__kopf span {
  font: 500 var(--t-caption) / 1.3 var(--schrift-text);
  color: var(--text-leise);
}
.zettel__liste {
  padding: 0.4rem 1.6rem;
}
.zettel__posten {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  min-height: 56px;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--linie);
  cursor: pointer;
}
.zettel__posten:last-child {
  border-bottom: 0;
}
.zettel__posten input {
  appearance: none;
  margin: 0;
  width: 24px;
  height: 24px;
  border: 2px solid var(--text);
  background: var(--grund);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.zettel__posten input::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 3px solid var(--auf-akzent);
  border-bottom: 3px solid var(--auf-akzent);
  transform: translateY(-2px) rotate(-45deg);
  opacity: 0;
}
.zettel__posten input:checked {
  background: var(--akzent);
  border-color: var(--akzent);
}
.zettel__posten input:checked::after {
  opacity: 1;
}
.zettel__posten input:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}
.zettel__name {
  font: 600 1rem/1.3 var(--schrift-text);
}
.zettel__name small {
  display: block;
  font: 500 0.8125rem/1.3 var(--schrift-text);
  color: var(--text-leise);
}
.zettel__preis {
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-weight: 750;
  font-size: 1.15rem;
  white-space: nowrap;
}
.zettel__summe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 1.1rem 1.6rem;
  background: var(--flaeche);
  border-top: 2px solid var(--text);
}
.zettel__summe dt {
  font: 600 0.9375rem/1.3 var(--schrift-text);
}
.zettel__summe dd {
  justify-self: end;
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.zettel__summe dd.klein {
  font-size: 1.1rem;
  font-weight: 700;
}
.zettel__stand {
  margin: 0;
  padding: 0 1.6rem 1rem;
  background: var(--flaeche);
  font: 400 0.8125rem/1.4 var(--schrift-text);
  color: var(--text-leise);
}
.zettel__fuss {
  padding: 1.25rem 1.6rem 1.6rem;
}
.zettel__fuss .knopf {
  width: 100%;
}
.zettel__pointe {
  margin-top: 1rem;
  font: 650 1rem/1.35 var(--schrift-text);
  text-align: center;
}
@media (max-width: 900px) {
  .zettel-sek {
    margin-top: 4.5rem;
  }
  .zettel-sek__display {
    grid-column: 1 / -1 !important;
    margin-left: 0.5rem;
    font-size: clamp(7rem, 38vw, 10rem);
  }
  .zettel-sek__lead {
    grid-row: 2;
    margin-top: 1.25rem;
  }
  .zettel {
    grid-row: 4;
    margin-top: 2rem;
  }
}

/* ---------- S9 Früh da (Bild über die linke Kante) ---------- */
.frueh {
  margin-top: 3rem;
  align-items: center;
}
.frueh__bild {
  grid-column: 1 / 9;
}
.frueh__text {
  grid-column: 10 / 14;
}
.zeiten {
  margin-top: 1.5rem;
  border-top: 1px solid var(--linie);
}
.zeiten li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linie);
  font: 500 1rem/1.3 var(--schrift-text);
}
.zeiten li b {
  font-weight: 700;
  white-space: nowrap;
}
.zeiten li.heute {
  font-weight: 700;
}
.zeiten li.heute span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--leit);
}
@media (max-width: 900px) {
  .frueh {
    margin-top: 2rem;
  }
  .frueh__bild {
    grid-row: 1;
  }
  .frueh__text {
    grid-row: 2;
    margin-top: 2rem;
  }
}

/* ---------- S10 Team + echte Halle ---------- */
.team-sek {
  margin-top: 8rem;
  align-items: start;
}
.team-sek__bild {
  grid-column: 2 / 8;
}
.team-sek__text {
  grid-column: 9 / 14;
}
.personen {
  margin-top: 2rem;
  border-top: 1px solid var(--linie);
}
.person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linie);
}
.initialen {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--text);
  color: var(--grund);
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.person--gross .initialen {
  width: 72px;
  height: 72px;
  font-size: 1.5rem;
}
.person b {
  color: var(--text);
  display: block;
  font: 650 1.125rem/1.25 var(--schrift-text);
}
.person--gross b {
  font-size: var(--t-h3b);
}
.person > span:not(.initialen) > span {
  display: block;
  font: 500 0.9375rem/1.3 var(--schrift-text);
  color: var(--text-leise);
}
.team-sek__zitat {
  margin-top: 2rem;
  font: 600 1.25rem/1.4 var(--schrift-text);
}
.team-sek__zitat cite {
  display: block;
  margin-top: 0.5rem;
  font: 500 var(--t-caption) / 1.4 var(--schrift-text);
  font-style: normal;
  color: var(--text-leise);
}
@media (max-width: 900px) {
  .team-sek {
    margin-top: 5rem;
  }
  .team-sek__text {
    grid-row: 2;
    margin-top: 2rem;
  }
}

/* ---------- S11 Ratgeber (Bild links sticky) ---------- */
.ratgeber-sek {
  margin-top: 5rem;
  align-items: start;
}
.ratgeber-sek__bild {
  grid-column: 2 / 7;
  position: sticky;
  top: 100px;
}
.ratgeber-sek__text {
  grid-column: 8 / 14;
}
.rzeilen {
  margin-top: 2.25rem;
  border-bottom: 1px solid var(--linie);
}
.rzeile {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--linie);
  text-decoration: none;
  color: var(--text);
  transition: background-color var(--t-ui) var(--ease);
}
.rzeile__nr {
  grid-row: 1 / 4;
  color: var(--leit-text);
  font-size: 1.8rem;
}
.rzeile__titel {
  font: 650 var(--t-h3b) / 1.25 var(--schrift-text);
}
.rzeile__satz {
  font: 400 1rem/1.5 var(--schrift-text);
  color: var(--text-leise);
}
.rzeile__zeit {
  font: 500 var(--t-caption) / 1.4 var(--schrift-text);
  color: var(--text-leise);
  margin-top: 0.3rem;
}
@media (hover: hover) and (pointer: fine) {
  .rzeile:hover .rzeile__titel {
    text-decoration: underline;
    text-decoration-color: var(--leit);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }
}
@media (max-width: 900px) {
  .ratgeber-sek {
    margin-top: 3rem;
  }
  .ratgeber-sek__bild {
    position: relative;
    top: auto;
  }
  .ratgeber-sek__text {
    grid-row: 2;
    margin-top: 2rem;
  }
}

/* ---------- S12 Kontakt + Karte + Anfrage ---------- */
.kontakt-sek {
  margin-top: 6rem;
}
.kontakt-sek__kopf {
  grid-column: 2 / 10;
  margin-bottom: 2.5rem;
}
.kontakt-sek__kopf p {
  margin-top: 1.25rem;
}
.karte-b {
  grid-column: 2 / 9;
  display: grid;
  grid-template-rows: minmax(26rem, 1fr) auto;
  background: var(--grund);
  border: 1px solid var(--linie);
  align-self: stretch;
}
.karte-b__rahmen {
  position: relative;
  overflow: hidden;
  background: var(--flaeche);
  min-height: 26rem;
}
.karte-b__rahmen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.06) brightness(1.03);
}
[data-thema="dunkel"] .karte-b__rahmen iframe {
  filter: grayscale(1) invert(0.9) contrast(0.9) brightness(0.95);
}
.karte-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  /* fix-C: kleiner und ÜBER Googles Markierung — dessen Beschriftung rechts bleibt frei lesbar */
  width: 56px;
  height: 56px;
  margin: -114px 0 0 -28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 5px color-mix(in oklch, var(--schild-fest) 30%, transparent),
    0 12px 26px -8px rgb(7 2 2 / 0.55);
}
.karte-pin img {
  width: 40px;
  height: auto;
}
.karte-pin::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--schild-fest);
  animation: pinPuls 2.4s ease-out infinite;
}
@keyframes pinPuls {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .karte-pin::after {
    animation: none;
  }
}
.karte-b__seite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1.25rem 2rem;
  align-items: end;
  padding: 1.5rem;
  border-top: 1px solid var(--linie);
}
.karte-b__seite address {
  font-style: normal;
  font: 500 1rem/1.5 var(--schrift-text);
}
.karte-b__seite address b {
  font-weight: 700;
}
.karte-b__seite .zeiten {
  margin-top: 0;
}
.karte-b__seite .zeiten li {
  padding: 0.35rem 0;
  font-size: 0.9375rem;
}
.anfrage {
  grid-column: 10 / 14;
  grid-row: 2;
}
.karte-b {
  grid-row: 2;
}
.ansprech {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--linie);
}
.ansprech b {
  display: block;
  font: 650 1.125rem/1.25 var(--schrift-text);
}
.ansprech > span:not(.initialen) > span {
  font: 500 0.9375rem/1.3 var(--schrift-text);
  color: var(--text-leise);
}
.feld {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.95rem;
  min-width: 0;
}
.feld label {
  font: 600 0.875rem/1.2 var(--schrift-text);
}
.feld label small {
  font-weight: 500;
  color: var(--text-leise);
}
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in oklch, var(--text) 35%, var(--grund));
  border-radius: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1rem/1.3 var(--schrift-text);
  transition: border-color var(--t-ui) var(--ease);
}
.feld select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 52%,
    calc(100% - 14px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.feld textarea {
  min-height: 6.5rem;
  resize: vertical;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent);
}
.feld-reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 0.75rem;
}
/* E-Mail + Nachricht eingeklappt (Fix 6b #10) — Pflichtfelder bleiben offen */
.anfrage__mehr {
  margin: 0.15rem 0 0.95rem;
  border-block: 1px solid var(--linie);
}
.anfrage__mehr summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font: 600 0.9375rem/1.3 var(--schrift-text);
  color: var(--text);
}
.anfrage__mehr summary::-webkit-details-marker {
  display: none;
}
.anfrage__mehr summary small {
  font-weight: 500;
  color: var(--text-leise);
}
.anfrage__mehr summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 0.35rem;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-ui) var(--ease);
}
.anfrage__mehr[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.anfrage__mehr summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}
.anfrage__mehr-inhalt {
  padding: 0.35rem 0 0.1rem;
}
.honig {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.haken {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin: 0.5rem 0 1.25rem;
  font: 400 0.875rem/1.45 var(--schrift-text);
  color: var(--text-leise);
}
.haken input {
  width: 22px;
  height: 22px;
  margin: 0.1rem 0 0;
  accent-color: var(--akzent);
}
.haken a {
  color: var(--text);
}
.anfrage .knopf {
  width: 100%;
  white-space: normal;
  text-align: center;
  padding-block: 0.8rem;
}
.anfrage__zusage {
  margin-top: 0.85rem;
  font: 500 0.875rem/1.4 var(--schrift-text);
  color: var(--text-leise);
}
.anfrage__fehler {
  margin-bottom: 0.9rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--error);
  background: var(--flaeche);
  font: 500 0.9375rem/1.4 var(--schrift-text);
}
.anfrage__danke {
  padding: 1.5rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
.anfrage__danke b {
  display: block;
  font: 700 1.25rem/1.3 var(--schrift-text);
  margin-bottom: 0.4rem;
}
@media (max-width: 1100px) {
  .karte-b {
    grid-column: 2 / 14;
  }
  .anfrage {
    grid-column: 2 / 14;
    grid-row: 3;
    margin-top: 3rem;
    max-width: 40rem;
  }
}
@media (max-width: 900px) {
  .kontakt-sek {
    margin-top: 4rem;
  }
  .karte-b__rahmen {
    min-height: 20rem;
  }
  .karte-b {
    grid-template-rows: minmax(20rem, 1fr) auto;
  }
  .karte-b__seite {
    grid-template-columns: 1fr;
  }
  .anfrage {
    margin-top: 2.5rem;
  }
}
@media (max-width: 420px) {
  .feld-reihe {
    grid-template-columns: 1fr;
  }
}

/* ---------- S13 Fuß ---------- */
.fuss {
  margin-top: 4rem;
  padding: 4.5rem 0 calc(2rem + var(--fab-h));
  background: var(--flaeche);
  color: var(--text);
  border-top: 1px solid var(--linie);
}
.fuss__oben {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--linie);
}
.fuss__logo img {
  height: 60px;
  width: auto;
}
.fuss__logo .asa-logo--dunkel {
  display: none;
}
[data-thema="dunkel"] .fuss__logo .asa-logo--hell {
  display: none;
}
[data-thema="dunkel"] .fuss__logo .asa-logo--dunkel {
  display: block;
}
.fuss address {
  margin-top: 1.25rem;
  font: 500 1rem/1.6 var(--schrift-text);
  font-style: normal;
}
.fuss address a {
  text-decoration: none;
  font-weight: 700;
}
.fuss h2 {
  margin-bottom: 0.9rem;
  font: 650 var(--t-caption) / 1.2 var(--schrift-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.fuss .zeiten {
  margin-top: 0;
}
.fuss .zeiten li {
  font-size: 0.9375rem;
  padding: 0.45rem 0;
}
.fuss__bewerten {
  margin-top: 1.5rem;
}
.fuss__seiten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 3rem;
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--linie);
}
.fuss__seiten ul li a {
  display: inline-block;
  padding: 0.3rem 0;
  font: 500 0.9375rem/1.4 var(--schrift-text);
  text-decoration: none;
  color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
  .fuss__seiten ul li a:hover {
    text-decoration: underline;
    text-decoration-color: var(--leit);
    text-underline-offset: 0.2em;
  }
}
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  font: 500 0.875rem/1.5 var(--schrift-text);
  color: var(--text-leise);
}
.fuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.fuss__unten a {
  color: var(--text);
  text-decoration: none;
}
.fuss__unten a:hover {
  text-decoration: underline;
}
.fuss__signatur a {
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (max-width: 900px) {
  .fuss {
    margin-top: 3rem;
    padding-top: 3rem;
  }
  .fuss__oben {
    grid-template-columns: 1fr;
  }
  .fuss__seiten {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.5rem;
  }
  .fuss__seiten > div:first-child {
    grid-column: 1 / -1;
  }
  .fuss__seiten > div:first-child ul {
    columns: 2;
    column-gap: 1.5rem;
  }
}

main:has(> .schildband:last-child) + .fuss {
  margin-top: 0;
}

/* ---------- Fester Anrufen-Knopf (GESETZ Kap. 10: dauerhaft ab Pixel 1, mit Verb, nie ausgeblendet) ----------
   nachfix-r2 #70: Verdeckung über Platz statt Ausblenden — site.js setzt --fab-w (Knopfbreite) und --fab-hub
   (Hub über die Kontaktleiste). Ebenen: Inhalt < Knopf (58) < Kontaktleiste (59) < Kopfleiste (60). */
.fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 58;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: var(--fab-h);
  padding: 0 1.25rem 0 1.05rem;
  background: var(--akzent);
  color: var(--akzent-text);
  font: 700 1rem/1 var(--schrift-text);
  text-decoration: none;
  box-shadow:
    0 0 0 2px var(--grund),
    var(--kontaktschatten);
  translate: 0 var(--fab-hub, 0px);
  transition:
    transform 140ms var(--ease),
    background-color var(--t-ui) var(--ease);
}
.fab.fab--gleiten {
  transition:
    translate 260ms var(--ease),
    transform 140ms var(--ease),
    background-color var(--t-ui) var(--ease);
}
.asa-kontakt {
  position: relative;
  z-index: 59;
}
@media (prefers-reduced-motion: reduce) {
  .fab.fab--gleiten {
    transition: background-color var(--t-ui) var(--ease);
  }
}
.fab svg {
  width: 22px;
  height: 22px;
}
.fab:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .fab:hover {
    background: var(--marke-hover);
  }
}
/* augen-fix-2: unter 900 px kompakter runder Icon-Knopf (56 px) — bleibt dauerhaft sichtbar, deckt aber nur eine
   kleine Ecke; Name kommt aus aria-label „Anrufen 030 916 34 16“, das Wort „Anrufen“ wird nur optisch ausgeblendet */
@media (max-width: 900px) {
  :root {
    --fab-h: 56px;
  }
  .fab {
    --fab-h: 56px;
    width: var(--fab-h);
    height: var(--fab-h);
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    box-shadow:
      0 0 0 2px var(--grund),
      0 6px 18px rgb(7 2 2 / 0.28);
  }
  .fab svg {
    width: 24px;
    height: 24px;
  }
}
/* ---------- Unterseiten: Bühne (vollflächig, themenfest über Tokens ab 901 px), Brotkrumen ---------- */
.buehne {
  position: relative;
  display: grid;
  min-height: clamp(34rem, calc(100svh - var(--kopfleiste-h)), 46rem);
  background: var(--nacht-fest);
  color: var(--text);
  overflow: hidden;
}
@media (min-width: 901px) {
  .buehne {
    --text: var(--kalk-fest);
    --text-leise: var(--meta-fest);
    --leit: var(--schild-fest);
    color: var(--kalk-fest);
  }
}
.buehne__bild {
  grid-area: 1 / 1;
  position: relative;
}
.buehne__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.buehne__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgb(7 2 2 / 0.74) 0%,
    rgb(7 2 2 / 0.6) 46%,
    rgb(7 2 2 / 0.18) 70%,
    rgb(7 2 2 / 0) 84%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 55%,
    transparent 88%
  );
  mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 88%);
}
.buehne__inhalt {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--rand));
  margin: 0 auto;
  padding: 0 var(--rand) 5rem;
}
.buehne__text {
  max-width: 46rem;
}
.krumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin-bottom: 1.4rem;
  font: 500 0.875rem/1.3 var(--schrift-text);
  color: var(--text-leise);
}
.krumen li + li::before {
  content: "›";
  margin-right: 0.6rem;
}
.krumen a {
  color: var(--text);
  text-decoration: none;
}
.krumen a:hover {
  text-decoration: underline;
}
.krumen [aria-current] {
  color: var(--text);
  font-weight: 650;
}
.buehne__z1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  font: 600 clamp(0.95rem, 0.85rem + 0.3vw, 1.125rem) / 1.3 var(--schrift-text);
  letter-spacing: 0.01em;
  color: var(--text);
  text-shadow: 0 1px 2px rgb(7 2 2 / 0.5);
}
.buehne__z1 .punkt {
  background: var(--schild-fest);
  box-shadow: 0 0 0 2px var(--kalk-fest);
}
.buehne__pointe {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-weight: 750;
  font-size: clamp(2.4rem, 1.3rem + 3vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--text);
}
.buehne__pointe .akzentwort::after {
  background: var(--schild-fest);
}
.buehne__cta {
  margin-top: 2rem;
  background: var(--tor-fest);
  color: var(--auf-tor-fest);
}
@media (hover: hover) and (pointer: fine) {
  .buehne__cta:hover {
    background: var(--tor-fest-tief);
  }
}
@media (max-width: 900px) {
  .buehne {
    display: block;
    min-height: 0;
    background: var(--grund);
  }
  .buehne__bild {
    height: clamp(260px, 46svh, 480px);
  }
  .buehne__bild::after {
    display: none;
  }
  .buehne__inhalt {
    padding: 1.6rem var(--rand) 2rem;
  }
  .buehne__z1 {
    color: var(--text-leise);
    text-shadow: none;
    font-size: 0.9375rem;
  }
  .buehne__z1 .punkt {
    box-shadow: none;
  }
  .buehne__pointe {
    font-size: clamp(1.85rem, 1.1rem + 3.2vw, 2.4rem);
  }
  .buehne__cta {
    width: 100%;
    max-width: 22rem;
    background: var(--akzent);
    color: var(--akzent-text);
  }
}

/* ---------- Leistungsseite (Muster hu-au.html) ---------- */
.ls-intro {
  margin-top: 5.5rem;
  align-items: start;
}
.ls-intro__text {
  grid-column: 2 / 9;
}
.ls-intro__text .t-lead {
  color: var(--text);
  max-width: 44rem;
}
.ls-preiszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2.25rem;
  margin-top: 2.25rem;
  padding: 1.4rem 0;
  border-block: 1px solid var(--linie);
}
.ls-preiszeile .t-wert {
  color: var(--text);
}
.ls-preiszeile ul {
  display: grid;
  gap: 0.35rem;
}
.ls-preiszeile li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font: 600 1rem/1.35 var(--schrift-text);
}
.ls-preiszeile li .punkt {
  transform: translateY(-0.05rem);
}
.ls-fussnote {
  margin-top: 0.9rem;
}
.ls-intro__wz {
  grid-column: 10 / 14;
  grid-row: 1 / 3;
}
/* Detailbild unter dem Preis, über die linke Kante (Fix 6b #14: keine Leere neben dem HU-Check) */
.ls-intro__bild {
  grid-column: 1 / 9;
  grid-row: 2;
  align-self: stretch;
  min-height: 18rem;
  margin-top: 2.5rem;
}
.ls-intro__bild > img {
  position: absolute;
  inset: 0;
}
.hu {
  background: var(--grund);
  border: 1px solid var(--linie);
  box-shadow: var(--kontaktschatten);
  padding: 1.6rem;
}
.hu h2 {
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-weight: 750;
  font-size: clamp(1.45rem, 1.15rem + 0.8vw, 1.85rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}
.hu > p {
  margin-top: 0.75rem;
  font: 400 0.9375rem/1.5 var(--schrift-text);
  color: var(--text-leise);
}
.hu__modus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.hu__eingabe {
  margin-top: 1.1rem;
}
.hu__ampel {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0.25rem 0.85rem;
  align-items: start;
  margin-top: 1.1rem;
  padding: 1rem;
  background: var(--flaeche);
  border-left: 4px solid var(--ampel, var(--linie));
}
.hu__ampel i {
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--ampel, var(--linie));
}
.hu__ampel b {
  display: block;
  font: 700 1.125rem/1.3 var(--schrift-text);
}
.hu__ampel span {
  display: block;
  font: 500 0.9375rem/1.45 var(--schrift-text);
  color: var(--text-leise);
}
.hu__ampel[data-stufe="gruen"] {
  --ampel: var(--ok);
}
.hu__ampel[data-stufe="gelb"] {
  --ampel: var(--warn);
}
.hu__ampel[data-stufe="rot"] {
  --ampel: var(--error);
}
.hu__regel {
  margin-top: 0.9rem;
  font: 400 0.8125rem/1.45 var(--schrift-text);
  color: var(--text-leise);
}
.hu .knopf {
  width: 100%;
  margin-top: 1.1rem;
  white-space: normal;
  text-align: center;
}
.ls-was {
  margin-top: 6rem;
  align-items: center;
}
.ls-was__bild {
  grid-column: 1 / 8;
}
/* ② links, ③ Fragen rechts in EINER Sektion (Fix 6b #14 + GESETZ Kap. 2: nie zwei medienlose Sektionen in Folge) */
.ls-was {
  align-items: start;
}
.ls-was__text {
  grid-column: 2 / 8;
  grid-row: 1;
}
.ls-was > .ls-fragen {
  grid-column: 9 / 14;
  grid-row: 1;
  margin-top: 0;
}
.ls-was > .ls-fragen .ls-fragen__liste {
  margin-top: 1.75rem;
}
.schildliste {
  margin-top: 1.75rem;
  border-top: 1px solid var(--linie);
}
.schildliste li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linie);
  font: 500 1.0625rem/1.45 var(--schrift-text);
}
.schildliste .punkt {
  transform: translateY(-0.08rem);
}
.marginalie {
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--leit);
}
.marginalie blockquote {
  font: 600 1.125rem/1.45 var(--schrift-text);
}
.marginalie cite {
  display: block;
  margin-top: 0.5rem;
  font: 500 var(--t-caption) / 1.4 var(--schrift-text);
  font-style: normal;
  color: var(--text-leise);
}
.ls-fragen {
  margin-top: 6rem;
}
.ls-fragen__kopf {
  grid-column: 2 / 7;
}
.ls-fragen__liste {
  grid-column: 7 / 14;
  border-top: 1px solid var(--linie);
}
.frage {
  border-bottom: 1px solid var(--linie);
}
.frage summary {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  min-height: 64px;
  padding: 1.1rem 0;
  list-style: none;
  cursor: pointer;
  font: 650 var(--t-h3b) / 1.3 var(--schrift-text);
}
.frage summary::-webkit-details-marker {
  display: none;
}
.frage summary::after {
  content: "+";
  flex: none;
  font: 700 1.5rem/1 var(--schrift-text);
  color: var(--leit-text);
  transition: transform var(--t-ui) var(--ease);
}
.frage[open] summary::after {
  transform: rotate(45deg);
}
.frage p {
  padding: 0 0 1.4rem;
  max-width: 60ch;
  color: var(--text-leise);
}
.ls-ablauf {
  margin-top: 6rem;
  align-items: start;
}
.ls-ablauf__text {
  grid-column: 2 / 8;
}
.ls-ablauf__bild {
  grid-column: 9 / 15;
}
.schritte {
  margin-top: 2rem;
  border-top: 1px solid var(--linie);
}
.schritte li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linie);
  font: 600 1.125rem/1.4 var(--schrift-text);
}
.schritte li .t-nr {
  font-size: 1.6rem;
  color: var(--leit-text);
}
.preiskarte {
  margin-top: 2.25rem;
  padding: 1.5rem;
  background: var(--grund);
  border: 1px solid var(--linie);
  box-shadow: var(--kontaktschatten);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1.5rem;
  align-items: center;
}
.preiskarte b {
  font: 700 1.0625rem/1.3 var(--schrift-text);
}
.preiskarte > span:not(.t-wert) {
  font: 500 0.9375rem/1.4 var(--schrift-text);
  color: var(--text-leise);
}
.preiskarte .t-wert {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem);
}
.preiskarte .knopf {
  grid-column: 1 / -1;
  margin-top: 0.75rem;
  white-space: normal;
}
.schildband {
  --text: var(--auf-schild);
  --text-leise: var(--auf-schild);
  --leit: var(--auf-schild);
  margin-top: 7rem;
  padding-block: 4.5rem;
  background: var(--schild-fest);
  color: var(--auf-schild);
}
.schildband__kopf {
  grid-column: 2 / 8;
}
.schildband__kopf .knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-top: 2rem;
}
.schildband .knopf--hell {
  background: var(--kalk-fest);
  color: #8f0312;
}
@media (hover: hover) and (pointer: fine) {
  .schildband .knopf--hell:hover {
    background: #fff;
  }
}
.schildband .textlink {
  color: var(--auf-schild);
  text-decoration-color: var(--auf-schild);
}
.schildband__liste {
  grid-column: 9 / 14;
}
.schildband__label {
  margin-bottom: 0.9rem;
  font: 600 var(--t-caption) / 1.2 var(--schrift-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.schildband__liste a:first-of-type {
  border-top: 1px solid var(--linie-schild);
}
.schildband__liste a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linie-schild);
  color: var(--auf-schild);
  text-decoration: none;
  font: 600 1.15rem/1.3 var(--schrift-text);
}
.schildband__liste .punkt {
  background: var(--auf-schild);
  transform: translateY(-0.1rem);
}
.schildband__liste small {
  font: 600 0.9375rem/1.3 var(--schrift-text);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .schildband__liste a:hover span {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}
@media (max-width: 900px) {
  .ls-intro {
    margin-top: 3rem;
  }
  .ls-intro__wz {
    grid-row: 2;
    margin-top: 2.5rem;
  }
  .ls-was,
  .ls-fragen,
  .ls-ablauf {
    margin-top: 4rem;
  }
  .ls-ablauf__bild {
    grid-row: 2;
    margin-top: 2rem;
  }
  .ls-intro__bild {
    grid-row: 3;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .ls-was > .ls-fragen {
    grid-row: 2;
    margin-top: 3.5rem;
  }
  .ls-fragen__liste {
    margin-top: 1.5rem;
  }
  .schildband {
    margin-top: 4.5rem;
    padding-block: 3rem;
  }
  .schildband__liste {
    margin-top: 2rem;
  }
}

/* ---------- Bewegung aus, wenn gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  html.bewegt [data-reveal] {
    opacity: 1;
    transition: none;
  }
  html.bewegt .zeile > span {
    transform: none;
    transition: none;
  }
  .fluegel {
    display: none;
  }
}

/* =====================================================================================
   fix-A (07.11.2026) — zentral aus den Seiten-<style>-Notlösungen (6c-1 … 6c-9) gehoben.
   Seiten tragen ab jetzt nur noch ihr Eigenes; diese Regeln gelten für alle.
   ===================================================================================== */

/* FAQ: das um 45° gedrehte „+“ hat eine feste Box und bleibt in der Zeile (sonst TEXT-CLIP bei offenen Fragen) */
.frage summary::after {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  /* gedreht (×) ragt die Box ~5 px über ihre Kante — Rand fängt das ab */
  margin-right: 0.6rem;
}

/* Knöpfe: lange Texte brechen am Handy/Tablet um statt abgeschnitten zu werden */
@media (max-width: 900px) {
  .knopf {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
    padding-block: 0.7rem;
  }
  .schildband .knoepfe .knopf,
  .buehne__cta {
    text-align: left;
  }
}

/* Telefonnummern trennen nie (datenschutz 1440 u. a.) */
a[href^="tel:"] {
  white-space: nowrap;
}

/* H2 im Zwischenbereich der Leistungsseiten */
@media (min-width: 901px) and (max-width: 1200px) {
  .ls-was .t-h2 {
    font-size: 2.3rem;
  }
}

/* Preiskarte ≤ 420 px gestapelt: Preis unter die Zeilen, nicht daneben gequetscht */
@media (max-width: 420px) {
  .preiskarte {
    grid-template-columns: minmax(0, 1fr);
  }
  .preiskarte .t-wert {
    grid-row: auto;
    grid-column: 1;
    margin-top: 0.35rem;
  }
}

/* Leistungsseiten ohne Festpreis (6c-3): Hinweis-Kasten rechts in ① + offener Preis */
.ls-kasten {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  padding: 1.6rem;
}
.ls-kasten__schild {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linie);
  font: 600 var(--t-caption) / 1.35 var(--schrift-text);
  letter-spacing: 0.02em;
  color: var(--text-leise);
}
.ls-kasten__schild .punkt {
  transform: translateY(-0.02rem);
}
.ls-kasten h2 {
  font-family: var(--schrift-ueberschrift);
  font-stretch: var(--font-display-stretch);
  font-weight: 750;
  font-size: clamp(1.45rem, 1.15rem + 0.8vw, 1.85rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}
.ls-kasten p:not(.ls-kasten__schild) {
  margin-top: 0.85rem;
  font: 400 1rem/1.55 var(--schrift-text);
  color: var(--text);
}
.ls-kasten .textlink {
  margin-top: 1.1rem;
  font-size: 1rem;
}
/* nachfix-r2 #50: kein Display-Fragment mehr — „nach kostenloser Einschätzung“ steht in Lesegröße */
.ls-preiszeile .t-offen {
  font: 600 1.0625rem/1.4 var(--schrift-text);
  color: var(--text);
  max-width: 18ch;
}
/* Kasten ist kürzer als der HU-Check des Musters → Detailbild läuft unter beiden Spalten durch */
@media (min-width: 901px) {
  .ls-intro:has(> .ls-intro__wz > .ls-kasten) .ls-intro__wz {
    grid-row: 1;
  }
  .ls-intro:has(> .ls-intro__wz > .ls-kasten) .ls-intro__bild {
    grid-column: 1 / 14;
    min-height: 24rem;
  }
  .ls-intro:has(> .ls-intro__wz > .ls-kasten) .ls-intro__bild > img {
    object-position: 50% var(--bild-y, 50%);
  }
}

/* Zickzack der Leistungsseiten ohne Werkzeug: ① Bild rechts, ④ Bild links */
@media (min-width: 901px) {
  .ls-intro--rechts .ls-intro__text {
    grid-column: 2 / 8;
    grid-row: 1;
    padding-bottom: 1rem;
  }
  .ls-intro--rechts .ls-intro__bild {
    grid-column: 9 / 15;
    grid-row: 1;
    margin-top: 0;
    min-height: 31rem;
  }
  .ls-ablauf--links .ls-ablauf__text {
    grid-column: 9 / 14;
    grid-row: 1;
  }
  .ls-ablauf--links .ls-ablauf__bild {
    grid-column: 1 / 8;
    grid-row: 1;
    align-self: stretch;
  }
  .ls-ablauf--links .ls-ablauf__bild > img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}
@media (max-width: 900px) {
  .ls-intro--rechts .ls-intro__bild {
    grid-row: 2;
    margin-top: 2.25rem;
  }
}

/* „Mehr lesen“ an einer Stimme: voller Wortlaut aus data/bewertungen.json, Ausklapp ohne Knopf */
.stimme__mehr {
  margin-top: 0.4rem;
}
.stimme__mehr summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font: 650 0.9375rem/1.3 var(--schrift-text);
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--leit);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
}
.stimme__mehr summary::-webkit-details-marker {
  display: none;
}
.stimme__mehr[open] summary {
  color: var(--text-leise);
}
.stimme__mehr p {
  padding-top: 0.25rem;
  max-width: 60ch;
  font: 400 0.9375rem/1.6 var(--schrift-text);
  color: var(--text-leise);
  white-space: pre-line;
}

/* Rotes Band: nie automatisch trennen („Ein-trag“, ratgeber-garantie 390) — Umbruch nur an Wortgrenzen bzw. &shy; */
.schildband,
.schild {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* fix-C: „0 €“ auf Seiten ohne Festpreis ausdrücklich als Einschätzung beschriften (Preisangabe eindeutig) */
.t-wert--einsch {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
}
.t-wert--einsch small {
  font: 600 0.75rem/1.2 var(--schrift-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* fix-C: Kurzanfrage auf jeder Leistungsseite (Seitenbaum-Pflicht „Formular“) — als zweite Zeile im Ablauf-Abschnitt
   (zusammengelegt, GESETZ Kap. 2: keine zwei medienlosen Sektionen in Folge) · Kopf links, Formular-Karte rechts */
.ls-ablauf > .ls-anfrage {
  grid-column: 2 / 14;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  align-items: start;
  margin-top: 6rem;
}
.ls-anfrage__kopf {
  grid-column: 1;
}
.ls-anfrage__kopf .t-lead {
  margin-top: 1.25rem;
  max-width: 34rem;
}
.ls-anfrage__kopf .ansprech {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  border-bottom: 0;
}
.ls-anfrage__form {
  grid-column: 3;
}
.ls-anfrage__form form {
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--grund);
  border: 1px solid var(--linie);
  box-shadow: var(--kontaktschatten);
}
.ls-anfrage__form .knopf {
  width: 100%;
  white-space: normal;
  text-align: center;
  padding-block: 0.8rem;
}
.ls-anfrage__form .feld input[type="date"] {
  max-width: 20rem;
}
@media (max-width: 900px) {
  .ls-ablauf > .ls-anfrage {
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 4rem;
  }
  .ls-anfrage__kopf,
  .ls-anfrage__form {
    grid-column: 1;
  }
  .ls-anfrage__form {
    margin-top: 2rem;
  }
  .ls-anfrage__form form {
    padding: 1.4rem 1.15rem 1.25rem;
  }
  /* Handy: Ablauf-Bild VOR „So läuft es ab“ — bricht die Textstrecke Was wir machen → Fragen → Ablauf (Funde #22–25) */
  .ls-ablauf__bild {
    grid-row: 1;
    margin-top: 0;
    margin-bottom: 2.25rem;
  }
  .ls-ablauf__text {
    grid-row: 2;
  }
}

/* fix-C: Startseite „So läuft es ab“ — vier Schritte als Zeitstrahl auf einer Linie (kein Karten-Raster) */
.ablauf-band {
  margin-top: 7rem;
  row-gap: 2.5rem;
}
.ablauf-band__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.ablauf-band__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--rinne);
  counter-reset: none;
}
.ablauf-band__liste li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--text);
  font: 600 1.0625rem/1.45 var(--schrift-text);
  text-wrap: pretty;
}
.ablauf-band__liste li::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--leit);
}
.ablauf-band__liste .t-nr {
  font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3.25rem);
  color: var(--leit-text);
}
.ablauf-band__liste li:last-child {
  border-top-color: var(--leit);
}
@media (max-width: 900px) {
  .ablauf-band {
    margin-top: 4.5rem;
    row-gap: 1.75rem;
  }
  .ablauf-band__liste {
    grid-template-columns: minmax(0, 1fr);
  }
  .ablauf-band__liste li {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0 1rem;
    padding: 1.1rem 0 1.2rem;
    border-top-width: 1px;
  }
  .ablauf-band__liste li::before {
    display: none;
  }
  .ablauf-band__liste .t-nr {
    font-size: 1.9rem;
  }
}

/* Handy/Tablet: Kopf- und Bühnen-Knopf lassen die Ecke des Anrufen-Knopfs frei (stehen links, schmaler) */
@media (max-width: 900px) {
  .asa-kopf__cta,
  .buehne__cta {
    width: auto;
    max-width: calc(
      100% + var(--rand) - max(1rem, env(safe-area-inset-right)) -
        var(--fab-w, 8rem) - 0.75rem
    );
    margin-inline: 0 auto;
    padding-inline: 1.1rem;
  }
}
@media (max-width: 900px) {
  .asa-kopf__cta {
    display: flex;
    width: fit-content;
  }
}
/* nachfix-r2 #66: Verweis-Zeilen am Handy nur so breit wie ihr Text — die Ecke des Anrufen-Knopfs bleibt frei, die Linie trägt das li */
@media (max-width: 900px) {
  .rk-index ol > li {
    border-bottom: 1px solid var(--linie);
  }
  .rk-index ol > li > a {
    border-bottom: 0;
    width: fit-content;
    max-width: 100%;
  }
}
/* nachfix-r2 Punkt 11: Ratgeber-Stimmen verweisen für den ganzen Wortlaut auf die Sammelseite (dort klappt „Mehr lesen“ auf) */
.stimme__weiter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin-top: 0.4rem;
  font: 650 0.9375rem/1.3 var(--schrift-text);
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--leit);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
}
.stimme__weiter svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t-ui) var(--ease);
}
.stimme__weiter:active {
  transform: scale(0.98);
}
@media (hover: hover) and (pointer: fine) {
  .stimme__weiter:hover svg {
    transform: translateX(3px);
  }
}

/* ---------- augen-fix-2 · Anrufen-Knopf verdeckt nie Text (Augen-Tor Rot 1+2) ----------
   Handy hoch: der Start-Kopf füllt genau den ersten Bildschirm (Bildband wächst, Text darunter) und hält unten einen
   Schutzraum in Knopfhöhe frei — der runde Knopf sitzt im leeren Streifen unter dem Kopf-Knopf, nie auf dem Satz.
   Der Kopf-Knopf steht wieder mittig und einzeilig (er liegt über dem Schutzraum, nicht neben dem Anrufen-Knopf). */
@media (max-width: 900px) and (orientation: portrait) {
  .asa-kopf {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--kopfleiste-h-klein));
  }
  .asa-kopf__band {
    flex: 1 1 auto;
    height: auto;
    min-height: 240px;
  }
  .asa-kopf__inhalt {
    flex: none;
    padding-bottom: calc(var(--fab-h) + 2.25rem);
  }
  .asa-kopf__cta {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    white-space: nowrap;
  }
}
/* 404 (und jede Fehlerseite aus dem Manager): Überschrift bricht am Handy um, statt bis an den Rand unter den Knopf zu laufen */
@media (max-width: 900px) {
  [data-wm-fehlerseite] .hk__h1 {
    max-width: 12ch;
    text-wrap: balance;
  }
}
/* Fuß-Logo: Klickfläche nur so breit wie das Logo (lief über die ganze Zeile bis unter den Anrufen-Knopf) */
.fuss__logo {
  display: block;
  width: fit-content;
}
/* Inhaltsverzeichnis (Rechtsseiten) am Handy: lange Einträge brechen vor der Spalte des Anrufen-Knopfs um */
@media (max-width: 900px) {
  .rk-index ol > li > a {
    max-width: calc(100% - var(--fab-w, 56px) - 0.5rem);
  }
}

/* ---------- schluss · Augen-Tor Rot 2+3 (07.11.2026) ----------
   Rot 2: Handy hoch — kein leerer Streifen mehr unter „Termin vereinbaren“. Der Kopf füllt weiter den ersten
   Bildschirm, aber das Bildband nimmt den Rest auf; der Kopf-Knopf steht unten auf derselben Linie wie der runde
   Anrufen-Knopf (beide 56 px, beide mit 1 rem Abstand zum Rand) — mittig vs. rechts, sie überlappen nie.
   ≤ 380 px wird der Kopf-Knopf etwas schmaler, damit zwischen ihm und dem runden Knopf Luft bleibt. */
@media (max-width: 900px) and (orientation: portrait) {
  .asa-kopf__inhalt {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}
@media (max-width: 380px) and (orientation: portrait) {
  .asa-kopf__cta {
    gap: 0.45rem;
    padding-inline: 1.05rem;
    font-size: 1rem;
    position: relative;
    left: -0.625rem;
  }
}
/* Rot 3: Handy quer (≤ 900 px, Querformat) — Bildblöcke nie hochkant über die volle Breite.
   Schild + Ratgeber zweispaltig (Bild neben dem Text), Annahme-Bild als flaches Band (max. 60 svh, cover). */
@media (max-width: 900px) and (orientation: landscape) {
  .schild.bruch,
  .ratgeber-sek.bruch {
    grid-template-columns:
      [voll-start] var(--rand) minmax(0, 1fr) minmax(0, 1fr) var(--rand)
      [voll-ende];
    column-gap: 2rem;
  }
  .schild.bruch > *,
  .ratgeber-sek.bruch > * {
    grid-column: 2 / 4 !important;
  }
  .schild.bruch > .schild__liste {
    grid-column: 2 / 3 !important;
    grid-row: 2;
  }
  .schild.bruch > .schild__foto {
    grid-column: 3 / 4 !important;
    grid-row: 2;
    align-self: start;
    aspect-ratio: 4 / 3;
  }
  .schild__foto img {
    object-position: 50% 78%;
  }
  .ratgeber-sek.bruch > .ratgeber-sek__bild {
    grid-column: 2 / 3 !important;
    grid-row: 1;
    position: sticky;
    top: calc(var(--kopfleiste-h-klein) + 1rem);
  }
  .ratgeber-sek__bild > img {
    aspect-ratio: auto;
    height: min(70svh, 22rem);
  }
  .ratgeber-sek.bruch > .ratgeber-sek__text {
    grid-column: 3 / 4 !important;
    grid-row: 1;
    margin-top: 0;
  }
  .annahme__bild img {
    aspect-ratio: auto;
    width: 100%;
    height: 60svh;
    object-fit: cover;
  }
}