/* ==========================================================================
   immobricks.de — Marketing-Website

   Gestaltung „Werkbank“ (03.10.2026), dieselbe Richtlinie wie der Partner-Bereich
   (app/assets/werkbank.css), verbindlich beschrieben in DESIGN.md. Schrift Manrope mit
   tabellarischen Ziffern, kantig (Radius 0; rund nur Hinweis-Punkte, Schritt-Punkte,
   Reglergriffe, Radioknöpfe und die eine angehobene Karte im Einstieg),
   hell (Arbeitsfläche #F3F4F0, Karten weiß), Aktion Grün #187A52, zweite Aktion dunkel
   #16201B. Schmuckmittel ist die Schraffur (−45°, 5 px) für Balken und Statusflächen.
   Es gibt keine dunklen Bänder, kein Gold als Akzent (Gold nur im Markenzeichen), keine
   gesperrten Versalien, keine großen weichen Schatten, kein Glas, kein Gitternetz.
   Sand/Bronze ist allein die Statusfarbe „Reserviert“ in den Produktszenen.

   Die alten Variablennamen (wald-, gold-, kalk-, hell-) bleiben und sind neu belegt, damit
   jede Seite dem Fundament folgt. Vorsicht bei --wald-*: Das ist jetzt „dunkle Tinte“ für
   kleine dunkle Elemente (Zweitknopf, Avatar) — nie mehr Grund eines ganzen Abschnitts.

   Aufbau: 1 Werte · 2 Grundlagen · 3 Schrift · 4 Raster & Flächen · 5 Bausteine · 6 Kopf ·
   7 Fuß · 8 Abschluss · 9 Bewegung · 10 Produkt-Bausteine · 11+ Seitenteile
   ========================================================================== */

/* ---------- 1 Werte ---------- */
:root{
  /* Werkbank */
  --seite:#F3F4F0; --karte:#FFFFFF; --flaeche-2:#F6F7F4; --flaeche-3:#FAFAF8; --schwebe:#F1F2EE; --segment:#EAEBE6;
  --tinte:#16201B; --tinte-mitte:#3A443E; --tinte-weich:#646E66; --tinte-blass:#6E786F;
  --linie:#EEEFEB; --linie-2:#E3E5DF; --linie-3:#CFD3CA;
  --aktion:#187A52; --aktion-dunkel:#126544; --aktion-weich:#E3F0E8; --aktion-tinte:#14513A;
  --dunkel:#16201B; --dunkel-hover:#2A352F;
  --warn:#A4461A; --warn-grund:#F7E1D3;
  /* Stand-Vokabular der App (Wohnungsspiegel, Balken, Pillen) */
  --st-frei:#F2F3EF; --st-frei-rand:#E6E8E2; --st-frei-fg:#4A544D;
  --st-gespr-a:#BFDDCB; --st-gespr-b:#B1D5C0; --st-gespr-fg:#14513A;
  --st-res-a:#E2B776; --st-res-b:#D9AA64; --st-res-fg:#4D3410;
  --st-verk-a:#187A52; --st-verk-b:#1C8058;
  --st-zur-a:#D9DCD4; --st-zur-b:#CFD3CA;
  --pille-res-bg:#F6EBD8; --pille-res-fg:#6B4313; --pille-res-punkt:#CC9550;
  --pille-neu-bg:#F1F2EE; --pille-neu-fg:#4A544D;
  --schraffur-gruen:repeating-linear-gradient(-45deg,var(--st-verk-a) 0 5px,var(--st-verk-b) 5px 10px);
  --schraffur-gespr:repeating-linear-gradient(-45deg,var(--st-gespr-a) 0 5px,var(--st-gespr-b) 5px 10px);
  --schraffur-res:repeating-linear-gradient(-45deg,var(--st-res-a) 0 5px,var(--st-res-b) 5px 10px);
  --schraffur-zur:repeating-linear-gradient(-45deg,var(--st-zur-a) 0 5px,var(--st-zur-b) 5px 10px);
  --schraffur-leer:repeating-linear-gradient(-45deg,#F3F4F0 0 5px,#ECEEE8 5px 10px);

  /* Alte Namen, neu belegt */
  --wald-950:#16201B; --wald-900:#16201B; --wald-800:#2A352F; --wald-700:#3A443E;
  --gruen-700:#187A52; --gruen-600:#187A52; --gruen-500:#187A52; --gruen-100:#E3F0E8; --gruen-50:#F1F7F3;
  --gold-500:#187A52; --gold-600:#187A52; --gold-700:#4A544D; --gold-200:#E3E5DF; --gold-100:#F1F2EE;
  --kalk-0:#FFFFFF; --kalk-50:#F6F7F4; --kalk-100:#EEEFEB; --kalk-200:#E3E5DF; --kalk-300:#CFD3CA;
  --ink-900:#16201B; --ink-700:#3A443E; --ink-600:#646E66; --ink-400:#6E786F;
  --hell-1:#16201B; --hell-2:#646E66; --hell-3:#646E66;
  --rot:#A4461A;
  --linie-hell:#E3E5DF; --linie-hell-2:#EEEFEB;

  /* Für den Hinweis zur Besucherstatistik (app/assets/track.js liest diese Namen) */
  --surface:#FFFFFF; --ink:#16201B; --ink-soft:#646E66; --line:#E3E5DF; --accent:#187A52; --accent-dark:#126544; --accent-ink:#FFFFFF;

  --f-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-text:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --max:1240px; --rand:clamp(20px,4.2vw,48px);
  --sek:clamp(72px,9vw,132px);
  --kopf-h:72px;
  --r-xs:0; --r-sm:0; --r-md:0; --r-lg:0; --r-xl:0; --r-2xl:0;

  --schatten-karte:0 1px 2px rgba(22,32,27,.035),0 8px 18px -10px rgba(22,32,27,.13);
  --schatten-hero:14px 0 36px -6px rgba(22,32,27,.09);
  --schatten-reiter:0 1px 3px rgba(22,32,27,.12);
  --schatten-1:none; --schatten-2:var(--schatten-karte); --schatten-3:var(--schatten-karte);

  --aus:cubic-bezier(.22,1,.36,1);
  --feder:cubic-bezier(.22,1,.36,1);   /* kein Überschwingen mehr */
  --dauer:.6s;
}

/* ---------- 2 Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--seite);color:var(--tinte);font-family:var(--f-text);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'tnum' 1;font-variant-numeric:tabular-nums;overflow-x:clip}
img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-radius:0}
input,select,textarea{font-family:inherit;border-radius:0}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--aktion);outline-offset:2px}
::selection{background:var(--aktion-weich);color:var(--tinte)}
.sprung{position:absolute;left:12px;top:-60px;z-index:100;background:var(--dunkel);color:#fff;
  padding:10px 16px;font-weight:600;transition:top .2s}
.sprung:focus{top:12px}
[hidden]{display:none!important}
.nur-lesbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Wortmarke: immer klein, „immo" dünn, „bricks" fett */
.bw{font-family:var(--f-text);font-weight:300;letter-spacing:-.02em}
.bw b{font-weight:700}

.icon{width:22px;height:22px;flex:none}

/* ---------- 3 Schrift ---------- */
.t-riesig{font-size:clamp(40px,5vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:600}
.t-gross{font-size:clamp(30px,3.7vw,52px);line-height:1.08;letter-spacing:-.03em}
.t-mittel{font-size:clamp(23px,2.2vw,30px);line-height:1.15;letter-spacing:-.025em}
.t-klein{font-size:clamp(18px,1.5vw,21px);line-height:1.28;letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.4vw,19.5px);line-height:1.55;color:var(--tinte-weich);max-width:60ch}
.text{color:var(--tinte-weich);max-width:62ch}
.gold{color:var(--aktion)}   /* Name aus der Goldzeit: die betonte zweite Zeile einer Überschrift, jetzt grün */
.zahl{font-family:var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Zeile über Überschriften: schlicht, normale Schreibweise, ohne Balken */
.zeile{display:block;font-size:15px;font-weight:600;color:var(--tinte-weich);margin-bottom:16px}
.zeile__ziegel{display:none}

/* ---------- 4 Raster & Flächen ---------- */
.huelle{width:100%;max-width:calc(var(--max) + 2*var(--rand));margin-inline:auto;padding-inline:var(--rand)}
.sek{padding-block:var(--sek);position:relative}
.sek--kalk{background:var(--seite)}
.sek--weiss{background:var(--karte)}
/* „dunkel“ heißt nur noch: Arbeitsfläche mit Trennlinien — die Klasse steht in den Vorlagen. */
.sek--dunkel{background:var(--seite);color:var(--tinte);border-block:1px solid var(--linie-2)}
.sek--dunkel .lead,.sek--dunkel .text{color:var(--tinte-weich)}
.sek--eng{padding-block:calc(var(--sek)*.55)}
.raster::before,.raster--hell::before{content:none}   /* das Gitternetz entfällt */

.kopfzeile{max-width:820px;margin-bottom:clamp(36px,5vw,64px)}
.kopfzeile--mitte{margin-inline:auto;text-align:center}
.kopfzeile--mitte .lead{margin-inline:auto}
.kopfzeile .lead{margin-top:20px}

/* ---------- 5 Bausteine ---------- */
.knopf{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border:1px solid transparent;
  font-size:15px;font-weight:600;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.knopf .icon{width:18px;height:18px;transition:transform .3s var(--aus)}
.knopf:hover .knopf__pfeil{transform:translateX(3px)}
/* Hauptaktion: grün. „gold“ ist der alte Name der Hauptaktion auf dunklem Grund. */
.knopf--gruen,.knopf--gold{background:var(--aktion);color:#fff}
.knopf--gruen:hover,.knopf--gold:hover{background:var(--aktion-dunkel)}
/* Zweite Aktion: dunkel („hell“ war die zweite Aktion auf dunklem Grund) oder weiß mit Rand. */
.knopf--hell{background:var(--dunkel);color:#fff}
.knopf--hell:hover{background:var(--dunkel-hover)}
.knopf--ghost{background:var(--karte);border-color:var(--linie-2);color:var(--tinte)}
.knopf--ghost:hover{border-color:var(--tinte)}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.textlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--aktion-dunkel)}
.textlink .icon{width:18px;height:18px;transition:transform .3s var(--aus)}
.textlink:hover .icon{transform:translateX(3px)}

/* Maßkette: eine schlichte Linie mit Beschriftung */
.mass{position:relative;display:flex;align-items:center;justify-content:center;height:22px;color:var(--tinte-weich)}
.mass__linie{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--linie-3)}
.mass__text{position:relative;background:var(--mass-grund,var(--seite));padding:0 14px;font-size:14px;font-weight:600}

.zeichen{width:auto;height:1em}

/* ---------- 6 Kopf ---------- */
/* Immer hell und deckend — kein Glas, kein durchsichtiger Zustand. */
.kopf{position:fixed;inset:0 0 auto;z-index:50;background:var(--karte);color:var(--tinte);border-bottom:1px solid var(--linie)}
.kopf__innen{display:flex;align-items:center;gap:28px;height:var(--kopf-h)}
.kopf__logo{display:inline-flex;align-items:center;gap:11px;font-size:22px;flex:none}
.kopf__zeichen{height:22px}
.kopf__nav{display:flex;align-items:center;gap:2px;margin-left:14px}
.kopf__link,.menue__knopf{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px;
  font-size:15px;font-weight:500;color:var(--tinte-mitte);transition:background-color .2s,color .2s}
.kopf__link:hover,.menue__knopf:hover,.menue__knopf[aria-expanded="true"],.kopf__link.ist-aktiv{color:var(--tinte);background:var(--schwebe)}
.kopf__link.ist-aktiv{font-weight:600}
.menue__pfeil{width:16px;height:16px;transition:transform .3s var(--aus)}
.menue__knopf[aria-expanded="true"] .menue__pfeil{transform:rotate(180deg)}
.kopf__aktionen{margin-left:auto;display:flex;align-items:center;gap:8px}
.kopf__login{font-size:15px;font-weight:500;padding:0 14px;height:44px;display:inline-flex;align-items:center;color:var(--tinte-mitte)}
.kopf__login:hover{color:var(--tinte);background:var(--schwebe)}
.kopf__aktionen .knopf{height:44px;padding:0 18px;font-size:14.5px}
.kopf__burger{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center}
.kopf__burger:hover{background:var(--schwebe)}
.kopf__burger .icon{width:24px;height:24px}

/* Menü-Panels */
.menue{position:relative}
.menue__panel{position:absolute;top:calc(100% + 16px);left:-16px;background:var(--karte);color:var(--tinte);
  box-shadow:0 12px 32px rgba(22,32,27,.16),0 0 0 1px rgba(22,32,27,.05);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s,transform .25s var(--aus),visibility 0s .25s}
.menue.ist-offen .menue__panel{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .25s var(--aus)}
.menue__panel::before{content:"";position:absolute;inset:-16px 0 auto;height:16px}
.menue__panel--funktionen{width:min(860px,calc(100vw - 48px))}
.menue__gruppen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:20px}
.menue__gruppentitel{font-size:13px;font-weight:600;color:var(--tinte-blass);padding:4px 12px 10px}
.menue__eintrag{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;transition:background-color .2s}
.menue__eintrag:hover,.menue__eintrag.ist-aktiv{background:var(--schwebe)}
.menue__eintrag b{display:block;font-size:14.5px;font-weight:600}
.menue__eintrag small{display:block;font-size:13px;color:var(--tinte-weich);line-height:1.4;margin-top:2px}
.menue__icon{flex:none;width:36px;height:36px;background:var(--aktion-weich);color:var(--aktion-tinte);display:grid;place-items:center}
.menue__icon .icon{width:19px;height:19px}
.menue__fuss{display:flex;justify-content:space-between;gap:16px;padding:14px 32px;border-top:1px solid var(--linie);background:var(--flaeche-3);
  font-size:14px;font-weight:500}
.menue__fuss a{display:inline-flex;align-items:center;gap:8px;color:var(--tinte-mitte)}
.menue__fuss a:hover{color:var(--aktion-dunkel)}
.menue__fuss .icon{width:17px;height:17px}
.menue__panel--loesungen{width:min(760px,calc(100vw - 48px));display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
.menue__loesung{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--linie-2);
  transition:border-color .2s,background-color .2s}
.menue__loesung:hover,.menue__loesung.ist-aktiv{border-color:var(--tinte);background:var(--flaeche-3)}
.menue__loesung b{font-family:var(--f-display);font-size:17.5px;font-weight:600;letter-spacing:-.015em;margin-top:6px}
.menue__loesung small{font-size:13.5px;color:var(--tinte-weich);line-height:1.45}
.menue__mehr{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--aktion-dunkel)}
.menue__mehr .icon{width:15px;height:15px}

/* Mobil */
.mobilnav{position:fixed;inset:calc(var(--kopf-h) + 1px) 0 0;background:var(--karte);overflow-y:auto}
.mobilnav__innen{padding:8px var(--rand) 40px;display:flex;flex-direction:column}
.mobilnav__titel{font-size:13px;font-weight:600;color:var(--tinte-blass);padding:22px 0 6px}
.mobilnav a:not(.knopf){display:flex;align-items:center;gap:14px;padding:13px 0;font-size:17px;font-weight:500;border-bottom:1px solid var(--linie)}
.mobilnav a:not(.knopf) .icon{color:var(--aktion)}
.mobilnav__knoepfe{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.mobilnav__knoepfe .knopf{justify-content:center}

/* ---------- 7 Fuß ---------- */
.fuss{background:var(--karte);color:var(--tinte-weich);padding:72px 0 32px;font-size:14.5px;border-top:1px solid var(--linie-2)}
.fuss__oben{display:grid;grid-template-columns:1.1fr 2fr;gap:64px;padding-bottom:56px;border-bottom:1px solid var(--linie)}
.fuss__logo{display:inline-flex;align-items:center;gap:11px;font-size:25px;color:var(--tinte)}
.fuss__logo .zeichen{height:24px}
.fuss__marke p{margin:18px 0 26px;max-width:34ch;line-height:1.55}
.fuss__spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.fuss__titel{color:var(--tinte);font-weight:600;margin-bottom:12px;font-size:14.5px}
.fuss__spalten a{display:block;padding:5px 0;transition:color .2s}
.fuss__spalten a:hover,.fuss__recht a:hover{color:var(--tinte);text-decoration:underline;text-underline-offset:3px}
.fuss__unten{display:flex;justify-content:space-between;gap:20px;padding-top:26px;font-size:13.5px;color:var(--tinte-weich)}
.fuss__recht{display:flex;flex-wrap:wrap;gap:8px 22px}

/* ---------- 8 Abschluss (Demo-Aufruf am Seitenende) ---------- */
/* Hell: zartgrüne Fläche, links ein schraffierter Streifen als einziger Schmuck. */
.abschluss{position:relative;background:var(--aktion-weich);color:var(--tinte);padding-block:clamp(72px,9vw,120px);overflow:hidden}
.abschluss__raster{position:absolute;inset:0 auto 0 0;width:clamp(10px,2vw,28px);background:var(--schraffur-gruen)}
.abschluss__innen{text-align:center;display:flex;flex-direction:column;align-items:center}
.abschluss__zeichen{height:34px;margin-bottom:28px}
.abschluss__titel{font-size:clamp(30px,3.9vw,54px);line-height:1.06;letter-spacing:-.03em;max-width:18ch}
.abschluss__text{color:var(--tinte-mitte);font-size:clamp(17px,1.4vw,19px);max-width:52ch;margin:20px auto 32px}
.abschluss__knoepfe{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* Hinweis zur Besucherstatistik (app/assets/track.js hängt sein eigenes <style> später an —
   deshalb hier mit „html body“ davor, damit die kantige Form gewinnt). */
html body #kfwConsent{border-radius:0;border:1px solid var(--linie-2);box-shadow:0 12px 32px rgba(22,32,27,.16);font-size:14.5px;padding:20px 22px}
html body #kfwConsent button{border-radius:0;height:44px;padding:0 18px;font-size:14.5px}
html body #kfwConsentYes:hover{filter:none;background:var(--aktion-dunkel)}
html body #kfwConsentNo{background:var(--karte);color:var(--tinte);border-color:var(--linie-3)}
html body #kfwConsentNo:hover{border-color:var(--tinte)}
/* Editor-Leiste (home/assets/bearbeiten.css) erbt --gold-500, das jetzt Grün ist: Ihr Hauptknopf
   braucht darauf weiße Schrift. Hier statt dort, weil site.css die neue Versionsnummer trägt. */
html .cms-knopf--gold{color:#fff}

/* ---------- 9 Bewegung ---------- */
/* Einblenden beim Scrollen: [data-zeige] bekommt .ist-sichtbar (site.js). Ohne JS bleibt alles
   sichtbar — die Klasse .js am <html> schaltet den Ausgangszustand erst ein, wenn JS läuft.
   Zurückhaltend: kurzer Weg, kurze Dauer. */
.js [data-zeige]:not(.mass){opacity:0;transform:translateY(14px);transition:opacity var(--dauer) var(--aus),transform var(--dauer) var(--aus)}
.js [data-zeige].ist-sichtbar{opacity:1;transform:none}
.js [data-zeige][data-verzug="1"]{transition-delay:.06s}
.js [data-zeige][data-verzug="2"]{transition-delay:.12s}
.js [data-zeige][data-verzug="3"]{transition-delay:.18s}
.js [data-zeige][data-verzug="4"]{transition-delay:.24s}
.js [data-zeige][data-verzug="5"]{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-zeige]:not(.mass){opacity:1;transform:none}
}

/* ==========================================================================
   10 Produkt-Bausteine — gezeichnet wie die App im Stand „Werkbank“: weiße kantige Karten,
   Segmentleisten, eckige Pillen und Schalter, Schraffur für Stände.
   ========================================================================== */
.fenster{background:var(--karte);box-shadow:var(--schatten-karte);overflow:hidden;
  color:var(--tinte);font-size:14px;line-height:1.45;text-align:left}
.fenster__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 18px;border-bottom:1px solid var(--linie);
  background:var(--flaeche-3)}
.fenster__pfad{font-size:13px;color:var(--tinte-weich);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fenster__pfad i{font-style:normal;color:var(--linie-3);margin:0 6px}
.fenster__pfad b{color:var(--tinte);font-weight:600}
.fenster__aktion{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--aktion-dunkel);white-space:nowrap}
.fenster__aktion .icon{width:15px;height:15px}
.fenster__koerper{padding:20px}
.live{display:none}   /* die „Live“-Marke entfällt (Werkbank); in Minikarten steht sie noch im Markup */

/* Pillen: eckig */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;background:var(--pille-neu-bg);color:var(--pille-neu-fg);
  font-size:12px;font-weight:700;white-space:nowrap}
