/* ===================================================================
   HAUSKLAR DRESDEN — Projektebene

   Die Designregeln liegen zentral in /system/ (Kopie aus
   /srv/projects/webdesign-system, docs/VERWENDUNG.md). Diese Datei
   enthält ausschließlich:

     1. den Marken-Override (Farben, Schrift-Slots, Motion-Tempo)
     2. Bausteine, die es nur auf dieser Seite gibt
     3. Kompatibilität für die Rechtsseiten aus dem Bestand

   Struktur-, Motion- und Grunddesignregeln des Systems werden hier
   nicht neu erfunden. Archetyp: lead-lokal (Klasse archetype-lead) —
   Hausklar sammelt Anfragen, ist aber kein Notdienst: Die Marke bringt
   die ruhige, hochwertige Note dazu.
   =================================================================== */

/* ============================================================ 1  MARKE
   Freigegebene Logovorlage „Variante 1“: dunkles Grün #1F423A, warmes
   Gold #C69B4B. Grün trägt (Vertrauensanker und Haupt-CTA), Gold ist
   Akzent — Linien, Zahlen, Häkchen und der CTA auf dunklem Grund.
   ============================================================ */
:root{
  --c-bg:         #FBFAF6;   /* warmes Papier statt kaltem Weiß */
  --c-bg-alt:     #F1EDE3;   /* Sand */
  --c-bg-dark:    #14302A;   /* tiefes Grün für die Kontrastbühne */
  --c-ink:        #1B241F;
  --c-ink-soft:   #55605A;
  --c-ink-invert: #F3EFE6;
  --c-brand:      #1F423A;   /* Markengrün */
  --c-brand-ink:  #FFFFFF;
  --c-accent:     #C69B4B;   /* warmes Gold — Flächen, Linien, dunkler Grund */
  /* Dasselbe Gold als Schrift auf hellem Papier ergibt nur 2,45:1 und ist
     damit nicht lesbar. Für kleine Textzeichen auf hell gibt es deshalb
     einen abgedunkelten Markenton (gemessen 5,0:1). Auf dunklem Grund
     bleibt das helle Gold. */
  --c-accent-text: #8A6820;
  --c-line:       rgb(27 36 31 / 0.14);
  --nav-bg:       #FBFAF6;
  --reveal-mask-color: #FBFAF6;

  /* Schrift-Slot: Serifen-Display wie in der Wortmarke des Logos, ruhige
     Grotesk im Lauftext. Beide liegen lokal im System (kein CDN). */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --leading-heading: 1.12;

  /* Bewegung: ruhiger als der Standard des Lead-Archetyps (700 ms).
     Hausklar verkauft Entlastung, nicht Eile. */
  --dur-reveal: 900ms;
  --stagger-step: 90ms;
  --reveal-distance: 34px;
}

/* ------------------------------------------------------------------
   Unterlängen im Text-Reveal (Befund Alex, 11.08.2026)

   Das Motion-System zerlegt eine Überschrift mit data-reveal-text in
   Zeilen-Spans (.line) und maskiert jede Zeile mit overflow:clip, damit
   der Text von unten einfahren kann. Die Maske ist dabei genau so hoch
   wie die Zeilenhöhe — bei Fraunces mit line-height 1.06 ragt die
   Unterlänge von g, p, q, y darunter hinaus und wurde abgeschnitten
   (gemessen: 3,2 px bei 390 px Fenster bis 6,2 px bei 1920 px).

   Reparatur an der Wurzel, ohne den Effekt anzutasten: Die Maske wird
   nach unten um --reveal-descender verlängert und derselbe Betrag als
   negativer Außenabstand wieder abgezogen — das Layout bleibt damit
   Pixel für Pixel wie vorher, nur die Clip-Kante sitzt tiefer. Der
   wartende Text muss dann weiter unten starten als die 110 % des
   Systems, sonst schaut er im verlängerten Streifen hervor.

   Der Wert liegt auf Projektebene, weil site/system/ eine unveränderte
   Kopie des zentralen Systems ist (Auslieferungsregel). Für das zentrale
   System ist der Befund notiert — dort gehört er auf Dauer hin.
   ------------------------------------------------------------------ */
:root{ --reveal-descender: 0.26em; }
[data-reveal-text] .line{
  padding-bottom: var(--reveal-descender);
  margin-bottom: calc(-1 * var(--reveal-descender));
}
.motion-ready [data-reveal-text] .line-inner{ transform: translateY(142%); }
[data-reveal-text].is-inview .line-inner{ transform: none; }

/* Display-Gewichte: Fraunces trägt die Aussage, ohne zu schreien. */
.archetype-lead h1{ font-weight:600; letter-spacing:-0.022em; }
.archetype-lead h2{ font-weight:600; letter-spacing:-0.018em; }
.archetype-lead h3{ font-weight:600; }

/* Der CTA auf dunklem Grund ist golden — dort ist Gold Signal, nicht Zierat. */
.archetype-lead .btn-cta{
  background:var(--c-accent); color:#20180A;
  box-shadow:0 10px 30px rgb(198 155 75 / 0.28);
}
.archetype-lead .btn-cta:hover{ box-shadow:0 14px 36px rgb(198 155 75 / 0.42); }

.kicker::before{ background:var(--c-accent); }

/* Lesefluss: Zwischen Überschrift und Einleitungstext gehört Luft,
   sonst kleben beide aneinander. */
h2 + .einleitung, h2 + p, h2 + div{ margin-top:var(--space-md); }
.einleitung{ margin-bottom:0; }

/* Ankersprünge: Die fixierte Kopfzeile darf den Abschnittsanfang nicht
   verdecken. */
[id]{ scroll-margin-top:6.5rem; }

/* Sehr große Monitore: Das System lässt ab 1920 px die Ränder mitwachsen.
   Hier wachsen zusätzlich die Inhaltsflächen — sonst steht der Text auf
   einem 2560er-Bildschirm als schmaler Streifen in der Mitte. */
@media (min-width:2000px){
  :root{ --w-content:1480px; --w-wide:1880px; }
  body{ font-size:1.22rem; }
}

/* ======================================================== 2  KOPFZEILE
   Verhalten (Glas, Verdichtung, Hide-on-scroll) kommt aus dem System.
   Hier nur Marke, Telefonblock und das mobile Menü.
   ============================================================ */
.site-nav .nav-inner{ gap:var(--space-md); }

