/* ==========================================================================
   immobricks.de — Marketing-Website (Redesign September 2026)

   Bildsprache „Bauplan": feine Rasterlinien auf dunklen Flächen, Maßketten als Gliederung, und
   der Ziegel aus dem Markenzeichen als Grundform — eine Einheit einer Wohnanlage IST auf dieser
   Seite ein Ziegel. Farben und Schriften sind die der App (app/assets/styles.css): Waldgrün,
   Bronze/Gold, Kalkweiß; Space Grotesk für Überschriften und Zahlen, Inter für Text. Die
   Produkt-Mockups verwenden bewusst dieselben Werte wie die Software selbst.

   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{
  --wald-950:#0D1A14; --wald-900:#14261F; --wald-800:#183A2C; --wald-700:#1F4636;
  --gruen-700:#1C5A40; --gruen-600:#2A7A57; --gruen-500:#2C7A55; --gruen-100:#E4EFE7; --gruen-50:#F1F6F2;
  --gold-500:#CBA76A; --gold-600:#B0894A; --gold-700:#8C6A33; --gold-200:#E6D4AF; --gold-100:#F3EAD8;
  --kalk-0:#FFFFFF; --kalk-50:#F7F8F6; --kalk-100:#EEF0ED; --kalk-200:#E4E8E3; --kalk-300:#CFD6CF;
  --ink-900:#18211D; --ink-700:#3E4943; --ink-600:#5A655E; --ink-400:#8A938C;
  --hell-1:#F3F5F1; --hell-2:#B7C3BB; --hell-3:#7F9086;
  --rot:#C2483A;
  --linie-hell:rgba(255,255,255,.12); --linie-hell-2:rgba(255,255,255,.07);

  --f-display:'Space Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --max:1240px; --rand:clamp(20px,4.2vw,48px);
  --sek:clamp(88px,11vw,164px);
  --r-xs:6px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px;

  --schatten-1:0 1px 2px rgba(13,26,20,.06),0 1px 3px rgba(13,26,20,.05);
  --schatten-2:0 12px 32px -12px rgba(13,26,20,.22),0 2px 6px rgba(13,26,20,.06);
  --schatten-3:0 40px 80px -28px rgba(13,26,20,.45),0 10px 24px -8px rgba(13,26,20,.18);

  --aus:cubic-bezier(.22,1,.36,1);
  --feder:cubic-bezier(.34,1.56,.64,1);
  --dauer:.7s;
}

/* ---------- 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(--kalk-50);color:var(--ink-900);font-family:var(--f-text);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01";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}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-200);color:var(--ink-900)}
.sprung{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold-500);color:var(--ink-900);
  padding:10px 16px;border-radius:var(--r-sm);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:800}

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

/* ---------- 3 Schrift ---------- */
.t-riesig{font-size:clamp(44px,5.7vw,90px);line-height:.95;letter-spacing:-.045em;font-weight:600}
.t-gross{font-size:clamp(34px,4.5vw,64px);line-height:1.02;letter-spacing:-.038em}
.t-mittel{font-size:clamp(24px,2.3vw,32px);line-height:1.12;letter-spacing:-.03em}
.t-klein{font-size:clamp(19px,1.5vw,22px);line-height:1.25;letter-spacing:-.02em}
.lead{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--ink-600);max-width:60ch}
.text{color:var(--ink-600);max-width:62ch}
.gold{color:var(--gold-600)}
.zahl{font-family:var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* Zeile über Überschriften: Ziegel + Kapitälchen */
.zeile{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-700);margin-bottom:22px}
.zeile__ziegel{width:18px;height:9px;border-radius:2px;background:var(--gold-500);flex: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(--kalk-100)}
.sek--weiss{background:var(--kalk-0)}
.sek--dunkel{background:var(--wald-900);color:var(--hell-1)}
.sek--dunkel .lead,.sek--dunkel .text{color:var(--hell-2)}
.sek--dunkel .zeile{color:var(--gold-500)}
.sek--eng{padding-block:calc(var(--sek)*.6)}

/* Bauplan-Raster: feine Linien alle 64 px, zur Mitte hin ausgeblendet */
.raster::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--linie-hell-2) 1px,transparent 1px),linear-gradient(to bottom,var(--linie-hell-2) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%)}
.raster--hell::before{background-image:linear-gradient(to right,rgba(24,33,29,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(24,33,29,.05) 1px,transparent 1px)}

.kopfzeile{max-width:780px;margin-bottom:clamp(44px,6vw,80px)}
.kopfzeile--mitte{margin-inline:auto;text-align:center}
.kopfzeile--mitte .zeile{justify-content:center}
.kopfzeile--mitte .lead{margin-inline:auto}
.kopfzeile .lead{margin-top:22px}

/* ---------- 5 Bausteine ---------- */
.knopf{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--r-md);
  font-size:15px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transition:background-color .2s,color .2s,box-shadow .25s,transform .25s var(--aus),border-color .2s}
.knopf .icon{width:18px;height:18px;transition:transform .3s var(--aus)}
.knopf:hover .knopf__pfeil{transform:translateX(3px)}
.knopf:active{transform:translateY(1px)}
.knopf--gruen{background:var(--gruen-700);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 16px -8px rgba(28,90,64,.7)}
.knopf--gruen:hover{background:#164A34}
.knopf--gold{background:var(--gold-500);color:var(--ink-900);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -12px rgba(203,167,106,.9)}
.knopf--gold:hover{background:#D6B67F}
.knopf--ghost{border:1px solid var(--kalk-300);color:var(--ink-900);background:transparent}
.knopf--ghost:hover{border-color:var(--ink-400);background:rgba(24,33,29,.03)}
.knopf--hell{border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.04)}
.knopf--hell:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

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

/* Maßkette: Linie mit Anschlägen, Beschriftung mittig — wie in der Bauzeichnung */
.mass{position:relative;display:flex;align-items:center;justify-content:center;height:22px;color:var(--gold-600)}
.mass__linie{position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.55;transform-origin:left;
  transform:scaleX(0);transition:transform 1.4s var(--aus)}
.mass__linie::before,.mass__linie::after{content:"";position:absolute;top:-6px;width:1px;height:13px;background:currentColor}
.mass__linie::before{left:0}.mass__linie::after{right:0}
.mass__text{position:relative;background:var(--mass-grund,var(--kalk-50));padding:0 14px;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .6s .6s}
.ist-sichtbar .mass__linie,.mass.ist-sichtbar .mass__linie{transform:scaleX(1)}
.ist-sichtbar .mass__text,.mass.ist-sichtbar .mass__text{opacity:1}

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

/* ---------- 6 Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .35s,box-shadow .35s,color .35s,backdrop-filter .35s;color:var(--ink-900)}
.kopf__innen{display:flex;align-items:center;gap:28px;height:76px}
.kopf__logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;flex:none}
.kopf__zeichen{height:21px}
.kopf__nav{display:flex;align-items:center;gap:4px;margin-left:12px}
.kopf__link,.menue__knopf{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px;border-radius:var(--r-sm);
  font-size:15px;font-weight:500;color:inherit;opacity:.86;transition:opacity .2s,background-color .2s}
.kopf__link:hover,.menue__knopf:hover,.menue__knopf[aria-expanded="true"],.kopf__link.ist-aktiv{opacity:1;background:rgba(24,33,29,.05)}
.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:40px;display:inline-flex;align-items:center;opacity:.86;border-radius:var(--r-sm)}
.kopf__login:hover{opacity:1;background:rgba(24,33,29,.05)}
.kopf__aktionen .knopf{height:42px;padding:0 18px;font-size:14.5px}
.kopf__burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:var(--r-sm);align-items:center;justify-content:center}
.kopf__burger .icon{width:24px;height:24px}

/* Hell unterlegt, sobald gescrollt (oder auf hellen Seiten von Anfang an) */
.kopf.ist-fest{background:rgba(247,248,246,.86);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
  box-shadow:0 1px 0 rgba(24,33,29,.07)}
/* Auf dunklem Seitenanfang: durchsichtig, helle Schrift */
.kopf--dunkel:not(.ist-fest):not(.ist-offen){color:#fff}
.kopf--dunkel:not(.ist-fest):not(.ist-offen) .kopf__link:hover,
.kopf--dunkel:not(.ist-fest):not(.ist-offen) .menue__knopf:hover,
.kopf--dunkel:not(.ist-fest):not(.ist-offen) .menue__knopf[aria-expanded="true"],
.kopf--dunkel:not(.ist-fest):not(.ist-offen) .kopf__login:hover{background:rgba(255,255,255,.1)}
.kopf--dunkel:not(.ist-fest):not(.ist-offen) .kopf__zeichen{--z-mitte:#fff;--z-unten:#fff}
.kopf--dunkel:not(.ist-fest):not(.ist-offen) .knopf--gruen{background:var(--gold-500);color:var(--ink-900);box-shadow:none}

/* Menü-Panels */
.menue{position:relative}
.menue__panel{position:absolute;top:calc(100% + 14px);left:-16px;background:var(--kalk-0);color:var(--ink-900);border-radius:var(--r-lg);
  box-shadow:var(--schatten-3);border:1px solid var(--kalk-200);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);
  transform-origin:top left;transition:opacity .22s,transform .3s var(--aus),visibility 0s .3s}
.menue.ist-offen .menue__panel{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .3s var(--aus)}
.menue__panel::before{content:"";position:absolute;inset:-14px 0 auto;height:14px}
.menue__panel--funktionen{width:min(860px,calc(100vw - 48px))}
.menue__gruppen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:22px}
.menue__gruppentitel{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);padding:4px 12px 10px}
.menue__eintrag{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:var(--r-md);transition:background-color .2s}
.menue__eintrag:hover,.menue__eintrag.ist-aktiv{background:var(--kalk-100)}
.menue__eintrag b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.menue__eintrag small{display:block;font-size:13px;color:var(--ink-600);line-height:1.4;margin-top:2px}
.menue__icon{flex:none;width:36px;height:36px;border-radius:10px;background:var(--gruen-50);color:var(--gruen-700);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(28,90,64,.1)}
.menue__icon .icon{width:19px;height:19px}
.menue__fuss{display:flex;justify-content:space-between;gap:16px;padding:14px 34px;border-top:1px solid var(--kalk-200);background:var(--kalk-50);
  border-radius:0 0 var(--r-lg) var(--r-lg);font-size:14px;font-weight:500}
.menue__fuss a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-700)}
.menue__fuss a:hover{color:var(--gruen-700)}
.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-radius:var(--r-md);border:1px solid var(--kalk-200);
  transition:border-color .2s,background-color .2s,transform .3s var(--aus)}
.menue__loesung:hover,.menue__loesung.ist-aktiv{border-color:var(--gold-200);background:var(--gold-100)}
.menue__loesung b{font-family:var(--f-display);font-size:18px;font-weight:600;letter-spacing:-.02em;margin-top:6px}
.menue__loesung small{font-size:13.5px;color:var(--ink-600);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(--gruen-700)}
.menue__mehr .icon{width:15px;height:15px}