.chip .icon{width:14px;height:14px}
.chip--gruen{background:var(--aktion-weich);color:var(--aktion-tinte)}
.chip--gold{background:var(--karte);color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie-2)}   /* hervorgehoben, ohne Gold */
.chip--res{background:var(--pille-res-bg);color:var(--pille-res-fg)}                                 /* Status „Reserviert“ */
.chip--dunkel{background:var(--dunkel);color:#fff}
.klein-titel{font-size:13px;font-weight:600;color:var(--tinte-weich);margin-bottom:10px}

.knopf-mini{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:var(--aktion);color:#fff;
  font-size:13px;font-weight:600;transition:background-color .3s,opacity .3s,color .3s}
.knopf-mini .icon{width:16px;height:16px}
.knopf-mini.ist-gedrueckt{background:var(--aktion-dunkel)}
.knopf-mini--aus{background:var(--linie-2);color:var(--tinte-weich)}
.knopf-mini--gruen{background:var(--aktion)}

/* Vermarktungsbalken — Zustände und Schraffur wie „Vermarktung je Anlage“ in der App. */
.vst{background:var(--karte);border:1px solid var(--linie-2);padding:14px 16px 13px}
.vst__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;font-size:12.5px;color:var(--tinte-weich)}
.vst__kopf>span:first-child{font-size:13px;font-weight:600;color:var(--tinte)}
.vst__kopf>span:last-child{white-space:nowrap}
.vst__kopf b{font-family:var(--f-display);font-size:17px;font-weight:600;color:var(--tinte);letter-spacing:-.02em}
.vst__balken{display:flex;gap:3px;height:28px;overflow:hidden}
.vst__seg{min-width:4px;transition:flex-grow .9s var(--aus)}
.vst__seg--verkauft,.vst__punkt--verkauft{background:var(--schraffur-gruen)}
.vst__seg--reserviert,.vst__punkt--reserviert{background:var(--schraffur-res)}
.vst__seg--gespraech,.vst__punkt--gespraech{background:var(--schraffur-gespr)}
.vst__seg--zurueckgestellt,.vst__punkt--zurueckgestellt{background:var(--schraffur-zur)}
.vst__seg--frei,.vst__punkt--frei{background:var(--st-frei);box-shadow:inset 0 0 0 1px var(--st-frei-rand)}
.vst__legende{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--tinte-weich)}
.vst__legende span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vst__legende b{font-weight:600;color:var(--tinte)}
.vst__punkt{display:inline-block;flex:none;width:10px;height:10px;transition:background .5s}
.vst__punkt--verkauft{background:var(--st-verk-a)}.vst__punkt--reserviert{background:var(--st-res-b)}
.vst__punkt--gespraech{background:var(--st-gespr-b)}.vst__punkt--zurueckgestellt{background:var(--st-zur-b)}

/* Einheitenliste mit Status-Pillen wie in der App */
.einheiten{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px}
.einheiten th{padding:0 10px 8px;text-align:left;font-size:12px;font-weight:500;color:var(--tinte-blass);border-bottom:1px solid var(--linie)}
.einheiten td{padding:8px 10px;border-bottom:1px solid var(--linie);color:var(--tinte-mitte);white-space:nowrap}
.einheiten tr:last-child td{border-bottom:0}
.einheiten td b{color:var(--tinte);font-weight:700}
.einheiten th:nth-child(3),.einheiten td:nth-child(3){text-align:right}
.einheiten td:nth-child(3){font-weight:700;color:var(--tinte)}
.einheiten tr.ist-neu td{animation:zeileAufleuchten 1.6s var(--aus)}
@keyframes zeileAufleuchten{0%,25%{background:var(--aktion-weich)}}
.st{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 8px;font-weight:700;font-size:12px;background:var(--pille-neu-bg);color:var(--pille-neu-fg);white-space:nowrap;max-width:100%}
.st small{font-weight:500;font-size:12px;color:inherit;opacity:.85;overflow:hidden;text-overflow:ellipsis}
.st .vst__punkt{width:7px;height:7px;box-shadow:none}
.st--frei{background:var(--aktion-weich);color:var(--aktion-tinte)}
.st--frei .vst__punkt{background:var(--aktion)}
.st--gespraech{background:var(--aktion-weich);color:var(--aktion-tinte)}
.st--gespraech .vst__punkt{background:#7DB89A}
.st--reserviert{background:var(--pille-res-bg);color:var(--pille-res-fg)}
.st--reserviert .vst__punkt{background:var(--pille-res-punkt)}
.st--verkauft{background:var(--pille-neu-bg);color:var(--pille-neu-fg)}
.st--verkauft .vst__punkt{background:var(--tinte-blass)}
.st--zurueckgestellt .vst__punkt{background:var(--linie-3)}

/* Aktivität — wie „Letzte Änderungen“ / „Aktivität“ in der App: Zeilen mit eckigem Punkt, keine Kärtchen */
.akt-kopf{display:flex;flex-direction:column;gap:10px}
.akt-kopf b{font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:-.02em}
.akt-filter{display:flex;gap:0;padding:3px;background:var(--segment);align-self:flex-start;max-width:100%}
.akt-filter i{font-style:normal;font-size:11.5px;font-weight:600;padding:4px 8px;white-space:nowrap;color:var(--tinte-weich)}
.akt-filter i.ist-an{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-reiter)}
.akt-tag{font-size:12px;font-weight:500;color:var(--tinte-blass);margin-top:2px}
.akt-liste{display:flex;flex-direction:column}
.akt{position:relative;flex:none;padding:11px 0 11px 20px;border-top:1px solid var(--linie);font-size:12.5px;line-height:1.45}
.akt::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;background:var(--tinte-blass)}
.akt--anfrage::before{background:var(--pille-res-punkt)}
.akt--gespraech::before{background:#7DB89A}
.akt--verkauf::before{background:var(--aktion)}
.akt--aenderung::before{background:var(--linie-3)}
.akt__text{color:var(--tinte-mitte)}
.akt__text b{color:var(--tinte);font-weight:600}
.akt__fuss{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;color:var(--tinte-blass)}
.akt.ist-erledigt::before{background:var(--aktion)}
.akt.ist-erledigt .akt__text{color:var(--tinte-weich)}
.akt.ist-neu{animation:hereinrutschen .5s var(--aus)}
@keyframes hereinrutschen{from{opacity:0;transform:translateY(-8px)}}

.meldung{display:flex;gap:10px;align-items:center;padding:12px 14px;background:var(--karte);box-shadow:0 12px 32px rgba(22,32,27,.16),0 0 0 1px rgba(22,32,27,.05);
  font-size:13px}   /* schwebend wie eine Mitteilung der App */
.meldung .icon{width:18px;height:18px;flex:none;color:var(--aktion)}
.meldung b{display:block;font-weight:600}
.meldung small{display:block;color:var(--tinte-weich);font-size:12.5px}

.kpi{padding:12px 14px;background:var(--flaeche-2)}
.kpi small{display:block;font-size:12px;color:var(--tinte-weich)}
.kpi b{display:block;font-size:24px;font-weight:600;margin:3px 0 1px;letter-spacing:-.03em;white-space:nowrap}
.kpi i{display:block;font-style:normal;font-size:12.5px;color:var(--tinte-blass)}
.kpi--gold{background:var(--aktion-weich)}
.kpi--gold b{color:var(--aktion-tinte)}

/* Segmentleiste (Reiter): grauer Grund, aktiver Reiter weiß */
.segment{display:inline-flex;padding:3px;background:var(--segment);font-size:12px;font-weight:600;color:var(--tinte-weich);max-width:100%}
.segment span{padding:6px 12px;white-space:nowrap}
.segment .ist-an{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-reiter)}
.segment em{font-style:normal;font-weight:500;color:var(--tinte-blass);margin-left:5px}

/* Wohnungsspiegel — je Einheit ein Feld, Stand als Schraffur (Dashboard und Wohnanlage der App) */
.spiegel{font-size:12px;color:var(--tinte)}
.spiegel__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.spiegel__kopf small{display:block;font-size:12.5px;color:var(--tinte-weich)}
.spiegel__zahl{display:block;font-size:38px;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.spiegel__zahl span{font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--tinte-weich)}
.spiegel__anlage{font-size:12.5px;color:var(--tinte-weich);text-align:right;line-height:1.35}
.spiegel__anlage b{display:block;color:var(--tinte);font-weight:600;font-size:13.5px}
.spiegel__legende{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 12px;color:var(--tinte-weich)}
.spiegel__legende span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.spiegel__legende b{color:var(--tinte);font-weight:600}
.spiegel__reihe{display:grid;grid-template-columns:38px repeat(5,minmax(0,1fr));gap:4px;margin-top:4px;align-items:stretch}
.spiegel__etage{align-self:center;font-size:11.5px;color:var(--tinte-blass)}
.spiegel__feld{display:grid;place-items:center;height:34px;font-size:11px;font-weight:700;letter-spacing:-.01em;
  background:var(--st-frei);box-shadow:inset 0 0 0 1px var(--st-frei-rand);color:var(--st-frei-fg);white-space:nowrap}
.spiegel__feld--gespraech{background:var(--schraffur-gespr);color:var(--st-gespr-fg);box-shadow:none}
.spiegel__feld--reserviert{background:var(--schraffur-res);color:var(--st-res-fg);box-shadow:none}
.spiegel__feld--verkauft{background:var(--schraffur-gruen);color:#fff;box-shadow:none}
.spiegel__feld--leer{background:none;box-shadow:none}

/* ==========================================================================
   11 Startseite
   ========================================================================== */
/* Einstieg: hell, Text links, rechts das Motiv bis an den Rand (wie die Anmeldeseite der App).
   Über dem Motiv liegt die eine angehobene Karte der Seite (24 px Radius): ein Wohnungsspiegel. */
.held{position:relative;background:var(--karte);padding-top:var(--kopf-h);overflow:hidden}
.held__innen{display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);min-height:min(calc(100svh - var(--kopf-h)),780px)}
.held__text{align-self:center;max-width:760px;padding:clamp(48px,6vw,88px) clamp(28px,5vw,72px) clamp(56px,7vw,96px) max(var(--rand),calc((100vw - var(--max)) / 2))}
.held__titel span{color:var(--aktion)}
.held__lead{margin-top:24px;font-size:clamp(17.5px,1.45vw,20.5px);line-height:1.55;color:var(--tinte-weich);max-width:50ch}
.held__lead .bw{color:var(--tinte)}
.held__knoepfe{margin-top:34px}
.held__knoepfe .knopf{height:52px;padding:0 24px;font-size:15.5px}
.held__rollen{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:40px;padding-top:22px;border-top:1px solid var(--linie-2);font-size:14.5px;font-weight:500;color:var(--tinte-mitte)}
.held__rollen li{display:inline-flex;align-items:center;gap:8px}
.held__rollen .icon{width:18px;height:18px;color:var(--aktion)}
.held__bild{position:relative;min-height:420px}
.held__bild>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.held__karte{position:absolute;left:clamp(-72px,-4.5vw,-28px);bottom:clamp(28px,5vw,64px);width:min(372px,calc(100% - 8px));padding:24px 24px 22px;
  background:var(--karte);border-radius:24px;box-shadow:var(--schatten-hero),0 1px 2px rgba(22,32,27,.05)}
.js .held__text>*{opacity:0;transform:translateY(12px);animation:auftauchen .7s var(--aus) forwards}
.js .held__text>*:nth-child(2){animation-delay:.05s}.js .held__text>*:nth-child(3){animation-delay:.1s}
.js .held__text>*:nth-child(4){animation-delay:.15s}.js .held__text>*:nth-child(5){animation-delay:.2s}
@keyframes auftauchen{to{opacity:1;transform:none}}

/* Bühne: das Produktfenster unter dem Einstieg */
.buehnen-rahmen{position:relative;padding-block:clamp(48px,6vw,88px);background:var(--seite);border-top:1px solid var(--linie-2)}
.buehnen-rahmen__innen{max-width:1120px;margin-inline:auto}
.buehnen-rahmen__notiz{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;font-size:14.5px;color:var(--tinte-weich);text-align:center}
.buehnen-rahmen__notiz .icon{width:18px;height:18px;color:var(--aktion);flex:none}
.buehne{display:grid;grid-template-columns:1fr 330px;gap:24px}
.buehne__haupt{min-width:0}
.buehne__titel{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.buehne__titel b{display:block;font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.buehne__titel small{display:block;color:var(--tinte-weich);font-size:12.5px;margin-top:3px}
.buehne__seite{border-left:1px solid var(--linie);padding-left:24px;display:flex;flex-direction:column;gap:8px;
  contain:size}   /* Höhe gibt die linke Spalte vor — neue Einträge schieben die Bühne nicht auseinander */
.buehne__seite .akt-liste{flex:1 1 0;min-height:0;overflow:hidden}

/* Sechs Stärken: Text und Szene im Wechsel */
.staerke{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,5.5vw,88px);align-items:center;padding-block:clamp(44px,5.5vw,72px)}
.staerke+.staerke{border-top:1px solid var(--linie-2)}
.staerke--gespiegelt{grid-template-columns:7fr 5fr}
.staerke--gespiegelt .staerke__text{order:2}
.staerke__text h3{margin-bottom:16px}
.staerke__text .text{font-size:17px}
.haken-liste{display:flex;flex-direction:column;gap:10px;margin:24px 0 28px}
.haken-liste li{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:500}
.haken-liste .icon{width:19px;height:19px;color:var(--aktion);flex:none;margin-top:2px}
/* Die Szene steht auf einer Arbeitsfläche wie in der App — so trennt sich die weiße Karte vom weißen Abschnitt. */
.staerke__bild{position:relative;background:var(--seite);padding:clamp(14px,2.2vw,28px)}
.sek--kalk .staerke__bild,.sek--dunkel .staerke__bild{background:none;padding:0}

/* Vertriebsnetz-Szene */
.freigabe-vig{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;position:relative}
.freigabe-vig .einheiten th:nth-child(2),.freigabe-vig .einheiten td:nth-child(2){display:none}
.freigabe{display:flex;flex-direction:column}
.freigabe li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--linie);font-size:12.5px;font-weight:500}
.freigabe li:first-child{border-top:0;padding-top:2px}
.freigabe__av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--schwebe);color:var(--tinte-mitte)}   /* Rollen-Symbol: rund */
.freigabe__av .icon{width:15px;height:15px}
/* Eckiger Schalter wie in der App */
.schalter{width:38px;height:20px;background:var(--linie-3);position:relative;transition:background-color .3s}
.schalter i{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;transition:transform .3s var(--aus)}
.schalter.ist-an{background:var(--aktion)}
.schalter.ist-an i{transform:translateX(18px)}
.freigabe-vig .meldung{margin-top:12px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--aus)}
.freigabe-vig .meldung.ist-da{opacity:1;transform:none}