/* Zeilenboxen im Kopf: Die Elemente müssen höher sein als ihr Text.
   Vorher stand hier line-height:1 — die Schrift ragte damit oben und unten
   aus ihrer eigenen Box (gemessen: 28 px Text in einer 22,7 px hohen Box).
   Sobald irgendwo ein Beschnitt greift — beim Glas-Effekt der verdichteten
   Kopfzeile, im aufklappbaren Menü —, werden dadurch Ober- und Unterlängen
   angeschnitten: die Bögen von g, y und p. Deshalb hier durchgehend
   ausreichende Zeilenhöhen und ausdrücklich kein Beschnitt. */
.site-nav, .site-nav .nav-inner, .site-nav ul, .site-nav li,
.marke, .marke__text, .nav-tel{ overflow:visible; }

.marke{ display:flex; align-items:center; gap:0.7em; text-decoration:none; }
.marke__zeichen{ width:2.4rem; height:2.4rem; flex:0 0 auto; }
.marke__text{ display:flex; flex-direction:column; }
.marke__name{
  font-family:var(--font-display); font-weight:600; font-size:1.42rem;
  line-height:1.2; letter-spacing:-0.015em; color:var(--c-ink);
}
.marke__zusatz{
  font-family:var(--font-body); font-size:0.62rem; font-weight:600;
  line-height:1.4; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--c-ink-soft); margin-top:0.1em;
}
.site-nav.nav-on-media:not(.is-scrolled) .marke__name,
.site-nav.nav-on-media:not(.is-scrolled) .marke__zusatz{ color:inherit; }

.nav-rechts{ display:flex; align-items:center; gap:var(--space-sm); }
.nav-tel{ text-decoration:none; display:flex; flex-direction:column; }
.nav-tel__nr{ font-weight:700; font-size:var(--text-sm); line-height:1.3; white-space:nowrap; }
.nav-tel__zusatz{ font-size:0.66rem; line-height:1.4; color:var(--c-ink-soft); white-space:nowrap; }
/* Die Menüpunkte tragen Unterlängen (Fragen, Einsatzgebiet,
   Wertanrechnung) — die Zeile muss dafür Platz lassen. */
.site-nav ul a{ line-height:1.5; }
.nav-tel:hover .nav-tel__nr{ color:var(--c-brand); }

/* Mobiles Menü: eigenes Panel unter der Kopfzeile. */
.navi-schalter{
  display:none; width:2.9rem; height:2.9rem; border:1px solid var(--c-line);
  border-radius:var(--radius-sm); background:transparent; color:inherit;
  position:relative; flex:0 0 auto;
}
.navi-schalter span,
.navi-schalter span::before,
.navi-schalter span::after{
  position:absolute; left:50%; width:1.15rem; height:1.6px;
  background:currentColor; transform:translateX(-50%);
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}
.navi-schalter span{ top:50%; margin-top:-0.8px; }
.navi-schalter span::before{ content:""; top:-0.42rem; }
.navi-schalter span::after{ content:""; top:0.42rem; }
.menue-offen .navi-schalter span{ background:transparent; }
.menue-offen .navi-schalter span::before{ transform:translateX(-50%) translateY(0.42rem) rotate(45deg); }
.menue-offen .navi-schalter span::after{ transform:translateX(-50%) translateY(-0.42rem) rotate(-45deg); }

.hauptnavi{ display:none; }

/* Zwischen 821 und 1080 px passen Marke, fünf Menüpunkte, Telefonblock und
   Anfrage-Knopf nicht mehr nebeneinander: Gemessen war der Kopfinhalt bei
   1024 px 41 px breiter als sein Container und wurde dadurch gestaucht.
   In diesem Bereich übernimmt deshalb das Klappmenü. Die mobile
   CTA-Leiste bleibt davon unberührt — sie gehört weiter zu 820 px. */
@media (max-width:1240px){
  .nav-tel__zusatz{ display:none; }
}
@media (max-width:1080px){
  .site-nav ul{ display:none; }
  .navi-schalter{ display:block; }
  .nav-tel{ display:none; }
  .hauptnavi{
    display:block; max-height:0; overflow:hidden;
    background:color-mix(in srgb, var(--c-bg) 96%, transparent);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    transition:max-height var(--dur-base) var(--ease-out);
  }
  .hauptnavi.offen{ max-height:32rem; box-shadow:var(--shadow-md); }
  .hauptnavi a{
    display:block; padding:0.95rem var(--gutter); text-decoration:none;
    border-top:1px solid var(--c-line); font-weight:600; font-size:var(--text-sm);
  }
  .hauptnavi .kopf-tel{ color:var(--c-brand); font-weight:800; }
}
/* Unter 560 px weicht auch der Anfrage-Knopf im Kopf — dort trägt die
   Sticky-Leiste am unteren Rand die Anfrage. */
@media (max-width:560px){
  .site-nav .nav-cta{ display:none; }
}
@media (max-width:400px){
  .marke__name{ font-size:1.2rem; }
  .marke__zeichen{ width:2rem; height:2rem; }
}

/* ============================================================ 3  HERO
   Split-Hero des Lead-Archetyps. Das Bild läuft auf großen Bildschirmen
   bis an die rechte Fensterkante — so wirkt ein 2560er-Monitor gestaltet
   und nicht nur breiter.
   ============================================================ */
.hero{
  position:relative; overflow:clip;
  padding-top:clamp(6.5rem, 9vh, 8.5rem);
  padding-bottom:var(--space-xl);
  background:
    radial-gradient(120% 90% at 8% 0%, var(--c-bg-alt) 0%, transparent 62%),
    var(--c-bg);
}
.hero-raster{ display:grid; gap:var(--space-xl); align-items:center; }
@media (min-width:1024px){
  .hero-raster{
    grid-template-columns:minmax(0,5.4fr) minmax(0,6fr);
    gap:clamp(2.5rem,4.5vw,5.5rem);
    min-height:min(78vh, 46rem);
  }
}
/* Die Serifen-Display läuft breiter als eine Grotesk. Die Hero-Headline
   bekommt deshalb eine eigene, etwas ruhigere Skala als --text-display:
   Auf 1440 px muss neben der Aussage auch der CTA im ersten Bildschirm
   stehen — sonst kostet die Größe Anfragen. */
