/* =====================================================================
   LaufbahnFinanz · Gestaltungssystem
   Welt: Grün & Glas. Nebel als Grund, Wald als dunkle Fläche, Blatt als
   Licht, Glas über der Laufbahnkurve. Inter Display für Überschriften,
   Inter für Text – selbst gehostet, keine fremden Abrufe.
   Farbschema: <html class="v-dunkel"> schaltet die Töne aus theme-dunkel.css
   (.v-dunkel) ein, seit 14.10.2026 die gewählte Variante B.
   Farbton 137° aus der Bestandsseite (#35B058, #05331A), alle weiteren
   Töne sind Ableitungen daraus.
   ===================================================================== */
@font-face{font-family:"Inter Display";font-style:normal;font-weight:600;font-display:swap;src:url("/schriften/inter-display-600.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/schriften/inter-400.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/schriften/inter-500.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/schriften/inter-600.woff") format("woff")}

:root{
  --mist:#F2F8F4; --mist-2:#E6F0E9; --white:#FFFFFF;
  --ink:#0E1F16; --muted:#4F6459; --muted-2:#5F7368;
  --green:#1F6633; --green-deep:#0B3D21; --forest:#05331A; --forest-2:#0F5A2C;
  --leaf:#35B058; --mint:#9FE2B5; --mint-bg:#DDF5E6; --mint-line:#BFE8CC;
  --line:rgba(31,102,51,.16); --line-strong:rgba(31,102,51,.3); --line-ctrl:#639272;
  --glass:rgba(255,255,255,.64); --glass-line:rgba(255,255,255,.9);
  --shadow-glass:0 24px 48px -22px rgba(5,51,26,.36), 0 2px 6px -2px rgba(5,51,26,.14), inset 0 1px 0 rgba(255,255,255,.92);
  --shadow-lift:0 34px 60px -30px rgba(5,51,26,.45), 0 2px 6px -2px rgba(5,51,26,.14), inset 0 1px 0 rgba(255,255,255,.92);
  --shadow-btn:0 14px 28px -14px rgba(31,102,51,.7);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.4,0,.2,1);
  --display:"Inter Display","Inter",system-ui,sans-serif; --text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,4vw,56px); --maxw:1240px; --hd:76px;
  --r-s:10px; --r-m:16px; --r-l:22px;
  --s-5:24px; --s-6:32px;
  --section:clamp(56px,7vw,104px); --section-s:clamp(40px,6vw,80px);
}

/* ---------- Grund ---------- */
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--mist); color:var(--ink); font-family:var(--text); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; font-feature-settings:"calt","liga","cv11"}
img,svg{max-width:100%}
img{display:block; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0}
h3,h4{line-height:1.25}
ul,ol{padding:0; list-style:none}
button{font:inherit}
::selection{background:var(--leaf); color:var(--forest)}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--green); color:var(--white); padding:12px 16px; border-radius:var(--r-s); font-weight:600}
.skip:focus{left:8px; outline:2px solid var(--green-deep); outline-offset:3px}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--narrow{max-width:860px}
svg{display:block}
.sprite{position:absolute}
.ico{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none}
.disp{font-family:var(--display); font-weight:600; letter-spacing:-.025em; line-height:1.04; color:var(--green-deep); text-wrap:balance}
h2.disp{font-size:clamp(32px,4.2vw,54px)}
h3.disp{font-size:clamp(24px,2.6vw,32px)}
.lead{font-size:clamp(17px,1.35vw,19.5px); line-height:1.6; color:var(--muted); max-width:34em}
.section{padding-block:var(--section)}
.section--top0{padding-top:0}
.section__hd{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-5); flex-wrap:wrap; margin-bottom:clamp(28px,4vw,52px)}
.section__hd .lead{margin-top:var(--s-6)}
.section__hd--stack{margin-bottom:0}
section[id],article[id]{scroll-margin-top:90px}
.hinweis{font-size:13px; color:var(--muted-2)}

/* ---------- Einblendungen (ohne JS sichtbar, mit JS gestaffelt) ---------- */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.js .rv.in{opacity:1; transform:none}
/* Unterlängen (g, j, p, q, y) brauchen Platz unter der Grundlinie: Polster unten, nie negativ zurückziehen */
.js .rv-clip{overflow:hidden; padding-top:.16em; padding-bottom:.24em; margin-top:-.1em; margin-bottom:-.12em}
.js .article__h1.rv-clip{margin-top:10px}
.js .rv-clip > .clipin{display:block; transform:translateY(130%); transition:transform 1.1s var(--ease-out)}
.js .rv-clip.in > .clipin{transform:none}
.rv.d1{transition-delay:.1s} .rv.d2{transition-delay:.2s} .rv.d3{transition-delay:.3s} .rv.d4{transition-delay:.4s} .rv.d5{transition-delay:.5s}

/* ---------- Glas und Licht ---------- */
.glass{background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25); box-shadow:var(--shadow-glass)}
.lit{position:relative; overflow:hidden; --mx:50%; --my:50%}
.lit::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(460px circle at var(--mx) var(--my), rgba(255,255,255,.62), rgba(255,255,255,0) 62%); opacity:0; transition:opacity .45s var(--ease-io)}
.lit:hover::before{opacity:1}
.lit > *{position:relative}

/* ---------- Bedienelemente: eine Familie, zwei Varianten ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 26px; border-radius:var(--r-s); font-weight:600; font-size:16px; line-height:1.2; letter-spacing:-.005em; border:1.5px solid transparent; cursor:pointer; text-align:center; transition:background-color .2s var(--ease-io), color .2s, border-color .2s, transform .3s var(--ease-out), box-shadow .3s var(--ease-out)}
.btn .ico{transition:transform .3s var(--ease-out)}
.btn:hover .ico{transform:translateX(4px)}
.btn > .ico:first-child{width:20px; height:20px; stroke-width:1.9}
.btn:hover > .ico:first-child{transform:scale(1.12) rotate(-8deg)}
.btn--primary{background:var(--green); color:var(--white); box-shadow:var(--shadow-btn)}
.btn--primary:hover{background:var(--green-deep); transform:translateY(-1px); box-shadow:0 18px 32px -14px rgba(11,61,33,.7)}
.btn--primary:focus-visible{outline:2px solid var(--green-deep); outline-offset:3px}
.btn--primary:active{transform:translateY(1px); background:var(--forest); box-shadow:none}
.btn--ghost{border-color:var(--line-ctrl); color:var(--green-deep); background:rgba(255,255,255,.55)}
.btn--ghost:hover{border-color:var(--green); background:var(--white)}
.btn--ghost:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.btn--ghost:active{transform:translateY(1px); background:var(--mist-2)}
.btn--sm{min-height:44px; padding:10px 18px; font-size:14px}
.btn__long{display:inline}
.link{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--green); border-radius:4px}
.link .ico{width:16px; height:16px; transition:transform .3s var(--ease-out)}
.link:hover{color:var(--green-deep)}
.link:hover .ico{transform:translateX(4px)}
.link:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.link:active{color:var(--forest)}
.prose a, .note__m a{color:var(--green); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; border-radius:3px}
.prose a:hover, .note__m a:hover{color:var(--green-deep); text-decoration-thickness:2px}
.prose a:focus-visible, .note__m a:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.prose a:active, .note__m a:active{color:var(--forest)}
/* Dunkle Flächen: dieselben Elemente, eigene Zustände */
.dark{color:var(--white)}
.dark .btn--primary{background:var(--leaf); color:var(--forest); box-shadow:0 14px 28px -14px rgba(53,176,88,.7)}
.dark .btn--primary:hover{background:var(--mint); color:var(--forest)}
.dark .btn--primary:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
.dark .btn--primary:active{background:var(--mint-line); color:var(--forest); box-shadow:none}
.dark .btn--ghost{border-color:rgba(159,226,181,.5); color:var(--white); background:rgba(255,255,255,.08)}
.dark .btn--ghost:hover{border-color:var(--mint); background:rgba(255,255,255,.14)}
.dark .btn--ghost:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
.dark .btn--ghost:active{background:rgba(255,255,255,.2)}
.dark .link{color:var(--mint)}
.dark .link:hover{color:var(--white)}
.dark .link:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
.dark .link:active{color:var(--mint-line)}
.dark a:focus-visible{outline-color:var(--mint)}
.dark .prose a{color:var(--mint)}
.dark .prose a:hover{color:var(--white)}
.dark .prose a:active{color:var(--mint-line)}

/* ---------- Kopfzeile ---------- */
.hd{position:sticky; top:0; z-index:40; background:rgba(242,248,244,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:background-color .35s, border-color .35s, box-shadow .35s}
.hd.is-scrolled{background:rgba(255,255,255,.86); border-bottom-color:var(--line); box-shadow:0 10px 30px -18px rgba(5,51,26,.25)}
.hd .wrap{max-width:1400px}
.hd__in{display:flex; align-items:center; gap:var(--s-5); min-height:var(--hd)}
.brand{display:flex; align-items:center; gap:12px; flex:none; transform-origin:left center; transition:transform .35s var(--ease-out); border-radius:6px}
.hd.is-scrolled .brand{transform:scale(.9)}
.brand__mark{width:38px; height:38px; flex:none}
.brand__mark .m-plan{stroke:var(--leaf); fill:none; stroke-width:3.4; stroke-linecap:round}
.brand__mark .m-dienst{stroke:var(--green-deep); fill:none; stroke-width:2.4; stroke-linejoin:round}
.dark .brand__mark .m-dienst{stroke:var(--mint)}
.brand__word{display:flex; flex-direction:column; line-height:1.05}
.brand__word b{font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.015em; color:var(--green-deep)}
.brand__word small{font-size:12px; letter-spacing:.02em; color:var(--muted)}
.dark .brand__word b{color:var(--white)}
.dark .brand__word small{color:var(--mint-line)}
.nav{display:flex; gap:22px; margin-inline:auto; font-size:15px; font-weight:500}
.nav a{position:relative; padding-block:6px; white-space:nowrap; border-radius:4px}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out)}
.nav a:hover::after, .nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--green-deep)}
.nav a:active{color:var(--forest)}
.hd__aside{display:flex; align-items:center; gap:14px; flex:none; margin-left:auto}
.burger{display:none; position:relative; min-height:44px; width:44px; padding:0; border:1.5px solid transparent; border-radius:var(--r-s); background:transparent; color:var(--ink); cursor:pointer; align-items:center; justify-content:center; transition:background-color .2s}
.burger:hover{background:rgba(255,255,255,.7)}
.burger:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.burger:active{background:var(--mist-2)}
.burger__linien{position:relative; width:22px; height:14px}
.burger__linien i{position:absolute; right:0; height:2px; border-radius:2px; background:currentColor; transition:top .35s var(--ease-out), width .35s var(--ease-out), transform .35s var(--ease-out)}
.burger__linien i:first-child{top:2px; width:22px}
.burger__linien i:last-child{top:10px; width:14px}
.burger[aria-expanded="true"] .burger__linien i{top:6px; width:22px}
.burger[aria-expanded="true"] .burger__linien i:first-child{transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__linien i:last-child{transform:rotate(-45deg)}
/* Handy-Menü: liegt unter der Kopfzeile (Kopf bleibt sichtbar, Menüknopf wird zum Schließen-Knopf) */
.drawer{position:fixed; top:var(--drawer-top, var(--hd)); left:0; right:0; bottom:0; z-index:39; display:flex; flex-direction:column; gap:var(--s-5); padding:6px max(var(--gutter), calc((100vw - 620px) / 2)) max(20px, calc(env(safe-area-inset-bottom) + 14px)); background:radial-gradient(130% 55% at 100% 100%, rgba(53,176,88,.14), transparent 62%), var(--mist); color:var(--ink); overflow-y:auto; overscroll-behavior:contain; opacity:0; transform:translateY(-6px); transition:opacity .28s var(--ease-out), transform .38s var(--ease-out)}
.drawer.is-open{opacity:1; transform:none}
.drawer__nav{display:flex; flex-direction:column}
.drawer__nav a{--d:0ms; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; padding:12px 2px; border-bottom:1px solid var(--line); border-radius:4px; font-family:var(--display); font-size:clamp(24px,7vw,30px); font-weight:600; letter-spacing:-.02em; line-height:1.15; color:var(--green-deep); opacity:0; transform:translateY(10px); transition:color .2s, opacity .4s var(--ease-out) var(--d), transform .5s var(--ease-out) var(--d)}
.drawer__nav a:nth-child(2){--d:40ms} .drawer__nav a:nth-child(3){--d:80ms} .drawer__nav a:nth-child(4){--d:120ms} .drawer__nav a:nth-child(5){--d:160ms}
.drawer.is-open .drawer__nav a{opacity:1; transform:none}
.drawer__nav a span{display:inline-flex; align-items:center; gap:12px}
.drawer__nav a .ico{width:22px; height:22px; color:var(--leaf); transition:transform .3s var(--ease-out)}
.drawer__nav a:hover{color:var(--green)}
.drawer__nav a:hover .ico, .drawer__nav a:active .ico{transform:translateX(4px)}
.drawer__nav a:active{color:var(--forest)}
.drawer__nav a:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.drawer__nav a[aria-current]{color:var(--green)}
.drawer__nav a[aria-current] span::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--leaf); box-shadow:0 0 0 4px rgba(53,176,88,.18)}
.drawer__karte{margin-top:auto; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; padding:16px 12px 12px; border-radius:var(--r-l); background:rgba(255,255,255,.74); border:1px solid var(--line); box-shadow:var(--shadow-glass); opacity:0; transform:translateY(14px); transition:opacity .45s var(--ease-out) .18s, transform .55s var(--ease-out) .18s}
.drawer.is-open .drawer__karte{opacity:1; transform:none}
.drawer__karte .avatar{width:52px; height:52px}
.drawer__karte p{display:flex; flex-direction:column; gap:2px; margin:0; line-height:1.25}
.drawer__karte p b{font-size:16px; font-weight:600; color:var(--green-deep)}
.drawer__karte p span{font-size:14px; color:var(--muted)}
.drawer__karte .avatar{margin-left:4px}
.drawer__karte .btn{grid-column:1 / -1; width:100%; justify-content:center; gap:8px; padding-inline:14px; font-size:14px; text-wrap:balance; text-align:center}
/* Sperre nur am body: overflow am html würde die klebende Kopfzeile lösen (Kopf springt mit der Seite weg) */
html.menue-offen body{overflow:hidden}
html.menue-offen .hd{background:var(--mist); border-bottom-color:var(--line); box-shadow:none}
/* Schwebender WhatsApp-Knopf (nur Handy, siehe Umbrüche) */
.fab{display:none}

