/* ============================================================
   PROJEKT — Komponenten dieses Projekts über base.css hinaus.
   KEINE Rohwerte: alles referenziert tokens.css (Audit-Regel 4).
   Jede Klasse hier existiert zuerst im Styleguide, dann auf Seiten.
   ============================================================ */

/* Plakat-Headline: Hero-H1 nimmt die volle Display-Stufe (Typo-Sprung 2.4) */
.h-plakat { font-size: var(--text-display); letter-spacing: -0.015em; }

/* H1/H2 in Sentient (Serif), alles andere Source Sans 3
   (Kundenwunsch 07.08.2026, Runde 3 — Tokens --schrift-headline).
   H1 Medium, H2 Bold. */
h1, h2 { font-family: var(--schrift-headline); }
h1 { font-weight: var(--headline-gewicht); }
h2 { font-weight: var(--headline-gewicht-h2); }

/* Kicker: Zeile in Akzentfarbe über einer Headline (ZEIT-Abstraktion).
   Sentence case, KEIN uppercase, KEIN letter-spacing (Verbotskatalog).
   Kicker-Linie in Logo-Türkis (Kundenwunsch 07.08.2026). */
.kicker {
  font-family: var(--schrift-display);
  font-weight: 700;
  color: var(--farbe-akzent);
  font-size: var(--text-m);
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 2.5px;
  background: var(--farbe-tuerkis);
  vertical-align: middle;
  margin-right: var(--raum-1);
}

/* Die EINE Dunkelfläche pro Seite (Oberflächen-Register: Tönung) */
.band--dunkel { background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel); }
.band--dunkel h2, .band--dunkel h3, .band--dunkel a { color: inherit; }
.band--dunkel .meta { color: color-mix(in srgb, var(--farbe-auf-dunkel) 72%, transparent); }
.band--dunkel .kennzahl { color: var(--farbe-tuerkis); }

/* Logo-Türkis als Unterstreichungs- und Hover-Akzent (Kundenwunsch 07.08.2026) */
main a:not(.knopf) { text-decoration-color: var(--farbe-tuerkis); }
.knopf--sekundaer:hover { border-color: var(--farbe-tuerkis); }

/* Kräftige Kontur: Fassung für Karten mit Gewicht.
   Regel: pro Elementklasse Kontur ODER Schatten, nie beides. */
.karte--kontur { border: var(--kontur); box-shadow: var(--schatten-keine); }

/* Flacher Schatten: Job = Beweis- und Interaktions-Elemente abheben
   (Bewertungskarten, Formularkarte, freigestellte Bilder). */
.abgehoben { box-shadow: var(--schatten-flach); border: none; }

/* Primärer CTA trägt den Akzent-Verlauf (einzige Verlaufs-Klasse) */
.knopf:not(.knopf--sekundaer) {
  background: var(--verlauf-akzent);
  border-color: var(--farbe-akzent-tief);
  font-weight: 700;
}
.knopf--sekundaer { border: var(--kontur); font-weight: 700; }

/* Kleiner Knopf: für Knopf-Paare wie die zwei Termin-Knöpfe im CTA-Band */
.knopf--klein { font-size: var(--text-s); padding: 0.55em 1.1em; }

/* Meta-Zeile unter Karten (ZEIT-Abstraktion: Bildkopf-Karte mit Fußzeile) */
.karte .meta { margin-top: auto; }

/* ============================================================
   KOMPOSITION Linie B "Bühne" — Port aus sektions-varianten.html v5,
   freigegeben von Paul am 03.08.2026. Vertrag: dna.yaml → komposition.
   Klassennamen behalten das b-Präfix der freigegebenen Linie.
   ============================================================ */

/* Chrome: Header sticky, volle Breite, Logo groß, schrumpft beim Scrollen */
.b-header { background: var(--farbe-flaeche); box-shadow: var(--schatten-flach); position: sticky; top: 0; z-index: 50; }
.b-header__zeile { display: flex; align-items: center; gap: var(--raum-3); padding: var(--raum-2) var(--raum-3); transition: padding .25s ease; }
.b-header__nav { display: flex; gap: var(--raum-3); margin-left: auto; align-items: center; flex-wrap: wrap; }
.b-header__nav a {
  text-decoration: none; color: var(--farbe-text); font-weight: 600;
  font-size: var(--text-m); text-underline-offset: .35em;
}
.b-header__nav a:hover { text-decoration: underline; text-decoration-color: var(--farbe-tuerkis); }
.b-header__nav a[aria-current="page"] { color: var(--farbe-akzent); text-decoration: underline; }
.b-header__nav a.knopf { color: var(--farbe-auf-akzent); text-decoration: none; }
.b-header__logo { height: 4rem; width: auto; transition: height .25s ease; }
.b-header.geschrumpft .b-header__logo { height: 2.5rem; }
.b-header.geschrumpft .b-header__zeile { padding-block: var(--raum-1); }

/* Mobiles Menü: details-basiert, ohne JS-Pflicht, nur unter 900px sichtbar */
.mobilmenue { display: none; margin-left: auto; position: relative; }
.mobilmenue summary { list-style: none; cursor: pointer; font-family: var(--schrift-display); font-weight: 700; padding: var(--raum-1) var(--raum-2); border: var(--linie); border-radius: var(--radius); }
.mobilmenue summary::-webkit-details-marker { display: none; }
.mobilmenue[open] summary { background: var(--farbe-flaeche-alt); }
.mobilmenue nav {
  position: absolute; right: 0; top: calc(100% + var(--raum-1)); z-index: 60;
  display: flex; flex-direction: column; gap: var(--raum-2);
  min-width: 16rem; width: max-content; max-width: calc(100vw - 2 * var(--raum-2));
  background: var(--farbe-flaeche); box-shadow: var(--schatten-flach);
  border-radius: var(--ecke-klein); padding: var(--raum-3);
}
.mobilmenue nav a { text-decoration: none; color: var(--farbe-text); font-weight: 600; }
/* Knopf-Zeile darf nicht umbrechen (Paul 17.08.2026: "Finanzierung berechnen" brach mobil) */
.mobilmenue nav a.knopf { color: var(--farbe-auf-akzent); text-align: center; white-space: nowrap; }

/* Hero: Kopf links, Bild rechts (Oberkante auf der Kicker-Zeile);
   mobil folgt das Bild direkt auf die H1. Abstaende eng (Paul 03.08.2026). */