/* Kalkulations-Szene: Fazit-Karte der App — Häkchen, Titel, rechts die Kennzahlenspalte */
.fazit{display:grid;grid-template-columns:minmax(0,1fr) 172px;background:#EDF3EE}
.fazit__karte{background:var(--karte);padding:18px 18px 16px;border:1px solid var(--linie-2);margin:-1px 0 -1px -1px}
.fazit__kopf{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}
.fazit__haken{width:30px;height:30px;display:grid;place-items:center;background:var(--aktion);color:#fff}
.fazit__haken .icon{width:17px;height:17px;stroke-width:2.2}
.fazit__kopf b{display:block;font-family:var(--f-display);font-size:17.5px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.fazit__kopf small{display:block;font-size:12.5px;color:var(--tinte-weich);margin-top:4px;line-height:1.45}
.fazit__wahl{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12px;color:var(--tinte-weich);flex-wrap:wrap}
.fazit__zahlen{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:16px 16px}
.fazit__zahlen small{display:block;font-size:12.5px;color:var(--tinte-weich);line-height:1.3}
.fazit__zahlen b{display:block;font-size:21px;font-weight:700;letter-spacing:-.03em;white-space:nowrap;margin-top:2px}
.fazit__zahlen div:last-child b{color:var(--aktion)}
.kalk__kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.kalk__kopf .chip--dunkel{height:26px}
.kalk__kopf small{color:var(--tinte-weich);font-size:12.5px}
.kalk__kopf>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.kalk__grafik{position:relative;margin-top:14px;padding:14px 14px 10px;border:1px solid var(--linie-2)}
.kalk__grafik svg{width:100%;height:130px}
.kalk__gitter line{stroke:var(--linie);stroke-width:1}
.kalk__linie{stroke-dasharray:700;stroke-dashoffset:0}
.kalk__achse{display:flex;justify-content:space-between;font-size:12.5px;color:var(--tinte-blass);margin-top:4px}
.kalk__legende{position:absolute;top:12px;left:16px;display:flex;gap:14px;font-size:12.5px;color:var(--tinte-weich)}
.kalk__legende span{display:inline-flex;align-items:center;gap:6px}
.strich{display:inline-block;width:14px;height:3px}
.strich--gruen{background:var(--aktion)}
.strich--gold{background:repeating-linear-gradient(90deg,var(--tinte-blass) 0 4px,transparent 4px 7px)}   /* Vergleichslinie, grau gestrichelt */
.kalk__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fenster--kalk.laeuft .kalk__linie{animation:zeichnen 2.2s var(--aus) both}
.fenster--kalk.laeuft .kalk__flaeche{animation:einblenden 1.6s .7s both}
.fenster--kalk.laeuft .kalk__etf{animation:einblenden 1s 1.4s both}
.fenster--kalk.laeuft .kalk__punkt{animation:einblenden .5s 2s both}
.fenster--kalk.laeuft .kalk__chips .chip{animation:einblenden .45s both}
.fenster--kalk.laeuft .kalk__chips .chip:nth-child(2){animation-delay:.15s}.fenster--kalk.laeuft .kalk__chips .chip:nth-child(3){animation-delay:.3s}.fenster--kalk.laeuft .kalk__chips .chip:nth-child(4){animation-delay:.45s}
@keyframes zeichnen{from{stroke-dashoffset:700}to{stroke-dashoffset:0}}
@keyframes einblenden{from{opacity:0}}
@keyframes aufploppen{from{opacity:0;transform:scale(.92)}}

/* Telefon mit Kundenportal. Das Gerät selbst bleibt rund (es ist ein Gegenstand, keine Oberfläche);
   alles, was auf dem Bildschirm liegt, ist kantig wie das Kundenportal. */
.telefon-buehne{display:flex;justify-content:center;padding:8px 0;position:relative}
.telefon{position:relative;width:300px;max-width:100%}
.telefon__rand{border-radius:40px;background:var(--dunkel);padding:9px;box-shadow:var(--schatten-karte)}
.telefon__leiste{display:flex;justify-content:space-between;align-items:center;padding:8px 20px 4px;color:#fff;font-size:12px;font-weight:600}
.telefon__insel{width:84px;height:22px;border-radius:99px;background:#000}
.telefon__status{display:flex;gap:3px;align-items:flex-end}.telefon__status i{width:4px;height:9px;background:#fff}
.telefon__status i:nth-child(1){height:5px}.telefon__status i:nth-child(2){height:7px}
.telefon__adresse{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 10px 8px;height:30px;background:#2A352F;
  color:#E6EAE5;font-size:12px}
.telefon__adresse .icon{width:13px;height:13px}
.telefon__bild{position:relative;border-radius:0 0 31px 31px;background:var(--seite);padding:14px 14px 18px;overflow:hidden;min-height:520px}
.kb-kopf{display:flex;justify-content:space-between;align-items:center;margin:-14px -14px 0;padding:12px 14px;background:var(--karte);border-bottom:1px solid var(--linie)}
.kb-marke{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.kb-marke i{width:20px;height:20px;background:var(--dunkel);box-shadow:inset 0 -7px 0 var(--aktion)}   /* erfundenes Firmenzeichen des Bauträgers */
.kb-glocke{position:relative;color:var(--tinte-mitte)}
.kb-glocke .icon{width:20px;height:20px}
.kb-glocke b{position:absolute;top:-6px;right:-7px;min-width:16px;height:16px;border-radius:99px;background:var(--warn);color:#fff;font-size:10px;display:grid;place-items:center}
.kb-gruss{margin:16px 2px 4px;font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--tinte)}
.kb-unter{margin:0 2px 12px;font-size:12px;color:var(--tinte-weich);line-height:1.4}
.kb-abschnitt{display:flex;align-items:center;gap:8px;margin:0 2px 8px;font-size:13.5px;font-weight:700}
.kb-abschnitt i{font-style:normal;font-size:12px;font-weight:700;min-width:20px;height:20px;display:grid;place-items:center;background:var(--aktion-weich);color:var(--aktion-tinte)}
.kb-karte{background:var(--karte);overflow:hidden}
.kb-karte__bild{position:relative;aspect-ratio:16/7.4;overflow:hidden}
.kb-karte__bild picture,.kb-karte__bild img{width:100%;height:100%;object-fit:cover}
.kb-karte__marke{position:absolute;left:10px;top:10px;padding:4px 8px;background:var(--aktion);color:#fff;font-size:12px;font-weight:700}
.kb-karte__text{padding:12px 14px 0}
.kb-karte__text b{display:block;font-family:var(--f-display);font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.kb-karte__text small{font-size:12.5px;color:var(--tinte-weich)}
.kb-daten{display:grid;grid-template-columns:repeat(3,1fr);margin:10px 14px 0;border-block:1px solid var(--linie)}
.kb-daten div{padding:7px 0 7px 10px;border-left:1px solid var(--linie)}
.kb-daten div:first-child{padding-left:0;border-left:0}
.kb-daten small{display:block;font-size:12px;color:var(--tinte-blass)}
.kb-daten b{font-size:13.5px;font-weight:700}
.kb-bau{padding:10px 14px 4px}
.kb-bau__kopf{display:flex;justify-content:space-between;font-size:12px;color:var(--tinte-weich);margin-bottom:6px}
.kb-bau__kopf b{color:var(--tinte);font-family:var(--f-display)}
.kb-balken{height:8px;background:var(--linie);overflow:hidden}
.kb-balken i{display:block;height:100%;background:var(--schraffur-gruen);transition:width 1.6s var(--aus)}
.kb-termine{padding:8px 14px 14px;display:flex;flex-direction:column;gap:7px}
.kb-termine li{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:8px;font-size:12px}
.kb-termine small{color:var(--tinte-blass)}
.kb-termine .icon{width:16px;height:16px;color:var(--aktion)}
.kb-punkt{width:9px;height:9px;background:var(--linie-3);margin-left:3px}
.kb-reiter{display:flex;gap:0;margin-top:12px;padding:3px;background:var(--segment);font-size:11.5px;font-weight:600;color:var(--tinte-weich)}
.kb-reiter span{flex:1 1 auto;text-align:center;padding:7px 5px;white-space:nowrap}   /* im schmalen Telefon: Breite nach Inhalt, damit „Ankündigungen“ nicht an „Unterlagen“ stößt */
.kb-reiter .ist-an{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-reiter)}
.kb-toast{position:absolute;left:10px;right:10px;top:10px;z-index:2;display:flex;gap:10px;align-items:center;padding:12px;background:var(--karte);
  box-shadow:0 12px 32px rgba(22,32,27,.16),0 0 0 1px rgba(22,32,27,.05);font-size:12px;transform:translateY(-160%);transition:transform .5s var(--aus)}
.kb-toast .icon{width:20px;height:20px;color:var(--aktion);flex:none}
.kb-toast b{display:block}.kb-toast small{color:var(--tinte-weich)}
.kb-toast.ist-da{transform:none}

/* Ankündigungs-Szene */
.ank{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}
.ank__karte{overflow:hidden;border:1px solid var(--linie-2)}
.ank__bild{position:relative;aspect-ratio:3/2;overflow:hidden}
.ank__bild picture,.ank__bild img{width:100%;height:100%;object-fit:cover}
.ank__bild .chip{position:absolute;left:10px;top:10px}
.ank__text{padding:12px 14px 14px}
.ank__text b{font-family:var(--f-display);font-size:16px;letter-spacing:-.02em}
.ank__text p{font-size:12.5px;color:var(--tinte-weich);margin-top:4px}
.ank__versand{display:flex;flex-direction:column;gap:10px}
.ank__zeile{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 12px;background:var(--flaeche-2);font-size:12.5px}
.ank__zeile span:first-child{color:var(--tinte-blass)}
.ank__zeile b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ank__zeile .chip{background:var(--karte)}
.ank__stand{padding:12px;border:1px solid var(--linie-2);font-size:12.5px;color:var(--tinte-weich)}
.ank__stand b{font-family:var(--f-display);color:var(--tinte);font-size:15px}
.leser{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-bottom:10px}
.leser__punkt{aspect-ratio:1;background:var(--st-frei);box-shadow:inset 0 0 0 1px var(--st-frei-rand);transition:background-color .4s}
.leser__punkt.ist-gelesen{background:var(--aktion);box-shadow:none}
.ank__versand .knopf-mini{align-self:flex-start}
.knopf-mini.ist-versendet{background:var(--aktion-weich);color:var(--aktion-tinte)}

/* Finanzierung: Stand-Karte mit nummerierten Schritten, darunter die Unterlagen (Reiter „Finanzierung“ der App) */
.fin__stand{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--linie)}
.fin__marke{font-size:12.5px;color:var(--tinte-weich)}
.fin__titel{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:2px}
.fin__titel b{font-family:var(--f-display);font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.fin__titel small{font-size:12.5px;color:var(--tinte-blass)}
.fin__weiter{margin-top:6px;font-size:12.5px;color:var(--tinte-mitte)}
.fin__weiter b{color:var(--aktion-dunkel);font-weight:700}
/* Schritte: runde Marken mit Nummer (die Kreise sind Hinweis-Punkte — das einzig Runde), Linie dazwischen */
.schritte{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:16px 0 0;counter-reset:schritt}
.schritte li{position:relative;display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:500;color:var(--tinte-blass);counter-increment:schritt;padding-right:6px;line-height:1.3}
.schritte li::after{content:"";position:absolute;left:30px;right:4px;top:11px;height:1px;background:var(--linie-2);transition:background-color .5s}
.schritte li:last-child::after{content:none}
.schritte i{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;
  background:var(--karte);box-shadow:inset 0 0 0 1.5px var(--linie-3);color:var(--tinte-blass);transition:background-color .5s,box-shadow .5s,color .5s}
.schritte i::before{content:counter(schritt)}
.schritte li.ist-fertig i{background:var(--aktion);box-shadow:none;color:#fff}
.schritte li.ist-fertig i::before{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.schritte li.ist-fertig::after{background:var(--aktion)}
.schritte li.ist-fertig:has(+ li.ist-jetzt)::after{background:repeating-linear-gradient(90deg,var(--pille-res-punkt) 0 4px,transparent 4px 7px)}   /* zur nächsten Stufe gestrichelt */
.schritte li.ist-jetzt i{box-shadow:inset 0 0 0 2px var(--pille-res-punkt),0 0 0 3px var(--pille-res-bg);color:var(--pille-res-fg)}
.schritte li.ist-jetzt,.schritte li.ist-fertig{color:var(--tinte);font-weight:600}
.mappe__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mappe__kopf b{display:block;font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:-.02em}
.mappe__kopf small{font-size:12px;color:var(--tinte-weich)}
.mappe__stand{font-family:var(--f-display);font-size:13px;color:var(--tinte-weich);white-space:nowrap}
.mappe__stand b{display:inline;font-size:13px;font-weight:600;color:var(--tinte)}
.mappe__balken{height:8px;background:var(--linie);margin:10px 0 8px;overflow:hidden}
.mappe__balken i{display:block;height:100%;background:var(--schraffur-gruen);transition:width .8s var(--aus)}
.mappe__hinweis{font-size:12.5px;font-weight:600;color:var(--aktion-dunkel);margin-bottom:4px}
.mappe__liste{display:flex;flex-direction:column}
.mappe__liste li{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--linie);font-size:13px}
.mappe__liste small{font-size:12.5px;color:var(--tinte-blass)}
.mappe__name em{font-style:normal;font-size:12px;font-weight:600;color:var(--warn);margin-left:8px}
.ampel{width:9px;height:9px;background:var(--karte);box-shadow:inset 0 0 0 1.5px var(--linie-3);transition:background-color .45s,box-shadow .45s}
.mappe__liste li.ist-da .ampel{background:var(--aktion);box-shadow:none}
.mappe__liste li.ist-da .mappe__name em{color:var(--tinte-blass);font-weight:500}
.mappe__liste li.ist-neu{animation:zeileAufleuchten 1.2s var(--aus)}
.mappe__fuss{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie);flex-wrap:wrap}
.mappe__fuss small{font-size:12px;color:var(--tinte-weich)}
.mappe__fuss .knopf-mini{background:var(--karte);color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie-2)}
.mappe__fuss .knopf-mini.ist-bereit{background:var(--aktion);color:#fff;box-shadow:none}

/* Kundenakte-Szene */
.akte__kopf{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}   /* ohne Kürzel-Quadrat, wie die Kundenakte der App */
.akte__av{width:40px;height:40px;display:grid;place-items:center;background:var(--dunkel);color:#fff;font-weight:700;font-size:13.5px}
.akte__kopf b{display:block;font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.akte__kopf small{font-size:12px;color:var(--tinte-weich)}
.akte__reiter{display:inline-flex;margin:14px 0 8px;padding:3px;background:var(--segment);font-size:12px;font-weight:600;color:var(--tinte-weich);max-width:100%}
.akte__reiter span{padding:6px 11px;white-space:nowrap}
.akte__reiter .ist-an{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-reiter)}
.zeitleiste{position:relative;display:flex;flex-direction:column;gap:2px;padding-top:6px}
.zeitleiste::before{content:"";position:absolute;left:14px;top:14px;bottom:14px;width:1px;background:var(--linie-2)}
.zl{position:relative;display:grid;grid-template-columns:30px 1fr;gap:12px;padding:8px 0;font-size:13px;transition:opacity .5s}
.zl b{display:block;font-weight:600}
.zl small{display:block;color:var(--tinte-blass);font-size:12.5px}
.zl__icon{width:30px;height:30px;display:grid;place-items:center;background:var(--karte);border:1px solid var(--linie-2);color:var(--tinte-weich);z-index:1}
.zl__icon .icon{width:15px;height:15px}
.zl--mail .zl__icon,.zl--blick .zl__icon{color:var(--aktion)}
.datei{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:5px 9px;background:var(--flaeche-2);font-size:12px;font-weight:500}
.datei .icon{width:14px;height:14px}
.datei em{font-style:normal;color:var(--aktion-dunkel);font-weight:600}
.haekchen{width:15px;height:15px;border:1.6px solid var(--tinte-blass);position:relative;transition:background-color .3s,border-color .3s}
.haekchen.ist-an{background:var(--aktion);border-color:var(--aktion)}
.haekchen.ist-an::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.zl.ist-neu{animation:hereinrutschen .5s var(--aus)}

/* Bemusterung (für Funktionsseiten) */
.bem{display:grid;grid-template-columns:1.25fr 1fr;overflow:hidden;background:var(--karte);box-shadow:var(--schatten-karte)}
.bem__raum{position:relative;min-height:320px}
.bem__raum picture,.bem__raum img{width:100%;height:100%;object-fit:cover}
.bem__marke{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;padding:7px 11px;background:var(--dunkel);color:#fff;font-size:12.5px;font-weight:600}
.bem__marke .icon{width:16px;height:16px}
.bem__wahl{padding:20px;display:flex;flex-direction:column;gap:12px}
.bem__optionen{display:flex;flex-direction:column;gap:8px}
.bem__option{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:10px;background:var(--flaeche-2);font-size:13.5px;transition:box-shadow .3s,background-color .3s}
.bem__option b{font-weight:600}
.bem__option small{grid-column:2;color:var(--tinte-weich);font-size:12.5px}
.bem__muster{grid-row:1/3;width:44px;height:44px}
.bem__muster--eiche-hell{background:linear-gradient(90deg,#D9B98A 0 30%,#CFAE7C 30% 62%,#DDBF93 62%)}
.bem__muster--eiche-dunkel{background:linear-gradient(90deg,#8B6A4A 0 30%,#7D5E41 30% 62%,#93714F 62%)}
.bem__muster--stein{background:#B8B2A7}
.bem__option.ist-gewaehlt{box-shadow:inset 0 0 0 1.5px var(--aktion);background:var(--gruen-50)}
.bem__wahl .knopf-mini{align-self:flex-start;margin-top:auto}

/* Der Weg: weiße Karten auf der Arbeitsfläche, nummeriert */
.weg{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;position:relative}
.weg__schritt{display:flex;flex-direction:column;gap:10px;padding:20px 16px 22px;background:var(--karte)}
.weg__nr{font-size:13px;color:var(--tinte-blass);font-weight:600}
.weg__icon{width:40px;height:40px;display:grid;place-items:center;background:var(--aktion-weich);color:var(--aktion-tinte)}
.weg__schritt b{font-family:var(--f-display);font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:var(--tinte);line-height:1.2}
.weg__schritt p{font-size:13.5px;color:var(--tinte-weich);line-height:1.5}
.weg__mass{margin-top:32px}

/* Lösungskarten */
.loesungskarten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.loesungskarte{display:flex;flex-direction:column;background:var(--karte);overflow:hidden;transition:box-shadow .3s}
.loesungskarte:hover{box-shadow:var(--schatten-karte)}
.loesungskarte__bild{aspect-ratio:4/3;overflow:hidden}
.loesungskarte__bild picture,.loesungskarte__bild img{width:100%;height:100%;object-fit:cover}
.loesungskarte__text{padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.loesungskarte__rolle{font-size:14px;font-weight:600;color:var(--tinte-weich)}
.loesungskarte ul{display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--tinte-mitte)}
.loesungskarte li{display:flex;gap:9px;align-items:flex-start}
.loesungskarte li .icon{width:18px;height:18px;color:var(--aktion);margin-top:2px}
.loesungskarte .textlink{margin-top:auto;padding-top:6px}

/* Preis-Anriss */
.preis-anriss .lead{margin-top:20px}
.preis-anriss__innen{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(36px,5.5vw,88px);align-items:center}
.preis-anriss__karten{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.preis-anriss__karten .knopf{grid-column:1/-1;justify-self:start;margin-top:6px}
.preiskachel{padding:24px 22px;background:var(--seite)}
.preiskachel p{font-weight:600;color:var(--tinte-mitte);line-height:1.35;min-height:2.7em}
.preiskachel b{display:block;font-size:46px;font-weight:600;margin:10px 0 4px;letter-spacing:-.04em;line-height:1.1}
.preiskachel small{display:block;font-size:13px;line-height:1.5;color:var(--tinte-weich)}
.preiskachel--dunkel{background:var(--aktion-weich)}   /* Name aus der dunklen Zeit: die hervorgehobene Kachel */
.preiskachel--dunkel p,.preiskachel--dunkel small{color:var(--tinte-mitte)}
.preiskachel--dunkel b{color:var(--aktion-tinte)}

/* ==========================================================================
   12 Anpassung an schmale Bildschirme
   ========================================================================== */
@media (max-width:1100px){
  .kopf__nav{display:none}
  .kopf__aktionen .kopf__login{display:none}
  .kopf__burger{display:inline-flex;margin-left:0}
  .kopf__aktionen{margin-left:auto}
  .weg{grid-template-columns:repeat(4,1fr)}
  .held__karte{left:-28px}
}
@media (max-width:900px){
  .held__innen{grid-template-columns:1fr;min-height:0}
  .held__text{padding:44px var(--rand) 44px;max-width:none}
  .held__bild{min-height:0;height:clamp(380px,96vw,520px)}
  .held__karte{left:var(--rand);right:var(--rand);bottom:20px;width:auto;max-width:400px;padding:20px 20px 18px}
  .buehne{grid-template-columns:1fr}
  .buehne__seite{contain:none;border-left:0;padding-left:0;border-top:1px solid var(--linie);padding-top:18px}
  .buehne__seite .akt-liste{flex:none;height:290px}
  .staerke,.staerke--gespiegelt{grid-template-columns:1fr}
  .staerke--gespiegelt .staerke__text{order:0}
  .loesungskarten{grid-template-columns:1fr}
  .preis-anriss__innen{grid-template-columns:1fr}
  .bem{grid-template-columns:1fr}
  .fuss__oben{grid-template-columns:1fr;gap:44px}
  .kopfzeile .t-gross br{display:none}
}
@media (max-width:640px){
  .weg{grid-template-columns:1fr 1fr}
  .fazit{grid-template-columns:1fr}
  .fazit__karte{margin:-1px -1px 0 -1px}
  .fazit__zahlen{flex-direction:row;flex-wrap:wrap;gap:12px 22px;justify-content:flex-start}
  .freigabe-vig,.ank{grid-template-columns:1fr}
  .einheiten th:nth-child(2),.einheiten td:nth-child(2){display:none}
  .einheiten .st small{display:none}
  .einheiten td{padding:8px 6px}
  .buehnen-rahmen__notiz{justify-content:flex-start;text-align:left;align-items:flex-start}
  .buehne__titel{flex-direction:column}
  .fuss__spalten{grid-template-columns:1fr 1fr}
  .fuss__unten{flex-direction:column}
  .preis-anriss__karten{grid-template-columns:1fr}
  .preiskachel p{min-height:0}
  .fenster__koerper{padding:14px}
  .held__rollen{gap:6px 16px}
  .held__knoepfe .knopf{flex:1 1 auto;justify-content:center}
  .schritte li{font-size:10.5px;padding-right:4px;overflow-wrap:normal;hyphens:manual}   /* fünf Stufen nebeneinander — kleiner, aber ohne Silbentrennung */
  .schritte li::after{left:27px}
  .staerke__bild{margin-inline:calc(-1 * var(--rand));padding:14px var(--rand)}
}
/* Kalkulation: vor dem Start unsichtbar, damit sich die Kurve sichtbar zeichnet (ohne JS: fertig) */
.js .fenster--kalk:not(.laeuft) .kalk__linie{stroke-dashoffset:700}
.js .fenster--kalk:not(.laeuft) .kalk__flaeche,.js .fenster--kalk:not(.laeuft) .kalk__etf,.js .fenster--kalk:not(.laeuft) .kalk__punkt,.js .fenster--kalk:not(.laeuft) .kalk__chips .chip{opacity:0}

/* ==========================================================================
   13 Unterseiten: Seitenkopf, Heute/Mit, Fragen, Preisband, Querverweise
   ========================================================================== */
.seitenheld{position:relative;background:var(--karte);color:var(--tinte);padding:calc(var(--kopf-h) + clamp(44px,6vw,80px)) 0 clamp(64px,8vw,104px);overflow:hidden;border-bottom:1px solid var(--linie-2)}
.seitenheld__raster{display:none}
.seitenheld::after{content:none}
.seitenheld__innen{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.seitenheld__titel{font-size:clamp(34px,3.9vw,56px)}
.seitenheld__titel span{color:var(--aktion)}
.seitenheld .zeile{color:var(--tinte-weich)}
.seitenheld__lead{margin-top:22px;font-size:clamp(17px,1.4vw,19.5px);line-height:1.55;color:var(--tinte-weich);max-width:52ch}
.seitenheld__lead .bw{color:var(--tinte)}
.seitenheld__knoepfe{margin-top:34px}
.seitenheld__bild{position:relative}
.seitenheld__foto,.seitenheld__foto img{display:block;width:100%;aspect-ratio:4/3.3;object-fit:cover}
.seitenheld__foto{box-shadow:none}
.seitenheld__karte{position:absolute;left:-44px;bottom:-40px;width:min(340px,80%)}
.js .seitenheld__text>*{opacity:0;transform:translateY(22px);animation:auftauchen .9s var(--aus) forwards}
.js .seitenheld__text>*:nth-child(2){animation-delay:.08s}.js .seitenheld__text>*:nth-child(3){animation-delay:.18s}.js .seitenheld__text>*:nth-child(4){animation-delay:.28s}
.js .seitenheld__bild{opacity:0;transform:translateY(26px) scale(.985);animation:auftauchen 1.1s .2s var(--aus) forwards}
.js .seitenheld__karte{opacity:0;transform:translateY(20px);animation:auftauchen .9s .7s var(--aus) forwards}
.seitenheld--ohne-foto .seitenheld__innen{grid-template-columns:1fr 1.1fr}
/* Ohne Foto steht die Szene auf einer Arbeitsfläche wie in der App (wie .staerke__bild) —
   so trennt sich die weiße Karte vom weißen Seitenkopf. */
.seitenheld--ohne-foto .seitenheld__bild{background:var(--seite);padding:clamp(16px,2.6vw,36px)}
.seitenheld--ohne-foto .seitenheld__bild>.telefon-buehne{padding:8px 0}

/* Minikarte im Seitenkopf: eine weiße Karte der App über dem Foto — Schatten, kein Rand.
   Die „Live“-Marke steht hier noch im Markup, liegt aber im Editor-Bereich (eigener Textschlüssel)
   und bleibt deshalb nur verborgen (.live{display:none}). */
.minikarte{background:var(--karte);color:var(--tinte);padding:18px;box-shadow:0 12px 32px rgba(22,32,27,.16),0 0 0 1px rgba(22,32,27,.05);font-size:13.5px}
.minikarte__kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.minikarte__kopf b{font-family:var(--f-display);font-size:16px;font-weight:600;letter-spacing:-.02em}
.minikarte .akt{margin-top:10px}
.minikarte .vst{padding:0;border:0;background:none}
.minikarte .vst__kopf>span:last-child{white-space:nowrap}
.minikarte .vst__legende{gap:4px 12px;font-size:12.5px}
.minikarte__zahlen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.minikarte__zahlen>div{background:var(--flaeche-2);padding:12px 14px}
.minikarte__zahlen small{display:block;font-size:12.5px;color:var(--tinte-weich)}
.minikarte__zahlen b{font-size:26px;font-weight:700;letter-spacing:-.03em}
.minikarte__fuss{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--tinte-weich)}
.minikarte__fuss .icon{width:15px;height:15px;color:var(--aktion)}
.minikarte__fuss--gruen{color:var(--aktion-dunkel);font-weight:600}
.minikarte__fuss--gruen .icon{color:var(--aktion)}
.minikarte .mappe__balken{margin:4px 0 0}

/* Heute / Mit immobricks: ein Paar ist EINE weiße Karte — links die zarte Fläche „Heute“ in
   blasser Schrift, rechts „Mit immobricks“. Ohne gestrichelten Rand und ohne Durchstreichung. */
.vn{display:flex;flex-direction:column;gap:14px}
.vn__paar{display:grid;grid-template-columns:1fr 56px 1fr;align-items:stretch;background:var(--karte);box-shadow:var(--schatten-karte)}
.vn__vorher,.vn__nachher{padding:24px 28px}
.vn__vorher{background:var(--flaeche-3);color:var(--tinte-weich)}
.vn__vorher p{font-size:16px;line-height:1.55}
.vn__nachher p{font-size:16.5px;line-height:1.5;color:var(--tinte);font-weight:500}
.vn__marke{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--tinte-blass);margin-bottom:10px}
.vn__nachher .vn__marke{color:var(--aktion-dunkel)}
.vn__nachher .vn__marke .icon{width:17px;height:17px;color:var(--aktion)}
.vn__pfeil{display:grid;place-items:center;color:var(--tinte-blass);background:linear-gradient(90deg,var(--flaeche-3) 50%,var(--karte) 50%)}
.vn__pfeil .icon{width:22px;height:22px}

/* Fragen */
.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(40px,6vw,96px);align-items:start}
.faq__kopf{position:sticky;top:110px}
.faq__kopf .text{margin:20px 0 6px}
.faq__liste{border-top:1px solid var(--linie-2)}
.faq__eintrag{border-bottom:1px solid var(--linie-2)}
.faq__eintrag summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 2px;cursor:pointer;
  font-family:var(--f-display);font-size:18.5px;font-weight:600;letter-spacing:-.02em}
.faq__eintrag summary::-webkit-details-marker{display:none}
.faq__eintrag summary .icon{flex:none;width:22px;height:22px;color:var(--aktion);transition:transform .35s var(--aus)}
.faq__eintrag[open] summary .icon{transform:rotate(45deg)}
.faq__eintrag p{padding:0 40px 24px 2px;color:var(--tinte-weich);font-size:16px;line-height:1.6}
.faq__eintrag summary:hover{color:var(--aktion-dunkel)}

/* Preisband */
.preisband__innen{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.preisband .lead{margin-top:22px}
.konditionen{display:flex;flex-direction:column;gap:10px;margin-top:26px;max-width:560px;font-size:14.5px;color:var(--tinte-weich)}
.konditionen li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start}
.konditionen .icon{width:18px;height:18px;color:var(--aktion);margin-top:2px}
.konditionen b{color:var(--tinte);font-weight:600}
.preisband__knoepfe{margin-top:32px}
.rechner{padding:30px;background:var(--karte);box-shadow:var(--schatten-karte)}
.rechner__titel{font-weight:600;font-size:17px;color:var(--tinte);margin-bottom:22px}
.rechner__regler{display:grid;grid-template-columns:auto 1fr 36px;gap:16px;align-items:center;font-size:14.5px;font-weight:600;color:var(--tinte)}
.rechner__regler b{font-family:var(--f-display);font-size:20px;color:var(--tinte);text-align:right}
.rechner input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;background:linear-gradient(90deg,var(--aktion) var(--fuell,8.3%),var(--linie-2) var(--fuell,8.3%));outline-offset:6px}
.rechner input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--karte);box-shadow:inset 0 0 0 5px var(--aktion);cursor:grab}
.rechner input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--karte);box-shadow:inset 0 0 0 5px var(--aktion);cursor:grab}
.rechner__ergebnis{margin-top:26px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rechner__ergebnis .zahl{font-size:54px;font-weight:700;color:var(--tinte);letter-spacing:-.04em;line-height:1}
.rechner__ergebnis small{color:var(--tinte-weich);font-size:14px}
.rechner__rechnung{margin-top:10px;font-size:13.5px;color:var(--tinte-weich);font-variant-numeric:tabular-nums}
.rechner--flach .rechner__text{color:var(--tinte-weich);font-size:15.5px;line-height:1.6;margin-bottom:18px}
.rechner--flach .bw{color:var(--tinte)}

/* Querverweise */
.weitere__titel{margin-bottom:18px}
.weitere{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.weitere__karte{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:20px;background:var(--karte);
  box-shadow:var(--schatten-karte);transition:color .2s}
.weitere__karte:hover b{color:var(--aktion-dunkel)}
.weitere__karte b{display:block;font-family:var(--f-display);font-size:16.5px;font-weight:600;letter-spacing:-.02em;transition:color .2s}
.weitere__karte small{display:block;font-size:13.5px;color:var(--tinte-weich)}
.weitere__pfeil{width:18px;height:18px;color:var(--gruen-700);transition:transform .3s var(--aus)}
.weitere__karte:hover .weitere__pfeil{transform:translateX(4px)}

/* Einladen (Bauträger) / Dazukommen (Finanzierer) */
.einladen__innen{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.einladen .lead{margin-top:22px}
/* Nummerierte Schritte: runde Schritt-Punkte (wie Abfolgen der App) statt dunkler Quadrate, auf zarter Fläche. */
.einladen__schritte{position:relative;display:flex;flex-direction:column;gap:10px;counter-reset:x}
.einladen__schritte li{position:relative;display:grid;grid-template-columns:36px 1fr;gap:18px;align-items:start;padding:20px 22px;background:var(--seite)}
.einladen__nr{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--karte);box-shadow:inset 0 0 0 2px var(--aktion);color:var(--aktion-tinte);font-size:15px;font-weight:700}
.einladen__schritte b{display:block;font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:-.02em;margin-top:5px}
.einladen__schritte p{font-size:14.5px;color:var(--tinte-weich);margin-top:2px}
.sek--kalk .einladen__schritte li{background:var(--karte);box-shadow:var(--schatten-karte)}

/* Weg mit variabler Schrittzahl */
.weg[style*="--spalten"]{grid-template-columns:repeat(var(--spalten),1fr)}

/* ==========================================================================
   14 Weitere Szenen (Lösungen)
   ========================================================================== */
.bem-rahmen .bem{box-shadow:var(--schatten-karte)}
.knopf-mini--klein{height:28px;padding:0 10px;font-size:12px}
.meldung--gruen .icon{color:var(--gruen-600)}
.meldung--warnung{background:var(--warn-grund);border-color:#F0D9CB}
.meldung--warnung .icon{color:var(--warn)}

.tabelle{width:100%;border-collapse:collapse;font-size:13px}
.tabelle th{text-align:left;font-size:12.5px;font-weight:500;color:var(--tinte-blass);padding:0 8px 8px;border-bottom:1px solid var(--linie)}
.tabelle td{padding:8px;border-bottom:1px solid var(--linie);white-space:nowrap}
.tabelle td.zahl,.tabelle th:nth-child(4){text-align:right}
.tabelle .chip{height:22px;font-size:12px}
.import{display:grid;grid-template-columns:1fr;gap:12px}
.import__datei{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--flaeche-2)}
.import__datei b{display:block;font-size:13.5px}
.import__datei small{font-size:12.5px;color:var(--tinte-weich)}
.import__xls{position:relative;width:40px;height:46px;background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie-2);display:grid;place-items:center;color:var(--aktion)}
.import__xls .icon{width:22px;height:22px}
.import__xls b{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;background:var(--aktion);color:#fff;padding:1px 4px}
.import__pfeil{display:none}
.import__fuss{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--aktion-dunkel);font-weight:600}
.import__fuss .icon{width:16px;height:16px}
.fenster--import.laeuft tbody tr{opacity:0;transform:translateX(-8px);animation:zeileein .45s var(--aus) forwards}
.fenster--import.laeuft tbody tr:nth-child(2){animation-delay:.25s}.fenster--import.laeuft tbody tr:nth-child(3){animation-delay:.5s}
.fenster--import.laeuft tbody tr:nth-child(4){animation-delay:.75s}.fenster--import.laeuft tbody tr:nth-child(5){animation-delay:1s}.fenster--import.laeuft tbody tr:nth-child(6){animation-delay:1.25s}
.fenster--import.laeuft .import__fuss{opacity:0;animation:einblenden .6s 1.7s forwards}
@keyframes zeileein{to{opacity:1;transform:none}}

.browser{background:var(--karte);overflow:hidden;box-shadow:var(--schatten-karte);font-size:13.5px}
.browser__kopf{display:flex;align-items:center;gap:14px;height:42px;padding:0 14px;background:var(--flaeche-3);border-bottom:1px solid var(--linie)}
.browser__punkte{display:flex;gap:6px}.browser__punkte i{width:9px;height:9px;border-radius:50%;background:var(--linie-3)}
.browser__adresse{flex:1;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--seite);font-size:12.5px;color:var(--tinte-weich)}
.browser__adresse .icon{width:13px;height:13px}
/* Projektwebsite: das Foto ohne Verlauf, der Titel steht darunter auf Weiß. */
.feed__held{position:relative;height:120px;overflow:hidden}
.feed__held picture,.feed__held img{width:100%;height:100%;object-fit:cover}
.feed__titel{padding:14px 16px 0}
.feed__titel small{display:block;font-size:12.5px;color:var(--tinte-weich)}
.feed__titel b{display:block;font-family:var(--f-display);font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.feed__liste{padding:12px 16px 16px}
.feed__liste ul{display:flex;flex-direction:column}
.feed__liste li{display:grid;grid-template-columns:1fr auto 96px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linie)}
.feed__liste .zahl{font-size:13.5px;color:var(--tinte-mitte)}
.feed__status{justify-self:end}
.feed__status .chip{transition:background-color .5s,color .5s}
.feed__status.ist-neu .chip{animation:aufploppen .5s var(--feder)}
.feed__quelle{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--tinte-blass)}

.partnerobjekt__kopf{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;margin-bottom:12px}
.partnerobjekt__bild,.partnerobjekt__bild img{width:88px;height:66px;object-fit:cover;display:block}
.partnerobjekt__kopf small{display:block;font-size:12.5px;color:var(--tinte-blass)}
.partnerobjekt__kopf b{display:block;font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.partnerobjekt__liste li{display:grid;grid-template-columns:10px 1fr auto auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linie);font-size:13px}
.partnerobjekt__liste b{display:block}
.partnerobjekt__liste small{font-size:12.5px;color:var(--tinte-blass)}
.partnerobjekt__liste .zahl{color:var(--tinte-mitte)}
.partnerobjekt .meldung{margin-top:12px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--aus)}
.partnerobjekt .meldung.ist-da{opacity:1;transform:none}
.knopf-mini.ist-angefragt{background:var(--pille-res-bg);color:var(--pille-res-fg)}
.knopf-mini.ist-reserviert{background:var(--aktion-weich);color:var(--aktion-tinte)}

.matching{display:flex;flex-direction:column;gap:10px}
.matching__titel{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.matching__titel .icon{width:17px;height:17px;color:var(--aktion)}
.vorschlag{padding:14px;background:var(--flaeche-2);transition:background-color .4s,box-shadow .4s,opacity .5s,transform .5s var(--aus)}
.vorschlag__kopf{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:10px}
.vorschlag__kopf b{display:block;font-size:14px}
.vorschlag__kopf small{font-family:var(--f-display);font-size:13px;color:var(--tinte-weich)}
.gruende{display:flex;flex-wrap:wrap;gap:6px}
.grund{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;font-size:12.5px;font-weight:600}
.grund .icon{width:13px;height:13px}
.grund--ok{background:var(--aktion-weich);color:var(--aktion-tinte)}
.grund--fast{background:var(--karte);color:var(--tinte-weich)}
.vorschlag.ist-uebernommen{background:var(--gruen-50);box-shadow:inset 0 0 0 1.5px var(--aktion)}
.matching__hinweis{font-size:12.5px;color:var(--tinte-blass)}
.js .fenster--matching:not(.laeuft) .vorschlag{opacity:0;transform:translateY(8px)}

.telefon--klein{width:280px}
.telefon__bild--formular{min-height:500px;padding:22px 16px}
.ew-titel{font-family:var(--f-display);font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.ew-text{font-size:12.5px;color:var(--tinte-weich);margin:6px 0 16px}
/* Felder wie in den Dialogen der App: Beschriftung über dem Feld, Rand 1,5 px, Fokus grün. */
.ew-feld{display:block;margin-bottom:10px}
.ew-feld span{display:block;font-size:12.5px;font-weight:600;color:var(--tinte-mitte);margin-bottom:4px}
.ew-feld b{display:flex;align-items:center;min-height:42px;padding:0 12px;font-size:14px;font-weight:600;background:var(--karte);box-shadow:inset 0 0 0 1.5px #D5D8D0}
.ew-feld.ist-aktiv b{box-shadow:inset 0 0 0 1.5px var(--aktion),0 0 0 1px var(--aktion)}
.ew-feld b.tippt::after{content:"";display:inline-block;width:1.5px;height:15px;background:var(--aktion-dunkel);margin-left:2px;animation:blinken .8s steps(1) infinite}
@keyframes blinken{50%{opacity:0}}
.ew-knopf{display:flex;justify-content:center;align-items:center;height:44px;background:var(--aktion);color:#fff;font-weight:600;font-size:14px;margin-top:14px;transition:background-color .2s}
.ew-knopf.ist-gedrueckt{background:var(--aktion-dunkel)}
.ew-danke{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:30px;background:var(--seite);
  opacity:0;pointer-events:none;transition:opacity .5s}
.ew-danke .icon{width:44px;height:44px;padding:10px;background:var(--aktion);color:#fff}
.ew-danke b{font-family:var(--f-display);font-size:22px}
.ew-danke small{font-size:13px;color:var(--tinte-weich)}
.ew-danke.ist-da{opacity:1}

/* Arbeitsliste des Finanzierers: Filter-Chips wie in der App, Zeilen ohne Kürzel-Quadrat (DESIGN.md §10). */
.faelle__filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.faelle__filter span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie-2);font-size:12.5px;font-weight:600;color:var(--tinte-mitte)}
.faelle__filter .ist-an{background:var(--dunkel);color:#fff;box-shadow:none}
.faelle__filter b{font-family:var(--f-display)}
.faelle__liste li{display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--linie);font-size:13px}
.faelle__liste b{display:block}
.faelle__liste small{font-size:12.5px;color:var(--tinte-blass)}
.fall__mappe{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-display);font-weight:600;color:var(--tinte-mitte)}
.fall__mappe .icon{width:15px;height:15px;color:var(--tinte-blass)}
.fall__stand{font-size:12.5px;color:var(--tinte-weich)}
.fall__lage{display:inline-flex;align-items:center;height:24px;padding:0 9px;font-size:12px;font-weight:700;white-space:nowrap;transition:background-color .5s,color .5s}
.fall__lage--laeuft{background:var(--aktion-weich);color:var(--aktion-tinte)}
.fall__lage--stockt{background:var(--warn-grund);color:var(--warn)}
.fall__lage--abschluss{background:var(--pille-res-bg);color:var(--pille-res-fg)}

.fristen__leiste{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;position:relative}
.fristen__leiste::before{content:"";position:absolute;left:7px;right:7px;top:6px;height:1.5px;background:var(--linie-2)}
.fristen__leiste li{position:relative;display:flex;flex-direction:column;gap:4px;font-size:12.5px;padding-top:22px}
.fristen__punkt{position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--karte);box-shadow:inset 0 0 0 2px var(--linie-3);transition:box-shadow .4s,background-color .4s}
.fristen__leiste li.ist-fertig .fristen__punkt{background:var(--aktion);box-shadow:none}
.fristen__leiste li.ist-konflikt .fristen__punkt{background:var(--warn-grund);box-shadow:inset 0 0 0 2px var(--warn)}
.fristen__leiste b{font-size:13px}
.fristen__leiste small{color:var(--tinte-blass);font-size:12.5px}
.fristen .meldung{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s var(--aus);margin-top:8px}
.fristen .meldung.ist-da{opacity:1;transform:none}
.fristen{position:relative}
.fristen [data-frist-ok]{position:absolute;left:0;right:0;bottom:0}

@media (max-width:900px){
  .seitenheld{padding-top:120px}
  .seitenheld__innen{grid-template-columns:1fr}
  .seitenheld__karte{left:12px;bottom:-30px}
  .seitenheld__bild{margin-bottom:30px}
  .vn__paar{grid-template-columns:1fr}
  .vn__pfeil{height:36px;background:linear-gradient(180deg,var(--flaeche-3) 50%,var(--karte) 50%)}
  .vn__pfeil .icon{transform:rotate(90deg)}
  .faq,.preisband__innen,.einladen__innen{grid-template-columns:1fr}
  .faq__kopf{position:static}
  .weitere{grid-template-columns:1fr}
  .weg[style*="--spalten"]{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .faelle__liste li{grid-template-columns:1fr auto}
  .fall__mappe,.fall__stand{display:none}
  .partnerobjekt__liste li{grid-template-columns:10px 1fr auto}
  .partnerobjekt__liste .zahl{display:none}
  .tabelle th:nth-child(3),.tabelle td:nth-child(3){display:none}
  .fristen__leiste{grid-template-columns:1fr 1fr;row-gap:16px}
  .fristen__leiste::before{display:none}
}

/* ==========================================================================
   15 Demo-Seite und Formular
   ========================================================================== */
/* Arbeitsfläche, darauf die weiße Formularkarte (DESIGN.md §1: weiße Karten auf grauem Grund). */
.demo{position:relative;background:var(--seite);color:var(--tinte);padding:calc(var(--kopf-h) + clamp(44px,6vw,80px)) 0 clamp(72px,8vw,112px);overflow:hidden}
.demo::after{content:none}
/* Die Karte spannt beide Zeilen; die erste Zeile ist nur so hoch wie die Einleitung (auto), den Rest
   nimmt die zweite (1fr) — so steht der Ablauf direkt unter der Einleitung, ohne Lücke. */
.demo__innen{display:grid;grid-template-columns:1fr minmax(0,470px);grid-template-rows:auto 1fr;grid-template-areas:"kopf karte" "mehr karte";column-gap:clamp(40px,6vw,96px);row-gap:0;align-items:start}
.demo__kopf{grid-area:kopf}.demo__karte{grid-area:karte}.demo__mehr{grid-area:mehr}
.demo__titel{font-size:clamp(34px,3.9vw,56px)}
.demo__titel span{color:var(--aktion)}
.demo__lead{margin-top:22px;font-size:clamp(17px,1.4vw,19.5px);line-height:1.55;color:var(--tinte-weich);max-width:48ch}
.demo__ablauf{display:flex;flex-direction:column;margin-top:44px;max-width:520px}
.demo__ablauf li{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--linie-2)}
.demo__ablauf li:last-child{border-bottom:1px solid var(--linie-2)}
.demo__schritt{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--karte);box-shadow:inset 0 0 0 2px var(--aktion);color:var(--aktion-tinte);font-family:var(--f-display);font-size:14.5px;font-weight:700}   /* Schritt-Punkt: rund */
.demo__ablauf b{display:block;font-weight:600;font-size:15.5px}
.demo__ablauf span:not(.demo__schritt){display:block;color:var(--tinte-weich);font-size:14.5px;margin-top:2px}
.demo__zeigen{margin-top:40px}
.demo__zeigen .klein-titel{color:var(--tinte-weich)}
.demo__zeigen ul{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo__zeigen li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--tinte);padding:13px 15px;background:var(--karte)}
.demo__zeigen .icon{width:18px;height:18px;color:var(--aktion);flex:none;margin-top:2px}

.demo__karte{position:relative;background:var(--karte);color:var(--tinte);padding:clamp(24px,3vw,36px);box-shadow:var(--schatten-karte)}
.formular__titel{font-family:var(--f-display);font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:22px}
.formular__felder{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feld{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:13.5px;font-weight:600;color:var(--tinte-mitte)}
.feld i{font-style:normal;color:var(--tinte-blass)}
/* Felder wie in den Dialogen der App: 52 px, Rand 1,5 px #D5D8D0, Fokus grüner Rand plus 1-px-Ring. */
.feld input{width:100%;min-width:0;height:52px;padding:0 14px;border:1.5px solid #D5D8D0;background:var(--karte);font:inherit;font-weight:500;font-size:15px;color:var(--tinte);
  transition:border-color .2s,box-shadow .2s}
.feld input:hover{border-color:var(--tinte-blass)}
.feld input:focus{outline:none;border-color:var(--aktion);box-shadow:0 0 0 1px var(--aktion)}
.feld input[aria-invalid="true"]{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
.feld--versteckt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.haken-feld{display:grid;grid-template-columns:20px 1fr;gap:10px;margin-top:18px;font-size:13.5px;line-height:1.5;color:var(--tinte-weich);cursor:pointer}
.haken-feld input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--aktion)}
.haken-feld a{color:var(--aktion-dunkel);text-decoration:underline;text-underline-offset:2px}
.formular__fehler{margin-top:14px;padding:10px 12px;background:var(--warn-grund);color:var(--warn);font-size:13.5px}
.formular__senden{width:100%;justify-content:center;margin-top:20px;height:52px;font-size:16px}
.formular__senden[disabled]{opacity:.7;cursor:progress}
.formular__klein{margin-top:12px;font-size:13px;color:var(--tinte-blass);text-align:center}
.formular-danke{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:8px 0;outline:none}
.formular-danke p{color:var(--tinte-weich)}
.formular-danke .formular__titel{margin:0;color:var(--tinte)}
.formular-danke__haken{display:grid;place-items:center;width:52px;height:52px;background:var(--aktion);color:#fff}
.formular-danke__haken .icon{width:26px;height:26px}

@media (max-width:900px){
  .demo{padding-top:120px}
  .demo__innen{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"kopf" "karte" "mehr";row-gap:36px}
  .demo__ablauf{margin-top:8px}
}
@media (max-width:640px){
  .formular__felder,.demo__zeigen ul{grid-template-columns:1fr}
}

/* ==========================================================================
   16 Preise
   ========================================================================== */
.gruen{color:var(--gruen-700)}
.preise-kopf{position:relative;background:var(--seite);padding:calc(var(--kopf-h) + clamp(44px,6vw,80px)) 0 clamp(64px,7vw,104px)}
.preise-kopf .kopfzeile{margin-bottom:clamp(44px,5vw,72px)}
.preise-kopf .t-riesig{font-size:clamp(36px,4.4vw,64px)}
.plaene{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:30px 28px 28px;background:var(--karte);box-shadow:var(--schatten-karte)}
.plan__fuer{font-size:13.5px;font-weight:600;color:var(--tinte-weich)}
.plan__name{margin-top:10px;font-size:24px;line-height:1.2;letter-spacing:-.025em}
.plan__preis{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:22px;border-top:1px solid var(--linie)}
.plan__preis .zahl{font-family:var(--f-display);font-size:52px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--tinte)}
.plan__preis small{font-size:13.5px;color:var(--tinte-weich)}
.plan__zusatz{margin-top:8px;font-size:14px;color:var(--tinte-weich)}
.plan__zusatz b{color:var(--tinte);font-weight:600}
.plan__text{margin-top:18px;font-size:15px;line-height:1.55;color:var(--tinte-mitte)}
.plan__liste{display:flex;flex-direction:column;gap:10px;margin:22px 0 28px;font-size:14.5px}
.plan__liste li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.plan__liste .icon{width:18px;height:18px;color:var(--aktion);margin-top:2px}
.plan .knopf{margin-top:auto;justify-content:center}
.plan__fuss{margin-top:auto;font-size:13.5px;line-height:1.5;color:var(--tinte-weich);padding:14px 16px;background:var(--flaeche-2)}
/* Hervorgehoben ohne Rand: die Karte schwebt etwas höher, der Kopf trägt das zarte Grün. */
.plan--hervor{background:var(--karte);box-shadow:0 12px 32px rgba(22,32,27,.13),0 0 0 1px rgba(22,32,27,.04);position:relative;overflow:hidden}
.plan--hervor .plan__fuer{display:inline-flex;align-self:flex-start;padding:4px 9px;background:var(--aktion-weich);color:var(--aktion-tinte);font-size:13px;font-weight:700}
.plan--hervor::before{content:none}
.plan--hervor>*{position:relative}
.plan--hervor .plan__preis{border-color:var(--linie)}
.plan--hervor .plan__preis .zahl{color:var(--tinte)}
.plan--hervor .plan__preis small,.plan--hervor .plan__zusatz{color:var(--tinte-weich)}
.plan--hervor .plan__zusatz b{color:var(--tinte)}
.plan--hervor .plan__text{color:var(--tinte-mitte)}
.plan--hervor .plan__liste .icon{color:var(--aktion)}
.plaene__hinweis{margin-top:22px;text-align:center;font-size:13.5px;color:var(--tinte-weich)}

.rechner--gross{padding:32px}
.rechner__art{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:3px;margin-bottom:28px;background:var(--segment)}
.rechner__art button{height:40px;font-size:14px;font-weight:600;color:var(--tinte-weich);transition:background-color .25s,color .25s}
.rechner__art button:hover{color:var(--tinte)}
.rechner__art button.ist-an{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-reiter)}
.rechner__jahr{margin-top:22px;padding-top:18px;border-top:1px solid var(--linie);font-size:14px;color:var(--tinte-weich)}
.rechner__jahr b{font-family:var(--f-display);font-size:18px;font-weight:600;color:var(--tinte);margin-left:4px;font-variant-numeric:tabular-nums}

.einrichtung{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.einrichtung__punkt{padding:28px 26px;background:var(--karte);box-shadow:var(--schatten-karte)}
.einrichtung__icon{width:46px;height:46px;display:grid;place-items:center;background:var(--aktion-weich);color:var(--aktion-tinte);margin-bottom:18px}
.einrichtung__icon .icon{width:22px;height:22px}
.einrichtung__punkt b{display:block;font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.einrichtung__punkt p{margin-top:8px;color:var(--tinte-weich);font-size:15px;line-height:1.55}

/* contain:paint — ohne verbreiterte die eingeblendete Tabelle auf dem Handy die ganze Seite
   (Layout 613 statt 390 px, sobald der Rahmen .ist-sichtbar wurde; gefunden 23.09.2026). */
.vgl-rahmen{overflow-x:auto;contain:paint;background:var(--karte);box-shadow:var(--schatten-karte)}
.vgl{width:100%;min-width:680px;border-collapse:collapse;font-size:14.5px}
.vgl thead th{position:sticky;top:0;z-index:1;background:var(--karte);padding:22px 18px 18px;text-align:center;font-family:var(--f-display);font-size:16px;font-weight:600;letter-spacing:-.015em;border-bottom:1px solid var(--linie-2);vertical-align:bottom}
.vgl thead th small{display:block;margin-top:4px;font-family:var(--f-text);font-size:13px;font-weight:500;color:var(--tinte-weich);letter-spacing:0}
.vgl thead th:first-child{width:44%}
.vgl tbody th{text-align:left;font-weight:500;color:var(--tinte-mitte);padding:12px 18px}
.vgl td{text-align:center;padding:12px 18px}
.vgl tbody tr:not(.vgl__gruppe){border-top:1px solid var(--linie)}
.vgl .vgl__gruppe th{padding:28px 18px 10px;font-size:14.5px;font-weight:700;color:var(--tinte);background:transparent}
.vgl__hervor{background:var(--flaeche-2)}
.vgl thead .vgl__hervor{background:var(--flaeche-2);color:var(--tinte)}
/* Haken fein: nur das Zeichen in Grün, ohne Kästchen. */
.vgl__ja{display:inline-grid;place-items:center;width:24px;height:24px;color:var(--aktion)}
.vgl__ja .icon{width:19px;height:19px;stroke-width:2}
.vgl__nein{color:var(--tinte-blass);font-size:16px}
.vgl__text{display:inline-block;font-size:12.5px;font-weight:700;color:var(--pille-neu-fg);padding:3px 9px;background:var(--pille-neu-bg);white-space:nowrap}

@media (max-width:1000px){
  .plaene{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .plan--hervor{order:-1}
  .einrichtung{grid-template-columns:1fr}
}
@media (max-width:640px){
  .preise-kopf{padding-top:120px}
  .plan{padding:26px 22px 22px}
}

/* ==========================================================================
   17 Sicherheit & Datenschutz
   ========================================================================== */
.seitenheld--ohne-foto .seitenheld__bild>.fenster{box-shadow:var(--schatten-karte)}
/* Neutraler Knopf der App: weiß mit Rand (nie grau auf grau). */
.knopf-mini--hell{background:var(--karte);color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie-2)}
.knopf-mini--hell:hover{box-shadow:inset 0 0 0 1px var(--tinte)}

/* Datei und Zugriffsliste (vig_zugriff, derzeit auf keiner Seite eingebunden) */
.zugriff__datei{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px 14px;background:var(--flaeche-2);margin-bottom:16px}
.zugriff__icon{width:40px;height:40px;display:grid;place-items:center;background:var(--warn-grund);color:var(--warn)}
.zugriff__icon .icon{width:20px;height:20px}
.zugriff__datei b{display:block;font-size:13.5px;font-weight:600;word-break:break-word}
.zugriff__datei small{font-size:12.5px;color:var(--tinte-blass)}
.zugriff__liste{display:flex;flex-direction:column}
.zugriff__liste li{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;padding:10px 2px;border-top:1px solid var(--linie);font-size:13.5px}
.zugriff__liste b{display:block;font-weight:600}
.zugriff__liste small{font-size:12.5px;color:var(--tinte-blass)}
.zugriff__av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--schwebe);color:var(--tinte-mitte)}   /* Rollen-Symbol: rund */
.zugriff__av .icon{width:16px;height:16px}
.zugriff__recht{display:inline-flex;align-items:center;height:24px;padding:0 9px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--pille-neu-bg);color:var(--pille-neu-fg);transition:background-color .45s,color .45s}
.zugriff__recht--ja{background:var(--aktion-weich);color:var(--aktion-tinte)}
.zugriff__recht--nein{background:var(--warn-grund);color:var(--warn)}
.zugriff__recht.ist-neu{animation:aufploppen .5s var(--feder)}
.zugriff__fuss{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--linie);font-size:12.5px;color:var(--tinte-weich)}
.zugriff__fuss>span:first-child{display:inline-flex;align-items:center;gap:7px}
.zugriff__fuss .icon{width:15px;height:15px;color:var(--aktion)}

/* Drei Blickwinkel (vig_sichtbarkeit, derzeit auf keiner Seite eingebunden): weiße Karten der App,
   je mit rundem Rollen-Symbol; die Einheit selbst als zarte Fläche in der Karte. */
.blicke{display:flex;flex-direction:column;gap:12px}
.blick{padding:16px;background:var(--karte);box-shadow:var(--schatten-karte)}
.blick:nth-child(2){margin-left:24px}
.blick:nth-child(3){margin-left:48px}
.blick__wer{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--tinte-mitte);margin-bottom:10px}
.blick__av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--dunkel);color:#fff;flex:none}
.blick__av .icon{width:15px;height:15px}
.blick__karte{padding:12px 14px;background:var(--flaeche-2)}
.blick__karte--portal{background:var(--aktion-weich)}
.blick__zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14.5px}
.blick__zeile b{font-family:var(--f-display);font-weight:700}
.blick__detail{margin-top:5px;font-size:13px;color:var(--tinte-weich)}
.blick__detail b{color:var(--tinte);font-weight:600}
.blick__detail--zu{display:flex;align-items:center;gap:6px;color:var(--tinte-blass)}
.blick__detail--zu .icon{width:14px;height:14px}