/* ---------- Seitenleiste für Abschnitte (nur Startseite, breit) ---------- */
.rail{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:30; display:flex; flex-direction:column; gap:6px}
.rail a{position:relative; display:flex; align-items:center; justify-content:flex-end; gap:10px; min-height:22px; padding:2px 0; color:var(--muted-2); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-radius:4px}
.rail a span{opacity:0; transform:translateX(6px); transition:opacity .3s, transform .4s var(--ease-out)}
.rail a i{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.45; transition:transform .3s var(--ease-out), opacity .3s}
.rail a:hover span, .rail a:focus-visible span, .rail a.is-active span{opacity:1; transform:none}
.rail a.is-active{color:var(--green)}
.rail a.is-active i{transform:scale(1.8); opacity:1}
.rail a:active{color:var(--forest)}

/* ---------- Aufmacher mit der Laufbahnbühne ---------- */
.hero{position:relative; overflow:hidden; min-height:clamp(560px,calc(100svh - var(--hd)),920px); display:flex; align-items:stretch; --px:0; --py:0}
.hero__stage{position:relative; width:100%; aspect-ratio:1000/560; max-height:calc(100svh - var(--hd) - 340px); min-height:240px}
.laufbahn{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.laufbahn text{font-family:var(--text); font-size:19px; fill:var(--muted); font-weight:500}
.laufbahn .lb-raster line{stroke:var(--green); stroke-opacity:.09; stroke-width:1}
.laufbahn .lb-achse{stroke:var(--line-strong); stroke-width:1.5}
.laufbahn .lb-ende{stroke:var(--green-deep); stroke-width:1.5; stroke-dasharray:6 7; stroke-opacity:.55}
.laufbahn .lb-dienst{fill:none; stroke:var(--green-deep); stroke-opacity:.5; stroke-width:2.5; stroke-linejoin:round}
.laufbahn .lb-luecke{fill:url(#lb-schraffur); opacity:.6}
.laufbahn .lb-plan{fill:none; stroke:var(--leaf); stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 6px 10px rgba(53,176,88,.35))}
.laufbahn .lb-plan-flaeche{fill:url(#lb-verlauf); opacity:.9}
.js .laufbahn .lb-plan{stroke-dasharray:1000; stroke-dashoffset:1000; animation:lbZeichnen 2400ms .5s var(--ease-out) forwards}
.js .laufbahn .lb-plan-flaeche{opacity:0; animation:lbFlaeche 1200ms 1.8s var(--ease-out) forwards}
@keyframes lbZeichnen{to{stroke-dashoffset:0}}
@keyframes lbFlaeche{to{opacity:.9}}
.laufbahn .lb-punkt{fill:var(--white); stroke:var(--leaf); stroke-width:3; filter:drop-shadow(0 4px 8px rgba(5,51,26,.35))}
.laufbahn .lb-spitze{fill:var(--leaf); stroke:var(--white); stroke-width:2.5}
.laufbahn .lb-punkt-ring{fill:none; stroke:var(--leaf); stroke-width:2; opacity:0}
.laufbahn .lb-punkt-ring.is-puls{animation:lbRing 1100ms var(--ease-out) forwards}
@keyframes lbRing{0%{opacity:.9; r:8} 100%{opacity:0; r:34}}
.laufbahn .lb-label{font-size:18px; fill:var(--green-deep); font-weight:600}
.laufbahn .lb-label--plan{fill:var(--green)}
.laufbahn .lb-phase{font-family:var(--display); font-size:16.5px; letter-spacing:.06em; text-transform:uppercase; fill:var(--muted-2); font-weight:600}
.laufbahn .lb-phase--aktiv{fill:var(--green)}
.laufbahn .lb-ereignis{fill:var(--green-deep); opacity:.55}
.laufbahn .lb-ereignis-ring{fill:none; stroke:var(--leaf); stroke-width:2; opacity:0}
.laufbahn .lb-ereignis-ring.is-puls{animation:lbRing 1100ms var(--ease-out) forwards}
.laufbahn .lb-griff{cursor:grab; outline:none}
.laufbahn .lb-griff.is-drag{cursor:grabbing}
.laufbahn .lb-griff circle{fill:var(--green); stroke:var(--white); stroke-width:3.5; filter:drop-shadow(0 6px 12px rgba(5,51,26,.4)); transition:fill .2s}
.laufbahn .lb-griff:hover circle:not(.lb-fokus), .laufbahn .lb-griff.is-drag circle:not(.lb-fokus){fill:var(--green-deep)}
.laufbahn .lb-griff:focus-visible circle:not(.lb-fokus){stroke:var(--green-deep); stroke-width:4}
.laufbahn .lb-griff circle.lb-fokus{fill:none; stroke:none; filter:none; pointer-events:none}
.laufbahn .lb-griff:focus-visible circle.lb-fokus{stroke:var(--mint); stroke-width:3}
.laufbahn .lb-griff .lb-griff-hint{fill:var(--green); font-size:17.5px; font-weight:600}
.laufbahn .lb-griff .lb-griff-text{fill:var(--green-deep); font-size:17px; font-weight:500}
.laufbahn .lb-tip rect{fill:rgba(255,255,255,.86); stroke:rgba(255,255,255,.95); filter:drop-shadow(0 12px 24px rgba(5,51,26,.28))}
.laufbahn .lb-tip{transition:transform .35s var(--ease-out)}
.laufbahn .lb-tip-t{font-size:17.5px; font-weight:600; fill:var(--green-deep)}
.laufbahn .lb-ebene{transform-box:fill-box; transform-origin:center; transition:transform .6s var(--ease-out)}
.laufbahn .lb-ebene--1{transform:translate(calc(var(--px) * 6px), calc(var(--py) * 4px))}
.laufbahn .lb-ebene--2{transform:translate(calc(var(--px) * 12px), calc(var(--py) * 8px))}
.laufbahn .lb-ebene--3{transform:translate(calc(var(--px) * 20px), calc(var(--py) * 12px))}
.hero .wrap{max-width:1400px}
.hero__grid{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,44fr) minmax(0,56fr); gap:clamp(24px,3vw,48px); align-items:center; padding-block:clamp(24px,4vw,56px) clamp(20px,3vw,40px); width:100%}
.hero__copy{max-width:600px}
.hero__right{display:flex; flex-direction:column; gap:14px; min-width:0}
.hero__h1{font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:.98; font-size:clamp(42px,4.9vw,70px); color:var(--green-deep)}
.hero__h1 .w{display:block; overflow:hidden; padding-top:.12em; margin-top:-.12em; padding-bottom:.22em; margin-bottom:-.22em}
.hero__h1 .w > span{display:block; transform:translateY(130%); animation:lineUp 1.1s var(--ease-out) forwards}
.hero__h1 .w:nth-child(2) > span{animation-delay:.12s}
.hero__h1 .w--sub{font-size:.58em; letter-spacing:-.02em; line-height:1.08; margin-top:.28em; color:var(--green)}
.hero__h1 .w--sub > span{animation-delay:.24s}
@keyframes lineUp{to{transform:none}}
.hero__sub{margin-top:26px; max-width:30em; font-size:clamp(17px,1.35vw,19.5px); line-height:1.6; color:var(--muted); animation:fadeUp 1s .5s var(--ease-out) both}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; animation:fadeUp 1s .64s var(--ease-out) both}
.hero__note{display:flex; gap:12px; align-items:flex-start; margin-top:24px; max-width:30em; font-size:14.5px; line-height:1.55; color:var(--muted); animation:fadeUp 1s .8s var(--ease-out) both}
.hero__note .ico{margin-top:3px; width:17px; height:17px; color:var(--green)}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.info{position:absolute; top:4px; right:4px; z-index:6}
.info__btn{all:unset; box-sizing:border-box; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; cursor:pointer; background:var(--white); border:1px solid var(--line); color:var(--green); font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:15px; line-height:1; box-shadow:0 6px 14px -8px rgba(5,51,26,.45); transition:background-color .25s, color .25s, transform .3s var(--ease-out), box-shadow .25s}
.info__btn::after{content:""; position:absolute; inset:-8px; border-radius:50%}
.info__btn:hover{background:var(--green); color:var(--white); transform:scale(1.08)}
.info__btn:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.info__btn:active{transform:scale(.96); background:var(--green-deep); color:var(--white)}
.info__btn[aria-expanded="true"]{background:var(--green); color:var(--white)}
.info__pop{position:absolute; right:0; top:38px; width:min(300px, 80vw); margin:0; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.96); font-size:13px; line-height:1.5; color:var(--muted); animation:infoIn .3s var(--ease-out)}
.info__pop b{color:var(--green-deep); font-weight:600}
@keyframes infoIn{from{opacity:0; transform:translateY(-6px)}}

/* Jahrescheck: Glaskarten über der Bühne */
.notes{position:relative; height:232px; width:100%; max-width:420px; align-self:flex-end; margin-right:clamp(0px,6vw,96px); pointer-events:none; animation:fadeUp 1s 1s var(--ease-out) both}
.notes__hd{position:absolute; right:0; top:0; z-index:7; pointer-events:auto; white-space:nowrap; display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 11px; border-radius:999px; font-size:12.5px; color:var(--muted)}
.notes__hd i{width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2.4s ease-out infinite}
.notes__hd b{color:var(--green-deep); font-weight:600; font-variant-numeric:tabular-nums}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,102,51,.45)} 100%{box-shadow:0 0 0 9px rgba(31,102,51,0)}}
.note{position:absolute; left:0; right:0; bottom:0; pointer-events:auto; display:grid; grid-template-columns:40px 1fr; gap:13px; padding:14px 16px 14px 14px; border-radius:18px; transform-origin:50% 100%; transition:transform .75s var(--ease-out), opacity .6s var(--ease-io), filter .6s var(--ease-io), box-shadow .4s; will-change:transform,opacity}
.note.pos-0{z-index:6; background:var(--white)}
.note.pos-1{z-index:5; transform:translateY(-12px) scale(.95); opacity:.92; background:rgba(255,255,255,.96)}
.note.pos-2{z-index:4; transform:translateY(-22px) scale(.9); opacity:.6; background:rgba(255,255,255,.96)}
.note.pos-3{z-index:3; transform:translateY(-30px) scale(.86); opacity:0}
.note.pos-0:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift)}
.note.is-enter{opacity:0; transform:translateY(40px) scale(.94); filter:blur(8px)}
.note__ico{width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--green),var(--green-deep)); color:var(--white); display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px -8px rgba(5,51,26,.6); transition:background .5s}
.note__ico .ico{width:20px; height:20px; stroke-width:1.9}
.note.is-done .note__ico{background:linear-gradient(135deg,var(--leaf),var(--green))}
.note__meta{display:flex; justify-content:space-between; gap:10px; align-items:baseline; font-size:11.5px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.note__meta span{font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--green)}
.note__t{margin-top:3px; font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--ink); line-height:1.3}
.note__m{margin-top:2px; font-size:13px; color:var(--muted); line-height:1.4}
.note__st{position:relative; height:26px; margin-top:9px}
.chip{position:absolute; left:0; top:0; display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; transition:opacity .35s, transform .45s var(--ease-out)}
.chip i{width:7px; height:7px; border-radius:50%; background:currentColor; display:block}
.chip .ico{width:13px; height:13px; stroke-width:2.6}
.chip--a{background:var(--mist-2); color:var(--green-deep)}
.chip--b{background:var(--mint-bg); color:var(--green); opacity:0; transform:translateY(8px)}
.note.is-done .chip--a{opacity:0; transform:translateY(-6px)}
.note.is-done .chip--b{opacity:1; transform:none}