.b-hero { padding-block: var(--raum-4) calc(var(--raum-4) * 2 + var(--raum-3)); }
.b-hero__grid {
  display: grid; grid-template-columns: 10fr 11fr; gap: var(--raum-2) var(--raum-4);
  grid-template-areas: "kopf media" "rest media"; align-items: start;
}
.b-hero__kopf { grid-area: kopf; }
.b-hero__rest { grid-area: rest; }
.b-hero__media { grid-area: media; position: relative; }
.b-hero__grid h1 { font-size: var(--text-3xl); margin-top: var(--raum-2); }
.b-hero__media picture img { border-radius: var(--ecke-gross); box-shadow: var(--schatten-flach); aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
.b-formkarte { background: var(--farbe-flaeche); border-radius: var(--ecke-karte); box-shadow: var(--schatten-flach); padding: var(--raum-3); }
/* Rückruf-Formular: Einwilligungszeile, Honeypot und Bestätigung nach dem Versand.
   Die Bestätigung wird über den Anker #rueckruf-danke sichtbar (Redirect aus api/rueckruf.php). */
.einwilligung { display: grid; grid-template-columns: auto 1fr; gap: var(--raum-1) var(--raum-2); align-items: start; }
.einwilligung input { width: auto; margin-top: 0.25em; }
.einwilligung label { margin: 0; font-size: var(--text-s); }
.hp-feld { position: absolute; left: -9999px; }
.form-ok { display: none; }
/* :target = No-JS-Redirect, --sichtbar = fetch-Versand aus js/rueckruf.js */
.form-ok:target, .form-ok--sichtbar { display: block; font-weight: 600; color: var(--farbe-akzent); }
/* Hero-Formular: drei Spalten, Knopf auf Feldhöhe — ohne Scrollen sichtbar
   (Kundenwunsch 07.08.2026); mobil wieder untereinander.
   Darüber die fette Titel-Zeile in Label-Größe. */
/* Runde 6 (13.08.2026): Formtitel einen Tick groesser, Feldbeschriftung
   wandert als Platzhalter in die Felder (Labels ersetzt durch aria-label) */
.formtitel { font-size: var(--text-l); font-weight: 700; }
.formzeile-3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--raum-2); align-items: end; }
.trust {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(-1 * var(--raum-4) - var(--raum-3));
  width: min(30rem, 96%);
  background: var(--farbe-flaeche); border-radius: var(--ecke-karte); box-shadow: var(--schatten-flach);
  padding: var(--raum-2) var(--raum-3) var(--raum-3);
  text-align: center;
}
.trust__titel { font-weight: 700; }   /* Kundenwunsch 07.08.2026: p statt Überschrift */
.trust__spalten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--raum-2); margin-top: var(--raum-2); align-items: center; }
.trust__spalten img { max-height: 6rem; width: auto; margin-inline: auto; }
.trust__google strong { display: block; font-family: var(--schrift-display); font-weight: 700; }
.trust__sterne { color: var(--farbe-sterne); }

/* Inhaber-Zahlen (vertrauensleiste): Statement links, 2x2 Zahlen rechts */
.zahlen__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--raum-4); align-items: start; }
.zahlen__statement { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-l); line-height: 1.4; }
/* text-l statt text-xl seit dem laengeren Erklaer-Statement (Text-Briefing 03.08.2026) */
.zahlen__vier { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-3) var(--raum-4); }
.zahlen__vier strong { display: block; font-family: var(--schrift-display); font-weight: var(--display-gewicht); font-size: var(--text-2xl); color: var(--farbe-tuerkis-text); }
.banken { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--raum-3); margin-top: var(--raum-4); }
.banken img { max-height: 2.8rem; width: auto; object-fit: contain; }
.banken img.banken--sparkasse { max-height: 2.2rem; }

/* Kopf-Split: schmale Titel-Spalte links, Inhalt rechts */
.b-split { display: grid; grid-template-columns: 1fr 2fr; gap: var(--raum-4); align-items: start; }
.b-split--fuss { align-items: end; }
/* Leistungsblock: Kopf-Spalten wie die Wege-Liste darunter (5fr 7fr),
   damit Überschrift und Intro-Text mit Liste und Panel fluchten (Paul 07.08.2026) */
.b-split--wege { grid-template-columns: 5fr 7fr; }

/* Vier Wege: Titel-Liste links, fester Panel-Bereich rechts (kein Höhen-Jump) */
.wege { display: grid; grid-template-columns: 5fr 7fr; gap: var(--raum-4); align-items: stretch; }
.wege__liste { list-style: none; padding: 0; margin: 0; }
.wege__liste li { border-bottom: var(--linie); }
.wege__liste li:first-child { border-top: var(--linie); }
.wege__titel {
  display: flex; gap: var(--raum-3); align-items: baseline; width: 100%;
  padding: var(--raum-3) var(--raum-1);
  font-family: var(--schrift-display); font-weight: var(--display-gewicht); font-size: var(--text-xl);
  color: var(--farbe-text); text-decoration: none;
}
/* Titel ohne eigene Unterseite sind Buttons (fokussierbar für die Panel-Wahl) */
button.wege__titel { background: none; border: 0; cursor: default; text-align: left; line-height: var(--zeilenhoehe-eng); }
.wege__titel .nr { font-size: var(--text-m); font-weight: 700; color: var(--farbe-text-gedimmt); }
.wege__liste li:is(:hover, :focus-within) .wege__titel,
.wege__liste li:is(:hover, :focus-within) .nr { color: var(--farbe-akzent); }
.wege__panels { display: grid; min-height: 21rem; }
.wege__panel {
  grid-area: 1 / 1; opacity: 0; transition: opacity .3s ease; z-index: 1;
  background: var(--farbe-flaeche-alt);
  border-radius: var(--ecke-karte); padding: var(--raum-4);
  display: flex; flex-direction: column; gap: var(--raum-2); justify-content: center;
}
.wege__panel svg { color: var(--farbe-tuerkis); }
.wege[data-aktiv="1"] .wege__panel:nth-child(1),
.wege[data-aktiv="2"] .wege__panel:nth-child(2),
.wege[data-aktiv="3"] .wege__panel:nth-child(3),
.wege[data-aktiv="4"] .wege__panel:nth-child(4) { opacity: 1; z-index: 2; }
.wege[data-aktiv="1"] .wege__liste li:nth-child(1) .wege__titel,
.wege[data-aktiv="2"] .wege__liste li:nth-child(2) .wege__titel,
.wege[data-aktiv="3"] .wege__liste li:nth-child(3) .wege__titel,
.wege[data-aktiv="4"] .wege__liste li:nth-child(4) .wege__titel { color: var(--farbe-akzent); }
.wege[data-aktiv="1"] .wege__liste li:nth-child(1) .nr,
.wege[data-aktiv="2"] .wege__liste li:nth-child(2) .nr,
.wege[data-aktiv="3"] .wege__liste li:nth-child(3) .nr,
.wege[data-aktiv="4"] .wege__liste li:nth-child(4) .nr { color: var(--farbe-akzent); }

/* Ablauf: horizontaler Zeitstrahl mit vier Stationen */
.b-strahl { position: relative; margin-top: var(--raum-4); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--raum-3); padding-left: 0; }
.b-strahl::before { content: ""; position: absolute; top: 0.55rem; left: 2%; right: 2%; height: 2.5px; background: var(--farbe-linie); }
.b-station { position: relative; padding-top: var(--raum-3); list-style: none; }
.b-station::before { content: ""; position: absolute; top: 0; left: 0; width: 1.1rem; height: 1.1rem; border-radius: var(--ecke-rund); background: var(--farbe-tuerkis); }
.b-station h3 { font-size: var(--text-l); }