/* Zustimmung auf dem Handy — wie die Zwischenseite des Kundenportals: Kopf mit Marke und Kunde,
   großer Titel, weiße Karte, kantiges Kästchen, grüner Knopf, Nachweis als Hinweisfläche. */
.zs{display:flex;flex-direction:column;gap:12px;min-height:560px}
.zs .kb-kopf{margin-bottom:2px}
.zs__fuer{font-size:12.5px;color:var(--tinte-weich);white-space:nowrap}
.zs__fuer b{color:var(--tinte);font-weight:600}
.zs__vor{margin-top:4px;font-size:12.5px;font-weight:600;color:var(--tinte-weich)}
.zs__titel{font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:-8px}
.zs__text{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--karte);box-shadow:var(--schatten-karte)}
.zs__text b{font-size:12.5px;margin-top:5px}
.zs__text b:first-child{margin-top:0}
.zs__text span{height:6px;background:var(--linie)}
.zs__text span.kurz{width:62%}
.zs__haken{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:12.5px;line-height:1.45;color:var(--tinte-mitte)}
.zs__haken i{width:18px;height:18px;margin-top:1px;background:var(--karte);box-shadow:inset 0 0 0 1.5px #D5D8D0;transition:background-color .3s,box-shadow .3s;position:relative}
.zs__haken i.ist-an{background:var(--aktion);box-shadow:none}
.zs__haken i.ist-an::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.zs__knopf{display:grid;place-items:center;height:44px;background:var(--aktion);color:#fff;font-size:13.5px;font-weight:600;opacity:.45;transition:opacity .3s,background-color .2s}
.zs__knopf.ist-bereit{opacity:1}
.zs__knopf.ist-gedrueckt{background:var(--aktion-dunkel)}
.zs__nachweis{display:flex;gap:10px;align-items:center;padding:11px 12px;background:repeating-linear-gradient(-45deg,#E3F0E8 0 5px,#DCEBE2 5px 10px);font-size:12.5px;
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--aus)}
.zs__nachweis.ist-da{opacity:1;transform:none}
.zs__nachweis .icon{width:26px;height:26px;padding:5px;background:var(--aktion);color:#fff;flex:none}
.zs__nachweis b{display:block;font-weight:700;color:var(--aktion-tinte)}
.zs__nachweis small{color:var(--tinte-mitte);font-size:12.5px}

/* Papierkorb */
.pk__liste li{display:grid;grid-template-columns:36px 1fr auto auto;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--kalk-100);font-size:13px;transition:opacity .5s,transform .5s var(--aus)}
.pk__liste li.ist-weg{opacity:0;transform:translateX(24px)}
.pk__icon{width:36px;height:36px;display:grid;place-items:center;background:var(--kalk-100);color:var(--ink-600)}
.pk__icon .icon{width:18px;height:18px}
.pk__liste b{display:block;font-weight:600}
.pk__liste small{font-size:12.5px;color:var(--tinte-blass)}
.pk__frist{font-size:12px;font-weight:600;color:var(--tinte-weich);white-space:nowrap}
.pk{position:relative}
.pk .meldung{position:absolute;left:0;right:0;top:4px;margin:0;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--aus)}
.pk .meldung.ist-da{opacity:1;transform:none}
.pk__hinweis{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 12px;background:var(--kalk-50);font-size:12.5px;line-height:1.5;color:var(--ink-600)}
.pk__hinweis .icon{width:16px;height:16px;flex:none;margin-top:1px;color:var(--gruen-600)}

/* Zusagen und „Auch auf dieser Website" */
.zusagen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.zusage{padding:26px 24px;background:var(--karte);box-shadow:var(--schatten-karte)}
.zusage__icon{width:46px;height:46px;display:grid;place-items:center;background:var(--aktion-weich);color:var(--aktion-tinte);margin-bottom:18px}
.zusage__icon .icon{width:22px;height:22px}
.zusage b{display:block;font-family:var(--f-display);font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.zusage p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--tinte-weich)}
.diese-seite{display:grid;grid-template-columns:52px 1fr auto;gap:22px;align-items:center;padding:26px 28px;background:var(--karte);box-shadow:var(--schatten-karte)}
.diese-seite__icon{width:52px;height:52px;display:grid;place-items:center;background:var(--aktion-weich);color:var(--aktion-tinte)}
.diese-seite__icon .icon{width:24px;height:24px}
.diese-seite p{margin-top:4px;color:var(--ink-600)}