/* Mobil */
.mobilnav{position:fixed;inset:76px 0 0;background:var(--kalk-50);overflow-y:auto;border-top:1px solid var(--kalk-200)}
.mobilnav__innen{padding:12px var(--rand) 40px;display:flex;flex-direction:column}
.mobilnav__titel{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);padding:22px 0 8px}
.mobilnav a:not(.knopf){display:flex;align-items:center;gap:14px;padding:12px 0;font-size:17px;font-weight:500;border-bottom:1px solid var(--kalk-200)}
.mobilnav a:not(.knopf) .icon{color:var(--gruen-700)}
.mobilnav__knoepfe{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.mobilnav__knoepfe .knopf{justify-content:center}
.kopf.ist-offen{background:var(--kalk-50);color:var(--ink-900)}

/* ---------- 7 Fuß ---------- */
.fuss{background:var(--wald-950);color:var(--hell-2);padding:88px 0 36px;font-size:14.5px}
.fuss__oben{display:grid;grid-template-columns:1.1fr 2fr;gap:64px;padding-bottom:64px;border-bottom:1px solid var(--linie-hell-2)}
.fuss__logo{display:inline-flex;align-items:center;gap:10px;font-size:26px;color:#fff;--z-mitte:#fff;--z-unten:#fff}
.fuss__logo .zeichen{height:23px}
.fuss__marke p{margin:18px 0 28px;max-width:34ch;line-height:1.55}
.fuss__spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.fuss__titel{color:#fff;font-weight:600;margin-bottom:14px;font-size:14px}
.fuss__spalten a{display:block;padding:5px 0;transition:color .2s}
.fuss__spalten a:hover,.fuss__recht a:hover{color:#fff}
.fuss__unten{display:flex;justify-content:space-between;gap:20px;padding-top:28px;font-size:13.5px;color:var(--hell-3)}
.fuss__recht{display:flex;gap:22px}

/* ---------- 8 Abschluss (Demo-Aufruf am Seitenende) ---------- */
.abschluss{position:relative;background:var(--wald-900);color:#fff;padding-block:clamp(96px,12vw,168px);overflow:hidden;isolation:isolate}
.abschluss__raster{position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(to right,var(--linie-hell-2) 1px,transparent 1px),linear-gradient(to bottom,var(--linie-hell-2) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 72%)}
.abschluss::after{content:"";position:absolute;z-index:-1;width:900px;height:900px;left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(203,167,106,.16),transparent 60%)}
.abschluss__innen{text-align:center;display:flex;flex-direction:column;align-items:center}
.abschluss__zeichen{height:38px;margin-bottom:34px}
.abschluss__titel{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.04em;max-width:17ch}
.abschluss__text{color:var(--hell-2);font-size:clamp(17px,1.4vw,19px);max-width:52ch;margin:24px auto 38px}
.abschluss__knoepfe{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ---------- 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. */
.js [data-zeige]:not(.mass){opacity:0;transform:translateY(28px);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:.08s}
.js [data-zeige][data-verzug="2"]{transition-delay:.16s}
.js [data-zeige][data-verzug="3"]{transition-delay:.24s}
.js [data-zeige][data-verzug="4"]{transition-delay:.32s}
.js [data-zeige][data-verzug="5"]{transition-delay:.4s}

@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 — gleiche Werte wie die App (Kalk-Fläche, weiße Karten, Tannengrün)
   ========================================================================== */
.fenster{background:var(--kalk-0);border-radius:var(--r-lg);border:1px solid rgba(24,33,29,.08);box-shadow:var(--schatten-3);overflow:hidden;
  color:var(--ink-900);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 16px;border-bottom:1px solid var(--kalk-200);
  background:linear-gradient(var(--kalk-50),var(--kalk-0))}
.fenster__pfad{font-size:13px;color:var(--ink-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fenster__pfad i{font-style:normal;color:var(--kalk-300);margin:0 6px}
.fenster__pfad b{color:var(--ink-900);font-weight:600}
.fenster__aktion{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--gruen-700);white-space:nowrap}
.fenster__aktion .icon{width:15px;height:15px}
.fenster__koerper{padding:18px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen-600)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--gruen-600);box-shadow:0 0 0 0 rgba(42,122,87,.5);animation:puls 2s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(42,122,87,.45)}70%{box-shadow:0 0 0 8px rgba(42,122,87,0)}100%{box-shadow:0 0 0 0 rgba(42,122,87,0)}}

.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;background:var(--kalk-100);color:var(--ink-700);
  font-size:12px;font-weight:600;white-space:nowrap}
.chip .icon{width:14px;height:14px}
.chip--gruen{background:var(--gruen-100);color:var(--gruen-700)}
.chip--gold{background:var(--gold-100);color:var(--gold-700)}
.chip--dunkel{background:rgba(20,38,31,.78);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.klein-titel{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);margin-bottom:10px}

.knopf-mini{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:9px;background:var(--gruen-700);color:#fff;
  font-size:13px;font-weight:600;transition:background-color .3s,transform .2s,opacity .3s,color .3s}
.knopf-mini .icon{width:16px;height:16px}
.knopf-mini.ist-gedrueckt{transform:scale(.95)}
.knopf-mini--aus{background:var(--kalk-200);color:var(--ink-400)}
.knopf-mini--gruen{background:var(--gruen-700)}

/* Vermarktungsstand — dieselben fünf Zustände und Farben wie die Wohnanlage in der App (shares.css). */
.vst{background:var(--kalk-50);border:1px solid var(--kalk-200);border-radius:var(--r-md);padding:13px 15px 12px}
.vst__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;font-size:12px;color:var(--ink-600)}
.vst__kopf>span:first-child{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400)}
.vst__kopf>span:last-child{white-space:nowrap}
.vst__kopf b{font-family:var(--f-display);font-size:17px;font-weight:600;color:var(--ink-900);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vst__balken{display:flex;gap:2px;height:12px;border-radius:99px;overflow:hidden}
.vst__seg{min-width:4px;transition:flex-grow .9s var(--aus)}
.vst__seg--verkauft,.vst__punkt--verkauft{background:#4A554E}
.vst__seg--reserviert,.vst__punkt--reserviert{background:var(--gold-500)}
.vst__seg--gespraech,.vst__punkt--gespraech{background:repeating-linear-gradient(135deg,var(--gruen-600) 0 4px,rgba(42,122,87,.35) 4px 8px)}
.vst__seg--zurueckgestellt,.vst__punkt--zurueckgestellt{background:#A7B0AA}
.vst__seg--frei,.vst__punkt--frei{background:var(--kalk-200);box-shadow:inset 0 0 0 1px var(--kalk-300)}
.vst__legende{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--ink-600)}
.vst__legende span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vst__legende b{font-weight:600;color:var(--ink-900);font-variant-numeric:tabular-nums}
.vst__punkt{display:inline-block;flex:none;width:10px;height:10px;border-radius:3px;transition:background .5s}

/* Einheitenliste mit Status wie in der App */
.einheiten{width:100%;border-collapse:collapse;margin-top:12px;font-size:12.5px}
.einheiten th{padding:0 10px 7px;text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400);border-bottom:1px solid var(--kalk-200)}
.einheiten td{padding:9px 10px;border-bottom:1px solid var(--kalk-100);color:var(--ink-700);white-space:nowrap}
.einheiten tr:last-child td{border-bottom:0}
.einheiten td b{color:var(--ink-900);font-weight:600}
.einheiten .zahl{font-variant-numeric:tabular-nums}
.einheiten th:nth-child(3),.einheiten td:nth-child(3){text-align:right}
.einheiten tr.ist-neu td{animation:zeileAufleuchten 1.6s var(--aus)}
@keyframes zeileAufleuchten{0%,25%{background:var(--gold-100)}}
.st{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:12px;color:var(--ink-900)}
.st small{font-weight:500;font-size:12px;color:var(--ink-600)}
.st--reserviert{color:var(--gold-700)}
.st--gespraech{color:var(--gruen-700)}
.st--frei{color:var(--ink-600);font-weight:500}

/* Aktivität der Partner */
.akt-kopf{display:flex;flex-direction:column;gap:9px}
.akt-kopf b{font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:-.02em}
.akt-filter{display:flex;gap:4px}
.akt-filter i{font-style:normal;font-size:11px;font-weight:600;padding:3px 8px;white-space:nowrap;border-radius:99px;background:var(--kalk-0);border:1px solid var(--kalk-200);color:var(--ink-600)}
.akt-filter i.ist-an{background:var(--wald-900);border-color:var(--wald-900);color:#fff}
.akt-tag{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400);margin-top:4px}
.akt-liste{display:flex;flex-direction:column;gap:8px}
.akt{position:relative;flex:none;padding:9px 12px 9px 28px;border-radius:10px;background:var(--kalk-0);border:1px solid var(--kalk-200);font-size:12.5px;line-height:1.45;
  transition:background-color .5s,border-color .5s}
.akt::before{content:"";position:absolute;left:11px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--ink-400)}
.akt--anfrage::before{background:var(--gold-500)}
.akt--gespraech::before{background:var(--gruen-600)}
.akt--verkauf::before{background:#4A554E}
.akt--aenderung::before{background:var(--kalk-300)}
.akt__text{color:var(--ink-700)}
.akt__text b{color:var(--ink-900);font-weight:600}
.akt__fuss{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:5px;font-size:11px;color:var(--ink-400);font-variant-numeric:tabular-nums}
.akt--aktion{border-color:var(--gold-200);background:#FFFCF6}
.akt.ist-erledigt{background:var(--gruen-50);border-color:rgba(28,90,64,.18)}
.akt.ist-erledigt::before{background:var(--gruen-700)}
.akt.ist-neu{animation:hereinrutschen .6s var(--aus)}
@keyframes hereinrutschen{from{opacity:0;transform:translateY(-10px) scale(.97)}}

.meldung{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--r-md);background:var(--kalk-0);box-shadow:var(--schatten-2);
  border:1px solid var(--kalk-200);font-size:13px}
.meldung .icon{width:18px;height:18px;flex:none}
.meldung b{display:block;font-weight:600}
.meldung small{display:block;color:var(--ink-600);font-size:12px}
.meldung--gold .icon{color:var(--gold-600)}

.kpi{padding:12px 14px;border-radius:var(--r-md);background:var(--kalk-100)}
.kpi small{display:block;font-size:11.5px;color:var(--ink-600)}
.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:11px;color:var(--ink-400)}
.kpi--gold{background:var(--wald-900);color:#fff}
.kpi--gold small{color:var(--hell-2)}.kpi--gold i{color:var(--hell-3)}
.kpi--gold b{color:var(--gold-500)}

/* ==========================================================================
   11 Startseite
   ========================================================================== */
/* Einstieg */
.held{position:relative;min-height:min(100svh,940px);display:flex;align-items:center;color:#fff;background:var(--wald-950);overflow:hidden;isolation:isolate;
  padding:140px 0 220px}
.held__bild{position:absolute;inset:0;z-index:-2}
.held__bild picture,.held__bild img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.held__bild img{animation:heranfahren 18s var(--aus) both}
@keyframes heranfahren{from{transform:scale(1.08)}to{transform:scale(1)}}
.held__schleier{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(13,26,20,.92) 0%,rgba(13,26,20,.78) 32%,rgba(13,26,20,.25) 62%,rgba(13,26,20,.05) 100%),
             linear-gradient(0deg,rgba(13,26,20,.85) 0%,rgba(13,26,20,0) 34%)}
.held__innen{position:relative}
.held__text{max-width:800px}
.held__zeile{color:var(--gold-500)}
.held__titel span{color:var(--gold-500)}
.held__lead{margin-top:28px;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:rgba(243,245,241,.86);max-width:52ch}
.held__lead .bw{color:#fff}
.held__knoepfe{margin-top:38px}
.held__rollen{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:46px;font-size:14px;color:rgba(243,245,241,.7)}
.held__rollen li{display:inline-flex;align-items:center;gap:8px}
.held__rollen .icon{width:18px;height:18px;color:var(--gold-500)}
.js .held__text>*{opacity:0;transform:translateY(22px);animation:auftauchen .9s var(--aus) forwards}
.js .held__text>*:nth-child(2){animation-delay:.08s}.js .held__text>*:nth-child(3){animation-delay:.18s}
.js .held__text>*:nth-child(4){animation-delay:.28s}.js .held__text>*:nth-child(5){animation-delay:.38s}
@keyframes auftauchen{to{opacity:1;transform:none}}

/* Bühne: Produktfenster, das in den Einstieg hineinragt */
.buehnen-rahmen{position:relative;z-index:2;margin-top:-170px;padding-bottom:clamp(40px,6vw,80px);
  background:linear-gradient(transparent 170px,var(--kalk-100) 170px)}
.buehnen-rahmen__innen{max-width:1080px;margin-inline:auto}
.buehnen-rahmen__notiz{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;font-size:14px;color:var(--ink-600);text-align:center}
.buehnen-rahmen__notiz .icon{width:18px;height:18px;color:var(--gold-600);flex:none}
.buehne{display:grid;grid-template-columns:1fr 330px;gap:18px}
.buehne__haupt{min-width:0}
.buehne__titel{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.buehne__titel b{display:block;font-family:var(--f-display);font-size:19px;letter-spacing:-.02em}
.buehne__titel small{display:block;color:var(--ink-600);font-size:12.5px;margin-top:2px}
.buehne__seite{background:var(--kalk-50);border:1px solid var(--kalk-200);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:10px;
  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;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}

/* Sechs Stärken: Text und Szene im Wechsel */
.staerke{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:center;padding-block:clamp(48px,6vw,80px)}
.staerke+.staerke{border-top:1px solid var(--kalk-200)}
.staerke--gespiegelt{grid-template-columns:7fr 5fr}
.staerke--gespiegelt .staerke__text{order:2}
.staerke__text h3{margin-bottom:18px}
.staerke__text .text{font-size:17px}
.haken-liste{display:flex;flex-direction:column;gap:10px;margin:26px 0 30px}
.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(--gruen-600);flex:none;margin-top:2px}
.staerke__bild{position:relative}
.staerke__bild::before{content:"";position:absolute;inset:-8% -6%;z-index:0;border-radius:var(--r-2xl);
  background:radial-gradient(ellipse at 50% 50%,var(--kalk-100),transparent 70%)}
.staerke__bild>*{position:relative;z-index:1}

/* Vertriebsnetz-Szene */
.freigabe-vig{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;position:relative}
.freigabe-vig .einheiten th:nth-child(2),.freigabe-vig .einheiten td:nth-child(2){display:none}
.freigabe{display:flex;flex-direction:column;gap:8px}
.freigabe li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid var(--kalk-200);font-size:12.5px;font-weight:500}
.freigabe__av{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--kalk-100);font-weight:700;font-size:12px;color:var(--ink-600)}
.schalter{width:34px;height:20px;border-radius:99px;background:var(--kalk-300);position:relative;transition:background-color .35s}
.schalter i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .35s var(--feder)}
.schalter.ist-an{background:var(--gruen-600)}
.schalter.ist-an i{transform:translateX(14px)}
.freigabe-vig .meldung{margin-top:12px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--aus)}
.freigabe-vig .meldung.ist-da{opacity:1;transform:none}