/* ---------- Nachweis-Leiste ---------- */
.trust{margin-top:clamp(28px,4vw,56px); position:relative; z-index:3}
.trust__row{border-radius:18px; padding:6px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); color:var(--muted); position:relative; overflow:clip}
.trust__row::after{content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform:translateX(-120%); opacity:0}
.trust__row.in::after{animation:proofSweep 1.5s .6s var(--ease-io) forwards}
@keyframes proofSweep{0%{transform:translateX(-120%); opacity:1} 100%{transform:translateX(120%); opacity:0}}
.proof{position:relative; display:flex; align-items:center; gap:12px; min-height:44px; padding:16px 18px; border-radius:14px; font-size:14px; line-height:1.35; color:var(--muted); opacity:0; transform:translateY(10px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), background-color .3s, box-shadow .4s var(--ease-out)}
.trust__row.in .proof{opacity:1; transform:none}
.proof:nth-child(1){transition-delay:.1s} .proof:nth-child(2){transition-delay:.22s} .proof:nth-child(3){transition-delay:.34s} .proof:nth-child(4){transition-delay:.46s}
.proof + .proof::before{content:""; position:absolute; left:-1px; top:16px; bottom:16px; width:1px; background:var(--line)}
.trust__row.in .proof:hover{transform:translateY(-5px); background:rgba(255,255,255,.72); box-shadow:0 22px 40px -24px rgba(5,51,26,.45); transition-delay:0s}
.proof:focus-visible{outline:2px solid var(--green); outline-offset:-2px}
.proof:active{background:var(--mist-2)}
.proof:hover + .proof::before, .proof:hover::before{opacity:0}
.proof b{display:block; font-weight:600; font-size:15px; color:var(--green-deep); white-space:nowrap}
.proof > .ico{color:var(--green); width:22px; height:22px; transition:transform .5s var(--ease-out)}
.proof:hover > .ico{transform:scale(1.18) rotate(-6deg)}
.proof__go{position:absolute; right:10px; top:10px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:var(--green); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .4s var(--ease-out)}
.proof__go .ico{width:14px; height:14px; stroke-width:2.2}
.proof:hover .proof__go{opacity:1; transform:none}

/* ---------- Die letzten 24 Monate: Scroll-Bühne ---------- */
.frist{position:relative; height:380vh; margin-top:clamp(48px,6vw,96px)}
.frist__sticky{position:sticky; top:0; height:100vh; height:100svh; padding-top:var(--hd); display:flex; align-items:center; overflow:hidden}
.frist__bg{position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 60% at 80% 40%, rgba(53,176,88,.14), transparent 70%)}
.frist__num{position:absolute; right:calc(var(--gutter) - 12px); top:50%; transform:translateY(-52%); font-family:var(--display); font-weight:600; font-size:clamp(220px,27vw,380px); line-height:1; letter-spacing:-.05em; color:var(--green-deep); pointer-events:none; user-select:none}
.frist__num span{position:absolute; right:0; top:0; opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-io), transform 1.1s var(--ease-out)}
.frist[data-stage="0"] .frist__num span:nth-child(1), .frist[data-stage="1"] .frist__num span:nth-child(2), .frist[data-stage="2"] .frist__num span:nth-child(3), .frist[data-stage="3"] .frist__num span:nth-child(4){opacity:.055; transform:none}
.frist__grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:center; width:100%}
.frist__link{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3}
.frist__link path{fill:none; stroke:var(--leaf); stroke-width:1.5; opacity:0}
.frist__link path.go{animation:linkDraw 1.3s var(--ease-out) forwards}
@keyframes linkDraw{0%{stroke-dashoffset:var(--len); opacity:1} 55%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:0}}
.frist__h2{font-size:clamp(30px,3.4vw,44px)}
.frist .lead{font-size:16.5px; margin-top:18px}
.steps{margin-top:22px; position:relative}
.steps::before{content:""; position:absolute; left:15px; top:16px; bottom:16px; width:1px; background:var(--line)}
.steps__bar{position:absolute; left:15px; top:16px; bottom:16px; width:1px; background:var(--green); transform-origin:top; transform:scaleY(0); transition:transform .3s linear}
.step{display:grid; grid-template-columns:32px 1fr; gap:16px; padding:9px 0; align-items:start; transition:transform .6s var(--ease-out)}
.step.is-on{transform:translateX(8px)}
.step__dot{width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line); background:var(--mist); display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:12px; color:var(--muted); position:relative; z-index:1; transition:background-color .35s, color .35s, border-color .35s, transform .5s var(--ease-out)}
.step__dot .ico{display:none; width:15px; height:15px; stroke-width:2.6}
.step h3{font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.015em; color:var(--muted); transform-origin:left center; transition:color .35s, transform .6s var(--ease-out)}
.step p{font-size:14px; line-height:1.5; color:var(--muted-2); max-width:30em; margin-top:3px; transition:color .35s}
.step.is-on .step__dot{background:var(--green); border-color:var(--green); color:var(--white); transform:scale(1.14); animation:dotPulse 2s ease-out infinite}
@keyframes dotPulse{0%{box-shadow:0 0 0 3px rgba(31,102,51,.22)} 100%{box-shadow:0 0 0 16px rgba(31,102,51,0)}}
.step.is-on h3{color:var(--green-deep); transform:scale(1.12)}
.step.is-on p{color:var(--muted)}
.step.is-past .step__dot{background:var(--leaf); border-color:var(--leaf); color:var(--forest)}
.step.is-past .step__dot .step__n{display:none}
.step.is-past .step__dot .ico{display:block}
.step.is-past h3{color:var(--ink)}
/* Der Laufbahnplan: das Dokument, das sich füllt */
.plan{border-radius:var(--r-l); padding:0; overflow:hidden; max-width:520px; margin-left:auto; width:100%; position:relative; z-index:2; transition:transform .6s var(--ease-out), box-shadow .6s}
.plan.is-pop{transform:scale(1.022); box-shadow:0 40px 70px -30px rgba(5,51,26,.45), 0 2px 6px -2px rgba(5,51,26,.14), inset 0 1px 0 rgba(255,255,255,.92)}
.plan__bar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 20px; color:var(--white); background:var(--green)}
.frist[data-stage="3"] .plan__bar{background:var(--forest-2)}
.plan__stage{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.01em}
.plan__dot{width:9px; height:9px; border-radius:50%; background:var(--white); animation:pulseW 1.8s ease-out infinite}
@keyframes pulseW{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)} 100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.plan__lab{position:relative; height:20px; min-width:170px; display:block}
.plan__lab span{position:absolute; left:0; top:0; white-space:nowrap; opacity:0; transform:translateY(10px); transition:opacity .35s, transform .55s var(--ease-out)}
.frist[data-stage="0"] .plan__lab span:nth-child(1), .frist[data-stage="1"] .plan__lab span:nth-child(2), .frist[data-stage="2"] .plan__lab span:nth-child(3), .frist[data-stage="3"] .plan__lab span:nth-child(4){opacity:1; transform:none}
.plan__seg{display:flex; gap:5px}
.plan__seg i{width:28px; height:4px; border-radius:2px; background:rgba(255,255,255,.32); transition:background-color .5s}
.frist[data-stage="0"] .plan__seg i:nth-child(-n+1), .frist[data-stage="1"] .plan__seg i:nth-child(-n+2), .frist[data-stage="2"] .plan__seg i:nth-child(-n+3), .frist[data-stage="3"] .plan__seg i:nth-child(-n+4){background:var(--white)}
.plan__inner{padding:18px 22px 18px}
.plan__id{font-size:12px; color:var(--muted-2)}
.plan h3{font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.02em; color:var(--green-deep); margin-top:4px}
.plan__kurve{margin-top:14px; aspect-ratio:460/134; border-radius:14px; background:var(--mist-2); position:relative; overflow:hidden}
.plan__kurve svg{position:absolute; inset:0; width:100%; height:100%}
.plan__kurve .pk-dienst{fill:none; stroke:var(--green-deep); stroke-opacity:.45; stroke-width:2}
.plan__kurve .pk-ende{stroke:var(--green-deep); stroke-opacity:.5; stroke-width:1.2; stroke-dasharray:4 5}
.plan__kurve .pk-plan{fill:none; stroke:var(--leaf); stroke-width:3; stroke-linecap:round; stroke-dasharray:600; stroke-dashoffset:600; transition:stroke-dashoffset 1.4s var(--ease-out)}
.frist[data-stage="1"] .pk-plan{stroke-dashoffset:420}
.frist[data-stage="2"] .pk-plan{stroke-dashoffset:200}
.frist[data-stage="3"] .pk-plan{stroke-dashoffset:0}
.plan__kurve .pk-text{font-size:11px; fill:var(--muted); font-weight:500}
.plan__rows{margin-top:14px; display:grid; gap:0}
.plan__row{display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center; padding:9px 8px; margin:0 -8px; border-radius:8px; border-top:1px solid rgba(31,102,51,.08); font-size:13.5px; line-height:1.4; color:var(--muted); opacity:.28; transform:translateX(6px); transition:opacity .45s, transform .45s var(--ease-out)}
.plan__row.is-on{opacity:1; transform:none}
.plan__row.is-new{animation:rowFlash 1.6s var(--ease-io)}
@keyframes rowFlash{0%{background:var(--mint-bg)} 100%{background:transparent}}
.plan__row b{color:var(--ink); font-weight:600}
.plan__row > .ico{width:22px; height:22px; border-radius:50%; background:var(--mist-2); color:var(--muted-2); padding:4px; stroke-width:2.4; transition:background-color .4s, color .4s}
.plan__row.is-on > .ico{background:var(--leaf); color:var(--forest)}
.plan__row em{font-style:normal; font-size:12px; color:var(--green); font-weight:600; white-space:nowrap}