@media (max-width:1100px){ .zusagen{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .zusagen{grid-template-columns:1fr}
  .diese-seite{grid-template-columns:1fr;gap:14px}
  .blick:nth-child(2),.blick:nth-child(3){margin-left:0}
  .pk__liste li{grid-template-columns:36px 1fr auto}
  .pk__frist{display:none}
  .zugriff__datei{grid-template-columns:40px 1fr}
  .zugriff__datei .chip{grid-column:1/-1;justify-self:start}
}

/* ==========================================================================
   18 Funktionen (Übersicht)
   ========================================================================== */
/* Seitenkopf weiß wie die übrigen Unterseiten; die Gruppen darunter liegen auf der Arbeitsfläche,
   die Kacheln sind weiße Karten mit kleinem Schatten (DESIGN.md §1/§4). */
.fu-kopf{position:relative;background:var(--karte);padding:calc(var(--kopf-h) + clamp(44px,6vw,80px)) 0 clamp(48px,5vw,80px);border-bottom:1px solid var(--linie-2)}
.fu-kopf .kopfzeile{max-width:900px;margin-bottom:0}
.fu-kopf .t-riesig{font-size:clamp(36px,4.4vw,64px)}
.fu-sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.fu-sprung a{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie-2);font-weight:600;font-size:14.5px;color:var(--tinte-mitte);transition:box-shadow .2s,color .2s}
.fu-sprung a:hover{box-shadow:inset 0 0 0 1px var(--tinte);color:var(--tinte)}
.fu-sprung .icon{width:16px;height:16px;color:var(--tinte-blass)}
.fu-gruppe{scroll-margin-top:80px}
.fu-gruppe.sek--weiss,.fu-gruppe.sek--kalk{background:var(--seite)}
.fu-gruppe+.fu-gruppe{border-top:1px solid var(--linie-2)}
.fu-gruppe__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:end;margin-bottom:36px}
.fu-gruppe__kopf .lead{margin:0 0 6px}