/* Sonderfälle (ergebnis-beweis), Revision 07.08.2026 (Kundenwunsch):
   Chips wählen eine Fallkarte, darunter der Google-Case als EINE
   schlanke dunkle Beweis-Karte (ersetzt den 3:2-Split mit Riesen-2;
   die große Kennzahl bleibt, eine Stufe kleiner). */
/* Split: Chips + Fallkarte links, Bild der Brüder rechts (Kundenwunsch 07.08.2026) */
.faelle-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--raum-4); align-items: stretch; margin-top: var(--raum-3); }
.faelle-split__bild { margin: 0; }
.faelle-split__bild picture, .faelle-split__bild img { height: 100%; }
.faelle-split__bild img { border-radius: var(--ecke-gross); box-shadow: var(--schatten-flach); object-fit: cover; width: 100%; }
.faelle__chips { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.chip {
  font: inherit; font-family: var(--schrift-display); font-weight: 600;
  padding: 0.5em 1.1em; cursor: pointer;
  border: var(--linie); border-radius: var(--ecke-rund);
  background: var(--farbe-flaeche); color: var(--farbe-text);
}
.chip:hover { border-color: var(--farbe-tuerkis); }
.chip[aria-pressed="true"] { background: var(--farbe-tuerkis-flaeche); border-color: var(--farbe-tuerkis); }
.faelle__panels { display: grid; margin-top: var(--raum-3); }
.faelle__panel {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s ease;
  background: var(--farbe-flaeche-alt); border-radius: var(--ecke-karte);
  padding: var(--raum-3) var(--raum-4);
  display: flex; flex-direction: column; gap: var(--raum-2); justify-content: center;
}
.faelle[data-aktiv="1"] .faelle__panel:nth-child(1),
.faelle[data-aktiv="2"] .faelle__panel:nth-child(2),
.faelle[data-aktiv="3"] .faelle__panel:nth-child(3),
.faelle[data-aktiv="4"] .faelle__panel:nth-child(4),
.faelle[data-aktiv="5"] .faelle__panel:nth-child(5) { opacity: 1; visibility: visible; }

/* Dunkle Beweis-Karte unter den Chips: drei Praxis-Fälle
   (Revision 08.08.2026, Fälle von Jakob/Anselm, ersetzt den Google-Case) */
.fall-beweis {
  background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel);
  border-radius: var(--ecke-gross); padding: var(--raum-4);
  margin-top: var(--raum-3);
}
.fall-beweis .meta { color: inherit; opacity: .7; }
.fall-beweis__drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-3); align-items: stretch; }
/* Fall-Karten: leicht aufgehellte Flächen auf dem Dunkelgrund, Nummer in
   Logo-Türkis mit kurzer Linie (greift das Kicker-Linien-Motiv auf) */
.fall-karte {
  background: color-mix(in srgb, var(--farbe-auf-dunkel) 7%, transparent);
  border-radius: var(--ecke-karte);
  padding: var(--raum-3);
  display: flex; flex-direction: column; gap: var(--raum-2);
}
.fall-karte__nr { font-family: var(--schrift-headline); font-weight: var(--headline-gewicht-h2); font-size: var(--text-l); color: var(--farbe-tuerkis); }
.fall-karte__nr::after { content: ""; display: block; width: 2rem; height: 2.5px; background: var(--farbe-tuerkis); margin-top: var(--raum-1); }
.fall-beweis__fuss { display: flex; flex-wrap: wrap; gap: var(--raum-3); align-items: center; justify-content: space-between; }
.fall-beweis__fuss > p { max-width: 55ch; }

/* Beispielrechnung (preis-transparenz) + dezente Tilgungskurve */
.rechnung { display: grid; grid-template-columns: 3fr 2fr; gap: var(--raum-3); align-items: stretch; }
/* Kopf breiter + ausgeglichene Zeilenlängen statt Trichterform (Feedback Paul 07.08.2026) */
.rechnung__kopf { text-align: center; max-width: 85ch; margin-inline: auto; }
.rechnung__kopf p { text-wrap: balance; }
.rechnung__eingaben { background: var(--farbe-flaeche); border-radius: var(--ecke-karte); box-shadow: var(--schatten-flach); padding: var(--raum-3); }
.rechnung__eingaben table { margin-top: var(--raum-2); }
.rechnung__eingaben td:last-child { text-align: right; white-space: nowrap; }
.rechnung__ergebnis { background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel); border-radius: var(--ecke-karte); padding: var(--raum-3); display: flex; flex-direction: column; gap: var(--raum-2); justify-content: center; }
.rechnung__ergebnis .kennzahl { color: var(--farbe-tuerkis); }
.rechnung__ergebnis .meta { color: inherit; opacity: .7; }
.tilgungskurve { width: 100%; height: auto; opacity: .45; margin-top: var(--raum-2); color: var(--farbe-tuerkis); }

/* Kundenstimmen, Revision 07.08.2026 (Layout-Skizze Paul): Kopf links,
   Hero-Bewertung rechts daneben, darunter vier kleinere Karten in einer Reihe */
.stimmen-kopf { display: grid; grid-template-columns: 5fr 6fr; gap: var(--raum-4); align-items: start; }
.stimmen-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--raum-3); margin-top: var(--raum-4); align-items: start; }
a.g-karte { display: block; color: inherit; text-decoration: none; }
.g-karte {
  background: var(--farbe-flaeche); border-radius: var(--ecke-karte); box-shadow: var(--schatten-flach);
  padding: var(--raum-3); margin: 0; position: relative;
  transition: transform .25s ease;
}
.g-karte:hover { transform: scale(1.04); z-index: 10; }
.g-karte__kopf { display: flex; align-items: center; gap: var(--raum-2); }
.g-karte__avatar {
  width: 2.4rem; height: 2.4rem; border-radius: var(--ecke-rund); flex: none;
  background: var(--farbe-tuerkis-text); color: var(--farbe-auf-akzent);
  display: grid; place-items: center; font-family: var(--schrift-display); font-weight: 700;
}
.g-karte blockquote { border-left: none; padding-left: 0; font-size: var(--text-m); margin-top: var(--raum-2); }
.g-karte .meta { margin-top: var(--raum-2); }
.g-karte__sterne { color: var(--farbe-sterne); }
.g-karte--hero blockquote { font-size: var(--text-l); }
.g-karte--klein blockquote { font-size: var(--text-s); }
.g-badge {
  display: inline-flex; gap: var(--raum-1); align-items: center;
  background: var(--farbe-tuerkis-flaeche); border-radius: var(--ecke-rund); box-shadow: var(--schatten-flach);
  padding: var(--raum-1) var(--raum-2); font-family: var(--schrift-display); font-weight: 700;
}