.hero h1{
  max-width:15ch;
  font-size:clamp(2.35rem, 1.25rem + 3.3vw, 4.5rem);
  line-height:1.06;
}
@media (min-width:1920px){ .hero h1{ font-size:5rem; max-width:14ch; } }
.hero-lead{
  font-size:var(--text-md); color:var(--c-ink-soft); max-width:48ch;
  margin-block:var(--space-md) var(--space-lg);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--space-sm); }
.hero .trust-row{ margin-top:var(--space-lg); padding:0; }
.trust-row .tick{ color:var(--c-accent-text); }

.hero-medien{ position:relative; }
@media (min-width:1024px){
  /* Das Bild läuft bis an die Fensterkante — auch dann, wenn der Container
     bei 1600 px gedeckelt ist. Ohne diese Rechnung stünde auf einem
     2560er-Monitor rechts ein halber Meter tote Fläche. */
  .hero-medien{
    margin-right:calc(-1 * max(var(--gutter), (100vw - var(--w-wide)) / 2));
  }
  .hero-bild{ border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
}
.hero-bild{ aspect-ratio:4 / 3; position:relative; box-shadow:var(--shadow-lg); }
/* Der Vorhang über dem Kopfbild zieht schneller auf als weiter unten auf
   der Seite: Der erste Eindruck darf nicht auf eine Animation warten. */
.hero-bild::after{ transition-duration:700ms!important; transition-delay:0ms!important; }
.hero-bild img{ transition-duration:900ms!important; transition-delay:0ms!important; }
@media (min-width:1440px){ .hero-bild{ aspect-ratio:16 / 11; } }
@media (max-width:1023px){ .hero-bild{ aspect-ratio:16 / 10; } }
@media (max-width:760px){ .hero-bild{ aspect-ratio:4 / 3; } }

/* Schwebende Nutzenanker über der Bildkante — Bauform des Lead-Archetyps. */
.schwebe-karte{
  position:absolute; z-index:3; max-width:19rem;
  background:var(--c-bg); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:var(--space-sm) var(--space-md);
  display:flex; align-items:center; gap:0.8em;
  font-size:var(--text-sm); line-height:1.45;
}
.schwebe-karte b{ display:block; }
.schwebe-karte__zeichen{
  width:2.4em; height:2.4em; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-weight:700;
  background:color-mix(in srgb, var(--c-brand) 10%, transparent);
  color:var(--c-brand);
}
.schwebe-karte--oben{ top:8%; left:-1.6rem; }
.schwebe-karte--unten{ bottom:8%; left:-1.6rem; }
@media (max-width:1023px){
  .schwebe-karte{ max-width:16rem; font-size:0.82rem; }
  .schwebe-karte--oben{ top:-1.1rem; right:0.6rem; left:auto; }
  .schwebe-karte--unten{ bottom:-1.1rem; left:0.6rem; }
}
@media (max-width:560px){
  .schwebe-karte{ position:static; max-width:none; box-shadow:var(--shadow-sm);
    border:1px solid var(--c-line); margin-top:var(--space-sm); }
}


/* ======================================================= 4  TRUSTBAND */
.belegzeile{
  border-block:1px solid var(--c-line);
  background:var(--c-bg-alt);
  padding-block:var(--space-md);
}
.belegzeile ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:var(--space-sm) var(--space-xl);
}
.belegzeile li{
  display:flex; align-items:center; gap:0.55em;
  font-size:var(--text-sm); font-weight:600; color:var(--c-ink-soft);
}
.haken{ color:var(--c-accent-text); font-weight:700; flex:0 0 auto; }

/* =================================================== 5  SITUATIONS-BAHN
   Wischbahn statt starrem Raster: die Reihe läuft rechts aus dem
   Container heraus und lädt zum Weiterschauen ein. Natives scroll-snap.
   ============================================================ */
.bahn-kopf{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-lg);
}
.bahn-bedienung{
  display:flex; align-items:center; gap:var(--space-md); flex:0 0 auto;
}
.bahn-pfeile{ display:flex; gap:0.6rem; flex:0 0 auto; }
/* Der Einleitungstext läuft sonst unter den Blätter-Pfeilen durch. */
#situationen .einleitung{ max-width:52ch; }

/* Der Zähler sagt in einem Blick, dass da noch mehr kommt: „1–3 von 7“. */
.bahn-zaehler{
  margin:0; font-size:var(--text-sm); font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--c-ink-soft);
  white-space:nowrap;
}
.bahn-zaehler:empty{ display:none; }

/* Vorher waren die Pfeile dünne Umrisse und wurden als Zierat gelesen.
   Jetzt tragen sie die Markenfarbe und sind groß genug, um als Bedienung
   erkannt zu werden (Weisung Alex, 11.08.2026). */
.pfeil-knopf{
  width:3.25rem; height:3.25rem; border-radius:50%;
  display:grid; place-items:center;
  border:1.5px solid var(--c-brand); background:var(--c-bg);
  font-size:1.35rem; line-height:1; color:var(--c-brand); cursor:pointer;
  box-shadow:0 1px 3px rgb(27 36 31 / 0.10);
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             opacity var(--dur-fast) var(--ease-out);
}
.pfeil-knopf:hover{ background:var(--c-brand); color:var(--c-brand-ink); transform:translateY(-1px); }
.pfeil-knopf:active{ transform:translateY(0); }
/* Am Anfang und am Ende der Bahn: sichtbar vorhanden, aber wirkungslos —
   das erklärt nebenbei, wo man sich in der Reihe befindet. */
.pfeil-knopf[disabled]{
  opacity:0.34; cursor:default; box-shadow:none;
  background:var(--c-bg); color:var(--c-brand); border-color:var(--c-line);
}
.pfeil-knopf[disabled]:hover{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .pfeil-knopf:hover{ transform:none; }
}

/* Der Rahmen blendet die Bahn an der rechten Containerkante weich aus.
   Zusammen mit der angeschnittenen Karte ergibt das die Aussage
   „hier geht es weiter“, ohne sie hinschreiben zu müssen. */
.bahn-rahmen{ position:relative; }
.bahn-rahmen::after{
  content:""; position:absolute; top:0; bottom:0;
  right:calc(-1 * var(--gutter)); width:clamp(2rem, 5vw, 4.5rem);
  background:linear-gradient(to right, transparent, var(--c-bg) 78%);
  pointer-events:none; z-index:2;
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
}
.bahn-rahmen.hat-rest::after{ opacity:1; }