.kacheln{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.kachel{display:grid;grid-template-rows:auto 1fr;background:var(--karte);box-shadow:var(--schatten-karte);overflow:hidden}
.kachel--breit{grid-column:1/-1;grid-template-columns:1.1fr 1fr;grid-template-rows:auto}
/* Bildfläche: weiß, vom Text durch eine feine Linie getrennt; was darin liegt, sind zarte Flächen
   ohne Rand und ohne zweiten Schatten (Karte in Karte). */
.kachel__bild{position:relative;padding:24px;background:var(--karte);border-bottom:1px solid var(--linie);min-height:210px;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden}
.kachel__bild::after{content:none}
.kachel--breit .kachel__bild{order:2;min-height:0;border-bottom:0;border-left:1px solid var(--linie)}
.kachel__text{padding:26px 28px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.kachel__icon{width:42px;height:42px;display:grid;place-items:center;background:var(--aktion-weich);color:var(--aktion-tinte)}
.kachel__icon .icon{width:21px;height:21px}
.kachel h3{font-size:24px;letter-spacing:-.025em;margin-top:6px;transition:color .2s}
.kachel:hover h3{color:var(--aktion-dunkel)}
.kachel p{color:var(--tinte-weich);font-size:15px;line-height:1.55;max-width:52ch}
.kachel .textlink{margin-top:auto;padding-top:8px}
.kachel:hover .textlink .icon{transform:translateX(3px)}

/* Ausschnitte in den Kacheln */
.kachel .vst{background:var(--flaeche-2);border:0}
.k-feed{display:flex;flex-direction:column;gap:8px}
.k-kalk{display:flex;flex-direction:column;gap:12px}
.k-kalk__zahlen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.k-kalk__zahlen>div{padding:12px 14px;background:var(--flaeche-2)}
.k-kalk__zahlen small{display:block;font-size:12.5px;color:var(--tinte-weich)}
.k-kalk__zahlen b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.k-kalk__zahlen span{font-size:12.5px;color:var(--tinte-blass)}
.k-kalk__kurve{width:100%;height:64px}
.k-kalk__flaeche{fill:rgba(24,122,82,.1)}
.k-kalk__linie{fill:none;stroke:var(--aktion);stroke-width:2.5;vector-effect:non-scaling-stroke}
.k-chips{display:flex;flex-wrap:wrap;gap:6px}
.k-dateien{display:flex;flex-direction:column;gap:6px}
.k-dateien li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:center;padding:10px 12px;background:var(--flaeche-2);font-size:13px;margin-left:calc(var(--stufe) * 18px)}
.k-dateien .icon{width:17px;height:17px;color:var(--warn)}
.k-dateien b{display:block;font-weight:600}
.k-dateien small{font-size:12.5px;color:var(--tinte-blass)}
.k-notiz{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tinte-weich)}
.k-notiz .icon{width:16px;height:16px;color:var(--aktion);flex:none}
.k-notiz b{color:var(--tinte)}
/* Kundenportal im Kleinen: Kopf mit Marke, Gruß, Segment-Reiter wie das Portal */
.k-portal{overflow:hidden;background:var(--flaeche-2)}
.k-portal__adresse{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;background:var(--schwebe);font-size:12.5px;color:var(--tinte-weich)}
.k-portal__adresse .icon{width:12px;height:12px;color:var(--aktion)}
.k-portal__innen{padding:14px 16px 16px}
.k-portal__gruss{margin:12px 0 12px;font-family:var(--f-display);font-size:20px;font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--tinte-mitte)}
.k-portal__gruss b{font-weight:700;color:var(--tinte)}
.k-portal__reiter{display:inline-flex;padding:3px;background:var(--segment);max-width:100%}
.k-portal__reiter span{font-size:12.5px;font-weight:600;padding:6px 10px;color:var(--tinte-weich);white-space:nowrap}
.k-portal__reiter span.ist-an{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-reiter)}
.k-ank{padding:16px;background:var(--flaeche-2);font-size:13.5px}
.k-ank__kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.k-ank__kopf small{color:var(--tinte-blass);font-size:12.5px}
.k-ank b{font-family:var(--f-display);font-size:17px;font-weight:700;letter-spacing:-.02em}
.k-ank p{margin-top:4px;color:var(--tinte-weich)}
.k-ank__fuss{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:10px;border-top:1px solid var(--linie-2);font-size:12.5px;color:var(--tinte-blass)}
.k-ank__fuss .icon{width:14px;height:14px}
.k-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.k-pipe__spalte{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--flaeche-2)}
.k-pipe__spalte small{font-size:12.5px;font-weight:600;color:var(--tinte-weich);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-pipe__karte{height:20px;background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie)}
.k-pipe__karte.ist-hervor{background:var(--aktion-weich);box-shadow:inset 0 0 0 1.5px var(--aktion)}
.k-fin{padding:16px 18px;background:var(--flaeche-2)}
.k-fin__kopf{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.k-fin__kopf b{font-weight:600}
.k-fin__schritte{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.k-fin__schritte li{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--tinte-blass)}
.k-fin__schritte i{height:5px;background:var(--linie-2)}
.k-fin__schritte li.ist-fertig i{background:var(--aktion)}
.k-fin__schritte li.ist-jetzt i{background:var(--pille-res-punkt)}
.k-fin__schritte li.ist-fertig,.k-fin__schritte li.ist-jetzt{color:var(--tinte);font-weight:600}

/* Wer was davon hat */
.vgl-rahmen--dunkel{background:var(--karte)}
.vgl--rollen{min-width:760px;color:var(--tinte)}
.vgl--rollen thead th{background:var(--flaeche-3);color:var(--tinte);border-color:var(--linie);text-align:left;padding:18px}
.vgl--rollen thead th:first-child{width:26%}
.vgl--rollen thead th a{display:inline-flex;align-items:center;gap:6px}
.vgl--rollen thead th a:hover{color:var(--aktion-dunkel)}
.vgl--rollen tbody th{color:var(--tinte);font-weight:600;padding:16px 18px;width:26%}
.vgl--rollen tbody th a{display:inline-flex;align-items:center;gap:10px}
.vgl--rollen tbody th a:hover{color:var(--aktion-dunkel)}
.vgl--rollen tbody th .icon{width:18px;height:18px;color:var(--aktion);flex:none}
.vgl--rollen td{text-align:left;font-size:14.5px;color:var(--tinte-mitte);padding:16px 18px;width:24.6%}
.vgl--rollen tbody tr{border-top:1px solid var(--linie)}
.vgl--rollen .vgl__nein{color:var(--tinte-blass)}

@media (max-width:900px){
  .fu-gruppe__kopf{grid-template-columns:1fr;gap:14px}
  .kacheln{grid-template-columns:1fr}
  .kachel--breit{grid-template-columns:1fr}
  .kachel--breit .kachel__bild{order:0;border-left:0;border-bottom:1px solid var(--linie)}
}
@media (max-width:640px){
  .fu-kopf{padding-top:120px}
  .kachel__bild{padding:16px}
  .kachel__text{padding:22px 20px 24px}
  .k-pipe{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   19 Funktionsseiten: Eckdaten, Für wen, Szenen
   ========================================================================== */
.eckdaten{background:var(--seite);color:var(--tinte);border-bottom:1px solid var(--linie-2)}
.eckdaten__liste{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.eckdaten__punkt{padding:30px 26px 34px;border-left:1px solid var(--linie-2)}
.eckdaten__punkt:first-child{border-left:0;padding-left:0}
.eckdaten dt{font-family:var(--f-display);font-size:clamp(24px,2.4vw,34px);font-weight:700;letter-spacing:-.03em;color:var(--tinte);line-height:1.1}
.eckdaten dd{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--tinte-weich);max-width:30ch}

.fuer-wen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.fuer-wen__karte{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px;background:var(--karte);box-shadow:var(--schatten-karte)}
.fuer-wen__karte:hover b{color:var(--aktion-dunkel)}
.fuer-wen__icon{width:40px;height:40px;display:grid;place-items:center;background:var(--aktion-weich);color:var(--aktion-tinte);margin-bottom:6px}
.fuer-wen__icon .icon{width:20px;height:20px}
.fuer-wen__karte b{font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.02em;transition:color .2s}
.fuer-wen__karte p{color:var(--tinte-weich);font-size:15px;line-height:1.55}
.fuer-wen__karte .textlink{margin-top:auto;padding-top:8px}

/* Szene im Seitenkopf ohne Foto */
.seitenheld--ohne-foto .seitenheld__bild>.telefon-buehne::before{content:none}

/* ---- Szenen der Funktionsseiten (Werkbank): Beschriftungen mindestens 12,5 px, innere Flächen
   zart (#F6F7F4) statt Rand, Reiter als Segmentleiste, Knöpfe schlank, keine Kürzel-Quadrate. ---- */

/* Anfragen */
.anfr__reiter{display:inline-flex;max-width:100%;overflow:hidden;padding:3px;background:var(--segment);margin-bottom:12px;font-size:12.5px;font-weight:600;color:var(--tinte-weich)}
.anfr__reiter span{padding:6px 10px;white-space:nowrap}
.anfr__reiter span.ist-an{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-reiter)}
.anfr__reiter b{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:5px;padding:0 4px;background:var(--aktion-weich);color:var(--aktion-tinte);font-size:12px}
.anfr__liste li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:11px 2px;border-top:1px solid var(--linie);font-size:13.5px;transition:opacity .5s,background-color .5s}
.anfr__nr{font-family:var(--f-display);font-weight:700}
.anfr__liste b{font-weight:600}
.anfr__liste span>b{display:block}
.anfr__liste small{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--tinte-blass)}
.anfr__liste small .icon{width:12px;height:12px;color:var(--aktion)}
.anfr__aktion{display:flex;gap:6px}
.anfr__status{display:inline-flex;align-items:center;height:26px;padding:0 10px;font-size:12px;font-weight:700;white-space:nowrap;animation:aufploppen .45s var(--feder)}
.anfr__status--ja{background:var(--aktion-weich);color:var(--aktion-tinte)}
.anfr__status--nein{background:var(--pille-neu-bg);color:var(--pille-neu-fg)}
.anfr__liste li.ist-weg{opacity:.55}
.anfr .meldung,.teilen .meldung,.pipe-rahmen .meldung{margin-top:12px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--aus)}
.anfr .meldung.ist-da,.teilen .meldung.ist-da,.pipe-rahmen .meldung.ist-da{opacity:1;transform:none}

/* Verkaufsbeleg */
.beleg{display:flex;flex-direction:column;gap:12px}
.beleg__reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Felder wie in den Dialogen der App: Beschriftung, darunter das Feld mit Rand. */
.beleg__feld,.teilen__feld{display:flex;flex-direction:column;gap:5px}
.beleg__feld small,.teilen__feld small{font-size:12.5px;font-weight:600;color:var(--tinte-mitte)}
.beleg__feld b,.teilen__feld>b{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;font-size:14px;font-weight:600;background:var(--karte);box-shadow:inset 0 0 0 1.5px #D5D8D0}
.beleg__feld .icon,.teilen__feld .icon{width:16px;height:16px;color:var(--tinte-blass)}
.beleg__ergebnis{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--aktion-weich);color:var(--tinte)}
.beleg__ergebnis span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tinte-mitte)}
.beleg__ergebnis .icon{width:16px;height:16px;color:var(--aktion)}
.beleg__ergebnis b{font-size:24px;font-weight:700;color:var(--aktion-tinte);letter-spacing:-.03em}
.beleg__partner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--tinte-weich)}
.beleg__av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--schwebe);color:var(--tinte-mitte)}   /* Rollen-Symbol: rund */
.beleg__av .icon{width:14px;height:14px}

/* Förderung & Steuer */
.steuer__liste li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--linie);font-size:13.5px}
.steuer__liste b{display:block;font-weight:600}
.steuer__liste small{font-size:12.5px;color:var(--tinte-blass)}
.steuer__satz{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:13px;color:var(--tinte-weich)}
.steuer__satz .icon{width:16px;height:16px;color:var(--aktion);flex:none}
.steuer__ergebnis{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;padding:14px 16px;background:var(--flaeche-2)}
.steuer__ergebnis small{flex-basis:100%;font-size:12.5px;color:var(--tinte-weich)}
.steuer__ergebnis b{font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1}
.steuer__delta{font-size:13px;font-weight:600;color:var(--aktion-dunkel);opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s var(--aus)}
.steuer__delta.ist-da{opacity:1;transform:none}

/* Bauphase */
.bph__diagramm{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:190px;padding:0 2px 0;border-bottom:1px solid var(--linie-2)}
.bph__rate{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.bph__rate i{display:block;width:100%;height:var(--h);background:var(--schraffur-gespr);transform-origin:bottom;transition:transform .7s var(--aus) calc(var(--i) * .12s)}
.bph__rate:first-child i,.bph__rate:nth-child(2) i{background:var(--schraffur-gruen)}
.bph__wert{font-size:12px;font-weight:700;color:var(--tinte-mitte);font-variant-numeric:tabular-nums;white-space:nowrap}
.bph__rate small{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:calc(100% + 8px);text-align:center;font-size:12px;line-height:1.2;color:var(--tinte-weich)}
.bph__rate em{display:none}
.bph__zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:56px}
.bph__zahlen>div{padding:10px 12px;background:var(--flaeche-2)}
.bph__zahlen small{display:block;font-size:12.5px;color:var(--tinte-weich)}
.bph__zahlen b{font-size:18px;font-weight:700;letter-spacing:-.02em}
.js .fenster--bph:not(.laeuft) .bph__rate i{transform:scaleY(0)}

/* Kalkulation als Link — wie die Kalkulation im Kundenportal: Fazit mit Häkchen, Kennzahl,
   darunter die Regler aus „Annahmen anpassen“ (Wert in getönter Marke, runder Griff, Skala). */
.kl{display:flex;flex-direction:column;gap:12px;min-height:520px}
/* Im schmalen Telefon stehen Marke und „für <Kunde>“ untereinander statt nebeneinander. */
.kl .kb-kopf,.zs .kb-kopf{flex-direction:column;align-items:flex-start;gap:2px}
.kb-marke{white-space:nowrap}
.kl .kb-kopf{margin-bottom:0}
.kl__fuer{font-size:12.5px;color:var(--tinte-weich);white-space:nowrap}
.kl__fuer b{color:var(--tinte);font-weight:600}
.kl__marke{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:12.5px;color:var(--tinte-weich)}
.kl__marke .chip{height:24px}
.kl__fazit{background:var(--karte);box-shadow:var(--schatten-karte);padding:14px}
.kl__fazit-kopf{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.kl__haken{width:28px;height:28px;display:grid;place-items:center;background:var(--aktion);color:#fff}
.kl__haken .icon{width:16px;height:16px;stroke-width:2.2}
.kl__fazit-kopf b{display:block;font-family:var(--f-display);font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.kl__kpi{margin-top:12px;padding-top:12px;border-top:1px solid var(--linie)}
.kl__kpi small{display:block;font-size:12.5px;color:var(--tinte-weich)}
.kl__kpi b{display:block;font-size:30px;font-weight:700;letter-spacing:-.035em;line-height:1.15;color:var(--aktion-dunkel)}
.kl__regler{display:grid;grid-template-columns:1fr auto;gap:10px 8px;align-items:center;padding:12px 14px 10px;background:var(--karte);box-shadow:var(--schatten-karte);font-size:13px;font-weight:600;color:var(--tinte)}
.kl__regler>b{padding:3px 8px;background:var(--aktion-weich);color:var(--aktion-tinte);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.kl__bahn{grid-column:1/-1;position:relative;height:5px;background:var(--linie-2);margin:4px 0 0}
.kl__bahn i{position:absolute;left:0;top:0;bottom:0;background:var(--aktion);transition:width .9s var(--aus)}
.kl__bahn span{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;margin:-9px 0 0 -9px;background:var(--karte);box-shadow:inset 0 0 0 4px var(--aktion);transition:left .9s var(--aus)}
.kl__skala{grid-column:1/-1;display:flex;justify-content:space-between;font-size:12px;font-weight:500;color:var(--tinte-blass)}
.kl__hinweis{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tinte-blass)}
.kl__hinweis .icon{width:13px;height:13px;flex:none}

/* Dokumente */
.dok .klein-titel{margin:4px 0 8px}
.dok .klein-titel:not(:first-child){margin-top:16px}
.dok__liste li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:9px 2px;border-top:1px solid var(--linie);font-size:13px}
.dok__liste>li>.icon{width:17px;height:17px;color:var(--warn)}
.dok__liste li.ist-geerbt{color:var(--tinte-weich)}
.dok__liste b{display:block;font-weight:600}
.dok__liste small{font-size:12.5px;color:var(--tinte-blass)}
.dok__frei{display:flex;gap:12px}
.dok__schalter{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--tinte-blass);white-space:nowrap}
.dok__schalter i{position:relative;width:28px;height:16px;background:var(--linie-3);transition:background-color .35s}
.dok__schalter i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:#fff;transition:transform .35s var(--feder)}
.dok__schalter.ist-an{color:var(--tinte)}
.dok__schalter.ist-an i{background:var(--aktion)}
.dok__schalter.ist-an i::after{transform:translateX(12px)}

/* Exposé */
.expo__kopf{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.expo__kopf b{display:block;font-family:var(--f-display);font-size:16.5px;font-weight:700;letter-spacing:-.02em}
.expo__kopf small{font-size:12.5px;color:var(--tinte-blass)}
/* Vollständigkeit als Balken in der Fläche (kein Ring — rund ist nur, was Punkt oder Person ist) */
.expo__ring{--wert:0;width:64px;height:54px;display:flex;flex-direction:column;justify-content:center;gap:6px;flex:none;padding:0 8px;background:var(--aktion-weich)}
.expo__ring::after{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--aktion) calc(var(--wert)*1%),rgba(24,122,82,.18) 0)}
.expo__ring b{font-size:15px!important;font-family:var(--f-text)!important;font-weight:700;color:var(--aktion-tinte)}
.expo__block{padding:14px;background:var(--flaeche-2)}
.expo__blockkopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:13.5px}
.expo__ton{display:flex;padding:3px;background:var(--segment)}
.expo__ton i{font-style:normal;font-size:12px;font-weight:600;padding:4px 9px;color:var(--tinte-weich)}
.expo__ton i.ist-an{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-reiter)}
.expo__text{min-height:84px;font-size:13.5px;line-height:1.55;color:var(--tinte-mitte);margin-bottom:12px}
.expo__text.tippt::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--aktion-dunkel);animation:blinken 1s steps(1) infinite}
.expo__fuss{display:flex;gap:16px;margin-top:12px;font-size:13px;font-weight:600;color:var(--aktion-dunkel)}