/* CTA-Band: Zusage links, Bild rechts (Dummy bis Kundenfotos, Paul 03.08.2026).
   Zusage-Satz in der Überschriften-Schrift, bleibt aber ein p (Kundenwunsch 07.08.2026).
   Areas, damit das Bild mobil direkt unter die Zusage rutscht (Kundenwunsch 07.08.2026). */
.zusage { font-family: var(--schrift-headline); font-weight: var(--headline-gewicht-h2); }
.cta-band__grid {
  display: grid; grid-template-columns: 7fr 5fr;
  grid-template-areas: "zusage bild" "rest bild";
  gap: var(--raum-2) var(--raum-4); align-items: center;
}
.cta-band__zusage { grid-area: zusage; align-self: end; }
.cta-band__rest { grid-area: rest; align-self: start; }
.cta-band__bild { grid-area: bild; margin: 0; }
.cta-band__bild picture img { border-radius: var(--ecke-gross); box-shadow: var(--schatten-flach); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* FAQ: zentrierte Textspalte (Poster-Archetyp: nichts klebt am linken Rand) */
.faq-mittig { max-width: var(--textspalte); margin-inline: auto; }
.faq-liste summary::marker { color: var(--farbe-tuerkis-text); }

/* Partner-Leiste: farbige Logos, ruhig zentriert */
.b-partner { text-align: center; }
.b-partner__zeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--raum-3) var(--raum-4); margin-top: var(--raum-3); }
.b-partner__zeile img { max-height: 3.2rem; max-width: 15rem; width: auto; object-fit: contain; }

/* Person-Vorstellung: zwei versetzte Porträts */
.b-personen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); align-items: start; }
.b-portraet { position: relative; margin: 0; }
.b-portraet picture img { border-radius: var(--ecke-gross); box-shadow: var(--schatten-flach); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.b-portraet--versetzt { margin-top: var(--raum-4); }
.b-portraet figcaption { margin-top: var(--raum-2); font-family: var(--schrift-display); font-weight: 700; }
/* Termin-Link unter jedem Porträt (Kundenwunsch 07.08.2026) */
.b-portraet figcaption a { display: inline-block; margin-top: var(--raum-1); font-family: var(--schrift-text); font-weight: 600; }

/* Footer (chrome-footer): hellblaue Fläche, Logo + 3 Spalten + Pflichtzeile */
.fuss { background: var(--farbe-flaeche-alt); padding-block: var(--raum-4); }
.fuss__grid { display: grid; grid-template-columns: 4fr 2fr 2fr 2fr; gap: var(--raum-4); align-items: start; }
.fuss__logo { height: 3.5rem; width: auto; }
.fuss__titel { font-family: var(--schrift-display); font-weight: 700; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li + li { margin-top: var(--raum-1); }
.fuss a { color: var(--farbe-text); }
.fuss__zeile { border-top: var(--linie); margin-top: var(--raum-4); padding-top: var(--raum-2); }

@media (max-width: 900px) {
  .b-hero__grid { grid-template-columns: 1fr; grid-template-areas: "kopf" "media" "rest"; }
  .b-split, .b-strahl, .b-personen, .rechnung, .fall-beweis__drei, .zahlen__grid, .wege,
  .formzeile-3, .stimmen-kopf, .stimmen-reihe, .faelle-split { grid-template-columns: 1fr; }
  .zahlen__vier { grid-template-columns: 1fr 1fr; }
  .wege__liste { display: none; }
  .wege__panels { min-height: 0; display: flex; flex-direction: column; gap: var(--raum-3); }
  .wege__panel { opacity: 1 !important; }
  .trust { position: static; transform: none; width: 100%; margin-top: var(--raum-3); }
  .b-hero { padding-bottom: var(--raum-4); }
  /* Bild direkt unter der Zusage bzw. Überschrift (Kundenwunsch 07.08.2026) */
  .cta-band__grid { grid-template-columns: 1fr; grid-template-areas: "zusage" "bild" "rest"; }
  .faelle-split__bild { order: -1; }
  .faelle-split__bild picture, .faelle-split__bild img { height: auto; }
  /* Trust-Karte: Google-Wertung volle Breite, Badges darunter zweispaltig */
  .trust__spalten { grid-template-columns: 1fr 1fr; }
  .trust__google { grid-column: 1 / -1; }
  /* Zeitstrahl-Linie ergibt gestapelt keinen Sinn */
  .b-strahl::before { display: none; }
  .b-header__nav { display: none; }
  .mobilmenue { display: block; }
  .b-portraet--versetzt { margin-top: 0; }
  .fuss__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .fuss__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Restseiten 13.08.2026 (Komposition: hero-unterseite, leistung-detail,
   risikoumkehr-band, qualifikation-nachweis, extern-einbindung)
   ============================================================ */

/* Unterseiten-Hero: zentrierte Poster-Achse, CTA-Zeile darunter */
.b-hero-unter { text-align: center; }
.b-hero-unter .textspalte { margin-inline: auto; }
.b-hero-unter .cta-gruppe { justify-content: center; }

/* Leistung-Detail: Text links, getönte Merk-Karte rechts */
.leistung-detail { display: grid; grid-template-columns: 7fr 5fr; gap: var(--raum-4); align-items: start; }
.merk-karte { background: var(--farbe-flaeche-alt); border-radius: var(--ecke-karte); padding: var(--raum-3) var(--raum-4); }
.merk-karte svg { color: var(--farbe-tuerkis); }
/* Aufzählung mit Türkis-Linie: greift das Kicker-/Fallnummern-Motiv auf */
.linien-liste { list-style: none; padding: 0; margin: 0; }
.linien-liste li { padding-left: 1.6em; position: relative; }
.linien-liste li + li { margin-top: var(--raum-2); }
/* 3px statt 2.5px: Subpixel-Rundung liess die Striche auf manchen
   Desktop-Skalierungen verschwinden (Befund Paul 14.08.2026) */
.linien-liste li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 1em; height: 3px; background: var(--farbe-tuerkis); }

/* Risikoumkehr-Band: dunkle Zusagen-Karte, gleiche Bühne wie fall-beweis */
.zusagen-karte {
  background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel);
  border-radius: var(--ecke-gross); padding: var(--raum-4);
  margin-top: var(--raum-3);
}
.zusagen-karte .meta { color: inherit; opacity: .7; }
.zusagen-karte .linien-liste { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-2) var(--raum-4); }
.zusagen-karte .linien-liste li + li { margin-top: 0; }

/* Qualifikation-Nachweis: Badges + Zahlen in Kontur-Karte */
.nachweis-badges { display: flex; gap: var(--raum-3); align-items: center; flex-wrap: wrap; }
.nachweis-badges img { max-height: 6.5rem; width: auto; }