/* Kalkulations-Szene */
.kalk__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.kalk__kopf b{display:block;font-family:var(--f-display);font-size:17px;letter-spacing:-.02em}
.kalk__kopf small{color:var(--ink-600);font-size:12.5px}
.kalk__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kalk__grafik{position:relative;margin-top:14px;padding:14px 14px 10px;border-radius:var(--r-md);border:1px solid var(--kalk-200)}
.kalk__grafik svg{width:100%;height:150px}
.kalk__gitter line{stroke:var(--kalk-200);stroke-width:1}
.kalk__linie{stroke-dasharray:700;stroke-dashoffset:0}
.kalk__etf{opacity:.9}
.kalk__achse{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-400);margin-top:4px}
.kalk__legende{position:absolute;top:12px;left:16px;display:flex;gap:14px;font-size:11.5px;color:var(--ink-600)}
.kalk__legende span{display:inline-flex;align-items:center;gap:6px}
.strich{display:inline-block;width:14px;height:3px;border-radius:2px}
.strich--gruen{background:var(--gruen-700)}
.strich--gold{background:repeating-linear-gradient(90deg,var(--gold-600) 0 4px,transparent 4px 7px)}
.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:aufploppen .5s 2s var(--feder) both;transform-origin:520px 20px}
.fenster--kalk.laeuft .kalk__chips .chip{animation:aufploppen .45s var(--feder) 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(.7)}}

/* Telefon mit Kundenportal */
.telefon-buehne{display:flex;justify-content:center;padding:24px 0;position:relative}
.telefon-buehne::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(203,167,106,.22),transparent 65%)}
.telefon{position:relative;width:300px;max-width:100%}
.telefon__rand{border-radius:44px;background:var(--wald-950);padding:10px;box-shadow:var(--schatten-3),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.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:88px;height:24px;border-radius:99px;background:#000}
.telefon__status{display:flex;gap:3px;align-items:flex-end}.telefon__status i{width:4px;height:9px;border-radius:1px;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;border-radius:10px;background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.88);font-size:12px}
.telefon__adresse .icon{width:13px;height:13px}
.telefon__bild{position:relative;border-radius:32px;background:var(--kalk-100);padding:16px 14px 18px;overflow:hidden;min-height:520px}
.kb-kopf{display:flex;justify-content:space-between;align-items:center}
.kb-marke{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.kb-marke i{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--gruen-700),var(--wald-900));box-shadow:inset 0 0 0 5px var(--gold-500)}
.kb-glocke{position:relative;color:var(--ink-700)}
.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(--rot);color:#fff;font-size:10px;display:grid;place-items:center}
.kb-gruss{margin:18px 2px 14px;font-size:15px;color:var(--ink-600);line-height:1.3}
.kb-gruss b{font-family:var(--f-display);font-size:22px;color:var(--ink-900);letter-spacing:-.02em}
.kb-karte{background:var(--kalk-0);border-radius:18px;overflow:hidden;box-shadow:var(--schatten-1)}
.kb-karte__bild{aspect-ratio:16/8;overflow:hidden}
.kb-karte__bild picture,.kb-karte__bild img{width:100%;height:100%;object-fit:cover}
.kb-karte__text{padding:12px 14px 4px}
.kb-karte__text small{font-size:11px;color:var(--ink-400);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.kb-karte__text b{display:block;font-family:var(--f-display);font-size:15px;letter-spacing:-.01em}
.kb-bau{padding:6px 14px}
.kb-bau__kopf{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-600);margin-bottom:6px}
.kb-bau__kopf b{color:var(--gruen-700);font-family:var(--f-display)}
.kb-balken{height:7px;border-radius:99px;background:var(--kalk-200);overflow:hidden}
.kb-balken i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gruen-700),var(--gruen-600));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(--ink-400)}
.kb-termine .icon{width:16px;height:16px;color:#fff;background:var(--gruen-600);border-radius:50%;padding:2px}
.kb-punkt{width:14px;height:14px;border-radius:50%;border:2px solid var(--kalk-300);margin-left:1px}
.kb-reiter{display:flex;gap:4px;margin-top:12px;padding:4px;border-radius:12px;background:var(--kalk-0);font-size:11px;font-weight:600;color:var(--ink-600)}
.kb-reiter span{flex:1;text-align:center;padding:7px 0;border-radius:8px}
.kb-reiter .ist-an{background:var(--wald-900);color:#fff}
.kb-toast{position:absolute;left:12px;right:12px;top:12px;display:flex;gap:10px;align-items:center;padding:12px;border-radius:14px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--schatten-2);font-size:12px;transform:translateY(-150%);transition:transform .6s var(--feder)}
.kb-toast .icon{width:20px;height:20px;color:var(--gold-600);flex:none}
.kb-toast b{display:block}.kb-toast small{color:var(--ink-600)}
.kb-toast.ist-da{transform:none}

/* Ankündigungs-Szene */
.ank{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
.ank__karte{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--kalk-200)}
.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(--ink-600);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;border-radius:10px;background:var(--kalk-100);font-size:12.5px}
.ank__zeile span:first-child{color:var(--ink-400)}
.ank__zeile b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ank__stand{padding:12px;border-radius:10px;border:1px solid var(--kalk-200);font-size:12.5px;color:var(--ink-600)}
.ank__stand b{font-family:var(--f-display);color:var(--ink-900);font-size:15px}
.leser{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-bottom:10px}
.leser__punkt{aspect-ratio:1;border-radius:50%;background:var(--kalk-200);transition:background-color .4s,transform .4s var(--feder)}
.leser__punkt.ist-gelesen{background:var(--gruen-600);transform:scale(1.08)}
.ank__versand .knopf-mini{align-self:flex-start}
.knopf-mini.ist-versendet{background:var(--gruen-100);color:var(--gruen-700)}

/* Bankmappe-Szene */
.schritte{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:16px}
.schritte li{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;color:var(--ink-400)}
.schritte i{height:5px;border-radius:99px;background:var(--kalk-200);transition:background-color .5s}
.schritte li.ist-fertig i{background:var(--gruen-600)}
.schritte li.ist-jetzt i{background:var(--gold-500)}
.schritte li.ist-jetzt,.schritte li.ist-fertig{color:var(--ink-900)}
.mappe__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mappe__kopf b{display:block;font-family:var(--f-display);font-size:16px;letter-spacing:-.02em}
.mappe__kopf small{font-size:12px;color:var(--ink-600)}
.mappe__stand{font-family:var(--f-display);font-size:14px;color:var(--ink-600);white-space:nowrap}
.mappe__stand b{display:inline;font-size:22px;color:var(--ink-900)}
.mappe__balken{height:6px;border-radius:99px;background:var(--kalk-200);margin:10px 0 12px;overflow:hidden}
.mappe__balken i{display:block;height:100%;background:var(--gold-500);border-radius:99px;transition:width .8s var(--aus),background-color .6s}
.mappe__balken.ist-voll i{background:var(--gruen-600)}
.mappe__liste{display:flex;flex-direction:column}
.mappe__liste li{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:8px 2px;border-bottom:1px solid var(--kalk-100);font-size:13px}
.mappe__liste small{font-size:11.5px;color:var(--ink-400)}
.mappe__name em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--gold-700);background:var(--gold-100);border-radius:99px;padding:1px 7px;margin-left:8px}
.ampel{width:12px;height:12px;border-radius:50%;background:var(--kalk-300);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);transition:background-color .45s,transform .45s var(--feder)}
.mappe__liste li.ist-da .ampel{background:var(--gruen-600)}
.mappe__liste li.ist-neu .ampel{transform:scale(1.35)}
.mappe__fuss{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.mappe__fuss small{font-size:12px;color:var(--ink-600)}

/* Kundenakte-Szene */
.akte__kopf{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center}
.akte__av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--wald-900);color:var(--gold-500);font-weight:700;font-size:14px}
.akte__kopf b{display:block;font-family:var(--f-display);font-size:16px;letter-spacing:-.02em}
.akte__kopf small{font-size:12px;color:var(--ink-600)}
.akte__reiter{display:flex;gap:18px;margin:14px 0 6px;border-bottom:1px solid var(--kalk-200);font-size:12.5px;font-weight:600;color:var(--ink-400)}
.akte__reiter span{padding:8px 0}
.akte__reiter .ist-an{color:var(--ink-900);box-shadow:inset 0 -2px 0 var(--gruen-700)}
.zeitleiste{position:relative;display:flex;flex-direction:column;gap:4px;padding-top:8px}
.zeitleiste::before{content:"";position:absolute;left:15px;top:14px;bottom:10px;width:1px;background:var(--kalk-200)}
.zl{position:relative;display:grid;grid-template-columns:32px 1fr;gap:12px;padding:8px 0;font-size:13px;transition:opacity .5s,transform .5s var(--aus)}
.zl b{display:block;font-weight:600}
.zl small{display:block;color:var(--ink-400);font-size:11.5px}
.zl__icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--kalk-0);border:1px solid var(--kalk-200);color:var(--ink-600);z-index:1}
.zl__icon .icon{width:16px;height:16px}
.zl--mail .zl__icon{color:var(--gruen-700);background:var(--gruen-50)}
.zl--blick .zl__icon{color:var(--gold-700);background:var(--gold-100)}
.datei{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:5px 9px;border-radius:8px;background:var(--kalk-100);font-size:12px;font-weight:500}
.datei .icon{width:14px;height:14px}
.datei em{font-style:normal;color:var(--gruen-600);font-weight:600}
.haekchen{width:16px;height:16px;border-radius:5px;border:1.6px solid var(--ink-400);position:relative;transition:background-color .3s,border-color .3s}
.haekchen.ist-an{background:var(--gruen-600);border-color:var(--gruen-600)}
.haekchen.ist-an::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.zl.ist-neu{animation:hereinrutschen .6s var(--aus)}

/* Bemusterung (für Funktionsseiten) */
.bem{display:grid;grid-template-columns:1.25fr 1fr;border-radius:var(--r-lg);overflow:hidden;background:var(--kalk-0);box-shadow:var(--schatten-3)}
.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:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(13,26,20,.7);color:#fff;font-size:12.5px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bem__marke .icon{width:16px;height:16px;color:var(--gold-500)}
.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;border-radius:12px;border:1.5px solid var(--kalk-200);font-size:13px;transition:border-color .3s,background-color .3s}
.bem__option b{font-weight:600}
.bem__option small{grid-column:2;color:var(--ink-600);font-size:12px}
.bem__muster{grid-row:1/3;width:44px;height:44px;border-radius:9px}
.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;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.bem__option.ist-gewaehlt{border-color:var(--gruen-700);background:var(--gruen-50)}
.bem__wahl .knopf-mini{align-self:flex-start;margin-top:auto}