/* Kundenportal vor dem Kauf — wie die Startseite des Portals: Kopf, Gruß, Immobilien-Karten */
.vk__kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--linie)}
.vk__ap{display:flex;align-items:center;gap:8px;font-size:13px}
.vk__ap small{display:block;font-size:12px;color:var(--tinte-blass)}
.vk__av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--aktion-weich);color:var(--aktion-tinte);font-weight:700;font-size:12px}   /* Person: rund */
.vk__gruss{margin:16px 0 14px;font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.vk__gruss span{font-family:var(--f-text);font-size:13.5px;font-weight:400;color:var(--tinte-weich);letter-spacing:0}
.vk__karten{display:flex;flex-direction:column;gap:10px}
.vk__karte{display:grid;grid-template-columns:120px 1fr;overflow:hidden;background:var(--flaeche-2)}
.vk__karte--klein{grid-template-columns:1fr}
.vk__bild img{width:100%;height:100%;object-fit:cover;display:block}
.vk__text{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px;font-size:13.5px}
.vk__text b{font-weight:700}
.vk__text small{color:var(--tinte-weich);font-size:12.5px}
.vk__link{font-size:13px;font-weight:600;color:var(--aktion-dunkel)}

/* Glocke */
.glocke li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--linie);font-size:13.5px}
.glocke li.ist-neu{animation:hereinrutschen .6s var(--aus);background:var(--gruen-50)}
.glocke__icon{width:34px;height:34px;display:grid;place-items:center;background:var(--aktion-weich);color:var(--aktion-tinte)}
.glocke__icon .icon{width:17px;height:17px}
.glocke b{display:block;font-weight:600}
.glocke small{font-size:12.5px;color:var(--tinte-blass)}
.glocke__hinweis{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--tinte-weich)}
.glocke__hinweis .icon{width:15px;height:15px;color:var(--aktion)}

/* Umfrage */
.umf__kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.umf__kopf small{font-size:12.5px;color:var(--tinte-blass)}
.umf__frage{display:block;font-family:var(--f-display);font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.umf__liste li{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:9px 0;font-size:13.5px}
.umf__zahl{font-weight:700;font-variant-numeric:tabular-nums}
.umf__balken{grid-column:1/-1;height:8px;background:var(--linie);overflow:hidden}
.umf__balken i{display:block;height:100%;background:var(--schraffur-gespr);transition:width .8s var(--aus)}
.umf__liste li:first-child .umf__balken i{background:var(--schraffur-gruen)}
.umf__fuss{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie);font-size:13px;color:var(--tinte-weich)}

/* Empfänger: Radioknöpfe (rund erlaubt), die gewählte Zeile zart grün */
.empf__liste{display:flex;flex-direction:column;gap:6px}
.empf__liste li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:11px 12px;background:var(--flaeche-2);font-size:13.5px;transition:background-color .3s,box-shadow .3s}
.empf__liste li i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--linie-3);background:var(--karte)}
.empf__liste li.ist-an{background:var(--gruen-50);box-shadow:inset 0 0 0 1.5px var(--aktion)}
.empf__liste li.ist-an i{box-shadow:inset 0 0 0 5px var(--aktion)}
.empf__liste b{font-variant-numeric:tabular-nums;color:var(--tinte-weich)}
.empf__zeilen{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.empf__zeilen>div{display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:center;font-size:13px}
.empf__zeilen small{font-size:12.5px;color:var(--tinte-blass)}
.empf__zeilen b{display:flex;align-items:center;gap:7px;font-weight:600}
.empf__zeilen .icon{width:15px;height:15px;color:var(--aktion)}

/* Vorgänge */
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pipe__spalte{display:flex;flex-direction:column;gap:6px;min-height:170px;padding:8px;background:var(--flaeche-2)}
.pipe__titel{font-size:12.5px;font-weight:600;color:var(--tinte-mitte);margin-bottom:2px}
.pipe__titel b{color:var(--tinte-blass);font-weight:600;margin-left:3px}
.pipe__karte{padding:9px 10px;background:var(--karte);box-shadow:0 1px 2px rgba(22,32,27,.06);font-size:12.5px;transition:box-shadow .3s}
.pipe__karte b{display:block;font-weight:600}
.pipe__karte small{font-size:12px;color:var(--tinte-blass)}
.pipe__karte.ist-neu{animation:hereinrutschen .6s var(--aus);box-shadow:inset 0 0 0 1.5px var(--aktion)}
.pipe__karte.ist-hebt{box-shadow:inset 0 0 0 1.5px var(--aktion)}

/* Anfragen/Leads — ohne Kürzel-Quadrat (DESIGN.md §10) */
.leads li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--linie);font-size:13.5px}
.leads li.ist-neu{animation:hereinrutschen .6s var(--aus)}
.leads b{display:block;font-weight:600}
.leads small{font-size:12.5px;color:var(--tinte-blass)}

/* Teilen & Übergabe */
.teilen,.ueb{display:flex;flex-direction:column;gap:10px}
.teilen__wahl{display:inline-flex;flex-wrap:wrap;align-self:flex-start;padding:3px;background:var(--segment);max-width:100%}
.teilen__wahl i{font-style:normal;font-size:12.5px;font-weight:600;padding:6px 10px;color:var(--tinte-weich);transition:background-color .3s,color .3s,box-shadow .3s}
.teilen__wahl i.ist-an{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-reiter)}
.teilen__knopf,.ueb__knopf{align-self:flex-start}
.ueb__liste li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:10px 2px;border-top:1px solid var(--linie);font-size:13.5px}
.ueb__liste li>i{width:16px;height:16px;background:var(--aktion);position:relative}
.ueb__liste li>i::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ueb__liste b{display:block;font-weight:600}
.ueb__liste small{font-size:12.5px;color:var(--tinte-blass)}
.ueb__ok{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--aktion-dunkel)}
.ueb__ok .icon{width:13px;height:13px}
.ueb__schritte{margin-top:6px}