/* FinLink-Rechner: Kontur-Karte, iframe füllt die Breite */
.rechner-rahmen { background: var(--farbe-flaeche); border: var(--kontur); border-radius: var(--ecke-karte); padding: var(--raum-2); }
.rechner-rahmen iframe { width: 100%; height: 820px; border: 0; display: block; }
/* Anfrage-Strecke (17.08.2026): mehrstufiges Formular braucht mehr Hoehe */
.rechner-rahmen--strecke iframe { height: 960px; }
.rechner-rahmen .rechner-hinweis { padding: var(--raum-3); }

/* Leistungs-Karten auf leistungen.html (Revision 13.08.2026, Input Paul):
   jede Leistung separat als Karte mit Link statt Hover-Panel */
.leistungs-karten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-3); }
.leistungs-karten .karte svg { color: var(--farbe-tuerkis); }

/* Sonderfälle-Dunkelkarte auf leistungen.html (Runde 2, 13.08.2026):
   die EINE Dunkelfläche der Seite, Split Text + Themen-Pills | Bild + Caption */
.sonderfall-karte {
  background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel);
  border-radius: var(--ecke-gross); padding: var(--raum-4);
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--raum-4); align-items: center;
}
.sonderfall-karte h2 { color: inherit; }
.sonderfall-karte .meta { color: inherit; opacity: .7; }
.pill-zeile { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.pill {
  display: inline-block; padding: 0.35em 0.9em;
  border: var(--kontur); border-color: var(--farbe-tuerkis); border-radius: var(--ecke-rund);
  font-weight: 600; font-size: var(--text-s);
  background: color-mix(in srgb, var(--farbe-auf-dunkel) 7%, transparent);
}
.sonderfall-karte__bild { margin: 0; }
.sonderfall-karte__bild img { border-radius: var(--ecke-karte); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.sonderfall-karte__bild figcaption { margin-top: var(--raum-2); font-size: var(--text-s); opacity: .85; }

/* Bewertungs-Reihe mit 3 Karten (Rechner-LP, Runde 2) */
.stimmen-reihe--drei { grid-template-columns: repeat(3, 1fr); margin-top: 0; }

/* ============================================================
   Runde 3, 13.08.2026 (Feedback Paul)
   ============================================================ */

/* Header einzeilig, als Gruppe zentriert (Runde 4/5): Logo + Nav-Gruppe +
   Knopf. Die Nav-Punkte bekommen eine dezente hellblaue Flaeche und feine
   Tuerkis-Trenner, damit die Wortreihe nicht in der Luft haengt. */
/* Runde 7 (17.08.2026, Anweisung Paul): Header-Zeile auf Containerbreite —
   Logo schliesst links mit dem Inhalt ab, der Rechner-Knopf rechts. Die Nav
   sitzt dazwischen, bekommt mehr Luft und eine Stufe groessere Schrift
   (durch das Dropdown ist die Zeile kurz genug). */
.b-header__zeile {
  max-width: var(--container-max); margin-inline: auto;
  justify-content: space-between; padding-inline: var(--raum-2);
}
.b-header__logo { height: 4.5rem; }
.b-header.geschrumpft .b-header__logo { height: 2.75rem; }
.b-header__nav { margin-left: 0; gap: 0; justify-content: center; flex: 1 1 auto; }
/* Zwischengroesse ~20px (Anweisung Paul: text-l war zu gross, text-m zu klein) */
.b-header__nav a { font-size: calc(var(--text-basis) * 1.1); padding-inline: var(--raum-2); }
/* Trenner seit dem Leistungen-Dropdown (17.08.2026) auf direkte Kinder:
   auch der nav-drop-Block bekommt seine Linie, die Menuepunkte darin keine. */
.b-header__nav > * + * { border-left: 1.5px solid color-mix(in srgb, var(--farbe-tuerkis) 45%, transparent); }
.b-header__cta { flex: none; }
@media (max-width: 900px) { .b-header__cta { display: none; } }

/* Links auf allen Dunkelflaechen in Tuerkis (Feedback Paul 14.08.2026:
   Akzent-Blau war auf Dunkel zu dunkel) */
.sonderfall-karte a:not(.knopf), .fall-beweis a:not(.knopf),
.zusagen-karte a:not(.knopf), .rechnung__ergebnis a:not(.knopf),
.hinweis-dunkel a:not(.knopf) { color: var(--farbe-tuerkis); }

/* Tuerkis-Akzentkante am Footer (Oberflaechen-Register: footer-kante):
   trennt den hellblauen Footer, egal welche Flaeche davor endet */
.fuss { border-top: 2.5px solid var(--farbe-tuerkis); }

/* Sektion direkt an die vorige anschliessen (Abstand Kacheln -> Dunkelkarte) */
.sektion.sektion--kompakt-oben { padding-top: 0; }

/* Sonderfaelle kompakt (Leistungsseiten + ueber-uns): ohne Bild, mit Zitat */
.sonderfall-karte--kompakt { grid-template-columns: 3fr 2fr; }
.sonderfall-zitat {
  border-left: none; padding-left: 0; margin: 0;
  font-family: var(--schrift-headline); font-weight: var(--headline-gewicht-h2);
  /* text-l statt text-xl seit 17.08.2026 (Sichtprobe Paul, ueber-uns) */
  font-size: var(--text-l); line-height: var(--zeilenhoehe-eng);
  color: var(--farbe-tuerkis);
}

/* Personen separat (ueber-uns, Runde 3): zwei gespiegelte Split-Bloecke.
   Runde 4: Bildspalte fest und deutlich schmaler (Portraits wirkten zu gross) */
.person-block { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: var(--raum-4); align-items: center; }
.person-block--gespiegelt { grid-template-columns: 1fr minmax(0, 320px); }
.person-block--gespiegelt .b-portraet { order: 2; }
.person-block .b-portraet { margin-top: 0; }

/* Kern-Botschaft klein auf den Leistungsseiten (Runde 4) */
.hinweis-dunkel {
  background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel);
  border-radius: var(--ecke-klein); padding: var(--raum-2) var(--raum-3);
  margin-top: var(--raum-3);
}
.hinweis-dunkel a { color: var(--farbe-tuerkis); }

/* Zahlen-Reihe im Fuss der Werte-Sektion (ueber-uns, Runde 4) */
.zahlen-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--raum-3); text-align: center; }
.zahlen-reihe strong { display: block; font-family: var(--schrift-display); font-weight: var(--display-gewicht); font-size: var(--text-2xl); color: var(--farbe-tuerkis-text); }

/* Ablauf Variante 3 (14.08.2026): Lucide-Icons statt Punkten auf der Linie,
   Icon-Idee Anselm (Telefon, Dokumente, Dialog, Handschlag) */
.b-strahl--icons::before { display: none; }
.b-strahl--icons .b-station { padding-top: 0; }
.b-strahl--icons .b-station::before { display: none; }
.b-strahl--icons .b-station svg { color: var(--farbe-tuerkis); margin-bottom: var(--raum-1); }