/* ---------- Kennzahlen aus den Kundenangaben ---------- */
.ledger{position:relative; overflow:hidden; color:var(--white); background:linear-gradient(112deg,var(--forest) 0%,var(--green-deep) 55%,var(--forest-2) 100%); margin-top:clamp(48px,6vw,96px)}
.ledger::before{content:""; position:absolute; inset:-40% -20%; pointer-events:none; background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.1) 50%, transparent 60%); animation:sweep 9s linear infinite}
@keyframes sweep{from{transform:translateX(-45%)} to{transform:translateX(45%)}}
.ledger__row{position:relative; display:grid; grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}
.ledger__item{padding:28px 24px 26px; display:flex; flex-direction:column; gap:6px; min-width:0}
.ledger__item:first-child{padding-left:0}
.ledger__item + .ledger__item{border-left:1px solid rgba(255,255,255,.16)}
.ledger__num{font-family:var(--display); font-weight:600; font-variant-numeric:lining-nums tabular-nums; font-size:clamp(30px,3.1vw,44px); line-height:1; letter-spacing:-.03em; display:inline-flex; align-items:baseline; white-space:nowrap}
.ledger__num i{font-style:normal; font-size:.55em; margin-left:3px}
.bis{margin-inline:.12em; font-weight:500}
.ledger__lab{font-size:14px; line-height:1.4; color:var(--mint-line); max-width:15em; min-height:2.8em}

/* ---------- Drei Zusagen ---------- */
.promise__grid{margin-top:clamp(32px,4vw,52px); border-radius:var(--r-l); padding:8px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:relative; overflow:clip}
.promise__grid::after{content:""; position:absolute; inset:0; border-radius:var(--r-l); pointer-events:none; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.78) 50%, transparent 70%); transform:translateX(-120%); opacity:0}
.promise__grid.in::after{animation:proofSweep 1.6s .8s var(--ease-io) forwards}
.promise__item{padding:30px 32px 36px; display:flex; flex-direction:column; gap:14px; border-radius:var(--r-m); opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), background-color .4s}
.promise__grid.in .promise__item{opacity:1; transform:none}
.promise__grid.in .promise__item:nth-child(1){transition-delay:.15s} .promise__grid.in .promise__item:nth-child(2){transition-delay:.32s} .promise__grid.in .promise__item:nth-child(3){transition-delay:.49s}
.promise__item:hover{background:rgba(255,255,255,.55); transition-delay:0s}
.promise__item::after{content:""; position:absolute; left:32px; right:32px; bottom:18px; height:2px; border-radius:1px; background:linear-gradient(90deg, var(--green), var(--leaf)); transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease-out)}
.promise__grid.in .promise__item::after{transform:scaleX(1)}
.promise__grid.in .promise__item:nth-child(1)::after{transition-delay:.7s} .promise__grid.in .promise__item:nth-child(2)::after{transition-delay:.9s} .promise__grid.in .promise__item:nth-child(3)::after{transition-delay:1.1s}
.promise__item + .promise__item{border-left:1px solid var(--line); border-radius:0 var(--r-m) var(--r-m) 0}
.promise__item > .ico{width:28px; height:28px; color:var(--green); stroke-dasharray:96; stroke-dashoffset:96; transition:stroke-dashoffset 1.4s var(--ease-out), transform .5s var(--ease-out)}
.promise__grid.in .promise__item > .ico{stroke-dashoffset:0}
.promise__grid.in .promise__item:nth-child(1) > .ico{transition-delay:.35s} .promise__grid.in .promise__item:nth-child(2) > .ico{transition-delay:.55s} .promise__grid.in .promise__item:nth-child(3) > .ico{transition-delay:.75s}
.promise__item:hover > .ico{transform:translateY(-3px) scale(1.12) rotate(-4deg); transition-delay:0s}
.promise__item h3{font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-.02em; color:var(--green-deep)}
.promise__item p{font-size:15.5px; line-height:1.6; color:var(--muted); max-width:26em}
.promise__proof{margin-top:auto; padding-top:14px; font-size:13px; color:var(--green); display:flex; gap:8px; align-items:center}
.promise__proof .ico{width:15px; height:15px}

/* ---------- Leistungskacheln ---------- */
.services__grid{margin-top:clamp(32px,4vw,52px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.services__grid--top0{margin-top:0}
.tile{border-radius:var(--r-l); padding:30px 30px 26px; display:flex; flex-direction:column; gap:16px; transform-style:preserve-3d; transition:transform .3s var(--ease-out), box-shadow .5s var(--ease-out)}
.tile:hover{box-shadow:var(--shadow-lift)}
.tile__ico{width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--mint-bg),var(--mint-line)); display:grid; place-items:center; color:var(--green); transform:translateZ(28px)}
.tile__ico .ico{width:24px; height:24px}
.tile h3{font-family:var(--display); font-weight:600; font-size:23px; letter-spacing:-.02em; color:var(--green-deep); transform:translateZ(14px)}
.tile p{font-size:15px; color:var(--muted); line-height:1.55}
.tile ul{display:grid; gap:8px; font-size:14.5px; color:var(--ink)}
.tile li{display:flex; gap:10px; align-items:flex-start}
.tile li .ico{width:16px; height:16px; color:var(--green); margin-top:4px}
.tile__more{margin-top:auto; padding-top:10px; font-size:14.5px; font-weight:600; color:var(--green); display:inline-flex; gap:8px; align-items:center; border-radius:4px}
.tile__more .ico{width:16px; height:16px; transition:transform .3s var(--ease-out)}
.tile:hover .tile__more .ico{transform:translateX(4px)}
.tile__more:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.tile__more:active{color:var(--forest)}