/* Die Kartenbreite ist so gerechnet, dass immer eine Karte angeschnitten
   bleibt: --sicht ist die Zahl der ganz sichtbaren Karten, 0.38 davon ist
   der Anschnitt. Damit steht nie eine glatte Kante am rechten Rand.
   Die grüne Systemscrollbar ist entfernt — sie sah aus wie eine
   Fortschrittsanzeige, ließ sich aber nicht als Bedienung erkennen
   (Befund Alex, 11.08.2026). Bedient wird über Wischen, Pfeile, Zähler. */
.situations-bahn{
  --sicht:3;
  --anschnitt:0.38;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc(
    (100% - (var(--sicht) - 1 + var(--anschnitt)) * var(--grid-gap))
    / (var(--sicht) + var(--anschnitt)));
  gap:var(--grid-gap);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* Ohne diese Zeile zieht der Snap-Mechanismus die Bahn beim Laden um die
     Breite des Innenabstands weiter — die erste Karte hing dann schon
     angeschnitten am linken Rand und der Zähler begann bei 2. */
  scroll-padding-inline:var(--gutter);
  margin-top:var(--space-lg);
  margin-inline:calc(-1 * var(--gutter));
  padding-inline:var(--gutter);
  padding-block:0.4rem var(--space-md);
  scrollbar-width:none;
}
.situations-bahn::-webkit-scrollbar{ display:none; }
.situations-bahn:focus-visible{
  outline:2px solid var(--c-brand); outline-offset:4px; border-radius:var(--radius-md);
}
.situations-bahn > *{ scroll-snap-align:start; }
.situations-bahn > * > .card-body{ height:100%; }
@media (min-width:1600px){ .situations-bahn{ --sicht:4; } }
@media (max-width:1023px){ .situations-bahn{ --sicht:2; } }
/* Handy: gut eine Karte im Bild, die nächste deutlich angeschnitten.
   Der Anschnitt fällt hier kleiner aus — sonst bliebe für die Karte
   selbst zu wenig Breite und der Text bräche nach jedem zweiten Wort um. */
@media (max-width:640px){ .situations-bahn{ --sicht:1; --anschnitt:0.24; } }

/* Auf dem Handy ersetzt ein kurzer Hinweis die Pfeile: Er verschwindet,
   sobald tatsächlich gewischt wurde — dann hat er seine Aufgabe erfüllt. */
.bahn-wischhinweis{
  display:none;
  margin:0; font-size:var(--text-xs); font-weight:600;
  color:var(--c-accent-text); letter-spacing:var(--tracking-wide);
  transition:opacity var(--dur-base) var(--ease-out);
}
.bahn-wischhinweis::before{ content:"↔ "; }
.bahn-wischhinweis.ist-erledigt{ opacity:0; }
@media (max-width:700px){
  .bahn-bedienung .bahn-pfeile{ display:none; }
  .bahn-wischhinweis{ display:block; }
}
@media (max-width:560px){
  /* Der Zähler wandert unter die Überschrift, sonst wird der Kopf zu eng. */
  .bahn-kopf{ display:block; }
  .bahn-bedienung{ margin-top:var(--space-sm); gap:var(--space-sm); }
}
.situations-karte .card-body{ gap:var(--space-xs); }
.situations-karte h3{ font-size:var(--text-md); }
.situations-karte--frage{
  background:var(--c-bg-alt);
  border-color:color-mix(in srgb, var(--c-brand) 22%, transparent);
}
.situations-karte--frage .card-link{ margin-top:var(--space-sm); }

/* ====================================================== 6  VERTRAUEN */
.vertrauen-kopf{ display:grid; gap:var(--space-md); }
@media (min-width:1024px){
  .vertrauen-kopf{ grid-template-columns:5fr 6fr; gap:var(--space-2xl); align-items:end; }
}
/* Drei Spalten × zwei Zeilen liest sich ruhiger als sechs schmale
   Streifen — die Texte brechen dann nicht nach jedem zweiten Wort um. */