/* Personen-Bild mit Bildunterschrift (Rechner-LP, Runde 4) */
.rechner-personen { margin: 0; }
.rechner-personen img { border-radius: var(--ecke-gross); box-shadow: var(--schatten-flach); width: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.rechner-personen figcaption { margin-top: var(--raum-2); }

@media (max-width: 900px) {
  .sonderfall-karte--kompakt { grid-template-columns: 1fr; }
  .person-block, .person-block--gespiegelt { grid-template-columns: 1fr; }
  .person-block--gespiegelt .b-portraet { order: 0; }
  .zahlen-reihe { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .leistung-detail { grid-template-columns: 1fr; }
  .zusagen-karte .linien-liste { grid-template-columns: 1fr; }
  .leistungs-karten { grid-template-columns: 1fr; }
  .sonderfall-karte { grid-template-columns: 1fr; }
  .stimmen-reihe--drei { grid-template-columns: 1fr; }
}

/* ============================================================
   RATGEBER (Blog-Rubrik), 15.08.2026
   Uebersichtsseite /ratgeber/ + Artikel darunter. Bewusst schlank:
   Karten-Optik der ZEIT-Abstraktion, keine eigene Bildwelt, keine
   Kategorie-Archive. Themen-Labels sitzen als data-thema an der Karte
   und sind vorerst reine Beschriftung (journey.yaml Punkt 4).
   ============================================================ */

/* Hervorgehobener Beitrag: Bild links, Text rechts, eine Stufe groesser
   als die Karten darunter. Das ist der mutige Zug der Uebersichtsseite. */
.ratgeber-top { display: grid; grid-template-columns: 5fr 7fr; gap: var(--raum-4); align-items: center; }
.ratgeber-top__bild { margin: 0; }
.ratgeber-top__bild img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--ecke-gross); box-shadow: var(--schatten-flach);
}
.ratgeber-top h2 { font-size: var(--text-2xl); }
.ratgeber-top h2 a { text-decoration: none; }
.ratgeber-top h2 a:hover { text-decoration: underline; text-decoration-color: var(--farbe-tuerkis); }

/* Beitragsraster: drei Karten pro Zeile, Meta-Zeile unten buendig */
.ratgeber-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-3); }
.ratgeber-karte { display: flex; flex-direction: column; }
.ratgeber-karte h3 { font-size: var(--text-l); }
.ratgeber-karte h3 a { text-decoration: none; }
.ratgeber-karte h3 a:hover { text-decoration: underline; text-decoration-color: var(--farbe-tuerkis); }
/* Themen-Label: kleine Pille in Tuerkis-Flaeche, ersetzt den Kicker in der Karte */
.thema-label {
  display: inline-block; font-family: var(--schrift-display); font-weight: 700;
  font-size: var(--text-s); color: var(--farbe-tuerkis-text);
  background: var(--farbe-tuerkis-flaeche); border-radius: var(--ecke-rund);
  padding: 0.15em 0.8em;
}

/* --- Artikelseite ------------------------------------------------------- */
/* Kopf: Label, H1, Autorzeile mit Portraet, Antwortabsatz.
   Kein Knopf hier oben (journey.yaml: der Besucher kommt mit einer Frage). */
/* Artikelspalte mittig im Container (Anweisung Paul 15.08.2026), Text darin
   bleibt linksbuendig — zentrierter Flie"stext liest sich schlecht. */
/* WICHTIG: niemals auf [data-sektion="..."] selektieren. scripts/upload.mjs
   maskiert das Attribut beim Deploy, solche Regeln greifen dann nur lokal.
   Die Artikelbahn traegt deshalb eine echte Klasse. (Gefunden 15.08.2026) */
.artikel-bahn { max-width: calc(var(--textspalte) + var(--raum-2) * 2); }
.artikel-kopf { text-align: left; }
/* Erste Zwischenueberschrift ohne Extra-Abstand: die Sektion bringt ihn schon mit */
.artikel-bahn > .prose:first-child > h2:first-child { margin-block-start: 0; }
/* Luft zwischen Fokus-Beitrag und Beitragsraster auf der Uebersicht */
.ratgeber-top + h2 { margin-top: var(--raum-4); }
.artikel-kopf h1 { font-size: var(--text-3xl); }
.artikel-kopf .antwort {
  font-family: var(--schrift-headline); font-weight: var(--headline-gewicht);
  font-size: var(--text-l); line-height: 1.45;
}
.autor-zeile { display: flex; align-items: center; gap: var(--raum-2); }
.autor-zeile img { width: 3rem; height: 3rem; border-radius: var(--ecke-rund); object-fit: cover; }

/* Praxisbox "Aus unserer Beratung": die EINE Dunkelflaeche des Artikels.
   Traegt den mittleren primaeren CTA, damit der Artikel nicht erst ganz
   unten ein Ziel bekommt. */
.praxis-box {
  background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel);
  border-radius: var(--ecke-karte); padding: var(--raum-3);
  max-width: var(--textspalte);
}
.praxis-box h2, .praxis-box h3 { color: inherit; font-size: var(--text-l); }
.praxis-box a:not(.knopf) { color: var(--farbe-tuerkis); }
.praxis-box .meta { color: color-mix(in srgb, var(--farbe-auf-dunkel) 72%, transparent); }

/* Leistungsbezug: ein Absatz, ein Link, kein Verkaufsdruck (Bauplan) */
.leistungs-bezug {
  border-left: 2.5px solid var(--farbe-tuerkis);
  padding-left: var(--raum-3); max-width: var(--textspalte);
}

/* Weiterlesen: schlichte Linienliste, keine zweite Kartenwand */
.weiterlesen { max-width: var(--textspalte); }
.weiterlesen ul { list-style: none; padding: 0; margin-top: var(--raum-2); }
.weiterlesen li { border-bottom: var(--linie); padding-block: var(--raum-2); }
.weiterlesen li:first-child { border-top: var(--linie); }
.weiterlesen a { font-weight: 600; }

/* Autorenbox am Artikelende: Person sichtbar, YMYL-Signal */
.autor-box { display: grid; grid-template-columns: auto 1fr; gap: var(--raum-3); align-items: start; max-width: var(--textspalte); }
.autor-box img { width: 6rem; height: 6rem; border-radius: var(--ecke-rund); object-fit: cover; }

@media (max-width: 900px) {
  .ratgeber-top { grid-template-columns: 1fr; gap: var(--raum-3); }
  .ratgeber-karten { grid-template-columns: 1fr; }
  .autor-box { grid-template-columns: 1fr; }
}

/* Breite Tabellen im Ratgeber scrollen in ihrem eigenen Kasten, statt am
   Handy Spalten abzuschneiden (gesehen 15.08.2026 in der Mobil-Ansicht). */
.tabelle-scroll { overflow-x: auto; }
.tabelle-scroll table { min-width: 30rem; }