/* ---------- So läuft die Beratung: horizontaler Ablauf, per Scroll weitergeschaltet ---------- */
.ablauf{position:relative; padding-bottom:var(--section); --wstep:0}
.ablauf::after{content:""; display:block; height:200vh}
.ablauf__sticky{position:sticky; top:92px}
.ablauf__stage{position:relative; border-radius:28px; padding:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px) clamp(14px,2vw,22px); overflow:hidden; isolation:isolate}
.ablauf__stage::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(31,102,51,.14) 1px, transparent 1.3px); background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%); mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%)}
.ablauf__glow{position:absolute; z-index:0; left:-6%; top:-40%; width:46%; height:180%; border-radius:50%; background:radial-gradient(closest-side, rgba(53,176,88,.32), rgba(53,176,88,0)); filter:blur(28px); pointer-events:none; transform:translateX(calc(var(--wstep) * 78%)); transition:transform 1.3s var(--ease-out)}
.ablauf__nav{position:relative; z-index:1; padding-top:30px}
.ablauf__line{position:absolute; left:0; right:0; top:8px; height:2px; background:var(--line)}
.ablauf__bar{position:absolute; left:0; right:0; top:7px; height:4px; border-radius:2px; background:linear-gradient(90deg, var(--leaf), var(--green)); transform-origin:left; transform:scaleX(0); box-shadow:0 0 14px rgba(53,176,88,.5)}
.ablauf__tip{position:absolute; left:0; top:9px; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--white); box-shadow:0 0 0 3px var(--leaf), 0 0 18px 5px rgba(53,176,88,.65); z-index:2; transition:transform .25s linear}
.ablauf__steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.ablauf__nav button{all:unset; box-sizing:border-box; position:relative; display:flex; flex-direction:column; gap:2px; width:100%; min-height:52px; padding:16px 16px 14px; border-radius:14px; border:1.5px solid transparent; cursor:pointer; color:var(--muted-2); transition:color .35s, background-color .35s, box-shadow .35s}
.ablauf__nav button:hover{background:rgba(255,255,255,.45)}
.ablauf__nav button:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.ablauf__nav button:active{background:var(--mist-2)}
.ablauf__nav button::before{content:attr(data-n); position:absolute; left:16px; top:-34px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:12px; line-height:1; color:var(--muted-2); background:var(--white); border:2px solid var(--line); transition:background-color .35s, border-color .35s, color .35s, transform .5s var(--ease-out), box-shadow .35s}
.ablauf__lab{font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.015em; color:var(--muted); transition:color .35s}
.ablauf__nav small{font-size:12.5px}
.ablauf__nav li.is-past button::before{content:"\2713"; background:var(--leaf); border-color:var(--leaf); color:var(--forest)}
.ablauf__nav li.is-past .ablauf__lab{color:var(--ink)}
.ablauf__nav li.is-on button{background:rgba(255,255,255,.72); color:var(--green); box-shadow:0 10px 24px -16px rgba(5,51,26,.5)}
.ablauf__nav li.is-on button::before{background:var(--green); border-color:var(--green); color:var(--white); transform:scale(1.18); animation:dotPulse 2s ease-out infinite}
.ablauf__nav li.is-on .ablauf__lab{color:var(--green-deep)}
.ablauf__viewport{position:relative; z-index:1; overflow:hidden; margin-top:clamp(18px,2.6vw,30px); border-radius:20px}
.ablauf__track{display:flex; width:300%; transition:transform 1s var(--ease-out)}
.wpanel{position:relative; width:33.3333%; flex:none; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,64px); align-items:center; padding:14px 12px 16px; opacity:.3; transform:scale(.96); filter:blur(3px); transition:opacity .7s, transform .9s var(--ease-out), filter .7s}
.wpanel.is-live{opacity:1; transform:none; filter:blur(0)}
.wpanel__big{position:absolute; right:8px; top:-18px; z-index:0; font-family:var(--display); font-weight:600; font-size:clamp(120px,13vw,190px); line-height:1; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px rgba(31,102,51,.18); pointer-events:none; opacity:0; transform:translateX(36px); transition:opacity .9s .15s, transform 1.1s .15s var(--ease-out)}
.wpanel.is-live .wpanel__big{opacity:1; transform:none}
.wpanel__txt, .scene{position:relative; z-index:1}
.wpanel__txt > *{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease-out), transform .7s var(--ease-out)}
.wpanel.is-live .wpanel__txt > *{opacity:1; transform:none}
.wpanel.is-live .wpanel__txt > :nth-child(1){transition-delay:.1s} .wpanel.is-live .wpanel__txt > :nth-child(2){transition-delay:.18s} .wpanel.is-live .wpanel__txt > :nth-child(3){transition-delay:.28s}
.wpanel__txt h3{font-family:var(--display); font-weight:600; font-size:clamp(26px,2.7vw,36px); letter-spacing:-.025em; color:var(--green-deep)}
.wpanel__txt p{margin-top:14px; color:var(--muted); font-size:16px; max-width:30em}
.scene{min-height:270px; display:flex; flex-direction:column; justify-content:center; gap:12px}
/* Szene 1: das Erstgespräch */
.bub{max-width:78%; padding:12px 16px; border-radius:18px; font-size:14.5px; line-height:1.45; opacity:0; transform:translateY(14px) scale(.96); transition:opacity .5s var(--ease-out), transform .6s var(--ease-out)}
.bub b{display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; opacity:.75}
.bub--rl b::before{content:""; width:20px; height:20px; border-radius:50%; background:var(--mist-2) url("/bilder/ryszard-lodziato-avatar.jpg") center/cover no-repeat}
.bub--you{align-self:flex-end; background:var(--green); color:var(--white); border-bottom-right-radius:6px; box-shadow:0 12px 24px -16px rgba(5,51,26,.6)}
.bub--rl{align-self:flex-start; background:rgba(255,255,255,.86); border:1px solid var(--glass-line); color:var(--ink); border-bottom-left-radius:6px; box-shadow:var(--shadow-glass)}
.bub__dots{display:flex; gap:4px; align-items:center; height:14px; overflow:hidden}
.bub__dots i{width:6px; height:6px; border-radius:50%; background:var(--muted-2); animation:typing 1s infinite}
.bub__dots i:nth-child(2){animation-delay:.15s} .bub__dots i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0); opacity:.45} 30%{transform:translateY(-3px); opacity:1}}
.bub__txt{display:block; max-height:0; opacity:0; overflow:hidden}
.wpanel.is-live .bub{opacity:1; transform:none}
.wpanel.is-live .bub:nth-child(1){transition-delay:.2s} .wpanel.is-live .bub:nth-child(2){transition-delay:.9s} .wpanel.is-live .bub:nth-child(3){transition-delay:2.1s} .wpanel.is-live .bub:nth-child(4){transition-delay:2.7s}
.bub__txt{transition:max-height .45s var(--ease-out), opacity .35s .1s}
.bub__dots{transition:height .25s, opacity .2s}
.bub.is-typed .bub__txt{max-height:200px; opacity:1}
.bub.is-typed .bub__dots{height:0; opacity:0}
/* Szene 2: der Finanzplan, legt sich wie ein Blatt ab */
.docu{position:relative; overflow:hidden; border-radius:18px; padding:20px 22px 22px; width:min(440px,100%); margin-inline:auto; opacity:0; transform:perspective(900px) rotateX(10deg) translateY(30px) scale(.95); transform-origin:50% 100%; filter:blur(6px); transition:opacity .6s var(--ease-out), transform .9s var(--ease-out), filter .6s}
.wpanel.is-live .docu{opacity:1; transform:none; filter:blur(0)}
.docu::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.78) 50%, transparent 65%); transform:translateX(-130%)}
.wpanel.is-live .docu::after{animation:docSweep 1.1s 1.95s var(--ease-io) forwards}
@keyframes docSweep{to{transform:translateX(130%)}}
.docu__hd{display:flex; flex-direction:column; gap:3px; padding-right:124px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted)}
.docu__hd b{font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--green)}
.docu__sub{display:block; font-size:13.5px; color:var(--ink)}
.docu__row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(31,102,51,.08); font-size:14px; color:var(--ink); opacity:0; transform:translateX(10px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
.docu__row .ico{width:18px; height:18px; color:var(--green); stroke-width:2.4}
.docu__row--hi{font-weight:600; color:var(--green-deep)}
.docu__row--hi b{font-family:var(--display); color:var(--green)}
.docu__row--dim{color:var(--muted); font-size:13px; border-bottom:0}
.wpanel.is-live .docu__row{opacity:1; transform:none}
.wpanel.is-live .docu__row:nth-of-type(1){transition-delay:.5s} .wpanel.is-live .docu__row:nth-of-type(2){transition-delay:.65s} .wpanel.is-live .docu__row:nth-of-type(3){transition-delay:.8s} .wpanel.is-live .docu__row:nth-of-type(4){transition-delay:.95s} .wpanel.is-live .docu__row:nth-of-type(5){transition-delay:1.1s}
.stamp{position:absolute; right:18px; top:16px; padding:7px 12px; border:2px solid var(--green); border-radius:8px; color:var(--green); font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; transform:rotate(-8deg) scale(1.6); opacity:0; transition:opacity .25s 2.3s, transform .4s 2.3s var(--ease-out)}
.wpanel.is-live .stamp{opacity:1; transform:rotate(-8deg) scale(1)}
/* Szene 3: der Jahrescheck */
.mini{display:grid; grid-template-columns:40px 1fr 26px; gap:12px; align-items:center; padding:12px 14px; border-radius:14px; font-size:13.5px; color:var(--muted); opacity:0; transform:translateX(24px); transition:opacity .5s var(--ease-out), transform .6s var(--ease-out)}
.wpanel.is-live .mini{opacity:1; transform:none}
.wpanel.is-live .mini:nth-child(1){transition-delay:.3s} .wpanel.is-live .mini:nth-child(2){transition-delay:.75s} .wpanel.is-live .mini:nth-child(3){transition-delay:1.2s}
.mini i{width:40px; height:40px; border-radius:12px; background:var(--mint-bg); color:var(--green); display:grid; place-items:center}
.mini b{display:block; color:var(--ink); font-weight:600; font-size:14px}
.mini em{font-style:normal; width:26px; height:26px; border-radius:50%; background:var(--leaf); color:var(--forest); display:grid; place-items:center}
.mini em .ico{width:14px; height:14px; stroke-width:2.6}

/* ---------- Herausgehobenes Zitat: Unabhängigkeit ---------- */
.zitat{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:center}
.zitat__q{position:relative; padding:clamp(28px,4vw,44px) clamp(24px,3.5vw,40px) clamp(24px,3vw,36px) clamp(60px,6vw,84px); border-radius:var(--r-l)}
.zitat__q::before{content:"\201E"; position:absolute; left:clamp(14px,1.6vw,22px); top:clamp(-30px,-2vw,-14px); font-family:var(--display); font-weight:600; font-size:clamp(80px,7vw,104px); line-height:1; color:var(--leaf); opacity:.55}
.zitat__q p{font-family:var(--display); font-weight:600; font-size:clamp(22px,2.4vw,30px); line-height:1.25; letter-spacing:-.02em; color:var(--green-deep)}
.zitat__q footer{margin-top:18px; font-size:14px; color:var(--muted)}
.zitat__q footer b{display:block; color:var(--ink); font-weight:600}
.zitat__txt{font-size:16.5px; color:var(--muted); display:grid; gap:16px}
.zitat__txt p{max-width:34em}
.kurve{display:grid; gap:12px; margin-top:6px}
.kurve li{position:relative; padding-left:32px; color:var(--ink); font-size:15.5px; line-height:1.5}
.kurve li::before, .prose ul li::before{content:""; position:absolute; left:0; top:.12em; width:21px; height:21px; border-radius:50%; background:var(--mint-bg)}
.kurve li::after, .prose ul li::after{content:""; position:absolute; left:8px; top:calc(.12em + 5px); width:5px; height:9px; border:solid var(--green); border-width:0 2.4px 2.4px 0; transform:rotate(45deg)}
.kurve li strong{font-weight:600; color:var(--green-deep)}

/* ---------- Ansprechpartner ---------- */
.person{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(32px,5vw,80px); align-items:center}
.person h2.disp{font-size:clamp(28px,3.2vw,42px)}
.person__fig{position:relative}
.person__fig figcaption{position:absolute; left:16px; right:16px; bottom:16px; padding:11px 15px; border-radius:14px; font-size:13px; color:var(--muted)}
.person__fig figcaption.glass{background:rgba(255,255,255,.9)}
.person__fig figcaption b{display:block; font-weight:600; color:var(--green-deep); font-size:15px}
.person__q{font-family:var(--display); font-weight:600; font-size:clamp(20px,2vw,26px); line-height:1.3; letter-spacing:-.02em; color:var(--green-deep); margin-top:26px}
.person__txt{margin-top:18px; display:grid; gap:12px; color:var(--muted); font-size:16px}
.person__txt p{max-width:36em}
.person__more{margin-top:24px}

/* Portrait und Avatar */
.portrait{display:block; overflow:hidden; aspect-ratio:4/5; max-height:min(560px, calc(100svh - var(--hd) - 140px)); border-radius:var(--r-l); background:var(--mist-2); box-shadow:var(--shadow-glass)}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 18%}
.avatar{display:block; flex:none; width:48px; height:48px; border-radius:50%; overflow:hidden; background:var(--mist-2); box-shadow:0 0 0 2px var(--white), 0 6px 14px -6px rgba(5,51,26,.45)}
.avatar img{width:100%; height:100%; object-fit:cover}

/* ---------- Nachweise mit Datum ---------- */
.badges{margin-top:clamp(32px,4vw,52px); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.badge{border-radius:18px; padding:22px 22px 20px; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--muted); line-height:1.5; transition:transform .5s var(--ease-out), box-shadow .5s}
.badge:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift)}
.badge__ico{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--mint-bg),var(--mint-line)); color:var(--green); display:grid; place-items:center; margin-bottom:6px}
.badge__ico .ico{width:22px; height:22px}
.badge b{font-weight:600; color:var(--green-deep); font-size:15.5px}
.badge__year{margin-top:auto; padding-top:10px; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--green)}
.badge{position:relative}
.badge__siegel{position:absolute; top:-20px; right:18px; width:64px; aspect-ratio:1024/1626; border-radius:6px; overflow:hidden; transform:rotate(5deg); box-shadow:0 14px 26px -12px rgba(40,32,6,.55), 0 2px 6px rgba(40,32,6,.18); transition:transform .5s var(--ease-out)}
.badge__siegel img{display:block; width:100%; height:100%; object-fit:cover}
.badge:hover .badge__siegel{transform:rotate(1deg) translateY(-3px) scale(1.04)}

/* ---------- Fragen ---------- */
.faq{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px); align-items:start}
.faq__intro h2.disp{font-size:clamp(28px,3.1vw,42px)}
.faq__intro .lead{margin-top:24px}
.faq__intro .btn{margin-top:22px}
.faq__list{display:grid; gap:10px}
.qa{border-radius:14px; overflow:hidden; transition:box-shadow .4s}
.qa.is-open{box-shadow:var(--shadow-lift)}
.qa__btn{all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:52px; padding:16px 20px; border:1.5px solid transparent; border-radius:14px; cursor:pointer; font-weight:600; font-size:16.5px; letter-spacing:-.01em; color:var(--green-deep); line-height:1.35; transition:background-color .2s}
.qa__btn:hover{background:rgba(255,255,255,.55)}
.qa__btn:focus-visible{outline:2px solid var(--green); outline-offset:-2px}
.qa__btn:active{background:var(--mist-2)}
.qa__btn .ico{width:20px; height:20px; color:var(--green); transition:transform .4s var(--ease-out)}
.qa.is-open .qa__btn .ico{transform:rotate(45deg)}
.qa__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-out)}
.qa.is-open .qa__body{grid-template-rows:1fr}
.qa__body > div{overflow:hidden; visibility:hidden; transition:visibility 0s .45s}
.qa.is-open .qa__body > div{visibility:visible; transition:visibility 0s}
.qa__body p{padding:0 20px 18px; font-size:15.5px; line-height:1.6; color:var(--muted); max-width:40em}
.qa__body p + p{margin-top:-6px}

/* ---------- Abschlussbox ---------- */
.cta__box{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(24px,4vw,56px); padding:clamp(28px,4vw,56px); border-radius:28px; background:linear-gradient(118deg,var(--forest) 0%,var(--green-deep) 60%,var(--forest-2) 100%); color:var(--white); box-shadow:0 40px 80px -40px rgba(5,51,26,.6)}
.cta__box::before{content:""; position:absolute; right:-12%; top:-60%; width:60%; height:220%; border-radius:50%; background:radial-gradient(closest-side, rgba(53,176,88,.32), rgba(53,176,88,0)); filter:blur(30px); pointer-events:none}
.cta__box > *{position:relative}
.cta__box .disp{color:var(--white)}
.cta__box p{margin-top:18px; max-width:32em; color:var(--mint-line); font-size:17px}
.cta__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.cta__side{display:grid; gap:16px; align-content:center; font-size:14.5px; line-height:1.55; color:var(--mint-line)}
.cta__office b{display:block; color:var(--white); font-weight:600; margin-bottom:2px}
.cta__office a{display:inline-block; padding-block:8px 4px; color:var(--white); border-bottom:1px solid rgba(255,255,255,.35); border-radius:2px}
.cta__office a:hover{border-color:var(--white)}
.cta__office a:active{color:var(--mint-line)}

/* ---------- Band für Bestandskunden ---------- */
.mband{background:var(--mist-2); border-top:1px solid var(--line)}
.mband__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); padding-block:18px; flex-wrap:wrap}
.mband__txt{display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--muted)}
.mband__txt .ico{color:var(--green); width:20px; height:20px}
.mband__txt b{color:var(--green-deep); font-weight:600}