/* Der Weg */
.weg{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;position:relative}
.weg__schritt{display:flex;flex-direction:column;gap:10px;padding:22px 16px 24px;border-radius:var(--r-lg);background:rgba(255,255,255,.035);border:1px solid var(--linie-hell-2);
  transition:background-color .3s,border-color .3s}
.weg__schritt:hover{background:rgba(255,255,255,.06);border-color:var(--linie-hell)}
.weg__nr{font-size:13px;color:var(--gold-500);font-weight:600}
.weg__icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(203,167,106,.12);color:var(--gold-500)}
.weg__schritt b{font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.2}
.weg__schritt p{font-size:13.5px;color:var(--hell-2);line-height:1.5}
.weg__mass{margin-top:36px;color:var(--gold-500)}

/* Lösungskarten */
.loesungskarten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.loesungskarte{display:flex;flex-direction:column;border-radius:var(--r-xl);background:var(--kalk-0);overflow:hidden;border:1px solid var(--kalk-200);
  transition:transform .5s var(--aus),box-shadow .5s,border-color .3s}
.loesungskarte:hover{transform:translateY(-6px);box-shadow:var(--schatten-3);border-color:transparent}
.loesungskarte__bild{aspect-ratio:4/3;overflow:hidden}
.loesungskarte__bild picture,.loesungskarte__bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--aus)}
.loesungskarte:hover .loesungskarte__bild img{transform:scale(1.05)}
.loesungskarte__text{padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.loesungskarte__rolle{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-700)}
.loesungskarte ul{display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--ink-700)}
.loesungskarte li{display:flex;gap:9px;align-items:flex-start}
.loesungskarte li .icon{width:18px;height:18px;color:var(--gruen-600);margin-top:2px}
.loesungskarte .textlink{margin-top:auto;padding-top:6px}

/* Vertrauen */

/* Preis-Anriss */
.preis-anriss .lead{margin-top:22px}
.preis-anriss__innen{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.preis-anriss__karten{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.preis-anriss__karten .knopf{grid-column:1/-1;justify-self:start}
.preiskachel{padding:26px 24px;border-radius:var(--r-lg);border:1px solid var(--kalk-200);background:var(--kalk-50)}
.preiskachel p{font-weight:600;color:var(--ink-700);line-height:1.35;min-height:2.7em}
.preiskachel b{display:block;font-size:48px;font-weight:600;margin:10px 0 4px;letter-spacing:-.04em}
.preiskachel small{display:block;font-size:13px;line-height:1.5;color:var(--ink-600)}
.preiskachel--dunkel{background:var(--wald-900);border-color:var(--wald-900);color:#fff}
.preiskachel--dunkel p{color:var(--hell-2)}.preiskachel--dunkel small{color:var(--hell-2)}
.preiskachel--dunkel b{color:var(--gold-500)}

/* ==========================================================================
   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)}
}
@media (max-width:900px){
  .held{padding:120px 0 200px;min-height:auto}
  .held__schleier{background:linear-gradient(180deg,rgba(13,26,20,.55) 0%,rgba(13,26,20,.85) 55%,rgba(13,26,20,.95) 100%)}
  .buehne{grid-template-columns:1fr}
  .buehne__seite{contain:none}
  .buehne__seite .akt-liste{flex:none;height:300px}
  .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:48px}
  .kopfzeile .t-gross br{display:none}
}
@media (max-width:640px){
  .weg{grid-template-columns:1fr 1fr}
  .kalk__kpis{grid-template-columns:1fr 1fr}
  .kalk__kpis .kpi--gold{grid-column:1/-1}
  .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:9px 6px}
  .buehnen-rahmen__notiz{justify-content:flex-start;text-align:left;align-items:flex-start}
  .vst__kopf>span:first-child{letter-spacing:.04em}
  .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}
}
/* 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(--wald-900);color:#fff;padding:150px 0 clamp(72px,9vw,120px);overflow:hidden;isolation:isolate}
.seitenheld__raster{position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(to right,var(--linie-hell-2) 1px,transparent 1px),linear-gradient(to bottom,var(--linie-hell-2) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:linear-gradient(100deg,#000 20%,transparent 70%);mask-image:linear-gradient(100deg,#000 20%,transparent 70%)}
.seitenheld::after{content:"";position:absolute;z-index:-1;width:900px;height:900px;left:-300px;top:-300px;background:radial-gradient(circle,rgba(203,167,106,.12),transparent 62%)}
.seitenheld__innen{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.seitenheld__titel{font-size:clamp(38px,4.3vw,64px)}
.seitenheld__titel span{color:var(--gold-500)}
.seitenheld .zeile{color:var(--gold-500)}
.seitenheld__lead{margin-top:26px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:rgba(243,245,241,.84);max-width:52ch}
.seitenheld__lead .bw{color:#fff}
.seitenheld__knoepfe{margin-top:34px}
.seitenheld__bild{position:relative}
.seitenheld__foto,.seitenheld__foto img{display:block;width:100%;border-radius:var(--r-xl);aspect-ratio:4/3.3;object-fit:cover}
.seitenheld__foto{box-shadow:var(--schatten-3)}
.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}

.minikarte{background:var(--kalk-0);color:var(--ink-900);border-radius:var(--r-lg);padding:16px;box-shadow:var(--schatten-3);border:1px solid rgba(24,33,29,.06);font-size:13px}
.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:15px;letter-spacing:-.02em}
.minikarte .akt{margin-top:10px}
.minikarte .vst{padding:11px 12px 10px}
.minikarte .vst__kopf>span:last-child{white-space:nowrap}
.minikarte .vst__legende{gap:4px 12px;font-size:11.5px}
.minikarte__zahlen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.minikarte__zahlen>div{background:var(--kalk-100);border-radius:var(--r-md);padding:10px 12px}
.minikarte__zahlen small{display:block;font-size:11px;color:var(--ink-600)}
.minikarte__zahlen b{font-size:24px;font-weight:600;letter-spacing:-.03em}
.minikarte__fuss{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--ink-600)}
.minikarte__fuss .icon{width:15px;height:15px;color:var(--gold-600)}
.minikarte__fuss--gruen{color:var(--gruen-700);font-weight:600}
.minikarte__fuss--gruen .icon{color:var(--gruen-600)}
.minikarte .mappe__balken{margin:4px 0 0}

/* Heute / Mit immobricks */
.vn{display:flex;flex-direction:column;gap:14px}
.vn__paar{display:grid;grid-template-columns:1fr 56px 1fr;align-items:stretch}
.vn__vorher,.vn__nachher{padding:24px 26px;border-radius:var(--r-lg)}
.vn__vorher{background:transparent;border:1px dashed var(--kalk-300);color:var(--ink-600)}
.vn__vorher p{font-size:16.5px;line-height:1.5;text-decoration:line-through;text-decoration-color:rgba(194,72,58,.45);text-decoration-thickness:1.5px}
.vn__nachher{background:var(--kalk-0);border:1px solid var(--kalk-200);box-shadow:var(--schatten-1)}
.vn__nachher p{font-size:16.5px;line-height:1.5;color:var(--ink-900);font-weight:500}
.vn__marke{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);margin-bottom:10px}
.vn__nachher .vn__marke{color:var(--gruen-700);letter-spacing:.06em;text-transform:none;font-size:13px}
.vn__nachher .vn__marke .icon{width:17px;height:17px;color:var(--gold-600)}
.vn__pfeil{display:grid;place-items:center;color:var(--gold-600)}
.vn__pfeil .icon{width:26px;height:26px}

/* 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(--kalk-200)}
.faq__eintrag{border-bottom:1px solid var(--kalk-200)}
.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(--gold-600);transition:transform .35s var(--aus)}
.faq__eintrag[open] summary .icon{transform:rotate(45deg)}
.faq__eintrag p{padding:0 40px 24px 2px;color:var(--ink-600);font-size:16px;line-height:1.6}
.faq__eintrag summary:hover{color:var(--gruen-700)}

/* 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:14px;color:var(--hell-2)}
.konditionen li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start}
.konditionen .icon{width:18px;height:18px;color:var(--gold-500);margin-top:2px}
.konditionen b{color:var(--hell-1);font-weight:600}
.preisband__knoepfe{margin-top:32px}
.rechner{padding:30px;border-radius:var(--r-xl);background:rgba(255,255,255,.05);border:1px solid var(--linie-hell)}
.rechner__titel{font-weight:600;font-size:17px;color:#fff;margin-bottom:22px}
.rechner__regler{display:grid;grid-template-columns:auto 1fr 36px;gap:16px;align-items:center;font-size:14px;color:var(--hell-2)}
.rechner__regler b{font-family:var(--f-display);font-size:20px;color:#fff;text-align:right}
.rechner input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.15);outline-offset:6px}
.rechner input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 6px rgba(203,167,106,.2);cursor:grab}
.rechner input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 6px rgba(203,167,106,.2);cursor:grab}
.rechner__ergebnis{margin-top:26px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rechner__ergebnis .zahl{font-size:56px;font-weight:600;color:var(--gold-500);letter-spacing:-.04em;line-height:1}
.rechner__ergebnis small{color:var(--hell-2);font-size:14px}
.rechner__rechnung{margin-top:10px;font-size:13.5px;color:var(--hell-3);font-variant-numeric:tabular-nums}
.rechner--flach .rechner__text{color:var(--hell-2);font-size:15.5px;line-height:1.6;margin-bottom:18px}
.rechner--flach .bw{color:#fff}

/* 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;border-radius:var(--r-lg);background:var(--kalk-0);
  border:1px solid var(--kalk-200);transition:border-color .25s,box-shadow .3s,transform .3s var(--aus)}
.weitere__karte:hover{border-color:var(--gold-200);box-shadow:var(--schatten-2);transform:translateY(-3px)}
.weitere__karte b{display:block;font-family:var(--f-display);font-size:16.5px;letter-spacing:-.02em}
.weitere__karte small{display:block;font-size:13.5px;color:var(--ink-600)}
.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}
.einladen__schritte{display:flex;flex-direction:column;gap:12px;counter-reset:x}
.einladen__schritte li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--r-lg);border:1px solid var(--kalk-200);background:var(--kalk-50)}
.einladen__nr{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--wald-900);color:var(--gold-500);font-size:22px;font-weight:600}
.einladen__schritte b{font-family:var(--f-display);font-size:17px;letter-spacing:-.02em}
.einladen__schritte p{font-size:14.5px;color:var(--ink-600)}

/* 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-3)}
.knopf-mini--klein{height:28px;padding:0 10px;font-size:12px;border-radius:8px}
.meldung--gruen .icon{color:var(--gruen-600)}
.meldung--warnung{background:#FDF3EA;border-color:#F0D9C2}
.meldung--warnung .icon{color:#B4652B}

.tabelle{width:100%;border-collapse:collapse;font-size:12.5px}
.tabelle th{text-align:left;font-size:11px;font-weight:600;color:var(--ink-400);text-transform:uppercase;letter-spacing:.06em;padding:0 8px 8px;border-bottom:1px solid var(--kalk-200)}
.tabelle td{padding:8px;border-bottom:1px solid var(--kalk-100);white-space:nowrap}
.tabelle td.zahl,.tabelle th:nth-child(4){text-align:right}
.tabelle .chip{height:22px;font-size:11px}
.import{display:grid;grid-template-columns:1fr;gap:12px}
.import__datei{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r-md);background:var(--kalk-100)}
.import__datei b{display:block;font-size:13px}
.import__datei small{font-size:11.5px;color:var(--ink-600)}
.import__xls{position:relative;width:42px;height:48px;border-radius:8px;background:#fff;border:1px solid var(--kalk-200);display:grid;place-items:center;color:#1E7A46}
.import__xls .icon{width:22px;height:22px}
.import__xls b{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:800;background:#1E7A46;color:#fff;padding:1px 4px;border-radius:3px}
.import__pfeil{display:none}
.import__fuss{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gruen-700);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(--kalk-0);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--schatten-3);border:1px solid rgba(24,33,29,.08);font-size:13px}
.browser__kopf{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;background:var(--kalk-100);border-bottom:1px solid var(--kalk-200)}
.browser__punkte{display:flex;gap:6px}.browser__punkte i{width:9px;height:9px;border-radius:50%;background:var(--kalk-300)}
.browser__adresse{flex:1;display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:7px;background:var(--kalk-0);font-size:12px;color:var(--ink-600)}
.browser__adresse .icon{width:13px;height:13px}
.feed__held{position:relative;height:120px;overflow:hidden}
.feed__held picture,.feed__held img{width:100%;height:100%;object-fit:cover}
.feed__held>div{position:absolute;left:16px;bottom:12px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.feed__held small{display:block;font-size:11px;opacity:.85}
.feed__held b{font-family:var(--f-display);font-size:18px;letter-spacing:-.02em}
.feed__held::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,26,20,.7),transparent 60%)}
.feed__held>div{z-index:1}
.feed__liste{padding:14px 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(--kalk-100)}
.feed__liste .zahl{font-size:13px;color:var(--ink-700)}
.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:11.5px;color:var(--ink-400)}

.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;border-radius:10px;object-fit:cover;display:block}
.partnerobjekt__kopf small{display:block;font-size:11.5px;color:var(--ink-400)}
.partnerobjekt__kopf b{display:block;font-family:var(--f-display);font-size:16px;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(--kalk-100);font-size:12.5px}
.partnerobjekt__liste b{display:block}
.partnerobjekt__liste small{font-size:11.5px;color:var(--ink-400)}
.partnerobjekt__liste .zahl{color:var(--ink-700)}
.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(--gold-100);color:var(--gold-700)}
.knopf-mini.ist-reserviert{background:var(--gruen-100);color:var(--gruen-700)}

.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(--gold-600)}
.vorschlag{padding:14px;border-radius:var(--r-md);border:1px solid var(--kalk-200);transition:border-color .4s,background-color .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:13.5px}
.vorschlag__kopf small{font-family:var(--f-display);font-size:13px;color:var(--ink-600)}
.gruende{display:flex;flex-wrap:wrap;gap:6px}
.grund{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:600}
.grund .icon{width:13px;height:13px}
.grund--ok{background:var(--gruen-100);color:var(--gruen-700)}
.grund--fast{background:var(--kalk-100);color:var(--ink-600)}
.vorschlag.ist-uebernommen{border-color:var(--gruen-600);background:var(--gruen-50)}
.matching__hinweis{font-size:11.5px;color:var(--ink-400)}
.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:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.ew-text{font-size:12px;color:var(--ink-600);margin:6px 0 16px}
.ew-feld{display:block;padding:10px 12px;border-radius:12px;background:var(--kalk-0);border:1px solid var(--kalk-200);margin-bottom:8px}
.ew-feld span{display:block;font-size:10.5px;color:var(--ink-400)}
.ew-feld b{display:block;min-height:20px;font-size:14px;font-weight:600}
.ew-feld.ist-aktiv{border-color:var(--gruen-600);box-shadow:0 0 0 3px rgba(42,122,87,.15)}
.ew-feld b.tippt::after{content:"";display:inline-block;width:1.5px;height:15px;background:var(--gruen-700);margin-left:2px;vertical-align:-2px;animation:blinken .8s steps(1) infinite}
@keyframes blinken{50%{opacity:0}}
.ew-knopf{display:flex;justify-content:center;align-items:center;height:44px;border-radius:12px;background:var(--gruen-700);color:#fff;font-weight:600;font-size:14px;margin-top:14px;transition:transform .2s}
.ew-knopf.ist-gedrueckt{transform:scale(.96)}
.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(--kalk-100);
  opacity:0;pointer-events:none;transition:opacity .5s}
.ew-danke .icon{width:44px;height:44px;padding:10px;border-radius:50%;background:var(--gruen-600);color:#fff}
.ew-danke b{font-family:var(--f-display);font-size:22px}
.ew-danke small{font-size:13px;color:var(--ink-600)}
.ew-danke.ist-da{opacity:1}

.faelle__filter{display:flex;gap:6px;margin-bottom:10px}
.faelle__filter span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:99px;background:var(--kalk-100);font-size:12px;font-weight:600;color:var(--ink-600)}
.faelle__filter .ist-an{background:var(--wald-900);color:#fff}
.faelle__filter b{font-family:var(--f-display)}
.faelle__liste li{display:grid;grid-template-columns:32px 1fr auto auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--kalk-100);font-size:12.5px}
.akte__av--klein{width:32px;height:32px;border-radius:9px;font-size:11.5px}
.faelle__liste b{display:block}
.faelle__liste small{font-size:11.5px;color:var(--ink-400)}
.fall__mappe{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-display);font-weight:600;color:var(--ink-700)}
.fall__mappe .icon{width:15px;height:15px;color:var(--ink-400)}
.fall__stand{font-size:12px;color:var(--ink-600)}
.fall__lage{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap;transition:background-color .5s,color .5s}
.fall__lage--laeuft{background:var(--gruen-100);color:var(--gruen-700)}
.fall__lage--stockt{background:#FBE9E5;color:var(--rot)}
.fall__lage--abschluss{background:var(--gold-100);color:var(--gold-700)}

.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:2px;background:var(--kalk-200)}
.fristen__leiste li{position:relative;display:flex;flex-direction:column;gap:4px;font-size:12px;padding-top:22px}
.fristen__punkt{position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--kalk-0);border:2px solid var(--kalk-300);transition:border-color .4s,background-color .4s}
.fristen__leiste li.ist-fertig .fristen__punkt{background:var(--gruen-600);border-color:var(--gruen-600)}
.fristen__leiste li.ist-konflikt .fristen__punkt{border-color:#B4652B;background:#FDF3EA}
.fristen__leiste b{font-size:12.5px}
.fristen__leiste small{color:var(--ink-400);font-size:11.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{transform:rotate(90deg);height:40px}
  .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:32px 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
   ========================================================================== */
.demo{position:relative;background:var(--wald-900);color:#fff;padding:150px 0 clamp(80px,9vw,128px);overflow:hidden;isolation:isolate}
.demo::after{content:"";position:absolute;z-index:-1;width:900px;height:900px;right:-360px;top:-280px;background:radial-gradient(circle,rgba(203,167,106,.13),transparent 62%)}
.demo__innen{display:grid;grid-template-columns:1fr minmax(0,470px);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(38px,4.3vw,64px)}
.demo__titel span{color:var(--gold-500)}
.demo__lead{margin-top:24px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:rgba(243,245,241,.84);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-hell)}
.demo__ablauf li:last-child{border-bottom:1px solid var(--linie-hell)}
.demo__schritt{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(203,167,106,.14);color:var(--gold-500);font-family:var(--f-display);font-weight:600}
.demo__ablauf b{display:block;font-weight:600;font-size:15.5px}
.demo__ablauf span:not(.demo__schritt){display:block;color:var(--hell-2);font-size:14.5px;margin-top:2px}
.demo__zeigen{margin-top:40px}
.demo__zeigen .klein-titel{color:var(--hell-3)}
.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:14px;color:var(--hell-1);padding:12px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.04);border:1px solid var(--linie-hell-2)}
.demo__zeigen .icon{width:18px;height:18px;color:var(--gold-500);flex:none;margin-top:1px}