/* Ratgeber-Liste auf den Leistungsseiten (Anweisung Paul 15.08.2026):
   schmal wie die FAQ darueber, Titel plus Einzeiler statt Karten. */
.ratgeber-liste { list-style: none; padding: 0; margin-top: var(--raum-3); }
.ratgeber-liste li { border-bottom: var(--linie); }
.ratgeber-liste li:first-child { border-top: var(--linie); }
.ratgeber-zeile { display: block; text-decoration: none; padding-block: var(--raum-2); }
.ratgeber-zeile__titel {
  display: block; font-family: var(--schrift-display); font-weight: 700;
  font-size: var(--text-l); color: var(--farbe-akzent);
}
.ratgeber-zeile__text { display: block; color: var(--farbe-text); margin-top: 0.25em; }
.ratgeber-zeile:hover .ratgeber-zeile__titel { text-decoration: underline; text-decoration-color: var(--farbe-tuerkis); }

/* ============================================================
   MOBIL-FEINSCHLIFF 15.08.2026 (Sichtprobe Paul am Handy)
   Zwei Befunde: dunkle Karten trugen ihr Desktop-Innenmass mit ins
   390px-Fenster (Text lief auf 200px zusammen), und die grossen
   Ueberschriftenstufen sprengten bei Woertern wie "Anschlussfinanzierung"
   den Viewport, was die ganze Seite seitlich wackeln liess.
   ============================================================ */
@media (max-width: 720px) {
  /* Ueberschriften eine Stufe kleiner, lange Komposita duerfen trennen.
     text-wrap: balance (base.css) muss dafuer weichen — zusammen mit balance
     bricht Chrome ohne Trennstrich mitten im Wort. */
  h1, h2, h3 { text-wrap: wrap; hyphens: auto; overflow-wrap: break-word; }
  /* Zwei Stufen runter: "Immobilienfinanzierung" (22 Zeichen) muss in
     358px Textbreite passen, sonst bricht Chrome das Wort ohne Trennstrich. */
  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-l); }
  h3 { font-size: var(--text-l); }
  .h-plakat { font-size: var(--text-xl); }
  .b-hero__grid h1 { font-size: var(--text-xl); }
  .artikel-kopf h1 { font-size: var(--text-xl); }
  .ratgeber-top h2 { font-size: var(--text-l); }
  .zusage, .sonderfall-zitat { font-size: var(--text-l); }
  .kennzahl { font-size: var(--text-2xl); }

  /* Innenmass der Karten: auf dem Handy zaehlt Textbreite, nicht Luft */
  .merk-karte { padding: var(--raum-2); }
  .hinweis-dunkel { padding: var(--raum-2); }
  .sonderfall-karte,
  .zusagen-karte,
  .fall-beweis { padding: var(--raum-3) var(--raum-2); }
  .fall-karte,
  .g-karte,
  .b-formkarte { padding: var(--raum-2); }
  .praxis-box { padding: var(--raum-3) var(--raum-2); }
  .trust { padding: var(--raum-2); }

  /* Logo-Reihen: zentriert statt auf die Raender verteilt */
  .banken { justify-content: center; gap: var(--raum-2) var(--raum-3); }
  .b-partner__zeile { gap: var(--raum-2) var(--raum-3); }
}

/* ============================================================
   NEUE KUNDENFOTOS 17.08.2026
   ============================================================ */

/* Kern-Botschaft der Leistungsseiten als Zweispalter (Anweisung Paul):
   Text links, Foto rechts; mobil zuerst das Bild, dann der Text.
   Fassung 3 (17.08.2026, Sichtprobe Paul): dieselben Spalten wie die
   leistung-detail-Sektion darueber (7fr 5fr) — das Bild ist so breit wie
   die Merk-Karte "Typische Ausgangslagen", der Text bekommt links mehr
   Innenraum und darf dafuer hoeher laufen. */
.hinweis-dunkel--split {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--raum-4);
  align-items: center; padding: var(--raum-3) var(--raum-4);
}
.hinweis-dunkel--split figure { margin: 0; }
.hinweis-dunkel--split img {
  width: 100%; object-fit: cover; aspect-ratio: 3 / 2;
  border-radius: var(--ecke-klein);
}
.hinweis-dunkel--split p { max-width: 55ch; }

@media (max-width: 720px) {
  .hinweis-dunkel--split { grid-template-columns: 1fr; padding: var(--raum-2); }
  .hinweis-dunkel--split figure { order: -1; }
}

/* Inhaber-Zahlen mobil (Sichtprobe Paul 17.08.2026): "100+ Mio. €" brach
   mitten in der Einheit, Zahlen und Beschriftungen wirkten unsortiert.
   Kleinere Zahl, die nicht mehr umbricht, Label direkt darunter, feste
   Zeilenhoehe fuer ruhige Reihen. */
@media (max-width: 720px) {
  .zahlen__vier { gap: var(--raum-3) var(--raum-2); }
  .zahlen__vier strong {
    font-size: var(--text-xl);
    white-space: nowrap;
  }
  .zahlen__vier > div { font-size: var(--text-s); }
}

/* ueber-uns Zitat-Karte: Bild links schmaler, Textspalte breiter */
.sonderfall-karte--bild-links { grid-template-columns: 2fr 3fr; }
@media (max-width: 900px) { .sonderfall-karte--bild-links { grid-template-columns: 1fr; } }

/* ============================================================
   NAV-DROPDOWN "Leistungen" (Anweisung Paul 17.08.2026)
   CSS-only: oeffnet per Hover und per Tastatur-Fokus (focus-within),
   kein JS. Das Menue schliesst luecken los an den Ausloeser an, damit
   der Mauszeiger auf dem Weg nach unten nicht ins Leere faellt.
   ============================================================ */
.nav-drop { position: relative; }
/* Ausloeser ist seit Runde 7 ein Button ohne Link (Anweisung Paul): beim
   Hover oeffnet nur das Untermenue, ohne eigene Unterstreichung. Auf einer
   aktiven Leistungsseite traegt er aria-current und wird wie die aktiven
   Nav-Links unterstrichen. */