/* ---------- Fußzeile ---------- */
.ft{background:var(--forest); color:var(--mint-line); padding-block:clamp(48px,6vw,80px) 28px; font-size:14.5px; line-height:1.6}
.ft__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px)}
.ft__brand p{margin-top:18px; max-width:30em}
.ft__h{font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--white); margin-bottom:14px}
.ft p + p{margin-top:12px}
.ft p b{color:var(--white); font-weight:600}
.ft ul{display:grid; gap:8px}
.ft a{border-radius:3px; transition:color .2s}
.ft a:hover{color:var(--white)}
.ft a:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
.ft a:active{color:var(--mint)}
.ft__row{margin-top:clamp(32px,4vw,52px); padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(191,232,204,.8)}

/* ---------- Unterseiten: Aufmacher mit Linie ---------- */
.phero{position:relative; overflow:hidden; padding-block:clamp(56px,8vw,112px) clamp(40px,6vw,80px)}
.phero__art{position:absolute; right:-6%; top:0; bottom:0; width:58%; pointer-events:none; overflow:visible}
.phero__art .pa-dienst{fill:none; stroke:var(--green-deep); stroke-opacity:.22; stroke-width:2.5; stroke-linejoin:round}
.phero__art .pa-ende{stroke:var(--green-deep); stroke-opacity:.35; stroke-width:1.5; stroke-dasharray:6 7}
.phero__art .pa-plan{fill:none; stroke:var(--leaf); stroke-width:3.5; stroke-linecap:round; filter:drop-shadow(0 6px 10px rgba(53,176,88,.35))}
.js .phero__art .pa-plan{stroke-dasharray:1200; stroke-dashoffset:1200; animation:lbZeichnen 2400ms .3s var(--ease-out) forwards}
.phero__art .pa-flaeche{fill:url(#pa-verlauf); opacity:.8}
.phero__art .pa-raster line{stroke:var(--green); stroke-opacity:.09}
.phero__veil{position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, var(--mist) 0%, var(--mist) 36%, rgba(242,248,244,.6) 56%, rgba(242,248,244,0) 78%)}
.phero__in{position:relative; z-index:1; max-width:820px}
.phero__h1{font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:1.02; font-size:clamp(34px,4.3vw,60px); color:var(--green-deep); text-wrap:balance}
.phero__h1 .clipin{display:block}
.phero__sub{margin-top:24px; font-size:clamp(17px,1.35vw,19.5px); line-height:1.6; color:var(--muted); max-width:34em}
.phero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.phero__meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px; font-size:14px; color:var(--muted)}
.phero__meta span{display:inline-flex; align-items:center; gap:8px}
.phero__meta .ico{width:16px; height:16px; color:var(--green)}

/* ---------- Zweispaltiger Wechsel ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:center}
.split--rev > :first-child{order:2}
.split__txt{display:grid; gap:16px; color:var(--muted); font-size:16.5px}
.split__txt p{max-width:34em}
.split__txt h2.disp{margin-bottom:8px; font-size:clamp(28px,3.3vw,42px)}
.split__txt .btn{justify-self:start; margin-top:10px}
.split__txt .kurve{margin-top:4px}
.split + .split{margin-top:var(--section)}
.ziffer{font-family:var(--display); font-weight:600; font-size:clamp(40px,4.6vw,64px); line-height:1; letter-spacing:-.04em; color:var(--green-deep); font-variant-numeric:tabular-nums; white-space:nowrap}
.ziffer small{display:block; margin-top:10px; line-height:1.45; font-family:var(--text); font-weight:500; font-size:15px; letter-spacing:0; color:var(--muted); max-width:22em; white-space:normal}
.card{border-radius:var(--r-l); padding:clamp(22px,3vw,34px)}
.card h3{font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-.02em; color:var(--green-deep)}
.card p{margin-top:10px; font-size:15.5px; color:var(--muted)}
.card ul{margin-top:12px}

/* ---------- Vergleichsmatrix ---------- */
.matrix{margin-top:clamp(28px,4vw,48px); border-radius:var(--r-l); overflow:hidden}
.matrix__scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.matrix table{width:100%; min-width:640px; border-collapse:collapse; table-layout:fixed; font-size:15px}
.matrix thead th:first-child{width:19%}
.matrix th, .matrix td{text-align:left; vertical-align:top; padding:16px 18px; border-bottom:1px solid var(--line)}
.matrix thead th{font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--green); background:rgba(255,255,255,.5); border-bottom:1px solid var(--line-strong)}
.matrix tbody th{font-weight:600; color:var(--green-deep)}
.matrix td{color:var(--muted); font-size:14.5px; line-height:1.45}
.matrix td > b{display:block; margin-bottom:3px; color:var(--ink); font-size:15.5px; font-weight:600}
.matrix td > b .link{font-size:15.5px}
.matrix tbody tr{opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.matrix.in tbody tr{opacity:1; transform:none}
.matrix.in tbody tr:nth-child(1){transition-delay:.1s} .matrix.in tbody tr:nth-child(2){transition-delay:.2s} .matrix.in tbody tr:nth-child(3){transition-delay:.3s} .matrix.in tbody tr:nth-child(4){transition-delay:.4s} .matrix.in tbody tr:nth-child(5){transition-delay:.5s} .matrix.in tbody tr:nth-child(6){transition-delay:.6s}
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td{border-bottom:0}
.matrix tbody tr:hover td, .matrix tbody tr:hover th{background:rgba(255,255,255,.45)}

/* ---------- Zeitstrahl, die Linie füllt sich mit dem Scrollen ---------- */
.tl{position:relative; margin-top:clamp(28px,4vw,48px); padding-left:36px}
.tl::before{content:""; position:absolute; left:11px; top:20px; bottom:20px; width:2px; background:var(--line)}
.tl__bar{position:absolute; left:11px; top:20px; bottom:20px; width:2px; background:linear-gradient(180deg,var(--leaf),var(--green)); transform-origin:top; transform:scaleY(0)}
.tl__tip{position:absolute; left:12px; top:20px; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--white); box-shadow:0 0 0 3px var(--leaf), 0 0 18px 5px rgba(53,176,88,.6); z-index:2; opacity:0; transition:opacity .3s}
.tl__item{position:relative; padding:0 0 clamp(28px,4vw,44px) 0; transition:transform .5s var(--ease-out)}
.tl__item:last-child{padding-bottom:0}
.tl__dot{position:absolute; left:-36px; top:6px; width:24px; height:24px; border-radius:50%; background:var(--mist); border:2px solid var(--line); display:grid; place-items:center; color:var(--white); transition:background-color .35s, border-color .35s, transform .4s var(--ease-out)}
.tl__dot .ico{width:12px; height:12px; stroke-width:3; opacity:0; transition:opacity .3s}
.tl__item.is-on .tl__dot{background:var(--green); border-color:var(--green); transform:scale(1.2)}
.tl__item.is-past .tl__dot{background:var(--leaf); border-color:var(--leaf); color:var(--forest)}
.tl__item.is-past .tl__dot .ico{opacity:1}
.tl__k{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--green)}
.tl__item h3{font-family:var(--display); font-weight:600; font-size:clamp(20px,2vw,24px); letter-spacing:-.02em; color:var(--muted); margin-top:4px; transition:color .35s}
.tl__item.is-on h3, .tl__item.is-past h3{color:var(--green-deep)}
.tl__item p{margin-top:8px; color:var(--muted); font-size:15.5px; max-width:36em}
.tl__item .kurve{margin-top:10px}
.tl__item .glass{padding:18px 20px; border-radius:16px; margin-top:12px; max-width:36em}
/* Desktop: Schritte nebeneinander, die Linie füllt sich von links */
@media (min-width:901px){
  .tl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(24px,3.4vw,48px); row-gap:0; padding-left:0; padding-top:46px}
  /* Überschrift, Text und Liste jeder Spalte stehen auf einer Linie, auch wenn eine Überschrift umbricht (Kundenwunsch 14.10.2026) */
  .tl__item{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; align-content:start}
  .tl__item h3{align-self:start}
  .tl::before{left:12px; right:12px; top:11px; bottom:auto; width:auto; height:2px}
  .tl__bar{left:12px; right:12px; top:11px; bottom:auto; width:auto; height:2px; background:linear-gradient(90deg,var(--leaf),var(--green)); transform-origin:left; transform:scaleX(0)}
  .tl__tip{left:12px; top:12px}
  .tl__item{padding-bottom:0}
  .tl__dot{left:0; top:-46px}
  .tl__item p, .tl__item .kurve{max-width:none}
}

/* ---------- Formular ---------- */
.form{display:grid; gap:16px; padding:clamp(22px,3vw,34px); border-radius:var(--r-l)}
.field{display:grid; gap:6px}
.field label{font-weight:600; font-size:14.5px; color:var(--green-deep)}
.field small{font-size:12.5px; color:var(--muted-2)}
.field input, .field textarea, .field select{font:inherit; font-size:16px; width:100%; min-height:52px; padding:12px 14px; border-radius:var(--r-s); border:1.5px solid var(--line-ctrl); background:rgba(255,255,255,.85); color:var(--ink); transition:border-color .2s, box-shadow .2s, background-color .2s}
.field textarea{min-height:140px; resize:vertical}
.field input:hover, .field textarea:hover, .field select:hover{border-color:var(--green)}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-color:var(--green); background:var(--white)}
.field input:active, .field textarea:active, .field select:active{background:var(--white)}
.field input::placeholder, .field textarea::placeholder{color:var(--muted-2)}
.field--check{grid-template-columns:auto 1fr; align-items:start; gap:12px}
.field--check input{width:24px; height:24px; min-height:0; margin-top:3px; padding:0; accent-color:var(--green)}
.field--check label{font-weight:400; font-size:14.5px; color:var(--muted)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form .btn{justify-self:start}
.form__hint{font-size:13px; color:var(--muted-2)}
.honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* Kontaktseite: WhatsApp als Hauptweg, Formular daneben */
.kontakt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:start}
.kontakt__side{position:sticky; top:calc(var(--hd) + 24px)}
.kontakt__side .lead{margin-top:18px}
.wa{position:relative; overflow:hidden; margin-top:26px; padding:clamp(24px,3vw,36px); border-radius:24px; background:linear-gradient(118deg,var(--forest) 0%,var(--green-deep) 60%,var(--forest-2) 100%); color:var(--white); box-shadow:0 34px 70px -36px rgba(5,51,26,.6)}
.wa::before{content:""; position:absolute; right:-20%; top:-70%; width:70%; height:240%; border-radius:50%; background:radial-gradient(closest-side, rgba(53,176,88,.34), rgba(53,176,88,0)); filter:blur(30px); pointer-events:none}
.wa > *{position:relative}
.wa__ico{width:54px; height:54px; border-radius:16px; background:rgba(255,255,255,.12); border:1px solid rgba(159,226,181,.35); color:var(--mint); display:grid; place-items:center}
.wa__ico .ico{width:28px; height:28px; stroke-width:1.7}
.wa h3{margin-top:18px; font-family:var(--display); font-weight:600; font-size:clamp(24px,2.4vw,30px); letter-spacing:-.02em; color:var(--white)}
.wa p{margin-top:12px; font-size:16px; line-height:1.55; color:var(--mint-line); max-width:30em}
.wa .btn{margin-top:22px}
.wa small{display:block; margin-top:14px; font-size:13px; color:rgba(191,232,204,.8)}