.demo__karte{position:relative;background:var(--kalk-0);color:var(--ink-900);border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);box-shadow:var(--schatten-3)}
.formular__titel{font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:20px}
.formular__felder{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;font-weight:600;color:var(--ink-700)}
.feld i{font-style:normal;color:var(--gold-600)}
.feld input{width:100%;min-width:0;height:46px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--kalk-300);background:var(--kalk-50);font:inherit;font-weight:500;font-size:15px;color:var(--ink-900);
  transition:border-color .2s,box-shadow .2s,background-color .2s}
.feld input:hover{border-color:var(--ink-400)}
.feld input:focus{outline:none;border-color:var(--gruen-600);background:var(--kalk-0);box-shadow:0 0 0 3px rgba(42,122,87,.16)}
.feld input[aria-invalid="true"]{border-color:var(--rot);box-shadow:0 0 0 3px rgba(194,72,58,.12)}
.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:13px;line-height:1.5;color:var(--ink-600);cursor:pointer}
.haken-feld input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--gruen-700)}
.haken-feld a{color:var(--gruen-700);text-decoration:underline;text-underline-offset:2px}
.formular__fehler{margin-top:14px;padding:10px 12px;border-radius:var(--r-sm);background:#FBE9E5;color:#8E2F24;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:12.5px;color:var(--ink-400);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(--ink-600)}
.formular-danke .formular__titel{margin:0;color:var(--ink-900)}
.formular-danke__haken{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gruen-100);color:var(--gruen-700);animation:aufploppen .5s var(--feder)}
.formular-danke__haken .icon{width:26px;height:26px}

@media (max-width:900px){
  .demo{padding-top:120px}
  .demo__innen{grid-template-columns:1fr;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(--kalk-50);padding:160px 0 clamp(72px,8vw,112px)}
.preise-kopf .kopfzeile{margin-bottom:clamp(44px,5vw,72px)}
.preise-kopf .t-riesig{font-size:clamp(40px,5vw,78px)}
.plaene{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:30px 28px 28px;border-radius:var(--r-xl);background:var(--kalk-0);border:1px solid var(--kalk-200);box-shadow:var(--schatten-1)}
.plan__fuer{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
.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(--kalk-200)}
.plan__preis .zahl{font-family:var(--f-display);font-size:52px;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--ink-900)}
.plan__preis small{font-size:13.5px;color:var(--ink-600)}
.plan__zusatz{margin-top:8px;font-size:14px;color:var(--ink-600)}
.plan__zusatz b{color:var(--ink-900);font-weight:600}
.plan__text{margin-top:18px;font-size:15px;line-height:1.55;color:var(--ink-700)}
.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(--gruen-600);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(--ink-600);padding:14px 16px;border-radius:var(--r-md);background:var(--kalk-100)}
.plan--hervor{background:var(--wald-900);border-color:var(--wald-900);color:#fff;box-shadow:var(--schatten-3);position:relative;overflow:hidden}
.plan--hervor::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--linie-hell-2) 1px,transparent 1px),linear-gradient(to bottom,var(--linie-hell-2) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 60%);mask-image:linear-gradient(160deg,#000,transparent 60%)}
.plan--hervor>*{position:relative}
.plan--hervor .plan__fuer{color:var(--gold-500)}
.plan--hervor .plan__preis{border-color:var(--linie-hell)}
.plan--hervor .plan__preis .zahl{color:var(--gold-500)}
.plan--hervor .plan__preis small,.plan--hervor .plan__zusatz{color:var(--hell-2)}
.plan--hervor .plan__zusatz b{color:#fff}
.plan--hervor .plan__text{color:var(--hell-1)}
.plan--hervor .plan__liste .icon{color:var(--gold-500)}
.plaene__hinweis{margin-top:22px;text-align:center;font-size:13.5px;color:var(--ink-600)}

.rechner--gross{padding:32px}
.rechner__art{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:28px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--linie-hell-2)}
.rechner__art button{height:40px;border-radius:9px;font-size:14px;font-weight:600;color:var(--hell-2);transition:background-color .25s,color .25s}
.rechner__art button:hover{color:#fff}
.rechner__art button.ist-an{background:var(--gold-500);color:var(--ink-900)}
.rechner__jahr{margin-top:22px;padding-top:18px;border-top:1px solid var(--linie-hell);font-size:14px;color:var(--hell-2)}
.rechner__jahr b{font-family:var(--f-display);font-size:18px;font-weight:600;color:#fff;margin-left:4px;font-variant-numeric:tabular-nums}

.einrichtung{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.einrichtung__punkt{padding:28px 26px;border-radius:var(--r-lg);background:var(--kalk-0);border:1px solid var(--kalk-200)}
.einrichtung__icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--gold-100);color:var(--gold-700);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(--ink-600);font-size:15px;line-height:1.55}

.vgl-rahmen{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--kalk-200);background:var(--kalk-0)}
.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(--kalk-0);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(--kalk-200);vertical-align:bottom}
.vgl thead th small{display:block;margin-top:4px;font-family:var(--f-text);font-size:12.5px;font-weight:500;color:var(--ink-400);letter-spacing:0}
.vgl thead th:first-child{width:44%}
.vgl tbody th{text-align:left;font-weight:500;color:var(--ink-700);padding:13px 18px}
.vgl td{text-align:center;padding:13px 18px}
.vgl tbody tr:not(.vgl__gruppe){border-top:1px solid var(--kalk-100)}
.vgl__gruppe th{padding:26px 18px 10px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-700);background:transparent}
.vgl__hervor{background:rgba(203,167,106,.07)}
.vgl thead .vgl__hervor{background:#FBF6EC;color:var(--ink-900)}
.vgl__ja{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gruen-100);color:var(--gruen-700)}
.vgl__ja .icon{width:15px;height:15px}
.vgl__nein{color:var(--kalk-300);font-size:18px}
.vgl__text{display:inline-block;font-size:12.5px;font-weight:600;color:var(--ink-600);padding:3px 9px;border-radius:99px;background:var(--kalk-100);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:0 40px 90px -30px rgba(0,0,0,.6),0 10px 24px -8px rgba(0,0,0,.3)}
.knopf-mini--hell{background:var(--kalk-100);color:var(--ink-900)}
.knopf-mini--hell:hover{background:var(--kalk-200)}