.vertrauen-raster{
  display:grid; gap:var(--space-lg) var(--space-xl);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  margin-top:var(--space-xl);
}
.vertrauen-punkt{
  padding-top:var(--space-md);
  border-top:2px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.vertrauen-punkt__zeichen{
  display:block; color:var(--c-accent-text); font-size:1.1rem; margin-bottom:0.5rem;
}
.vertrauen-punkt h3{ font-size:var(--text-md); margin-bottom:0.35em; }
.vertrauen-punkt p{ font-size:var(--text-sm); }

/* =================================================== 7  LEISTUNGSZEILEN
   Zwölf Karten wären eine Wand. Nummerierte Zeilen liest man in einem
   Zug — und die Reihe zeigt den Umfang, statt ihn zu behaupten.
   ============================================================ */
.leistungszeilen{
  list-style:none; margin:var(--space-xl) 0 0; padding:0;
  display:grid; gap:0;
}
/* Zwei Spalten, aber jede Spalte für sich durchgezählt: links 01–06,
   rechts 07–12 (Weisung Alex, 11.08.2026). Vorher lief die Nummerierung
   zeilenweise über beide Spalten — 01 links, 02 rechts —, was beim Lesen
   wie ein Zählfehler aussah. grid-auto-flow:column füllt jetzt erst die
   sechs Zeilen der linken Spalte, dann die der rechten. Auf dem Handy
   bleibt es bei einer Spalte in normaler Reihenfolge 01–12. */
@media (min-width:900px){
  .leistungszeilen{
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(6, auto);
    grid-auto-flow:column;
    column-gap:var(--space-2xl);
  }
}
.leistungszeilen li{
  display:flex; gap:var(--space-md); align-items:baseline;
  padding-block:var(--space-md);
  border-top:1px solid var(--c-line);
  transition:border-top-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
/* Diese Zeilen führen nirgendwohin — es gibt keine Detailseite dahinter.
   Deshalb dürfen sie sich beim Darüberfahren auch nicht wie ein Link
   verhalten (Befund Alex, 11.08.2026: sie „springen heraus“, lassen sich
   aber nicht anklicken). Geblieben ist ein typografischer Akzent: die
   Trennlinie nimmt den Goldton an, die Nummer wird kräftiger, und die
   Zeile rückt um zwei Pixel nach — spürbar, aber kein Klickversprechen. */
.leistungszeilen li:hover{
  border-top-color:color-mix(in srgb, var(--c-accent) 65%, transparent);
  transform:translateX(2px);
}
.leistungszeilen li:hover .leistungszeilen__nr{ color:var(--c-brand); }
@media (prefers-reduced-motion:reduce){
  .leistungszeilen li:hover{ transform:none; }
}
.leistungszeilen__nr{
  font-family:var(--font-display); font-variant-numeric:tabular-nums;
  font-size:var(--text-sm); font-weight:600; color:var(--c-accent-text);
  flex:0 0 auto; min-width:1.9em;
  transition:color var(--dur-base) var(--ease-out);
}
.leistungszeilen__text{ font-size:var(--text-sm); color:var(--c-ink-soft); }
.leistungszeilen__text b{
  display:block; color:var(--c-ink); font-size:var(--text-base);
  font-weight:700; margin-bottom:0.15em;
}

/* ================================================ 8  ABLAUF (Prozesslinie)
   Die Linie zeichnet sich beim Scrollen — ruhige Alternative zu Zählern.
   ============================================================ */
.ablauf-reihe{
  display:grid; gap:var(--space-xl);
  margin-top:var(--space-xl); position:relative;
}
@media (min-width:900px){
  .ablauf-reihe{ grid-template-columns:repeat(4,1fr); gap:var(--grid-gap); }
  .ablauf-reihe::before,
  .ablauf-reihe::after{
    content:""; position:absolute; top:1.55rem; left:3rem; right:3rem; height:2px;
  }
  .ablauf-reihe::before{ background:var(--c-line); }
  .ablauf-reihe::after{
    background:var(--c-accent);
    transform:scaleX(0); transform-origin:left;
    transition:transform 1.6s var(--ease-in-out) 0.3s;
  }
  .ablauf-reihe.is-inview::after{ transform:scaleX(1); }
}
.ablauf-punkt{ display:grid; gap:var(--space-xs); position:relative; }
.ablauf-punkt .nr{
  width:3.1rem; height:3.1rem; border-radius:50%;
  display:grid; place-items:center; position:relative; z-index:1;
  background:var(--c-brand); color:var(--c-brand-ink);
  font-family:var(--font-display); font-weight:600; font-size:var(--text-md);
  box-shadow:0 0 0 7px var(--c-bg-alt);
  counter-increment:hkschritt;
}
.ablauf-reihe{ counter-reset:hkschritt; }
.ablauf-punkt .nr::before{ content:counter(hkschritt); }
.ablauf-punkt h3{ font-size:var(--text-md); }
.ablauf-punkt p{ font-size:var(--text-sm); }

/* ============================================ 9  HÖHEPUNKT (Sticky-Szene)
   Die einzige gepinnte Inszenierung der Seite und der einzige
   Hell/Dunkel-Wechsel. Links haftet das Bild, rechts laufen die Punkte
   durch. Ab Tablet abwärts fällt sie auf gestapelte Blöcke zurück.
   ============================================================ */
.hoehepunkt{ --reveal-mask-color:var(--c-bg-dark); }
.fertig-szene{ display:grid; gap:var(--space-xl); }
.fertig-szene .szene-links{ display:flex; flex-direction:column; gap:var(--space-md); }
@media (min-width:1024px){
  .fertig-szene{ grid-template-columns:1fr 1fr; gap:var(--space-2xl); }
  .fertig-szene .szene-links{
    position:sticky; top:0; height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    gap:var(--space-md); padding-block:var(--space-lg);
  }
  .fertig-szene .szene-bild{ flex:0 1 auto; min-height:0; }
  .fertig-szene .szene-bild img{ height:100%; }
}
/* Flache Fenster: lieber normal stapeln als die Spalte sprengen. */
@media (min-width:1024px) and (max-height:760px){
  .fertig-szene .szene-links{ position:static; height:auto; }
}
.fertig-szene .szene-bild{ aspect-ratio:4 / 3; position:relative; }
.fertig-schritt{
  padding-block:var(--space-xl);
  border-top:1px solid rgb(243 239 230 / 0.16);
}
@media (min-width:1024px){
  .fertig-schritt{ min-height:46vh; display:flex; flex-direction:column; justify-content:center; }
}
.fertig-schritt .tick{ color:var(--c-accent); font-weight:700; font-size:var(--text-lg); }
.fertig-schritt h3{ font-size:var(--text-xl); margin-block:var(--space-xs) var(--space-sm); }
.fertig-schritt p{ color:color-mix(in srgb, var(--c-ink-invert) 88%, transparent); max-width:44ch; }
/* Der Standardwert des Systems blendet nicht aktive Schritte auf 25 %
   herunter. Das unterschreitet hier den Lesekontrast deutlich (gemessen
   1,7:1). Der Fokus-Effekt bleibt, die Schritte bleiben aber lesbar —
   sie stehen dauerhaft auf der Seite, nicht nur im Moment ihrer Szene. */
.hoehepunkt .scene-step{ opacity:0.74; }
.hoehepunkt .scene-step.is-active{ opacity:1; }

/* ==================================================== 10  WERTANRECHNUNG */
.wert-split{ align-items:center; }
.wert-bild{ aspect-ratio:4 / 3; position:relative; box-shadow:var(--shadow-md); }
.wert-text p{ color:var(--c-ink-soft); margin-bottom:var(--space-md); }
.wert-text p b{ color:var(--c-ink); }

/* ========================================================= 11  FERNE */
.ferne-schritte{
  list-style:none; counter-reset:hkferne; padding:0;
  margin:var(--space-xl) 0; display:grid; gap:var(--space-md);
}
.ferne-schritte li{
  counter-increment:hkferne; position:relative;
  padding-left:3.2rem; color:var(--c-ink-soft); font-size:var(--text-sm);
}
.ferne-schritte li b{ color:var(--c-ink); }
.ferne-schritte li::before{
  content:counter(hkferne, decimal-leading-zero);
  position:absolute; left:0; top:0.05em;
  font-family:var(--font-display); font-variant-numeric:tabular-nums;
  font-size:var(--text-sm); font-weight:600; color:var(--c-accent-text);
}

/* ======================================================== 12  GEBIET */
.gebiet-kopf{ display:grid; gap:var(--space-md); }
@media (min-width:1024px){
  .gebiet-kopf{ grid-template-columns:5fr 6fr; gap:var(--space-2xl); align-items:end; }
}
.orte{
  display:flex; flex-wrap:wrap; gap:0.7rem;
  margin:var(--space-xl) 0 0; padding:0; list-style:none;
  /* 16 Orte × 90 ms wären fast anderthalb Sekunden bis zum letzten
     Eintrag — für eine Liste zu lang. */
  --stagger-step:35ms;
}
.orte li{
  background:var(--c-bg); border:1px solid var(--c-line);
  border-radius:var(--radius-pill); padding:0.6em 1.25em;
  font-size:var(--text-sm); color:var(--c-ink-soft);
  transition:border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.orte li:hover{ border-color:var(--c-accent); color:var(--c-ink); }

/* =========================================================== 13  FAQ */
.faq{ margin-top:var(--space-lg); }
.frage{ border-top:1px solid var(--c-line); }
.frage:last-child{ border-bottom:1px solid var(--c-line); }
.frage summary{
  cursor:pointer; list-style:none; padding:var(--space-md) 2.5rem var(--space-md) 0;
  font-weight:700; font-size:var(--text-md); line-height:1.35; position:relative;
  transition:color var(--dur-fast) var(--ease-out);
}
.frage summary::-webkit-details-marker{ display:none; }
.frage summary::after{
  content:"+"; position:absolute; right:0.2rem; top:50%;
  transform:translateY(-50%); font-size:1.5rem; font-weight:400;
  color:var(--c-accent-text); line-height:1;
  transition:transform var(--dur-base) var(--ease-out);
}
.frage[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.frage summary:hover{ color:var(--c-brand); }
.frage__text{ padding:0 2.5rem var(--space-md) 0; color:var(--c-ink-soft); }
.frage__text p{ margin:0; }

/* ======================================================= 14  ANFRAGE */
/* Der Anfrageblock steht auf hellem Grund, die Karte darauf in Sand:
   So bleibt der Hell/Dunkel-Rhythmus erhalten (davor liegt der
   Sand-Abschnitt der Fragen) und die Karte hebt sich trotzdem ab. */
.formularblock{ background:var(--c-bg); border-top:1px solid var(--c-line); }
.anfrage-split{ display:grid; gap:var(--space-xl); }
@media (min-width:1100px){
  .anfrage-split{ grid-template-columns:minmax(0,4.6fr) minmax(0,7fr);
    gap:var(--space-2xl); align-items:start; }
  .anfrage-info{ position:sticky; top:7rem; }
}
.anfrage-tel{
  display:inline-block; margin-top:var(--space-md);
  font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600;
  letter-spacing:-0.02em; color:var(--c-brand); text-decoration:none;
}
.anfrage-tel:hover{ color:var(--c-ink); }
.anfrage-tel__zusatz{ font-size:var(--text-sm); color:var(--c-ink-soft); margin-top:0.4rem; }
.anfrage-trust{ margin-top:var(--space-lg); padding:0; flex-direction:column; gap:var(--space-sm); }

.formularkarte{
  background:var(--c-bg-alt); border:1px solid var(--c-line);
  border-radius:var(--radius-lg); padding:clamp(1.4rem, 3vw, 2.75rem);
  box-shadow:var(--shadow-md);
}
/* Eingabefelder auf der Sandkarte bleiben weiß — sonst verschwimmen
   Feld und Untergrund. */
.formularkarte input, .formularkarte select, .formularkarte textarea,
.formularkarte .wahl, .formularkarte .dateifeld{ background:#fff; }
.formularkarte .zustimmung{ background:#fff; }
fieldset{ border:none; padding:0; margin:0; }
.feldgruppe{ margin-bottom:var(--space-lg); }
.feldgruppe > legend{
  font-size:var(--text-xs); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; font-weight:700; color:var(--c-brand);
  padding:0; margin-bottom:var(--space-sm);
}
.reihe{ display:grid; gap:var(--space-sm);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.feld{ margin-bottom:var(--space-sm); }
.feld label, .feld .beschriftung{
  display:block; font-size:var(--text-sm); font-weight:600;
  margin-bottom:0.4em; color:var(--c-ink);
}
.feld .pflicht{ color:var(--c-accent); margin-left:2px; }
.feld .hinweis{
  font-size:var(--text-xs); color:var(--c-ink-soft); font-weight:400;
  margin:0.4em 0 0; line-height:1.5; max-width:none;
}

input[type=text], input[type=tel], input[type=email], select, textarea{
  width:100%; font:inherit; font-size:1rem;
  padding:0.75em 0.9em; color:var(--c-ink); background:var(--c-bg);
  border:1.5px solid var(--c-line); border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
input:focus, select:focus, textarea:focus{
  border-color:var(--c-brand); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c-brand) 18%, transparent);
}
/* Fehler erst zeigen, NACHDEM der Besucher das Feld bearbeitet und verlassen
   hat. Ein leeres Pflichtfeld gleich beim Öffnen rot zu umranden, wirkt wie
   ein Vorwurf, bevor überhaupt etwas eingegeben wurde. */
input:user-invalid, select:user-invalid, textarea:user-invalid{ border-color:#B4562F; }
input:user-valid, select:user-valid, textarea:user-valid{ border-color:#9DB3A4; }
textarea{ resize:vertical; min-height:6.5rem; }
select{
  appearance:none; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355605A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.9rem center;
}

.wahlfelder{ display:grid; gap:0.6rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
/* .feld label setzt display:block und hat höhere Spezifität — ohne das
   .feld davor stünde der Text direkt am Auswahlknopf. */
.feld .wahl, .wahl{
  display:flex; gap:0.65rem; align-items:flex-start;
  padding:0.7em 0.85em; border:1.5px solid var(--c-line);
  border-radius:var(--radius-sm); cursor:pointer; font-weight:400;
  font-size:var(--text-sm); background:var(--c-bg); margin-bottom:0;
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.wahl:hover{ border-color:var(--c-brand); background:var(--c-bg-alt); }
.wahl input{ margin:0.2rem 0 0; flex:0 0 auto; width:1.05rem; height:1.05rem;
  accent-color:var(--c-brand); }
.wahl:has(input:checked){ border-color:var(--c-brand); background:var(--c-bg-alt); }

.feld .zustimmung, .zustimmung{
  display:flex; gap:0.75rem; align-items:flex-start;
  background:var(--c-bg-alt); border:1px solid var(--c-line);
  border-radius:var(--radius-sm); padding:var(--space-sm) var(--space-md);
  font-size:var(--text-sm); line-height:1.55; color:var(--c-ink-soft);
  font-weight:400; margin-bottom:0;
}
.zustimmung input{ margin:0.25rem 0 0; flex:0 0 auto; width:1.15rem; height:1.15rem;
  accent-color:var(--c-brand); }

/* Honeypot — für Menschen unsichtbar, für Bots sichtbar */
.falle{ position:absolute!important; left:-9999px!important; width:1px!important;
  height:1px!important; overflow:hidden!important; }

.dateifeld{
  border:2px dashed color-mix(in srgb, var(--c-brand) 30%, transparent);
  border-radius:var(--radius-md); padding:var(--space-lg) var(--space-md);
  text-align:center; background:var(--c-bg-alt);
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.dateifeld:hover{ border-color:var(--c-brand); }
.dateifeld input{ width:100%; font-size:var(--text-sm); cursor:pointer; }
.dateifeld .hinweis{ text-align:left; }
.dateiliste{ margin:var(--space-sm) 0 0; padding:0; list-style:none;
  font-size:var(--text-sm); text-align:left; }
.dateiliste li{ padding:0.4rem 0; border-bottom:1px solid var(--c-line);
  color:var(--c-ink-soft); display:flex; justify-content:space-between; gap:0.75rem; }
.dateiliste li:last-child{ border-bottom:none; }

.formfehler{
  background:#FBEEE8; border-left:4px solid #B4562F;
  padding:var(--space-sm) var(--space-md); border-radius:var(--radius-sm);
  margin-bottom:var(--space-md); color:#7D3A1C; font-size:var(--text-sm);
}
.formfehler ul{ margin:0.5rem 0 0; padding-left:1.25rem; }

/* Fortschritt beim Senden. Ohne Rückmeldung halten Besucher einen laufenden
   Foto-Upload über Mobilfunk für einen Hänger und brechen ab. */
.absenden-block{ margin-top:var(--space-md); }
.absenden-block .knopf{ width:100%; justify-content:center; }
.fortschritt{ margin-top:var(--space-sm); }
.fortschritt__balken{ height:8px; background:var(--c-line);
  border-radius:var(--radius-pill); overflow:clip; }
.fortschritt__balken i{ display:block; height:100%; width:0;
  background:var(--c-brand); border-radius:var(--radius-pill);
  transition:width .25s ease; }
.fortschritt__text{ margin:0.55rem 0 0; font-size:var(--text-sm); color:var(--c-ink-soft); }
.unterknopf{ font-size:var(--text-sm); color:var(--c-ink-soft); margin:var(--space-sm) 0 0; }
button[disabled]{ opacity:.72; cursor:progress; }

/* ======================================================= 15  KONTAKT */
.kontaktkarten{
  display:grid; gap:var(--grid-gap); margin-top:var(--space-xl);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.kontaktkarte{
  background:var(--c-bg-alt); border:1px solid var(--c-line);
  border-radius:var(--radius-md); padding:var(--space-lg);
}
.kontaktkarte h3{ font-size:var(--text-md); margin-bottom:0.4em; }
.kontaktkarte p{ margin:0; font-size:var(--text-sm); color:var(--c-ink-soft); }
.kontaktkarte a{ font-weight:600; color:var(--c-brand); }

/* ==================================================== 16  FUSSZEILE */
.site-footer{ padding-block:var(--space-2xl) var(--space-lg); }
.fuss-raster{
  display:grid; gap:var(--space-lg) var(--grid-gap);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.fuss-raster ul{ list-style:none; padding:0; margin:0; }
.fuss-raster li{ margin-bottom:0.45rem; }
.fuss-raster p{ margin:0 0 0.4rem; color:color-mix(in srgb, currentColor 78%, transparent); }
.fuss-titel{ font-size:var(--text-sm); font-weight:700; letter-spacing:0.02em;
  margin:0 0 0.9rem; color:var(--c-ink-invert); }
.fuss-marke{ font-family:var(--font-display); font-size:var(--text-md); }
.site-footer a{ text-decoration:none; color:color-mix(in srgb, currentColor 82%, transparent); }
.site-footer a:hover{ color:var(--c-accent); }
.fuss-unten{
  border-top:1px solid rgb(243 239 230 / 0.16); margin-top:var(--space-xl);
  padding-top:var(--space-md); display:flex; justify-content:space-between;
  gap:var(--space-md); flex-wrap:wrap; font-size:var(--text-xs);
  color:color-mix(in srgb, currentColor 70%, transparent);
}
.ki-hinweis{
  font-size:var(--text-xs); color:var(--c-ink-soft);
  margin-top:var(--space-md); line-height:1.55; max-width:80ch;
}
.site-footer .ki-hinweis{ color:color-mix(in srgb, currentColor 62%, transparent); }

/* =============================================== 17  MOBILE CTA-LEISTE
   Pflicht im Lead-Archetyp. Grundverhalten kommt aus lead-lokal.css.

   Sie ist der wichtigste Weg zur Anfrage auf dem Handy und muss vom Hero
   bis zum Fuß stehen bleiben (Weisung Alex, 11.08.2026). Deshalb hier
   drei Absicherungen, die über das System hinausgehen:

     1. Nichts darf sie ausblenden — weder eine Scroll-Animation noch ein
        Reveal, das versehentlich auf ihr landet. Die Regeln unten setzen
        Sichtbarkeit und Position hart.
     2. Sie erscheint auch im Querformat des Handys. Die Systemgrenze liegt
        bei 820 px Breite; ein quer gehaltenes Handy ist breiter, hat aber
        genauso wenig eine dauerhaft sichtbare Kopfzeile. Zusatzbedingung
        deshalb: flaches Fenster und grober Zeiger (Finger) — damit bleibt
        der Desktop ausdrücklich außen vor.
     3. Der Fußabstand des Seiteninhalts richtet sich nach der tatsächlichen
        Leistenhöhe plus Geräte-Sicherheitsabstand, damit unten nichts
        Wesentliches verdeckt wird.
   ============================================================ */
.lead-stickybar{
  background:color-mix(in srgb, var(--c-bg-dark) 95%, transparent);
  border-top:1px solid rgb(243 239 230 / 0.14);
  box-shadow:0 -10px 26px rgb(20 48 42 / 0.20);
}
.lead-stickybar .anrufen{ color:var(--c-ink-invert); }

@media (max-width:820px), (max-height:560px) and (pointer:coarse){
  .lead-stickybar{
    display:flex!important;
    position:fixed!important; left:0; right:0; bottom:0;
    opacity:1!important; visibility:visible!important;
    /* --leiste-versatz gleicht die eingeblendete Browserleiste des Handys
       aus (siehe Skript in basis.html). Ohne JavaScript bleibt der Wert 0
       und die Leiste sitzt wie gehabt am unteren Rand. */
    transform:translateY(calc(-1 * var(--leiste-versatz, 0px)))!important;
    transition:transform 120ms linear;
    /* Zweite Absicherung: Die Knöpfe bekommen unten einen Puffer. Selbst
       wenn der Ausgleich oben einen Rest stehen lässt — die Adressleiste
       fährt weich und meldet ihre Endhöhe nicht immer sofort —, wird
       höchstens der einfarbige Balkenrand angeschnitten, nie ein Knopf.
       Das ist der Unterschied zwischen „sieht man nicht“ und „kann man
       nicht bedienen“. */
    padding-bottom:calc(0.7rem + 14px + env(safe-area-inset-bottom));
  }
  body{ padding-bottom:calc(5.5rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce){
  .lead-stickybar{ transition:none; }
}
/* Auf dem Desktop bleibt sie aus — dort trägt die Kopfzeile den CTA. */
@media (min-width:821px) and (min-height:561px){
  .lead-stickybar{ display:none; }
}
@media (min-width:821px) and (pointer:fine){
  .lead-stickybar{ display:none; }
}

/* ================================================= 18  VORSCHAU-FAHNE
   Sitzt unten, damit sie die fixierte Kopfzeile nicht verschiebt, aber
   auf jedem Scrollstand sichtbar bleibt. Verschwindet automatisch mit
   PUBLIC_INTAKE_ENABLED=true.
   ============================================================ */
.vorschaufahne{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-overlay);
  background:#8A5A2B; color:#fff; text-align:center;
  padding:0.6rem var(--gutter);
  padding-bottom:calc(0.6rem + env(safe-area-inset-bottom));
  font-size:0.78rem; line-height:1.45;
}
.vorschaufahne code{
  background:rgb(0 0 0 / 0.26); padding:0.1em 0.45em; border-radius:3px;
  font-family:var(--font-mono); font-size:0.94em;
}
@media (max-width:820px), (max-height:560px) and (pointer:coarse){
  /* Auf dem Handy sitzt die Fahne direkt über der Anfrageleiste. Sie muss
     dort lesbar bleiben, darf die Leiste aber nicht optisch erschlagen —
     vorher wirkten beide zusammen wie ein einziger Sperrbalken, und der
     grüne CTA ging darin unter (Befund Alex, 11.08.2026). Deshalb schmal,
     leiser im Ton und mit Abstand zur Leiste. */
  .vorschaufahne{
    bottom:calc(5.5rem + env(safe-area-inset-bottom));
    font-size:0.66rem; line-height:1.35; padding-block:0.35rem;
    background:color-mix(in srgb, #8A5A2B 88%, transparent);
    padding-bottom:0.35rem;
    /* Wandert mit der Anfrageleiste, damit der Abstand gleich bleibt. */
    transform:translateY(calc(-1 * var(--leiste-versatz, 0px)));
  }
  .vorschaufahne code{ font-size:0.9em; }
}
@media (min-width:821px){
  .ist-vorschau{ padding-bottom:3.2rem; }
}

/* ============================== 19  BESTAND: Rechts- und Dankeseiten
   Impressum, Datenschutz, Widerruf, Danke und Fehlerseite nutzen die
   Klassen der ersten Ausbaustufe. Sie werden hier auf die System-
   Primitive abgebildet, damit nichts doppelt gepflegt wird.
   ============================================================ */
.abschnitt{ padding-block:var(--section-pad); }
.abschnitt:first-child{ padding-top:calc(var(--section-pad) + 4rem); }
.inhalt{ width:min(100% - 2 * var(--gutter), var(--w-content)); margin-inline:auto; }
.schmal{ width:min(100%, var(--w-prose)); margin-inline:auto; }
.vorzeile{
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:600;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--c-brand); margin:0 0 var(--space-sm);
}
.einleitung{ font-size:var(--text-md); color:var(--c-ink-soft); max-width:62ch; }
.knopfreihe{ display:flex; gap:var(--space-sm); align-items:center; flex-wrap:wrap;
  margin-top:var(--space-md); }
/* .knopf ist der Bestandsname des Haupt-CTA; er wird zusätzlich zu .btn
   gesetzt und dient auch dem Browser-Abnahmetest als Zugriffspunkt. */
.knopf:not(.btn){
  display:inline-flex; align-items:center; gap:0.6em;
  background:var(--c-brand); color:var(--c-brand-ink);
  padding:0.9em 1.8em; border-radius:var(--btn-radius);
  font-weight:600; font-size:var(--text-sm); text-decoration:none;
  border:1.5px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.knopf:not(.btn):hover{ transform:translateY(-2px);
  box-shadow:0 10px 25px color-mix(in srgb, var(--c-brand) 32%, transparent); }
.knopf--hell{ background:transparent; color:var(--c-ink);
  border-color:currentColor; box-shadow:none; }
.knopf--hell:hover{ background:color-mix(in srgb, currentColor 8%, transparent); }

.ablauf{ display:grid; gap:var(--space-lg); margin-top:var(--space-xl);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  counter-reset:hkbestand; }
.schritt{ display:grid; gap:var(--space-xs); }
.schritt__nr{
  width:2.8rem; height:2.8rem; border-radius:50%;
  display:grid; place-items:center; background:var(--c-brand);
  color:var(--c-brand-ink); font-family:var(--font-display);
  font-weight:600; font-size:var(--text-md); margin-bottom:0.5rem;
}
.schritt h3{ font-size:var(--text-md); }
.schritt p{ font-size:var(--text-sm); color:var(--c-ink-soft); margin:0; }

.sprungmarke{ background:var(--c-ink); color:var(--c-bg); }

/* ========================================================= 20  DRUCK */
@media print{
  .site-nav, .lead-stickybar, .vorschaufahne, .formularblock,
  .hero-medien, .bahn-pfeile{ display:none!important; }
  body{ background:#fff; font-size:11pt; }
  .section, .section-stage{ padding-block:1.2rem; }
  .section-dark{ background:#fff!important; color:#000!important; }
}