/* Anforderungen: je Punkt eine Segmentleiste zwingend / gewünscht / nicht nötig */
.anf li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--linie);font-size:13.5px}
.anf li:last-child{border-bottom:none}
.anf__wahl{display:flex;padding:3px;background:var(--segment)}
.anf__wahl i{font-style:normal;font-size:12px;font-weight:600;padding:4px 8px;color:var(--tinte-weich);white-space:nowrap}
.anf__wahl i.ist-0{background:var(--dunkel);color:#fff}
.anf__wahl i.ist-1{background:var(--pille-res-bg);color:var(--pille-res-fg)}
.anf__wahl i.ist-2{background:var(--karte);color:var(--tinte-mitte);box-shadow:var(--schatten-reiter)}

@media (max-width:1100px){
  .eckdaten__liste{grid-template-columns:repeat(2,1fr)}
  .eckdaten__punkt:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:640px){
  .eckdaten__liste{grid-template-columns:1fr}
  .eckdaten__punkt{border-left:0;padding:22px 0;border-top:1px solid var(--linie-hell)}
  .eckdaten__punkt:first-child{border-top:0}
  .anfr__liste li{grid-template-columns:48px 1fr}
  .anfr__aktion{grid-column:1/-1}
  .pipe{grid-template-columns:repeat(2,1fr)}
  .leads li{grid-template-columns:1fr auto}
  .leads .knopf-mini{display:none}
  .dok__liste li{grid-template-columns:18px 1fr}
  .dok__frei,.dok__liste .chip{grid-column:2}
  .anf li{grid-template-columns:1fr}
  .empf__zeilen>div{grid-template-columns:1fr;gap:2px}
  .bph__rate small{display:none}   /* zu schmal für lesbare Beschriftung — die Prozentwerte bleiben */
  .bph__zahlen{margin-top:16px;grid-template-columns:1fr;gap:6px}
  .bph__zahlen>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .bph__wert{font-size:11px}
  .vk__karte{grid-template-columns:1fr}
  .vk__bild{height:110px}
}

/* Kennzahlen-Raster (Funktionsseiten) */
.kennzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--linie-2)}
.kennzahlen>div{padding:26px 24px 8px 0}
.kennzahlen>div+div{padding-left:24px;border-left:1px solid var(--linie-2)}
.kennzahlen b{display:block;font-family:var(--f-display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.kennzahlen p{margin-top:8px;color:var(--tinte-weich);font-size:15px;line-height:1.55}
.staerke-einzeln .staerke{margin:0}
@media (max-width:900px){.kennzahlen{grid-template-columns:1fr 1fr}.kennzahlen>div:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:640px){.kennzahlen{grid-template-columns:1fr}.kennzahlen>div,.kennzahlen>div+div{padding:20px 0 4px;border-left:0}.kennzahlen>div+div{border-top:1px solid var(--kalk-300)}}

/* Szenen auf dunklem Grund: Inhalt bringt seine eigene Schriftfarbe mit */
.telefon__bild,.fenster{color:var(--ink-900)}
.fenster__pfad .icon{display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-2px;color:var(--ink-400)}

/* Raster-Kinder dürfen schrumpfen — sonst drückt eine breite Szene die Seite auf. */
.seitenheld__innen>*,.staerke>*,.demo__innen>*,.preisband__innen>*,.faq>*{min-width:0}
@media (max-width:480px){
  .kopf__aktionen .knopf{display:none}
  .seitenheld__bild .fenster__koerper{padding:12px}
}
@media (max-width:900px){
  .seitenheld--ohne-foto .seitenheld__innen{grid-template-columns:1fr}
  .seitenheld--ohne-foto .seitenheld__bild{margin-bottom:0}
}
@media (max-width:640px){
  .seitenheld--ohne-foto .seitenheld__bild{margin-inline:calc(-1 * var(--rand));padding:14px var(--rand)}
  .vn__vorher,.vn__nachher{padding:20px}
  .einladen__schritte li{padding:16px;gap:14px}
}

/* Ein Stand für alle: vier Beteiligte, eine Karte in der Mitte (vig_stand).
   Hell gezeichnet (Werkbank): Beteiligte als weiße Felder, gestrichelte Wege, das Licht ist ein
   grüner Strich ohne Glühen; wer gerade handelt, wird dunkel. */
.stand-kopf{margin-bottom:0}
.stand-kopf .lead{color:var(--tinte-weich)}
.stand__buehne{position:relative;max-width:1060px;margin:clamp(24px,3vw,40px) auto 0;aspect-ratio:1000/560}
.stand__linien{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stand__linie{fill:none;stroke:var(--linie-3);stroke-width:1.5;stroke-dasharray:1 2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.stand__licht{fill:none;stroke:var(--aktion);stroke-width:3;stroke-linecap:butt;vector-effect:non-scaling-stroke;
  stroke-dasharray:16 200;stroke-dashoffset:16;opacity:0}
.stand__licht.hin{animation:lichtHin .9s cubic-bezier(.5,0,.3,1) forwards}
.stand__licht.zurueck{stroke:var(--tinte);animation:lichtZurueck .8s cubic-bezier(.5,0,.3,1) forwards}
@keyframes lichtHin{0%{stroke-dashoffset:16;opacity:1}100%{stroke-dashoffset:-100;opacity:1}}
@keyframes lichtZurueck{0%{stroke-dashoffset:-100;opacity:1}100%{stroke-dashoffset:16;opacity:1}}

/* Feine Ringe um den Stand und eine Welle bei jeder Änderung (Flavio, 03.10.2026: zurück, im hellen
   Stil). Rund, weil es Signal/Bewegung ist, keine Fläche. Ausgelöst in szenen.js über .los. */
.stand__ringe{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.stand__ringe i,.stand__welle{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.stand__ringe i{border:1px solid rgba(22,32,27,.07)}
.stand__ringe i:nth-child(1){width:430px;height:430px}
.stand__ringe i:nth-child(2){width:620px;height:620px;border-style:dashed;border-color:rgba(22,32,27,.05)}
.stand__ringe i:nth-child(3){width:820px;height:820px;border-color:rgba(22,32,27,.035)}
.stand__welle{width:380px;height:380px;border:2px solid rgba(24,122,82,.55);opacity:0}
.stand__welle.los{animation:welle 1.4s cubic-bezier(.2,.6,.3,1)}
@keyframes welle{0%{opacity:.9;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.1)}}
@media (prefers-reduced-motion:reduce){.stand__welle.los{animation:none}}
@media (max-width:760px){
  .stand__ringe{top:calc(50% + 40px)}
  .stand__ringe i:nth-child(1){width:300px;height:300px}
  .stand__ringe i:nth-child(2){width:420px;height:420px}
  .stand__ringe i:nth-child(3){display:none}
  .stand__welle{width:280px;height:280px}
}

/* Die vier Beteiligten */
.figur{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:150px}
.figur--bautraeger{left:13%;top:21.4%}.figur--finanzierer{left:13%;top:78.6%}
.figur--vertrieb{left:87%;top:21.4%}.figur--kaeufer{left:87%;top:78.6%}
.figur__kreis{position:relative;width:76px;height:76px;display:grid;place-items:center;background:var(--karte);color:var(--tinte);
  box-shadow:inset 0 0 0 1px var(--linie-2);transition:background-color .4s,color .4s,box-shadow .4s}
.figur__kreis>.icon{width:30px;height:30px}
.figur b{font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--tinte)}
.figur__zeile{min-height:24px;font-size:12.5px;font-weight:600;line-height:24px;padding:0 9px;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s var(--aus)}
.figur__haken{position:absolute;right:-9px;top:-9px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--aktion);color:#fff;
  box-shadow:0 0 0 3px var(--seite);opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s var(--aus)}
.figur__haken .icon{width:13px;height:13px;stroke-width:2.4}
.figur.ist-quelle .figur__kreis{background:var(--dunkel);color:#fff;box-shadow:none}
.figur.ist-quelle .figur__zeile{opacity:1;transform:none;background:var(--dunkel);color:#fff}
.figur.ist-aktuell .figur__kreis{box-shadow:inset 0 0 0 2px var(--aktion)}
.figur.ist-aktuell .figur__haken{opacity:1;transform:none}
.figur.ist-aktuell .figur__zeile{opacity:1;transform:none;background:var(--aktion-weich);color:var(--aktion-tinte)}

/* Die Karte in der Mitte */
.stand__mitte{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,38%);display:flex;flex-direction:column;align-items:center}
.stand__karte{width:100%;background:var(--karte);color:var(--tinte);overflow:hidden;border:1px solid var(--linie-2);box-shadow:var(--schatten-karte)}
.karte__marke{display:flex;align-items:center;gap:10px;margin:0;padding:10px 16px;background:var(--flaeche-3);border-bottom:1px solid var(--linie);color:var(--tinte-mitte);font-size:12.5px;font-weight:600}
.karte__marke .zeichen{height:13px;width:auto}
.karte__bild{position:relative;height:128px;overflow:hidden}
.karte__bild picture,.karte__bild img{display:block;width:100%;height:100%;object-fit:cover}
.karte__titel{padding:12px 18px 2px}
.karte__titel b{display:block;font-family:var(--f-display);font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.karte__titel span{display:block;margin-top:3px;font-size:12.5px;color:var(--tinte-weich)}
.karte__werte{margin:0;padding:6px 10px 10px}
.karte__werte>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 8px;border-top:1px solid var(--linie);font-size:13.5px;transition:background-color .5s}
.karte__werte>div.ist-neu{animation:zeileAufleuchten 1.8s var(--aus)}
.karte__werte dt{color:var(--tinte-weich)}
.karte__werte dd{margin:0;font-weight:600}
.karte__werte>div.ist-aktiv{background:var(--gruen-50)}
.karte__werte>div.ist-aktiv dt{color:var(--tinte);font-weight:600}
.leer{color:var(--tinte-blass);font-weight:500}

/* Der laufende Schritt: dunkle Leiste über der Karte */
.stand__was{position:absolute;bottom:calc(100% + 18px);left:50%;transform:translateX(-50%);white-space:nowrap;margin:0;
  display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 20px 0 6px;
  background:var(--dunkel);color:#fff;font-size:15.5px;font-weight:600;transition:background-color .4s,color .4s}
.was__icon{flex:none;width:36px;height:36px;display:grid;place-items:center;background:var(--aktion);color:#fff}
.was__icon .icon{width:18px;height:18px}
.was__icon .zeichen{height:12px;width:auto}
.was__text{display:inline-block}
.stand__was.ist-neu .was__text,.stand__was.ist-neu .was__icon{animation:wasNeu .45s var(--aus)}
@keyframes wasNeu{from{opacity:0;transform:translateY(6px)}}
.stand__was.ist-leer{background:var(--karte);color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie-2)}
.stand__was.ist-leer .was__icon{background:var(--flaeche-2)}

/* Schmal: alle vier Beteiligten in EINER Reihe über der Karte, ohne Linien — damit Beteiligte,
   laufender Schritt und Karte zusammen auf einen Bildschirm passen. Wer noch nicht beteiligt ist,
   steht blass da (statt unsichtbar), die Verb-Zeile unter dem Namen entfällt (die Leiste nennt es). */
@media (max-width:760px){
  .stand__buehne{aspect-ratio:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"bt vt fi kf" "mitte mitte mitte mitte";row-gap:16px;column-gap:4px;padding:4px 0}
  .stand__linien{display:none}
  .figur{position:static;transform:none;width:auto;gap:6px}
  .figur--bautraeger{grid-area:bt}.figur--vertrieb{grid-area:vt}.figur--finanzierer{grid-area:fi}.figur--kaeufer{grid-area:kf}
  .figur__kreis{width:50px;height:50px}
  .figur__kreis>.icon{width:21px;height:21px}
  .figur__haken{width:18px;height:18px;right:-6px;top:-6px}
  .figur__haken .icon{width:11px;height:11px}
  .figur b{font-size:13px}
  .figur__zeile{display:none}
  .stand__buehne .figur.ist-weg{opacity:.32;scale:1}   /* spezifischer: die allgemeine ist-weg-Regel steht weiter unten */
  .stand__mitte{grid-area:mitte;position:relative;left:auto;top:auto;transform:none;width:100%;max-width:360px;justify-self:center}
  .stand__was{position:static;transform:none;margin:0 0 12px;width:100%;max-width:100%;white-space:normal;height:auto;min-height:52px;
    padding:6px 16px 6px 6px;font-size:13.5px;line-height:1.3}
  .was__icon{width:32px;height:32px}
  .karte__marke{padding:9px 14px}
  .karte__bild{height:84px}
  .karte__titel b{font-size:20px}
  .karte__werte>div{padding:7px 8px;font-size:13px}
}
.stand-sek{overflow:hidden}

/* Zeitleiste: wo die Animation gerade steht — je Schritt ein Abschnitt, der sich füllt */
.stand__zeit{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:4px;width:min(560px,100%);margin:22px auto 0;padding:0;list-style:none}
.stand__zeit li{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:var(--tinte-weich);text-align:center;transition:color .4s}
.stand__zeit i{position:relative;height:4px;background:var(--linie-2);overflow:hidden}
.stand__zeit i::after{content:"";position:absolute;inset:0;width:0;background:var(--dunkel)}
.stand__zeit li.ist-fertig i::after{width:100%;background:var(--aktion)}
.stand__zeit li.ist-an{color:var(--tinte)}
.stand__zeit li.ist-an i::after{animation:zeitLauf var(--dauer,3800ms) linear forwards}
@keyframes zeitLauf{to{width:100%}}
.stand__zeit li.ist-fertig{color:var(--tinte-mitte)}
@media (max-width:760px){.stand__zeit{margin-top:14px;gap:4px}.stand__zeit li{font-size:0;gap:0}}   /* Handy: nur die Balken, den Schritt nennt die Leiste */

/* Wer (noch) nicht beteiligt ist, ist nicht zu sehen — und kommt mit einem kurzen Rahmen dazu */
.figur{transition:opacity .5s var(--aus),scale .5s var(--aus)}
.figur.ist-weg{opacity:0;scale:.85;pointer-events:none}
.stand__linie{transition:opacity .8s var(--aus)}
.stand__linie.ist-weg{opacity:0}
.figur.ist-dazu .figur__kreis{animation:dazu 1.2s var(--aus)}
@keyframes dazu{0%{box-shadow:inset 0 0 0 2px var(--aktion),0 0 0 0 rgba(24,122,82,.3)}100%{box-shadow:inset 0 0 0 2px var(--aktion),0 0 0 14px rgba(24,122,82,0)}}

/* Feste Maße für Szenen, die sich bewegen: Inhalt wechselt, die Größe nicht. */
@media (min-width:641px){.freigabe-vig{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}   /* darunter einspaltig (siehe max-width:640px) */
.einheiten{table-layout:fixed}
.einheiten td{overflow:hidden;text-overflow:ellipsis}
.einheiten th:nth-child(1){width:16%}.einheiten th:nth-child(2){width:22%}.einheiten th:nth-child(3){width:20%}.einheiten th:nth-child(4){width:42%}
.freigabe-vig .einheiten th:nth-child(1){width:24%}.freigabe-vig .einheiten th:nth-child(3){width:30%}.freigabe-vig .einheiten th:nth-child(4){width:46%}
@media (max-width:640px){
  .einheiten th:nth-child(1){width:24%}.einheiten th:nth-child(3){width:32%}.einheiten th:nth-child(4){width:44%}
}

/* Sicherheit & Datenschutz auf der Startseite: ein schlankes Band */
.sicher{display:grid;grid-template-columns:auto 1fr auto;gap:18px clamp(24px,4vw,56px);align-items:center;padding:26px clamp(22px,3vw,36px);
  background:var(--karte);color:var(--tinte);position:relative}
.sicher::before{content:none}
.sicher>*{position:relative}
.sicher__kopf{display:flex;align-items:center;gap:16px}
.sicher__siegel{flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--aktion);color:#fff}
.sicher__siegel .icon{width:26px;height:26px}
.sicher__zeile{font-size:14px;font-weight:600;color:var(--tinte-weich)}
.sicher__titel{margin-top:2px;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;color:var(--tinte)}
.sicher__punkte{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sicher__punkte li{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px 0 8px;
  background:var(--seite);font-size:14.5px;font-weight:600;white-space:nowrap}
.sicher__punkte li span{width:28px;height:28px;display:grid;place-items:center;background:var(--karte);color:var(--aktion)}
.sicher__punkte .icon{width:15px;height:15px}
.sicher__mehr{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--aktion-dunkel);white-space:nowrap}
.sicher__mehr .icon{width:17px;height:17px;transition:transform .3s var(--aus)}
.sicher__mehr:hover .icon{transform:translateX(3px)}
@media (max-width:1100px){
  .sicher{grid-template-columns:1fr auto}
  .sicher__punkte{grid-column:1/-1;grid-row:2;justify-content:flex-start}
}
@media (max-width:640px){
  .sicher{grid-template-columns:1fr}
  .sicher__punkte{grid-row:auto;display:grid;grid-template-columns:1fr;gap:8px}
  .sicher__punkte li{height:40px;font-size:14px}
}
.sicher-sek{padding-block:clamp(28px,4vw,52px)}
@media (min-width:1101px){.sicher__punkte{display:grid;grid-template-columns:repeat(2,auto);justify-content:center}}

/* Bemusterung: drei deckungsgleiche Raumbilder, das gewählte blendet ein */
.bem__boden{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--aus)}
.bem__boden:first-child{position:relative;height:100%}
.bem__boden.ist-an{opacity:1}
.bem__boden picture,.bem__boden img{display:block;width:100%;height:100%;object-fit:cover}

/* Sicherheit: kompaktes Siegel im Seitenkopf */
.siegel{width:100%;max-width:440px;margin-inline:auto;padding:26px 28px 14px;background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-karte)}
.siegel__kopf{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--linie)}
.siegel__icon{flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--aktion);color:#fff}
.siegel__icon .icon{width:26px;height:26px}
.siegel__kopf b{display:block;font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.siegel__kopf small{font-size:13px;color:var(--tinte-blass)}
.siegel__liste li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--linie);font-size:16px;font-weight:600}
.siegel__liste li:last-child{border-bottom:0}
.siegel__liste .icon{flex:none;width:26px;height:26px;padding:5px;background:var(--aktion-weich);color:var(--aktion-tinte);stroke-width:2.2}

/* ---------- Einsatzbereiche: Schwerpunkt Neubau, dazu Bestand und Eigennutzung ---------- */
.einsatz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kopfzeile + .einsatz{margin-top:calc(-1 * clamp(16px,3vw,40px))}
.einsatz li{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;background:var(--kalk-50);border:1px solid var(--kalk-200)}
.einsatz li.ist-schwerpunkt{background:var(--gruen-50);border-color:var(--gruen-100)}
.einsatz__icon{flex:none;width:40px;height:40px;display:grid;place-items:center;background:var(--kalk-0);border:1px solid var(--kalk-200);color:var(--gruen-700)}
.einsatz li.ist-schwerpunkt .einsatz__icon{background:var(--gruen-700);border-color:var(--gruen-700);color:#fff}
.einsatz__icon .icon{width:20px;height:20px}
.einsatz b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.einsatz__marke{font-family:var(--f-text);font-size:12px;font-weight:600;padding:3px 8px;background:var(--aktion);color:#fff}
.einsatz p{margin-top:5px;font-size:14.5px;line-height:1.55;color:var(--ink-600)}
@media (max-width:900px){
  .einsatz{grid-template-columns:1fr}
}

/* ---------- Schnittstelle ImmoScout24 (Makler & Vermittler) — bewusst ein schmales Band ---------- */
.portal-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px clamp(24px,4vw,52px);align-items:center;
  padding:24px clamp(22px,3vw,34px);background:var(--karte);box-shadow:var(--schatten-karte)}
.portal-band__marke{display:grid;place-items:center;min-width:150px;height:84px;padding:0 22px;background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie)}
.portal-band__marke img{width:auto;height:56px}
.portal-band__name{font-family:var(--f-display);font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--tinte)}
.portal-band__zeile{font-size:14px;font-weight:600;color:var(--tinte-weich)}
.portal-band__titel{margin-top:3px;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em}
.portal-band__text>p:last-child{margin-top:6px;max-width:62ch;font-size:15px;line-height:1.55;color:var(--tinte-weich)}
.portal-band__punkte{display:grid;gap:9px}
.portal-band__punkte li{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;color:var(--tinte-mitte);white-space:nowrap}
.portal-band__punkte .icon{flex:none;width:17px;height:17px;color:var(--aktion)}
@media (max-width:1080px){
  .portal-band{grid-template-columns:auto minmax(0,1fr)}
  .portal-band__punkte{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 22px}
}
@media (max-width:640px){
  .portal-band{grid-template-columns:1fr}
  .portal-band__marke{justify-self:start;height:80px}
  .portal-band__punkte{display:grid}
  .portal-band__punkte li{white-space:normal}
}

/* ---------- Nachträge 03.10.2026 (Flavio) ---------- */
/* Hero: ohne Wohnungsspiegel-Karte; „für Immobilien.“ bricht nicht zwischen den Wörtern um. */
.held__karte{display:none}
/* Zweite Zeile der Überschrift nur auf breiten Schirmen am Stück — der Wortlaut kommt aus dem
   Editor und kann lang sein („für den Immobilien-vertrieb.“); schmaler bricht er normal um. */
.held__titel{text-wrap:balance}
@media (min-width:1360px){.held__titel span{white-space:nowrap}}
/* Abschluss-Band: kein Streifen am linken Rand. */
.abschluss__raster{display:none}
/* Rollen-Figuren in „Ein Stand für alle“ dürfen rund sein (Personen, keine Flächen). */
.figur__kreis{border-radius:50%!important}
.figur__zeile{border-radius:99px!important}

/* ---------- Einstieg dunkel mit dem Nachtbild (Wunsch Flavio, 03.10.2026) ----------
   Ausnahme von „hell“: nur der Einstieg der Startseite. Sonst Werkbank: kantig, Manrope,
   Grün als Aktion, kein Gold, keine Versal-Sperrung. */
.held--nacht{background:#0E1612;color:#fff;isolation:isolate}
.held--nacht .held__innen{display:block;min-height:min(calc(100svh - var(--kopf-h)),820px);max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.held--nacht .held__text{max-width:780px;padding:clamp(72px,9vw,140px) 0 clamp(80px,10vw,150px)}
.held__nachtbild{position:absolute;inset:0;z-index:-2}
.held__nachtbild picture,.held__nachtbild img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.held--nacht .held__schleier{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,22,18,.9) 0%,rgba(14,22,18,.74) 34%,rgba(14,22,18,.2) 66%,rgba(14,22,18,.04) 100%),
             linear-gradient(0deg,rgba(14,22,18,.7) 0%,rgba(14,22,18,0) 32%)}
.held--nacht .held__zeile{color:rgba(255,255,255,.78)}
.held--nacht .held__titel{color:#fff}
.held--nacht .held__titel span{color:#6FD3A2}
.held--nacht .held__lead{color:rgba(243,245,241,.86)}
.held--nacht .held__lead .bw{color:#fff}
.held--nacht .held__rollen{border-top-color:rgba(255,255,255,.16);color:rgba(243,245,241,.8)}
.held--nacht .held__rollen .icon{color:#6FD3A2}
/* Zweitknopf auf dunklem Grund: weiß umrandet statt dunkel gefüllt */
.held--nacht .held__knoepfe .knopf--hell{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.held--nacht .held__knoepfe .knopf--hell:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px #fff}
@media (prefers-reduced-motion:no-preference){
  .held__nachtbild img{animation:heranfahren 18s cubic-bezier(.2,.7,.2,1) both}
  @keyframes heranfahren{from{transform:scale(1.06)}to{transform:scale(1)}}
}
@media (max-width:900px){
  .held--nacht .held__innen{min-height:0}
  .held--nacht .held__schleier{background:linear-gradient(0deg,rgba(14,22,18,.92) 0%,rgba(14,22,18,.72) 55%,rgba(14,22,18,.45) 100%)}
  .held__nachtbild picture,.held__nachtbild img{object-position:70% 50%}
}

/* ---------- Mitteilungen (08.10.2026): Ausschnitte für die Funktionsseite ---------- */
.mt-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mt-zahlen>div{padding:10px 12px;background:var(--flaeche-2)}
.mt-zahlen small{display:block;font-size:12px;color:var(--tinte-blass)}
.mt-zahlen b{display:block;font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mt-zahlen--klein{margin-top:12px}
.mt-zahlen--klein>div{background:var(--karte);padding:8px 10px}
.mt-zahlen--klein b{font-size:16px}
.mt-balken{display:block;height:4px;margin-top:6px;background:var(--linie-2)}
.mt-balken i{display:block;height:100%;background:var(--aktion)}

.mt-bau{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start}
.mt-bau__seite ul{display:flex;flex-direction:column;gap:6px}
.mt-bau__seite li{display:flex;align-items:center;gap:9px;padding:9px 10px;background:var(--flaeche-2);font-size:13px;font-weight:600}
.mt-bau__seite li .icon{width:15px;height:15px;color:var(--tinte-blass)}
.mt-bau__seite li.ist-an{background:var(--gruen-50);box-shadow:inset 0 0 0 1.5px var(--aktion)}
.mt-bau__seite li.ist-an .icon{color:var(--aktion)}
.mt-bau__mail{padding:14px;background:var(--flaeche-2)}
.mt-brief{padding:16px;background:var(--karte);box-shadow:0 1px 3px rgba(22,32,27,.10);font-size:13px;color:var(--tinte-mitte)}
.mt-brief>b{display:block;margin:4px 0 6px;font-family:var(--f-display);font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--tinte)}
.mt-brief__anrede{margin-top:12px}
.mt-termin{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-top:12px;padding:10px 12px;background:var(--gruen-50)}
.mt-termin small{display:block;font-size:12px;color:var(--tinte-blass)}
.mt-termin b{font-size:15px;font-weight:700;color:var(--tinte)}
.mt-termin span{font-size:12.5px;color:var(--tinte-weich)}
.mt-brief__knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

.mt-anlass ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.mt-anlass ul:last-child{margin-bottom:0}
.mt-anlass li{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--flaeche-2);font-size:13px;font-weight:600;line-height:1.3}
.mt-anlass li span{display:grid;place-items:center;width:34px;height:34px;background:var(--karte);color:var(--aktion)}
.mt-anlass li .icon{width:18px;height:18px}
.mt-anlass li.ist-an{background:var(--gruen-50);box-shadow:inset 0 0 0 1.5px var(--aktion)}
.mt-kreise ul{display:flex;flex-direction:column;gap:6px}
.mt-kreise li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:var(--flaeche-2);font-size:13.5px;font-weight:600}
.mt-kreise li i{display:grid;place-items:center;width:16px;height:16px;background:var(--karte);box-shadow:inset 0 0 0 1.5px var(--linie-3);color:#fff}
.mt-kreise li i .icon{width:11px;height:11px;stroke-width:3}
.mt-kreise li.ist-an{background:var(--gruen-50)}
.mt-kreise li.ist-an i{background:var(--aktion);box-shadow:none}
.mt-kreise li small{display:block;font-size:12px;font-weight:400;color:var(--tinte-blass)}
.mt-kreise li b{font-variant-numeric:tabular-nums;color:var(--tinte-weich)}
.mt-kreise__summe{margin-top:12px;padding-top:10px;border-top:1px solid var(--linie-2);font-size:13px;color:var(--tinte-weich)}
.mt-kreise__summe b{color:var(--tinte)}

.mt-anm{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:14px;align-items:start}
.mt-anm__form{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;background:var(--flaeche-2)}
.mt-anm__form>b{font-family:var(--f-display);font-size:16px;font-weight:700;letter-spacing:-.02em}
.mt-feld{align-self:stretch;padding:9px 11px;background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie-2);font-size:13px;color:var(--tinte-blass)}
.mt-feld--voll{color:var(--tinte)}
.mt-haken{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tinte-mitte)}
.mt-haken i{display:grid;place-items:center;flex:none;width:16px;height:16px;background:var(--aktion);color:#fff}
.mt-haken i .icon{width:11px;height:11px;stroke-width:3}
.mt-anm__qr{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.mt-anm__qr small{font-size:12px;line-height:1.35;color:var(--tinte-blass)}
.mt-qr{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;width:108px;height:108px;padding:8px;background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie-2)}
.mt-qr i{background:transparent}
.mt-qr i.an{background:var(--tinte)}
.mt-anm__fuss{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--linie-2);font-size:12.5px;color:var(--tinte-weich)}
.mt-anm__fuss .icon{width:15px;height:15px;color:var(--aktion);flex:none}

.mt-aus__termin{margin-top:14px;padding:12px 14px;background:var(--flaeche-2)}
.mt-aus__stand{font-size:13.5px;color:var(--tinte-mitte)}
.mt-aus__stand b{color:var(--tinte);font-variant-numeric:tabular-nums}
.mt-aus__stand span{color:var(--tinte-blass)}
.mt-aus__liste{display:flex;flex-direction:column;margin-top:8px}
.mt-aus__liste li{display:grid;grid-template-columns:8px 1fr;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--linie-2);font-size:13px}
.mt-aus__liste li i{width:8px;height:8px;border-radius:50%;background:var(--linie-3)}
.mt-aus__liste li i.ist-ja{background:var(--aktion)}
.mt-aus__liste li b{font-weight:600}
.mt-aus__liste li small{margin-left:8px;color:var(--tinte-blass)}
@media (max-width:640px){
  .mt-bau{grid-template-columns:1fr}
  .mt-bau__seite ul{flex-direction:row;flex-wrap:wrap}
  .mt-anm{grid-template-columns:1fr}
  .mt-anm__qr{flex-direction:row;text-align:left}
  .mt-zahlen b{font-size:17px}
}


/* ---------- Zusatzmodul Provisionen: Abschnitt auf Vertriebsnetz und Kachel unter Funktionen ---------- */
#provisionen{scroll-margin-top:90px}
.pv-szene{--pv-t:9s;display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:center}
.pv-seite{display:grid;gap:7px;min-width:0}
.pv-name{font-size:12.5px;font-weight:650;color:var(--tinte-mitte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-blatt{display:grid;grid-template-columns:14px minmax(0,1fr);background:var(--karte);box-shadow:var(--schatten-karte);animation:pv-auf var(--pv-t) ease-in-out infinite both}
.pv-rand{border-right:1px dashed var(--linie-3);background-image:radial-gradient(circle at center,var(--seite) 0 2.5px,rgba(22,32,27,.2) 2.5px 3.5px,transparent 4px);background-size:14px 18px;background-repeat:repeat-y}
.pv-seite--r .pv-blatt{grid-template-columns:minmax(0,1fr) 14px}
.pv-seite--r .pv-rand{order:1;border-right:0;border-left:1px dashed var(--linie-3)}
.pv-in{padding:11px 12px 10px;min-width:0}
.pv-ri{display:block;font-size:13px;font-weight:700;padding-bottom:7px;border-bottom:1px solid var(--tinte)}
.pv-zeile{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:12.5px;color:var(--tinte)}
.pv-in .pv-zeile{margin-top:9px}
.pv-zeile b{font-weight:650;white-space:nowrap}
.pv-zeile em{font-style:normal;font-weight:700;white-space:nowrap}
.pv-zeile em.ist-offen,.pv-offen{color:#7A4B12}
.pv-pkt{flex:1;min-width:12px;border-bottom:2px dotted #A8A698;transform:translateY(-3px)}
.pv-platz{display:grid;justify-items:start;align-items:center;min-height:26px;margin-top:6px}
.pv-platz>*{grid-area:1/1}
.pv-knopf{background:var(--aktion);color:#fff;font-size:11.5px;font-weight:600;padding:4px 8px;white-space:nowrap}
.pv-offen{font-size:12px;font-weight:600}
.pv-stempel{border:2px solid var(--aktion-dunkel);color:var(--aktion-dunkel);font-size:11.5px;font-weight:800;padding:2px 7px;white-space:nowrap;opacity:.92}
.pv-a1{animation:pv-a1 var(--pv-t) linear infinite both}
.pv-a2{animation:pv-a2 var(--pv-t) cubic-bezier(.2,.9,.3,1.25) infinite both}
.pv-a3{animation:pv-a3 var(--pv-t) linear infinite both}
.pv-a4{animation:pv-a4 var(--pv-t) cubic-bezier(.2,.9,.3,1.25) infinite both}
.pv-weg{position:relative;display:block;height:0;margin-top:26px;border-top:2px dashed rgba(24,122,82,.55)}
.pv-weg i{position:absolute;top:-4.5px;left:0;width:7px;height:7px;border-radius:50%;background:var(--aktion);animation:pv-spur var(--pv-t) linear infinite both}
@keyframes pv-auf{0%{opacity:0;translate:0 6px}5%,96%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
@keyframes pv-a1{0%,32%{opacity:1}35%,100%{opacity:0}}
@keyframes pv-a3{0%,50%{opacity:1}53%,100%{opacity:0}}
@keyframes pv-a2{0%,33%{opacity:0;scale:1.9}37%{opacity:1;scale:.96}40%,100%{opacity:.92;scale:1}}
@keyframes pv-a4{0%,51%{opacity:0;scale:1.9}55%{opacity:1;scale:.96}58%,100%{opacity:.92;scale:1}}
@keyframes pv-spur{0%,37%{left:0;opacity:0}39%{left:0;opacity:1}50%{left:calc(100% - 7px);opacity:1}52%,100%{left:calc(100% - 7px);opacity:0}}
.k-prov{display:grid;gap:10px}
.k-prov__z{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 12px;background:var(--flaeche-2)}
.k-prov .pv-zeile{font-size:13.5px}
.k-prov__su{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--tinte-mitte)}
.k-prov__su b{font-weight:700;color:var(--tinte)}
.k-prov__su .ist-offen b{color:#7A4B12}
@media (max-width:640px){
  .pv-szene{grid-template-columns:minmax(0,1fr)}
  .pv-weg{justify-self:center;width:0;height:20px;margin:6px 0;border-top:0;border-left:2px dashed rgba(24,122,82,.55)}
  .pv-weg i{display:none}
  .k-prov__z{grid-template-columns:minmax(0,1fr)}
  .k-prov__z>span{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .pv-blatt,.pv-a1,.pv-a2,.pv-a3,.pv-a4,.pv-weg i{animation:none}
  .pv-a1,.pv-a3,.pv-weg i{opacity:0}
}