/* Datei und Zugriffsliste */
.zugriff__datei{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-md);background:var(--kalk-50);border:1px solid var(--kalk-200);margin-bottom:16px}
.zugriff__icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#FBE9E5;color:var(--rot)}
.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:12px;color:var(--ink-400)}
.zugriff__liste{display:flex;flex-direction:column}
.zugriff__liste li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:10px 2px;border-top:1px solid var(--kalk-100);font-size:13px}
.zugriff__liste b{display:block;font-weight:600}
.zugriff__liste small{font-size:11.5px;color:var(--ink-400)}
.zugriff__av{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--kalk-100);font-weight:700;font-size:12px;color:var(--ink-600)}
.zugriff__recht{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--kalk-100);color:var(--ink-400);transition:background-color .45s,color .45s}
.zugriff__recht--ja{background:var(--gruen-100);color:var(--gruen-700)}
.zugriff__recht--aus{background:var(--gold-100);color:var(--gold-700)}
.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(--kalk-200);font-size:12px;color:var(--ink-600)}
.zugriff__fuss>span:first-child{display:inline-flex;align-items:center;gap:7px}
.zugriff__fuss .icon{width:15px;height:15px;color:var(--gruen-600)}

/* Drei Blickwinkel */
.blicke{display:flex;flex-direction:column;gap:12px}
.blick{padding:14px;border-radius:var(--r-lg);background:var(--kalk-0);border:1px solid var(--kalk-200);box-shadow:var(--schatten-2)}
.blick:nth-child(2){margin-left:24px}
.blick:nth-child(3){margin-left:48px}
.blick__wer{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-bottom:10px}
.blick__av{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--wald-900);color:var(--gold-500);font-size:11px;letter-spacing:0}
.blick__karte{padding:12px 14px;border-radius:var(--r-md);background:var(--kalk-50)}
.blick__karte--portal{background:var(--gruen-50)}
.blick__zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.blick__zeile b{font-family:var(--f-display);font-weight:600}
.blick__detail{margin-top:5px;font-size:12.5px;color:var(--ink-600)}
.blick__detail b{color:var(--ink-900);font-weight:600}
.blick__detail--zu{display:flex;align-items:center;gap:6px;color:var(--ink-400)}
.blick__detail--zu .icon{width:14px;height:14px}

/* Zustimmung auf dem Handy */
.zs{display:flex;flex-direction:column;gap:12px;min-height:540px}
.zs__vor{margin-top:12px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-700)}
.zs__titel{font-family:var(--f-display);font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:-6px}
.zs__text{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;background:var(--kalk-0);border:1px solid var(--kalk-200)}
.zs__text b{font-size:11.5px;margin-top:4px}
.zs__text b:first-child{margin-top:0}
.zs__text span{height:6px;border-radius:99px;background:var(--kalk-200)}
.zs__text span.kurz{width:62%}
.zs__haken{display:grid;grid-template-columns:20px 1fr;gap:9px;font-size:11.5px;line-height:1.45;color:var(--ink-700)}
.zs__haken i{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--kalk-300);background:var(--kalk-0);transition:background-color .3s,border-color .3s;position:relative}
.zs__haken i.ist-an{background:var(--gruen-700);border-color:var(--gruen-700)}
.zs__haken i.ist-an::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.zs__knopf{display:grid;place-items:center;height:42px;border-radius:11px;background:var(--gruen-700);color:#fff;font-size:13px;font-weight:700;opacity:.45;transition:opacity .3s,transform .2s}
.zs__knopf.ist-bereit{opacity:1}
.zs__knopf.ist-gedrueckt{transform:scale(.96)}
.zs__nachweis{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:12px;background:var(--gruen-50);border:1px solid rgba(28,90,64,.18);font-size:12px;
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--aus)}
.zs__nachweis.ist-da{opacity:1;transform:none}
.zs__nachweis .icon{width:18px;height:18px;color:var(--gruen-600);flex:none}
.zs__nachweis b{display:block;font-weight:600}
.zs__nachweis small{color:var(--ink-600)}

/* 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;border-radius:10px;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:11.5px;color:var(--ink-400)}
.pk__frist{font-size:12px;font-weight:600;color:var(--gold-700);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;border-radius:var(--r-md);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;border-radius:var(--r-lg);background:var(--kalk-0);border:1px solid var(--kalk-200)}
.zusage__icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--gruen-100);color:var(--gruen-700);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(--ink-600)}
.diese-seite{display:grid;grid-template-columns:52px 1fr auto;gap:22px;align-items:center;padding:26px 28px;border-radius:var(--r-lg);background:var(--kalk-0);border:1px solid var(--kalk-200)}
.diese-seite__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--gold-100);color:var(--gold-700)}
.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)
   ========================================================================== */
.fu-kopf{position:relative;background:var(--kalk-50);padding:160px 0 clamp(56px,6vw,88px)}
.fu-kopf .kopfzeile{max-width:900px;margin-bottom:0}
.fu-kopf .t-riesig{font-size:clamp(40px,5vw,78px)}
.fu-sprung{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.fu-sprung a{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:99px;background:var(--kalk-0);border:1px solid var(--kalk-200);font-weight:600;font-size:14.5px;transition:border-color .2s,background-color .2s}
.fu-sprung a:hover{border-color:var(--ink-400)}
.fu-sprung .icon{width:16px;height:16px;color:var(--gold-600)}
.fu-gruppe{scroll-margin-top:80px}
.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:18px}
.kachel{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-xl);background:var(--kalk-0);border:1px solid var(--kalk-200);overflow:hidden;
  transition:transform .35s var(--aus),box-shadow .35s var(--aus),border-color .25s}
.kachel:hover{transform:translateY(-4px);box-shadow:var(--schatten-2);border-color:var(--kalk-300)}
.kachel--breit{grid-column:1/-1;grid-template-columns:1.1fr 1fr;grid-template-rows:auto}
.kachel__bild{position:relative;padding:22px;background:var(--kalk-100);min-height:210px;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden}
.sek--kalk .kachel__bild{background:var(--kalk-50)}
.kachel__bild::after{content:"";position:absolute;inset:auto 0 0;height:36px;background:linear-gradient(transparent,rgba(238,240,237,.9));pointer-events:none}
.sek--kalk .kachel__bild::after{background:linear-gradient(transparent,rgba(247,248,246,.9))}
.kachel--breit .kachel__bild{order:2;min-height:0}
.kachel__text{padding:26px 28px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.kachel__icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--gruen-100);color:var(--gruen-700)}
.kachel__icon .icon{width:21px;height:21px}
.kachel h3{font-size:24px;letter-spacing:-.025em;margin-top:6px}
.kachel p{color:var(--ink-600);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(--kalk-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;border-radius:var(--r-md);background:var(--kalk-0);border:1px solid var(--kalk-200)}
.k-kalk__zahlen small{display:block;font-size:11px;color:var(--ink-600)}
.k-kalk__zahlen b{display:block;font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.k-kalk__zahlen span{font-size:11px;color:var(--ink-400)}
.k-kalk__kurve{width:100%;height:64px}
.k-kalk__flaeche{fill:rgba(203,167,106,.18)}
.k-kalk__linie{fill:none;stroke:var(--gold-600);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:8px}
.k-dateien li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r-md);background:var(--kalk-0);border:1px solid var(--kalk-200);font-size:12.5px;margin-left:calc(var(--stufe) * 18px)}
.k-dateien .icon{width:17px;height:17px;color:var(--rot)}
.k-dateien b{display:block;font-weight:600}
.k-dateien small{font-size:11px;color:var(--ink-400)}
.k-notiz{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-600)}
.k-notiz .icon{width:16px;height:16px;color:var(--gold-600);flex:none}
.k-notiz b{color:var(--ink-900)}
.k-portal{border-radius:14px;overflow:hidden;background:var(--kalk-0);border:1px solid var(--kalk-200);box-shadow:var(--schatten-1)}
.k-portal__adresse{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;background:var(--kalk-100);font-size:11.5px;color:var(--ink-600)}
.k-portal__adresse .icon{width:12px;height:12px;color:var(--gruen-600)}
.k-portal__innen{padding:14px 16px 16px}
.k-portal__gruss{margin:14px 0 12px;font-family:var(--f-display);font-size:19px;letter-spacing:-.02em;line-height:1.2}
.k-portal__reiter{display:flex;gap:6px}
.k-portal__reiter span{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:99px;background:var(--kalk-100);color:var(--ink-600)}
.k-portal__reiter span.ist-an{background:var(--wald-900);color:#fff}
.k-ank{padding:16px;border-radius:14px;background:var(--kalk-0);border:1px solid var(--kalk-200);box-shadow:var(--schatten-1);font-size:13px}
.k-ank__kopf{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.k-ank__kopf small{color:var(--ink-400);font-size:11.5px}
.k-ank b{font-family:var(--f-display);font-size:17px;letter-spacing:-.02em}
.k-ank p{margin-top:4px;color:var(--ink-600)}
.k-ank__fuss{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:10px;border-top:1px solid var(--kalk-100);font-size:11.5px;color:var(--ink-400)}
.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;border-radius:10px;background:var(--kalk-0);border:1px solid var(--kalk-200)}
.k-pipe__spalte small{font-size:10.5px;font-weight:600;color:var(--ink-600);margin-bottom:2px}
.k-pipe__karte{height:18px;border-radius:5px;background:var(--kalk-100)}
.k-pipe__karte.ist-hervor{background:var(--gold-100);box-shadow:inset 0 0 0 1.5px var(--gold-500)}
.k-fin{padding:16px 18px;border-radius:14px;background:var(--kalk-0);border:1px solid var(--kalk-200)}
.k-fin__kopf{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
.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:11px;color:var(--ink-400)}
.k-fin__schritte i{height:5px;border-radius:99px;background:var(--kalk-200)}
.k-fin__schritte li.ist-fertig i{background:var(--gruen-600)}
.k-fin__schritte li.ist-jetzt i{background:var(--gold-500)}
.k-fin__schritte li.ist-fertig,.k-fin__schritte li.ist-jetzt{color:var(--ink-900);font-weight:600}

/* Wer was davon hat */
.vgl-rahmen--dunkel{background:rgba(255,255,255,.03);border-color:var(--linie-hell)}
.vgl--rollen{min-width:760px;color:var(--hell-1)}
.vgl--rollen thead th{background:transparent;color:#fff;border-color:var(--linie-hell);text-align:left}
.vgl--rollen thead th a{display:inline-flex;align-items:center;gap:6px}
.vgl--rollen thead th a:hover{color:var(--gold-500)}
.vgl--rollen tbody th{color:#fff;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(--gold-500)}
.vgl--rollen tbody th .icon{width:18px;height:18px;color:var(--gold-500);flex:none}
.vgl--rollen td{text-align:left;font-size:14px;color:var(--hell-2);padding:16px 18px}
.vgl--rollen tbody tr{border-top:1px solid var(--linie-hell-2)}
.vgl--rollen .vgl__nein{color:rgba(255,255,255,.2)}

@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}
}
@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(--wald-900);color:#fff;border-top:1px solid var(--linie-hell-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-hell)}
.eckdaten__punkt:first-child{border-left:0;padding-left:0}
.eckdaten dt{font-family:var(--f-display);font-size:clamp(26px,2.6vw,38px);font-weight:600;letter-spacing:-.035em;color:var(--gold-500);line-height:1.05}
.eckdaten dd{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--hell-2);max-width:30ch}