/* ---------- Blog ---------- */
.posts{margin-top:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.post{display:flex; flex-direction:column; gap:12px; padding:clamp(22px,3vw,30px); border-radius:var(--r-l); min-height:52px; transition:transform .5s var(--ease-out), box-shadow .5s}
.post:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift)}
.post:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.post:active{transform:none}
.post__meta{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:13px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.post__kat{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:var(--mint-bg); color:var(--green-deep); font-size:12px; font-weight:600}
a.post__kat:hover{background:var(--mint-line)}
a.post__kat:focus-visible{outline:2px solid var(--green); outline-offset:2px}
a.post__kat:active{background:var(--mint)}
.kats{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,3vw,32px)}
.kat{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; border-radius:999px; border:1.5px solid var(--line-ctrl); background:rgba(255,255,255,.6); color:var(--green-deep); font-size:14.5px; font-weight:600; cursor:pointer; transition:background-color .2s, border-color .2s, color .2s}
.kat span{font-size:12px; font-weight:600; color:var(--muted-2)}
.kat:hover{border-color:var(--green); background:var(--white)}
.kat:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.kat:active{background:var(--mist-2)}
.kat[aria-pressed="true"]{background:var(--green); border-color:var(--green); color:var(--white)}
.kat[aria-pressed="true"] span{color:var(--mint)}
.kat:disabled{cursor:default; border-color:var(--line); background:transparent; color:var(--muted-2)}
.post[hidden]{display:none}
.post h2, .post h3{font-family:var(--display); font-weight:600; font-size:clamp(21px,2.2vw,26px); letter-spacing:-.02em; color:var(--green-deep); line-height:1.2}
.post p{color:var(--muted); font-size:15.5px}
.post .link{margin-top:auto}
.lesefortschritt{position:fixed; left:0; top:0; z-index:45; height:3px; width:100%; background:linear-gradient(90deg,var(--leaf),var(--green)); transform-origin:left; transform:scaleX(0); pointer-events:none}
.article{padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,80px)}
.article__hd{max-width:860px}
.article__kicker{display:flex; flex-wrap:wrap; gap:10px 18px; font-size:13.5px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.article__kicker time{font-family:var(--display); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--green)}
.article__h1{margin-top:16px; font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:1.04; font-size:clamp(34px,4.4vw,60px); color:var(--green-deep); text-wrap:balance}
.article__lead{margin-top:22px; font-size:clamp(17.5px,1.4vw,20px); color:var(--muted); line-height:1.55; max-width:36em}
.article__autor{display:flex; align-items:center; gap:12px; margin-top:26px; font-size:14px; color:var(--muted)}
.article__autor b{display:block; color:var(--ink); font-weight:600}
.article__grid{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:clamp(32px,5vw,80px); margin-top:clamp(32px,5vw,64px); align-items:start}
.toc{position:sticky; top:100px; padding:20px 22px; border-radius:16px; font-size:14px}
.toc b{display:block; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); margin-bottom:10px}
.toc ol{display:grid; gap:6px}
.toc a{display:block; padding:4px 0; color:var(--muted); border-radius:3px}
.toc a:hover{color:var(--green-deep)}
.toc a.is-active{color:var(--green); font-weight:600}
.toc a:active{color:var(--forest)}
.prose{max-width:68ch; min-width:0; font-size:17.5px; line-height:1.7; color:var(--ink)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-family:var(--display); font-weight:600; font-size:clamp(26px,2.8vw,36px); letter-spacing:-.025em; line-height:1.12; color:var(--green-deep); margin-top:2em; text-wrap:balance}
.prose h3{font-family:var(--display); font-weight:600; font-size:clamp(21px,2.1vw,25px); letter-spacing:-.02em; color:var(--green-deep); margin-top:1.6em}
.prose p{color:var(--ink)}
.prose ul, .prose ol{display:grid; gap:10px; padding-left:0}
.prose ul li{position:relative; padding-left:32px}
.prose ul li::before{top:.3em}
.prose ul li::after{top:calc(.3em + 5px)}
.prose ol{counter-reset:li}
.prose ol li{position:relative; padding-left:40px; counter-increment:li}
.prose ol li::before{content:counter(li); position:absolute; left:0; top:.1em; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--mint-bg); color:var(--green); font-family:var(--display); font-weight:600; font-size:13px}
.prose blockquote{padding:22px 26px 22px 30px; border-radius:16px; font-family:var(--display); font-weight:600; font-size:clamp(19px,2vw,23px); line-height:1.35; letter-spacing:-.015em; color:var(--green-deep)}
.prose .merk{padding:22px 26px; border-radius:16px}
.prose .merk b{display:block; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); margin-bottom:8px}
.prose table{width:100%; border-collapse:collapse; font-size:15.5px}
.prose th, .prose td{text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid var(--line)}
.prose th{font-weight:600; color:var(--green-deep)}
.prose .tabelle{overflow-x:auto; border-radius:16px}
.prose .tabelle table{min-width:520px}
.prose .nachsatz{font-size:14px; color:var(--muted-2); padding-top:18px; border-top:1px solid var(--line)}
.prose dl{display:grid; gap:14px}
.prose dt{font-weight:600; color:var(--green-deep)}
.prose dd{margin:0; color:var(--muted)}
.prose .klein{font-size:14.5px; color:var(--muted)}
.rechts{padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,80px)}
.rechts .prose h2:first-child{margin-top:0}

/* ---------- Kleine Helfer ---------- */
.mt-s{margin-top:var(--s-5)}
.mt-l{margin-top:clamp(32px,4vw,52px)}
.desk{display:inline}

/* ---------- Umbrüche ---------- */
@media (max-width:1180px){
  .rail{display:none}
}
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:inline-flex}
  .btn__long{display:none}
  .trust__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof:nth-child(3)::before{display:none}
  .promise__grid{grid-template-columns:1fr}
  .promise__item + .promise__item{border-left:0; border-top:1px solid var(--line); border-radius:0 0 var(--r-m) var(--r-m)}
  .services__grid{grid-template-columns:1fr}
  .badges{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px}
  .ledger__row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ledger__item{padding:20px 18px}
  .ledger__item:nth-child(4){border-left:0; padding-left:0}
  .ft__grid{grid-template-columns:1fr 1fr}
  .article__grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
}
@media (max-width:900px){
  .hero{min-height:0; display:block; --py:0}
  .hero__grid{grid-template-columns:1fr; gap:22px; padding-block:30px 34px}
  .hero__copy{max-width:none}
  .hero__stage{aspect-ratio:900/560; max-height:none; min-height:0}
  .laufbahn{overflow:hidden}
  .notes{max-width:none; align-self:stretch; margin-right:0}
  .notes__hd{right:auto; left:0}
  .frist{height:auto; margin-top:var(--section-s); overflow:hidden}
  .step.is-on h3{transform:none}
  .step.is-on{transform:none}
  .frist__sticky{position:static; height:auto; padding-top:0; display:block; overflow:visible}
  .frist__num{display:none}
  .frist__grid{grid-template-columns:1fr; gap:28px}
  .frist__link{display:none}
  .plan{margin-left:0; max-width:none}
  .ablauf::after{display:none}
  .ablauf__sticky{position:static}
  .ablauf__nav{display:none}
  .ablauf__viewport{overflow:visible}
  .ablauf__track{display:grid; grid-template-columns:minmax(0,1fr); width:auto; gap:18px; transform:none !important}
  .wpanel{min-width:0}
  .wpanel{width:auto; grid-template-columns:1fr; padding:22px 18px; border-radius:20px; background:rgba(255,255,255,.4); opacity:1; transform:none; filter:none}
  .wpanel__big{font-size:64px; right:12px; top:12px}
  .wpanel__txt h3{padding-right:72px}
  .scene{min-height:0}
  .zitat, .person, .faq, .split, .cta__box, .kontakt{grid-template-columns:1fr}
  .kontakt__side{position:static}
  .split--rev > :first-child{order:0}
  .person__fig{max-width:420px}
  .phero__art{width:100%; right:0; opacity:.55}
  .phero__veil{background:linear-gradient(180deg, var(--mist) 0%, rgba(242,248,244,.75) 50%, rgba(242,248,244,.2) 100%)}
  .posts{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
}
@media (max-width:900px){
  .laufbahn text{font-size:30px}
  .laufbahn .lb-label{font-size:28px}
  .laufbahn .lb-phase{font-size:21px; letter-spacing:.03em}
  .laufbahn .lb-griff .lb-griff-hint, .laufbahn .lb-griff .lb-griff-text{font-size:26px}
  .laufbahn .lb-tip-t{font-size:26px}
  .laufbahn .lb-plan{stroke-width:7}
  .laufbahn .lb-dienst{stroke-width:5}
  .laufbahn .lb-ende, .laufbahn .lb-achse{stroke-width:3}
  .laufbahn .lb-griff circle:not(.lb-fokus){r:22px; stroke-width:6}
  .laufbahn .lb-griff circle.lb-fokus{r:32px}
  .laufbahn .lb-griff:focus-visible circle.lb-fokus{stroke-width:5}
  .laufbahn .lb-griff .lb-griff-hint{transform:translateY(10px)}
  .laufbahn .lb-griff .lb-griff-text{display:none}
  .laufbahn .lb-punkt{r:14px; stroke-width:5}
  .laufbahn .lb-spitze{r:9px; stroke-width:4}
  .laufbahn .lb-ereignis{r:9px}
  .laufbahn .lb-raster line{display:none}
}
@media (max-width:640px){
  :root{--hd:64px}
  h1, h2, h3{-webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word}
  .hd__in{gap:12px}
  .hd__aside{gap:8px}
  .hd .btn--sm{width:44px; padding:0; border-radius:50%}
  .hd .btn--sm > span{display:none}
  .hd__aside > .btn--sm{display:none}
  /* Apple-Stil wie die Glaskarten der Seite: Glasfläche, Haarlinie, Schatten in drei Lagen, grüne Symbolkachel wie .note__ico.
     Beim Runterscrollen schrumpft die Kapsel auf die Kachel, beim Hochscrollen kommt der Text zurück (site.js, .is-kompakt). */
  .fab{position:fixed; z-index:38; right:max(14px, calc(env(safe-area-inset-right) + 10px)); bottom:max(16px, calc(env(safe-area-inset-bottom) + 10px)); display:flex; align-items:center; gap:11px; padding:6px 18px 6px 6px; border-radius:20px; color:var(--green-deep); background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(24px) saturate(1.8); backdrop-filter:blur(24px) saturate(1.8); box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(5,51,26,.08), 0 1px 2px rgba(5,51,26,.06), 0 10px 22px -10px rgba(5,51,26,.22), 0 28px 50px -24px rgba(5,51,26,.35); transition:gap .45s var(--ease-out), padding .45s var(--ease-out), transform .4s var(--ease-out), opacity .3s; animation:fab-ein .6s var(--ease-out) .4s backwards}
  .fab .ico{width:44px; height:44px; padding:10px; border-radius:13px; color:var(--white); background:linear-gradient(145deg, #3FA35B, var(--green) 55%, var(--green-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -6px rgba(5,51,26,.55)}
  .fab__text{display:flex; flex-direction:column; line-height:1.12; max-width:140px; overflow:hidden; white-space:nowrap; transition:max-width .45s var(--ease-out), opacity .3s}
  .fab__text small{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--green)}
  .fab__text b{font-family:var(--display); font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--green-deep)}
  .fab.is-kompakt{gap:0; padding-right:6px}
  .fab.is-kompakt .fab__text{max-width:0; opacity:0}
  .fab:hover{transform:translateY(-2px)}
  .fab:active{transform:scale(.96)}
  .fab:focus-visible{outline:2px solid var(--green); outline-offset:4px}
  html.menue-offen .fab{opacity:0; transform:translateY(18px) scale(.9); pointer-events:none}
  .ft{padding-bottom:calc(28px + 84px)}
  .brand__word small{display:none}
  .brand__mark{width:32px; height:32px}
  .hero__h1{font-size:clamp(38px,11vw,48px)}
  .hero__cta .btn{width:100%}
  .trust__row{grid-template-columns:1fr; padding:4px}
  .proof + .proof::before{display:none}
  .proof{padding:14px 14px}
  .ledger__row{grid-template-columns:1fr 1fr}
  .ledger__item{padding:18px 14px}
  .ledger__item:first-child{grid-column:1/-1; padding-top:22px; border-bottom:1px solid rgba(255,255,255,.16)}
  .ledger__item + .ledger__item{border-left:0}
  .ledger__item:nth-child(odd):not(:first-child){border-left:1px solid rgba(255,255,255,.16)}
  .ledger__item:nth-child(n+4){border-top:1px solid rgba(255,255,255,.16)}
  .btn{font-size:15px; padding-inline:20px}
  .portrait{max-height:440px}
  .badges{grid-template-columns:1fr; row-gap:30px}
  .badge__siegel{width:56px; top:-16px}
  .ft__grid{grid-template-columns:1fr}
  .cta__actions .btn, .phero__cta .btn{width:100%}
  .docu__hd{padding-right:0}
  .stamp{position:static; justify-self:start; margin-top:14px; display:inline-block}
  .zitat__q{padding-left:52px}
  .zitat__q::before{left:10px; top:-18px; font-size:72px}
  .mband__act .btn{width:100%}
  .desk{display:none}
  .wa{padding:22px 18px}
  .wa .btn{width:100%; padding-inline:14px}
  /* Tabellen werden zu gestapelten Karten: Spaltenkopf steht über jedem Wert */
  .matrix table, .prose .tabelle table{min-width:0}
  .matrix thead, .prose thead{display:none}
  .matrix tbody, .matrix tr, .matrix tbody th, .matrix td, .prose tbody, .prose tr, .prose td{display:block}
  .matrix tbody tr{padding:14px 0 6px; border-bottom:1px solid var(--line)}
  .matrix tbody th{width:auto; padding:0 16px 8px; border-bottom:0; font-size:17px}
  .matrix td{padding:6px 16px 10px; border-bottom:0}
  .matrix td::before, .prose td::before{content:attr(data-th); display:block; margin-bottom:3px; font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--green)}
  .prose tr{padding:12px 0 4px; border-bottom:1px solid var(--line)}
  .prose td{padding:4px 12px 8px; border-bottom:0}
  .prose td:first-child{font-weight:600; color:var(--green-deep)}
  .prose td:first-child::before{display:none}
  .matrix tbody tr:hover td, .matrix tbody tr:hover th{background:transparent}
}