.nav-drop__ausloeser {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--schrift-text); font-weight: 600;
  font-size: calc(var(--text-basis) * 1.1); color: var(--farbe-text);
  padding-inline: var(--raum-2); padding-block: 0;
  display: inline-block; padding-bottom: var(--raum-1); margin-bottom: calc(-1 * var(--raum-1));
}
/* kleiner Dropdown-Pfeil, dreht sich beim Oeffnen */
.nav-drop__ausloeser::after {
  content: ""; display: inline-block; margin-left: 0.4em;
  width: 0.5em; height: 0.5em;
  border-right: 2px solid var(--farbe-tuerkis); border-bottom: 2px solid var(--farbe-tuerkis);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.nav-drop:hover .nav-drop__ausloeser::after,
.nav-drop:focus-within .nav-drop__ausloeser::after { transform: rotate(225deg) translate(-1px, -1px); }
.nav-drop__ausloeser[aria-current="page"] {
  color: var(--farbe-akzent);
  text-decoration: underline; text-underline-offset: .35em;
}
.nav-drop__menue {
  visibility: hidden; opacity: 0; transition: opacity .15s ease;
  position: absolute; left: 0; top: 100%; z-index: 60;
  display: flex; flex-direction: column; gap: var(--raum-2);
  min-width: 19rem; padding: var(--raum-3);
  background: var(--farbe-flaeche); box-shadow: var(--schatten-flach);
  border-radius: var(--ecke-klein); border-top: 2.5px solid var(--farbe-tuerkis);
}
.nav-drop:hover .nav-drop__menue,
.nav-drop:focus-within .nav-drop__menue { visibility: visible; opacity: 1; }
.nav-drop__menue a { border-left: none !important; padding-inline: 0; font-size: var(--text-m); }
.nav-drop__alle {
  border-top: var(--linie); padding-top: var(--raum-2);
  color: var(--farbe-akzent) !important;
}

/* ============================================================
   EIGENER FINANZIERUNGSRECHNER 17.08.2026 (Anweisung Paul)
   Ersetzt die beiden FinLink-iframes auf finanzierungsrechner.html.
   Phase A: Live-Rechner (rechnet bei jeder Eingabe, ohne Kontaktdaten).
   Phase B: Anfrage-Strecke nach finblitz-Muster (4 Schritte, Kontakt
   erst am Ende). Klassen der Strecke sind aus dem finblitz-Projekt
   portiert (dort abgenommen), an die Schilk-Tokens angepasst.
   ============================================================ */

/* Phase A: Eingaben links (helle Karte), Ergebnis rechts (Dunkelkarte,
   gleiche Buehne wie rechnung__ergebnis) */
.live-rechner { display: grid; grid-template-columns: 5fr 7fr; gap: var(--raum-3); align-items: stretch; text-align: left; }
.live-rechner__eingaben {
  background: var(--farbe-flaeche); border-radius: var(--ecke-karte);
  box-shadow: var(--schatten-flach); padding: var(--raum-3);
}
.live-rechner__eingaben label { font-weight: 600; font-size: var(--text-s); }
.live-rechner__eingaben > div + div { margin-top: var(--raum-2); }
.live-rechner__ergebnis {
  background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel);
  border-radius: var(--ecke-gross); padding: var(--raum-3);
}
.live-rechner__ergebnis .kennzahl { color: var(--farbe-tuerkis); font-size: var(--text-3xl); }
.live-rechner__ergebnis .meta { color: color-mix(in srgb, var(--farbe-auf-dunkel) 72%, transparent); }
.live-rechner__werte { display: grid; grid-template-columns: 1fr auto; gap: var(--raum-1) var(--raum-2); margin: 0; }
.live-rechner__werte dt { color: color-mix(in srgb, var(--farbe-auf-dunkel) 80%, transparent); }
.live-rechner__werte dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.live-rechner__kurve { margin-top: var(--raum-2); }
.live-rechner__kurve svg { width: 100%; height: auto; display: block; }
.live-rechner__kurve .kurve-linie { stroke: var(--farbe-tuerkis); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.live-rechner__kurve .kurve-marke { stroke: color-mix(in srgb, var(--farbe-auf-dunkel) 45%, transparent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.live-rechner__kurve .kurve-text { fill: color-mix(in srgb, var(--farbe-auf-dunkel) 72%, transparent); font-size: 10px; font-family: var(--schrift-text); }

/* Phase B: Strecke (Port aus finblitz, dort freigegeben) */
.strecke-karte {
  background: var(--farbe-flaeche); border-radius: var(--ecke-karte);
  box-shadow: var(--schatten-flach); padding: var(--raum-3);
  max-width: 46rem; margin-inline: auto; text-align: left;
}
.fortschritt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--raum-1) var(--raum-2); }
.fortschritt__balken { height: 0.4rem; border-radius: var(--ecke-rund); background: var(--farbe-flaeche-alt); overflow: hidden; margin-top: var(--raum-1); }
.fortschritt__balken > span { display: block; height: 100%; width: 25%; background: var(--farbe-tuerkis); border-radius: var(--ecke-rund); transition: width .3s ease; }
.schritt { display: none; border: none; padding: 0; margin: 0; min-width: 0; }
.schritt[data-aktiv] { display: block; animation: schritt-ein .25s ease; }
@keyframes schritt-ein { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
.schritt__fragen > div + div { margin-top: var(--raum-2); }
.schritt__nav { display: flex; justify-content: space-between; gap: var(--raum-2); margin-top: var(--raum-3); }
.schritt__nav .knopf:only-child { margin-left: auto; }
.schritt__zurueck { background: none; border: none; cursor: pointer; font-family: var(--schrift-text); font-size: var(--text-m); color: var(--farbe-text-gedimmt); text-decoration: underline; text-underline-offset: .3em; padding: 0; }
.auswahl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-2); }
.auswahl button {
  font-family: var(--schrift-text); font-size: var(--text-m); font-weight: 600;
  color: var(--farbe-text); background: var(--farbe-flaeche);
  border: var(--linie); border-radius: var(--ecke-klein);
  padding: var(--raum-2); cursor: pointer; text-align: center;
}
.auswahl button:hover { border-color: var(--farbe-tuerkis); }
.auswahl button[aria-pressed="true"] { border: 2.5px solid var(--farbe-tuerkis); background: var(--farbe-tuerkis-flaeche); }
.auswahl button:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* PLZ + Ort nebeneinander (FinLink-Abgleich 17.08.2026) */
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--raum-2); }
.feld__einheit { position: relative; }
.feld__einheit input { padding-right: 2.4em; }
.feld__einheit::after { content: attr(data-einheit); position: absolute; right: 0.9em; top: 50%; transform: translateY(-50%); color: var(--farbe-text-gedimmt); pointer-events: none; }
.feld-fehler { display: none; font-size: var(--text-s); color: var(--farbe-fehler); font-weight: 600; margin-top: var(--raum-1); }
[data-ungueltig] .feld-fehler { display: block; }
[data-ungueltig] input, [data-ungueltig] select { border-color: var(--farbe-fehler); }
.vorschau { background: var(--farbe-tuerkis-flaeche); border-radius: var(--ecke-klein); padding: var(--raum-2); }
.vorschau dl { display: grid; grid-template-columns: 1fr auto; gap: var(--raum-1) var(--raum-2); margin: 0; }
.vorschau dt { color: var(--farbe-text-gedimmt); }
.vorschau dd { margin: 0; text-align: right; font-weight: 700; }
.erfolg h3 { font-size: var(--text-xl); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .live-rechner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .live-rechner__eingaben, .live-rechner__ergebnis, .strecke-karte { padding: var(--raum-2); }
  .auswahl { grid-template-columns: 1fr; }
  .auswahl button:last-child:nth-child(odd) { grid-column: auto; }
}