.fuer-wen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.fuer-wen__karte{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px;border-radius:var(--r-lg);background:var(--kalk-0);border:1px solid var(--kalk-200);transition:transform .3s var(--aus),box-shadow .3s var(--aus)}
.fuer-wen__karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-2)}
.fuer-wen__icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--wald-900);color:var(--gold-500);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}
.fuer-wen__karte p{color:var(--ink-600);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{padding:0}
.seitenheld--ohne-foto .seitenheld__bild>.telefon-buehne::before{background:radial-gradient(circle,rgba(203,167,106,.2),transparent 65%)}

/* Anfragen */
.anfr__reiter{display:flex;gap:4px;margin-bottom:12px;font-size:12px;font-weight:600;color:var(--ink-400)}
.anfr__reiter span{padding:6px 10px;border-radius:8px}
.anfr__reiter span.ist-an{background:var(--kalk-100);color:var(--ink-900)}
.anfr__reiter b{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;border-radius:99px;background:var(--gold-500);color:var(--ink-900);font-size:11px}
.anfr__liste li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:11px 2px;border-top:1px solid var(--kalk-100);font-size:13px;transition:opacity .5s,background-color .5s}
.anfr__nr{font-family:var(--f-display);font-weight:600}
.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:11.5px;color:var(--ink-400)}
.anfr__liste small .icon{width:12px;height:12px;color:var(--gruen-600)}
.anfr__aktion{display:flex;gap:6px}
.anfr__status{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap;animation:aufploppen .45s var(--feder)}
.anfr__status--ja{background:var(--gruen-100);color:var(--gruen-700)}
.anfr__status--nein{background:var(--kalk-100);color:var(--ink-400)}
.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}
.beleg__feld,.teilen__feld{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--kalk-200);background:var(--kalk-50)}
.beleg__feld small,.teilen__feld small{font-size:11px;font-weight:600;color:var(--ink-400);letter-spacing:.04em;text-transform:uppercase}
.beleg__feld b,.teilen__feld>b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.beleg__feld .icon,.teilen__feld .icon{width:16px;height:16px;color:var(--gold-600)}
.beleg__ergebnis{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:var(--r-md);background:var(--wald-900);color:#fff}
.beleg__ergebnis span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--hell-2)}
.beleg__ergebnis .icon{width:16px;height:16px;color:var(--gold-500)}
.beleg__ergebnis b{font-size:24px;font-weight:600;color:var(--gold-500);letter-spacing:-.03em}
.beleg__partner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-600)}
.beleg__av{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--kalk-100);font-weight:700;font-size:11px}

/* 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(--kalk-100);font-size:13px}
.steuer__liste b{display:block;font-weight:600}
.steuer__liste small{font-size:11.5px;color:var(--ink-400)}
.steuer__satz{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:12.5px;color:var(--ink-600)}
.steuer__satz .icon{width:16px;height:16px;color:var(--gold-600);flex:none}
.steuer__ergebnis{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;padding:14px 16px;border-radius:var(--r-md);background:var(--kalk-50);border:1px solid var(--kalk-200)}
.steuer__ergebnis small{flex-basis:100%;font-size:11.5px;color:var(--ink-600)}
.steuer__ergebnis b{font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1}
.steuer__delta{font-size:12.5px;font-weight:600;color:var(--gruen-700);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(--kalk-200)}
.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);border-radius:6px 6px 0 0;background:linear-gradient(var(--gold-500),#D9BE8C);transform-origin:bottom;transition:transform .7s var(--aus) calc(var(--i) * .12s)}
.bph__rate:first-child i,.bph__rate:nth-child(2) i{background:linear-gradient(var(--gruen-600),#5E9C7D)}
.bph__wert{font-size:11px;font-weight:600;color:var(--ink-700);font-variant-numeric:tabular-nums}
.bph__rate small{position:absolute;bottom:-38px;left:50%;transform:translateX(-50%);width:100%;text-align:center;font-size:10px;line-height:1.2;color:var(--ink-600)}
.bph__rate em{display:none}
.bph__zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:52px}
.bph__zahlen>div{padding:10px 12px;border-radius:var(--r-md);background:var(--kalk-50);border:1px solid var(--kalk-200)}
.bph__zahlen small{display:block;font-size:11px;color:var(--ink-600)}
.bph__zahlen b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.js .fenster--bph:not(.laeuft) .bph__rate i{transform:scaleY(0)}

/* Kalkulation als Link */
.kl{display:flex;flex-direction:column;gap:14px;min-height:480px}
.kl__titel{margin-top:6px;font-size:12.5px;color:var(--ink-600);line-height:1.4}
.kl__titel b{font-family:var(--f-display);font-size:17px;color:var(--ink-900);letter-spacing:-.02em}
.kl__kpi{padding:14px;border-radius:14px;background:var(--wald-900);color:#fff}
.kl__kpi small{display:block;font-size:11px;color:var(--hell-2)}
.kl__kpi b{font-size:30px;font-weight:600;letter-spacing:-.04em;color:var(--gold-500)}
.kl__regler{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;border-radius:12px;background:var(--kalk-0);font-size:12px;color:var(--ink-600)}
.kl__regler b{color:var(--ink-900);font-variant-numeric:tabular-nums}
.kl__bahn{grid-column:1/-1;position:relative;height:6px;border-radius:99px;background:var(--kalk-200)}
.kl__bahn i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--gold-500);transition:width .9s var(--aus)}
.kl__bahn span{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25),0 0 0 4px rgba(203,167,106,.25);transition:left .9s var(--aus)}
.kl__hinweis{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-400)}
.kl__hinweis .icon{width:13px;height:13px}

/* 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(--kalk-100);font-size:12.5px}
.dok__liste>li>.icon{width:17px;height:17px;color:var(--rot)}
.dok__liste li.ist-geerbt{color:var(--ink-600)}
.dok__liste b{display:block;font-weight:600}
.dok__liste small{font-size:11px;color:var(--ink-400)}
.dok__frei{display:flex;gap:10px}
.dok__schalter{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-400);white-space:nowrap}
.dok__schalter i{position:relative;width:26px;height:15px;border-radius:99px;background:var(--kalk-300);transition:background-color .35s}
.dok__schalter i::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:transform .35s var(--feder)}
.dok__schalter.ist-an{color:var(--ink-900)}
.dok__schalter.ist-an i{background:var(--gruen-600)}
.dok__schalter.ist-an i::after{transform:translateX(11px)}

/* 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:16px;letter-spacing:-.02em}
.expo__kopf small{font-size:12px;color:var(--ink-400)}
.expo__ring{--wert:0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(closest-side,var(--kalk-0) 76%,transparent 78% 100%),conic-gradient(var(--gruen-600) calc(var(--wert)*1%),var(--kalk-200) 0)}
.expo__ring b{font-size:12.5px!important;font-family:var(--f-text)!important;font-weight:700}
.expo__block{padding:14px;border-radius:var(--r-md);border:1px solid var(--kalk-200);background:var(--kalk-50)}
.expo__blockkopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.expo__ton{display:flex;gap:3px;padding:3px;border-radius:9px;background:var(--kalk-0);border:1px solid var(--kalk-200)}
.expo__ton i{font-style:normal;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;color:var(--ink-600)}
.expo__ton i.ist-an{background:var(--wald-900);color:#fff}
.expo__text{min-height:84px;font-size:13px;line-height:1.55;color:var(--ink-700);margin-bottom:12px}
.expo__text.tippt::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--gruen-700);animation:blinken 1s steps(1) infinite}
.expo__fuss{display:flex;gap:16px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--gruen-700)}

/* Kundenportal vor dem Kauf */
.vk__kopf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vk__ap{display:flex;align-items:center;gap:8px;font-size:12px}
.vk__ap small{display:block;font-size:10.5px;color:var(--ink-400)}
.vk__av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold-100);color:var(--gold-700);font-weight:700;font-size:11px}
.vk__gruss{margin:16px 0 14px;font-family:var(--f-display);font-size:21px;letter-spacing:-.025em;line-height:1.2}
.vk__gruss span{font-family:var(--f-text);font-size:13.5px;color:var(--ink-600);letter-spacing:0}
.vk__karten{display:flex;flex-direction:column;gap:10px}
.vk__karte{display:grid;grid-template-columns:120px 1fr;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--kalk-200);background:var(--kalk-0)}
.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:13px}
.vk__text b{font-weight:600}
.vk__text small{color:var(--ink-400);font-size:12px}
.vk__link{font-size:12.5px;font-weight:600;color:var(--gruen-700)}

/* Glocke */
.glocke li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--kalk-100);font-size:13px}
.glocke li.ist-neu{animation:hereinrutschen .6s var(--aus);background:linear-gradient(90deg,var(--gold-100),transparent 70%)}
.glocke__icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--gruen-100);color:var(--gruen-700)}
.glocke__icon .icon{width:17px;height:17px}
.glocke b{display:block;font-weight:600}
.glocke small{font-size:11.5px;color:var(--ink-400)}
.glocke__hinweis{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--ink-600)}
.glocke__hinweis .icon{width:15px;height:15px;color:var(--gruen-600)}

/* Umfrage */
.umf__kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.umf__kopf small{font-size:11.5px;color:var(--ink-400)}
.umf__frage{display:block;font-family:var(--f-display);font-size:18px;letter-spacing:-.02em;margin-bottom:12px}
.umf__liste li{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:9px 0;font-size:13px}
.umf__zahl{font-weight:700;font-variant-numeric:tabular-nums}
.umf__balken{grid-column:1/-1;height:8px;border-radius:99px;background:var(--kalk-100);overflow:hidden}
.umf__balken i{display:block;height:100%;border-radius:99px;background:var(--gold-500);transition:width .8s var(--aus)}
.umf__liste li:first-child .umf__balken i{background:var(--gruen-600)}
.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(--kalk-100);font-size:12.5px;color:var(--ink-600)}

/* Empfänger */
.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:10px 12px;border-radius:var(--r-md);border:1px solid var(--kalk-200);font-size:13px}
.empf__liste li i{width:16px;height:16px;border-radius:50%;border:2px solid var(--kalk-300)}
.empf__liste li.ist-an{border-color:var(--gruen-600);background:var(--gruen-50)}
.empf__liste li.ist-an i{border:5px solid var(--gruen-600)}
.empf__liste b{font-variant-numeric:tabular-nums;color:var(--ink-600)}
.empf__zeilen{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.empf__zeilen>div{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center;font-size:12.5px}
.empf__zeilen small{color:var(--ink-400)}
.empf__zeilen b{display:flex;align-items:center;gap:7px;font-weight:600}
.empf__zeilen .icon{width:15px;height:15px;color:var(--gold-600)}

/* 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;border-radius:12px;background:var(--kalk-50);border:1px solid var(--kalk-200)}
.pipe__titel{font-size:11px;font-weight:600;color:var(--ink-600);margin-bottom:2px}
.pipe__titel b{color:var(--ink-400);font-weight:600;margin-left:3px}
.pipe__karte{padding:9px 10px;border-radius:9px;background:var(--kalk-0);border:1px solid var(--kalk-200);box-shadow:var(--schatten-1);font-size:12px;transition:box-shadow .3s}
.pipe__karte b{display:block;font-weight:600}
.pipe__karte small{font-size:11px;color:var(--ink-400)}
.pipe__karte.ist-neu{animation:hereinrutschen .6s var(--aus);box-shadow:0 0 0 2px var(--gold-500),var(--schatten-2)}
.pipe__karte.ist-hebt{box-shadow:0 0 0 2px var(--gold-500),var(--schatten-2);transform:rotate(-2deg);transition:transform .3s var(--aus)}

/* Anfragen/Leads */
.leads li{display:grid;grid-template-columns:32px 1fr auto auto;gap:10px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--kalk-100);font-size:13px}
.leads li.ist-neu{animation:hereinrutschen .6s var(--aus)}
.leads__av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--kalk-100);font-weight:700;font-size:12px;color:var(--ink-600)}
.leads b{display:block;font-weight:600}
.leads small{font-size:11.5px;color:var(--ink-400)}