/* ---------- Flache Bildschirme (13-Zoll-Notebooks): jede Bühne passt in einen Frame ---------- */
@media (min-width:901px) and (max-height:820px){
  .hero__grid{padding-block:18px 26px}
  .hero__stage{max-height:calc(100svh - var(--hd) - 274px)}
  .notes{height:212px}
  .hero__h1{font-size:clamp(40px,4.3vw,60px)}
  .hero__sub{margin-top:18px}
  .hero__cta{margin-top:24px}
  .hero__note{margin-top:16px}
  h2.disp{font-size:clamp(30px,3.6vw,46px)}
  .section__hd{margin-bottom:clamp(20px,3vw,32px)}
  .frist__h2{font-size:clamp(28px,3vw,38px)}
  .frist .lead{margin-top:12px}
  .steps{margin-top:16px}
  .step{padding:7px 0}
  .plan__kurve{aspect-ratio:auto; height:104px}
  .plan__row{padding:7px 8px}
  .scene{min-height:240px}
  .wpanel__txt h3{font-size:clamp(24px,2.4vw,32px)}
}

/* ---------- Ruhe bei reduzierter Bewegung ---------- */
@media (max-width:1024px) and (max-height:520px){  /* Handy quer: alles ohne Scrollen */
  .drawer{gap:12px; padding-top:4px}
  .drawer__nav{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px}
  .drawer__nav a{min-height:46px; padding-block:8px; font-size:19px}
  .drawer__karte{grid-template-columns:auto minmax(0,1fr) auto; margin-top:4px; padding:10px 14px}
  .drawer__karte .btn{grid-column:auto; width:auto}
}
@keyframes fab-ein{from{opacity:0; transform:translateY(14px) scale(.96)}}
@media (prefers-reduced-motion:reduce){
  .fab{animation:none}
  .drawer__nav a, .drawer__karte{transition-delay:0s !important}
  html{scroll-behavior:auto}
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .js .rv, .js .rv-clip > .clipin, .hero__h1 .w > span{opacity:1; transform:none}
  .js .laufbahn .lb-plan, .js .phero__art .pa-plan{stroke-dashoffset:0}
  .js .laufbahn .lb-plan-flaeche{opacity:.9}
  .laufbahn .lb-ebene{transform:none}
  .ledger::before, .ablauf__glow{display:none}
  .notes{height:auto}
}

/* =====================================================================
   Kundenfeedback 12.10.2026 (Ryszard Lodziato): drei Beratungsstufen,
   Ersparnis, Bergrettung, LinkedIn. Nur Tokens – die dunkle Variante B
   (theme-dunkel.css) überschreibt sie zentral.
   ===================================================================== */
/* Drei Stufen: Karten steigen wie eine Treppe an, Tiefe wächst je Stufe */
.stufen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch}
.stufe{position:relative; overflow:hidden; padding-top:26px}
.stufe__big{position:absolute; right:14px; top:-22px; font-family:var(--display); font-weight:600; font-size:150px; line-height:1; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px rgba(31,102,51,.16); pointer-events:none; user-select:none}
.stufe__kopf{display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative}
.stufe__n{display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; background:var(--mint-bg); color:var(--green-deep); font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.stufe__tiefe{display:flex; gap:4px; margin-right:auto; margin-left:4px}
.stufe__tiefe i{width:20px; height:5px; border-radius:3px; background:var(--line-strong); opacity:.45; transform-origin:left; transition:background-color .5s, opacity .5s}
.stufe:nth-child(1) .stufe__tiefe i:nth-child(-n+1), .stufe:nth-child(2) .stufe__tiefe i:nth-child(-n+2), .stufe:nth-child(3) .stufe__tiefe i{background:var(--leaf); opacity:1}
.stufe.in .stufe__tiefe i{animation:tiefeFill .7s var(--ease-out) both}
.stufe.in .stufe__tiefe i:nth-child(2){animation-delay:.12s} .stufe.in .stufe__tiefe i:nth-child(3){animation-delay:.24s}
@keyframes tiefeFill{from{transform:scaleX(0)}}
.stufe h3{position:relative}
@media (min-width:1025px){
  .stufe:nth-child(1){margin-top:48px}
  .stufe:nth-child(2){margin-top:24px}
}
/* Ersparnis: die Zahl als plastische dunkle Kachel, der Satz daneben */
.spar{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2vw,26px); align-items:center; width:min(540px,100%); padding:8px 22px 8px 8px; border-radius:var(--r-l); background:var(--glass); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25); box-shadow:var(--shadow-glass)}
.spar__zahl{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:14px 22px 12px; border-radius:16px; background:linear-gradient(118deg,var(--forest) 0%,var(--green-deep) 60%,var(--forest-2) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 22px 40px -22px rgba(5,51,26,.6)}
.spar__zahl::before{content:""; position:absolute; right:-40%; top:-80%; width:110%; height:220%; border-radius:50%; background:radial-gradient(closest-side, rgba(53,176,88,.38), rgba(53,176,88,0)); pointer-events:none}
.spar__zahl > *{position:relative}
.spar__zahl small{font-size:13px; font-weight:500; color:var(--mint-line); letter-spacing:.02em}
.spar__num{font-family:var(--display); font-weight:600; font-size:clamp(44px,4.2vw,58px); line-height:1; letter-spacing:-.04em; color:var(--white); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap}
.spar__num i{font-style:normal; font-size:.55em; margin-left:4px; color:var(--leaf)}
.spar__txt{font-size:15px; line-height:1.5; color:var(--muted)}
.stufen__hd{align-items:center; flex-wrap:nowrap}
.stufen__hd > div:first-child{flex:1 1 auto; min-width:0; max-width:620px}
.stufen__hd .spar{flex:0 1 520px}
.stufen__hd .lead{margin-top:20px}
.stufen__hd .link{margin-top:18px}
.spar__txt b{color:var(--green-deep); font-weight:600}
/* LinkedIn sichtbar neben „Mehr über mich“ und in der Fußzeile */
.person__more{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px}
/* LinkedIn auf der Startseite: dezente Kapsel, Farbe erst beim Überfahren */
.li-knopf{display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:6px 14px 6px 11px; border-radius:999px; border:1px solid var(--line-strong); background:rgba(255,255,255,.35); color:var(--muted); font-size:13.5px; font-weight:500; line-height:1; transition:color .2s, border-color .2s, background-color .2s}
.li-knopf .ico{width:15px; height:15px; color:var(--muted-2); transition:color .2s}
.li-knopf:hover{color:var(--green-deep); border-color:var(--line-ctrl); background:rgba(255,255,255,.75)}
.li-knopf:hover .ico{color:#0A66C2}
.li-knopf:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.li-knopf:active{background:var(--mist-2)}
.link--li .ico--li, .ft__li .ico{width:17px; height:17px}
.link:hover .ico--li{transform:none}
.ft__li{display:inline-flex; align-items:center; gap:7px}
.ft__li .ico{width:15px; height:15px; color:var(--leaf)}
.kurve a{color:var(--green); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; border-radius:3px}
.kurve a:hover{color:var(--green-deep)}
.kurve a:focus-visible{outline:2px solid var(--green); outline-offset:2px}
/* Über mich: die Bergrettung als dunkle Akte, zwei Lehren daneben */
.erfahrung{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:18px; align-items:stretch}
.erfahrung__story{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(28px,4vw,52px); border-radius:28px; background:linear-gradient(118deg,var(--forest) 0%,var(--green-deep) 60%,var(--forest-2) 100%); box-shadow:0 40px 80px -40px rgba(5,51,26,.6)}
.erfahrung__story::before{content:""; position:absolute; right:-14%; top:-50%; width:62%; height:200%; border-radius:50%; background:radial-gradient(closest-side, rgba(53,176,88,.3), rgba(53,176,88,0)); filter:blur(30px); pointer-events:none}
.erfahrung__story::after{content:""; position:absolute; left:0; right:0; bottom:0; height:30%; pointer-events:none; opacity:.5; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 160' preserveAspectRatio='none'%3E%3Cpath d='M0 150 L70 110 L120 128 L210 52 L262 86 L330 18 L392 74 L440 58 L520 112 L600 92' fill='none' stroke='%239FE2B5' stroke-opacity='.45' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M0 160 L90 132 L150 146 L240 96 L300 120 L360 70 L430 110 L500 98 L600 128 L600 160 Z' fill='%2335B058' fill-opacity='.08'/%3E%3C/svg%3E") bottom right/100% 100% no-repeat}
.erfahrung__story > *{position:relative; z-index:1}
.erfahrung__ort{display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 10px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(159,226,181,.3); color:var(--mint); font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.erfahrung__ort .ico{width:15px; height:15px}
.erfahrung__story .disp{margin-top:20px; color:var(--white); font-size:clamp(28px,3.2vw,42px)}
.erfahrung__story p{margin-top:16px; max-width:32em; font-size:17px; color:var(--mint-line)}
.erfahrung__story .link{margin-top:auto; padding-top:24px}
.erfahrung__lehren{display:grid; gap:18px}
.lehre{justify-content:center}
.lehre__kopf{display:flex; align-items:center; gap:14px}
.lehre__ico{flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--mint-bg); color:var(--green); box-shadow:inset 0 0 0 1px var(--mint-line)}
.lehre__ico .ico{width:22px; height:22px}
.lehre p{font-size:15.5px}
@media (max-width:1024px){
  .stufen__hd{flex-wrap:wrap}
  .stufen__hd .spar{flex-basis:100%}
  .stufen{grid-template-columns:1fr}
  .erfahrung{grid-template-columns:1fr}
}
@media (max-width:640px){
  .spar{grid-template-columns:1fr; padding:8px 8px 16px}
  .spar__txt{padding-inline:8px}
  .stufe__big{font-size:120px}
}

/* Barrierefreiheit: lange Wörter und Adressen brechen statt seitlich zu ragen (WCAG 1.4.10, 320 px) */
.prose li, .prose dd, .prose a{overflow-wrap:anywhere}
@media (max-width:480px){.prose{-webkit-hyphens:auto; hyphens:auto}}