/* Teilen & Übergabe */
.teilen,.ueb{display:flex;flex-direction:column;gap:10px}
.teilen__wahl{display:flex;flex-wrap:wrap;gap:4px}
.teilen__wahl i{font-style:normal;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;background:var(--kalk-0);border:1px solid var(--kalk-200);color:var(--ink-600);transition:background-color .3s,color .3s,border-color .3s}
.teilen__wahl i.ist-an{background:var(--wald-900);border-color:var(--wald-900);color:#fff}
.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(--kalk-100);font-size:13px}
.ueb__liste li>i{width:16px;height:16px;border-radius:5px;background:var(--gruen-700);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:11.5px;color:var(--ink-400)}
.ueb__ok{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--gruen-700)}
.ueb__ok .icon{width:13px;height:13px}
.ueb__schritte{margin-top:6px}

/* Anforderungen */
.anf li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--kalk-100);font-size:13px}
.anf__wahl{display:flex;gap:3px;padding:3px;border-radius:9px;background:var(--kalk-50);border:1px solid var(--kalk-200)}
.anf__wahl i{font-style:normal;font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px;color:var(--ink-400);white-space:nowrap}
.anf__wahl i.ist-0{background:var(--wald-900);color:#fff}
.anf__wahl i.ist-1{background:var(--gold-500);color:var(--ink-900)}
.anf__wahl i.ist-2{background:var(--kalk-200);color:var(--ink-700)}
.anf__eigen{grid-template-columns:18px 1fr auto!important;color:var(--gruen-700)}
.anf__eigen .icon{width:16px;height:16px}

@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:32px 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{font-size:9px}
  .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(--kalk-300)}
.kennzahlen>div{padding:26px 24px 8px 0}
.kennzahlen>div+div{padding-left:24px;border-left:1px solid var(--kalk-300)}
.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(--ink-600);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}
}

/* Ein Stand für alle: vier Beteiligte, eine Karte in der Mitte (vig_stand) */
.stand-kopf{margin-bottom:0}
.stand-kopf .lead{color:var(--hell-2)}
.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:rgba(255,255,255,.16);stroke-width:1.5;stroke-dasharray:1 2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.stand__licht{fill:none;stroke:var(--gold-500);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:16 200;stroke-dashoffset:16;opacity:0;filter:drop-shadow(0 0 6px rgba(203,167,106,.8))}
.stand__licht.hin{animation:lichtHin .9s cubic-bezier(.5,0,.3,1) forwards}
.stand__licht.zurueck{stroke:#8FD0AE;filter:drop-shadow(0 0 6px rgba(143,208,174,.8));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}}

/* Fundament: feine Ringe um den Stand, eine Welle bei jeder Änderung */
.stand__ringe{position:absolute;left:50%;top:50%;width:0;height:0}
.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(255,255,255,.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(255,255,255,.05)}
.stand__ringe i:nth-child(3){width:820px;height:820px;border-color:rgba(255,255,255,.035)}
.stand__welle{width:380px;height:380px;border:2px solid rgba(203,167,106,.6);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)}}

/* 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:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--wald-800);color:var(--hell-1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 20px 40px -18px rgba(0,0,0,.7);transition:background-color .4s,color .4s,box-shadow .4s,transform .4s var(--feder)}
.figur__kreis>.icon{width:32px;height:32px}
.figur b{font-family:var(--f-display);font-size:18px;font-weight:600;letter-spacing:-.02em;color:#fff}
.figur__zeile{min-height:24px;font-size:12.5px;font-weight:600;line-height:24px;padding:0 10px;border-radius:99px;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s var(--aus)}
.figur__haken{position:absolute;right:-2px;top:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#4FA07A;color:#fff;
  box-shadow:0 0 0 3px var(--wald-900);opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s var(--feder)}
.figur__haken .icon{width:15px;height:15px;stroke-width:2.4}
.figur.ist-quelle .figur__kreis{background:var(--gold-500);color:var(--ink-900);transform:scale(1.08);
  box-shadow:0 0 0 8px rgba(203,167,106,.18),0 0 40px rgba(203,167,106,.45)}
.figur.ist-quelle .figur__zeile{opacity:1;transform:none;background:rgba(203,167,106,.16);color:var(--gold-500)}
.figur.ist-aktuell .figur__kreis{box-shadow:inset 0 0 0 2px #4FA07A,0 0 0 8px rgba(79,160,122,.14)}
.figur.ist-aktuell .figur__haken{opacity:1;transform:none}
.figur.ist-aktuell .figur__zeile{opacity:1;transform:none;background:rgba(79,160,122,.16);color:#8FD0AE}

/* 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%;border-radius:var(--r-xl);background:var(--kalk-0);color:var(--ink-900);overflow:hidden;
  box-shadow:0 0 0 1px rgba(203,167,106,.5),0 40px 90px -30px rgba(0,0,0,.8),0 0 100px -10px rgba(203,167,106,.28)}
.stand__karte.ist-puls{animation:kartePuls .9s var(--aus)}
@keyframes kartePuls{0%{transform:scale(1)}35%{transform:scale(1.025)}100%{transform:scale(1)}}
.karte__marke{display:flex;align-items:center;gap:10px;margin:0;padding:11px 18px;background:var(--wald-950);color:var(--gold-500);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.karte__marke .zeichen{height:14px;width:auto;--z-mitte:#fff;--z-unten:#fff}
.karte__werte{margin:0;padding:2px 10px 10px}
.karte__werte>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 8px;border-top:1px solid var(--kalk-100);border-radius:8px;font-size:13.5px}
.karte__werte>div.ist-neu{animation:zeileAufleuchten 1.8s var(--aus)}
.karte__werte dt{color:var(--ink-600)}
.karte__werte dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.leer{color:var(--ink-400);font-weight:500}


/* Schmal: zwei Beteiligte oben, die Karte, zwei unten — ohne Linien */
@media (max-width:760px){
  .stand__buehne{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"bt vt" "mitte mitte" "fi kf";row-gap:14px;column-gap:8px;padding:6px 0}
  .stand__linien{display:none}
  .figur{position:static;transform:none;width:auto}
  .figur--bautraeger{grid-area:bt}.figur--vertrieb{grid-area:vt}.figur--finanzierer{grid-area:fi}.figur--kaeufer{grid-area:kf}
  .figur__kreis{width:64px;height:64px}
  .figur__kreis>.icon{width:26px;height:26px}
  .figur b{font-size:16px}
  .figur__zeile{font-size:11.5px;min-height:22px;line-height:22px}
  .stand__mitte{grid-area:mitte;position:relative;left:auto;top:auto;transform:none;width:100%;max-width:340px;justify-self:center}
  .stand__ringe{top:calc(50% + 10px)}
  .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}
  .figur.ist-quelle .figur__kreis{transform:scale(1.05)}
}
.stand-sek{overflow:hidden}

/* Der laufende Schritt: goldene Leiste über der Karte, Fortschrittspunkte darunter */
.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:50px;padding:0 22px 0 7px;border-radius:99px;
  background:var(--gold-500);color:var(--ink-900);font-size:16px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 0 0 6px rgba(203,167,106,.16),0 16px 40px -12px rgba(203,167,106,.7);transition:background-color .4s,color .4s,box-shadow .4s}
.was__icon{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--wald-950);color:var(--gold-500)}
.was__icon .icon{width:18px;height:18px}
.was__icon .zeichen{height:12px;width:auto;--z-mitte:#fff;--z-unten:#fff}
.was__text{display:inline-block}
.stand__was.ist-neu .was__text,.stand__was.ist-neu .was__icon{animation:wasNeu .5s var(--aus)}
@keyframes wasNeu{from{opacity:0;transform:translateY(8px)}}
.stand__was.ist-leer{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px var(--linie-hell)}

/* Foto der Einheit mit Titel */
.karte__bild{position:relative;height:150px;overflow:hidden}
.karte__bild picture,.karte__bild img{display:block;width:100%;height:100%;object-fit:cover}
.karte__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,26,20,0) 35%,rgba(13,26,20,.82))}
.karte__titel{position:absolute;z-index:1;left:18px;right:18px;bottom:12px;color:#fff}
.karte__titel b{display:block;font-family:var(--f-display);font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1}
.karte__titel span{display:block;margin-top:4px;font-size:12.5px;color:rgba(243,245,241,.85)}
.karte__werte{padding-top:8px}
.karte__werte>div{transition:background-color .5s}
.karte__werte>div.ist-aktiv{background:var(--gold-100)}
.karte__werte>div.ist-aktiv dt{color:var(--ink-900);font-weight:600}

@media (max-width:760px){
  .stand__was{position:static;transform:none;margin:0 0 14px;max-width:100%;height:44px;font-size:14px;padding-right:16px}
  .was__icon{width:32px;height:32px}
  .karte__bild{height:130px}
}

/* 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:6px;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:11.5px;font-weight:600;color:var(--hell-3);text-align:center;transition:color .4s}
.stand__zeit i{position:relative;height:3px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.stand__zeit i::after{content:"";position:absolute;inset:0;width:0;border-radius:inherit;background:var(--gold-500)}
.stand__zeit li.ist-fertig i::after{width:100%;background:rgba(143,208,174,.75)}
.stand__zeit li.ist-an{color:#fff}
.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(--hell-2)}
@media (max-width:760px){.stand__zeit{margin-top:6px}.stand__zeit li{font-size:10.5px}}

/* Wer (noch) nicht beteiligt ist, ist nicht zu sehen — und kommt mit einem Aufleuchten dazu */
.figur{transition:opacity .6s var(--aus),scale .7s var(--feder)}
.figur.ist-weg{opacity:0;scale:.6;pointer-events:none}
.stand__linie{transition:opacity .8s var(--aus)}
.stand__linie.ist-weg{opacity:0}
.figur.ist-dazu .figur__kreis{animation:dazu 1.3s var(--aus)}
@keyframes dazu{0%{box-shadow:0 0 0 0 rgba(143,208,174,.55)}100%{box-shadow:0 0 0 26px rgba(143,208,174,0)}}

/* Feste Maße für Szenen, die sich bewegen: Inhalt wechselt, die Größe nicht. */
.freigabe-vig{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.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);
  border-radius:var(--r-xl);background:var(--wald-900);color:#fff;box-shadow:var(--schatten-2);position:relative;overflow:hidden}
.sicher::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--linie-hell-2) 1px,transparent 1px),linear-gradient(to bottom,var(--linie-hell-2) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 55%);mask-image:linear-gradient(90deg,#000,transparent 55%)}
.sicher>*{position:relative}
.sicher__kopf{display:flex;align-items:center;gap:16px}
.sicher__siegel{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--gold-500);color:var(--ink-900)}
.sicher__siegel .icon{width:26px;height:26px}
.sicher__zeile{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-500)}
.sicher__titel{margin-top:2px;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;color:#fff}
.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;border-radius:99px;
  background:rgba(255,255,255,.06);border:1px solid var(--linie-hell);font-size:14.5px;font-weight:600;white-space:nowrap}
.sicher__punkte li span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(203,167,106,.16);color:var(--gold-500)}
.sicher__punkte .icon{width:15px;height:15px}
.sicher__mehr{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--gold-500);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;justify-self:center;padding:26px 28px 14px;border-radius:var(--r-xl);background:var(--kalk-0);color:var(--ink-900);box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.siegel__kopf{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--kalk-200)}
.siegel__icon{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--gold-500);color:var(--ink-900)}
.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:12.5px;color:var(--ink-400)}
.siegel__liste li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--kalk-100);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;border-radius:50%;background:var(--gruen-100);color:var(--gruen-700);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;border-radius:var(--r-lg);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;border-radius:12px;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:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--gold-100);color:var(--gold-700)}
.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);border-radius:var(--r-xl);background:var(--kalk-0);border:1px solid var(--kalk-200);box-shadow:var(--schatten-1)}
.portal-band__marke{display:grid;place-items:center;min-width:150px;height:84px;padding:0 22px;border-radius:var(--r-lg);background:var(--kalk-0);border:1px solid var(--kalk-200)}
.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(--ink-900)}
.portal-band__zeile{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-700)}
.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(--ink-600)}
.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(--ink-700);white-space:nowrap}
.portal-band__punkte .icon{flex:none;width:17px;height:17px;color:var(--gruen-600)}
@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}
}