/* ==========================================================================
   Fin Fluence — Designsystem
   Farben, Typografie, Abstaende, Komponenten, Responsive
   ========================================================================== */

:root{
  /* Marke */
  --deep-forest:#071d12; --dark-green:#123b24; --brand-green:#194f1b;
  --green-500:#25702c; --lime:#acff87; --lime-300:#c9ffaf; --lime-700:#5fa84a;
  --off-white:#f7f8f3; --mint:#edf5ec; --sand-200:#edefe6; --anthracite:#111713;
  --gold:#d9b872; --positive:#2f8a3c; --warning:#b98a1f; --critical:#c4553c;

  /* Semantisch (hell = Standard) */
  --surface:var(--off-white); --surface-alt:var(--mint); --surface-card:#fff;
  --glass:rgba(7,29,18,.035); --hatch:rgba(7,29,18,.05); --track:rgba(7,29,18,.09);
  --text:var(--anthracite); --text-2:rgba(17,23,19,.74); --text-3:rgba(17,23,19,.54);
  --accent:var(--brand-green); --accent-2:var(--green-500);
  --accent-quiet:rgba(25,79,27,.07); --accent-line:rgba(25,79,27,.18);
  --line:rgba(7,29,18,.12); --line-strong:rgba(7,29,18,.22);
  --cta:var(--lime); --cta-hover:var(--lime-300); --on-cta:var(--deep-forest);
  --focus:var(--brand-green);

  /* Typografie */
  --font-display:"Space Grotesk","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --font-body:"Manrope","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --h1:clamp(34px,4.6vw,60px); --h2:clamp(28px,3.4vw,46px); --h3:clamp(21px,2.2vw,29px);
  --h4:clamp(18px,1.5vw,21px); --lead:clamp(17px,1.5vw,22px); --body:clamp(16px,1vw,18px);
  --small:15px; --over:13px;
  --measure:66ch;

  /* Raum, Form, Bewegung */
  --container:1300px; --gutter:clamp(20px,5vw,72px); --section:clamp(56px,8vw,120px);
  --gap:clamp(18px,2vw,26px); --pad-card:clamp(24px,2.2vw,34px);
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(7,29,18,.06); --sh-md:0 14px 34px -18px rgba(7,29,18,.22);
  --sh-lg:0 30px 60px -28px rgba(7,29,18,.3); --sh-lime:0 14px 40px -16px rgba(93,168,74,.4);
  --fast:140ms; --base:260ms; --slow:520ms; --ease:cubic-bezier(.22,.61,.36,1);
}
.theme-dark{
  color:var(--text);
  --surface:var(--deep-forest); --surface-alt:#0c2717; --surface-card:rgba(247,248,243,.05);
  --glass:rgba(247,248,243,.06); --hatch:rgba(247,248,243,.05); --track:rgba(247,248,243,.1);
  --text:var(--off-white); --text-2:rgba(247,248,243,.74); --text-3:rgba(247,248,243,.5);
  --accent:var(--lime); --accent-2:var(--lime-300);
  --accent-quiet:rgba(172,255,135,.12); --accent-line:rgba(172,255,135,.24);
  --line:rgba(247,248,243,.12); --line-strong:rgba(247,248,243,.24); --focus:var(--lime);
  --sh-sm:0 1px 2px rgba(4,14,9,.32); --sh-md:0 12px 32px -12px rgba(4,14,9,.55);
  --sh-lg:0 32px 64px -24px rgba(4,14,9,.7); --sh-lime:0 12px 40px -14px rgba(172,255,135,.45);
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:var(--body);line-height:1.62;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.14;margin:0}
h1{font-size:var(--h1);letter-spacing:-.03em;line-height:1.06}
h2{font-size:var(--h2)}h3{font-size:var(--h3);font-weight:600}h4{font-size:var(--h4);font-weight:600}
p,ul,ol,dl,figure,blockquote{margin:0}
img,svg{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color var(--fast) var(--ease)}
a:hover{color:var(--accent-2)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-line)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Layout --- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section);position:relative}
.section--alt{background:var(--surface-alt)}
.section--dark{background:var(--deep-forest)}
.section--dark,.hero{color:var(--text)}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.split{display:grid;gap:clamp(32px,4vw,56px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.split--wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split--wide-right{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.split--top{align-items:start}
.grid{display:grid;gap:var(--gap);align-items:stretch}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid > *{height:100%}
.stack{display:grid;gap:16px}
.stack--lg{display:grid;gap:26px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lime);color:var(--deep-forest);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip-link:focus{left:0}

/* --- Typo-Helfer --- */
.over{font-family:var(--font-mono);font-size:var(--over);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0}
.lead{font-size:var(--lead);line-height:1.6;color:var(--text-2);max-width:var(--measure)}
.body-2{color:var(--text-2)}
.small{font-size:var(--small);color:var(--text-3)}
.mono{font-family:var(--font-mono);font-size:var(--over);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.accent{color:var(--accent)}
.measure{max-width:var(--measure)}
.section-head{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(30px,3vw,44px)}
.section-head--center{margin-inline:auto;text-align:center}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border:1px solid transparent;border-radius:var(--r-pill);font-family:var(--font-body);font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;cursor:pointer;text-align:center;transition:transform var(--fast) var(--ease),background-color var(--base) var(--ease),border-color var(--base) var(--ease),box-shadow var(--base) var(--ease),color var(--base) var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:scale(.985)}
.btn--primary{background:var(--cta);color:var(--on-cta);box-shadow:var(--sh-md)}
.btn--primary:hover{background:var(--cta-hover);color:var(--on-cta);box-shadow:var(--sh-lime)}
.btn--secondary{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn--ghost{background:transparent;color:var(--text-2);padding:12px 16px}
.btn--ghost:hover{background:var(--glass);color:var(--text)}
.btn--sm{padding:11px 18px;font-size:15px}
.btn--lg{padding:18px 32px}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn .icon{width:18px;height:18px}

/* --- Icons --- */
.icon{width:21px;height:21px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-tile{width:48px;height:48px;display:inline-grid;place-items:center;border-radius:var(--r-sm);background:var(--accent-quiet);border:1px solid var(--accent-line);color:var(--accent);transition:background var(--base) var(--ease),color var(--base) var(--ease)}

/* --- Badge --- */
.badge{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--accent-line);background:var(--accent-quiet);color:var(--accent);font-family:var(--font-mono);font-size:var(--over);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.badge--warning{color:var(--warning);border-color:rgba(185,138,31,.3);background:rgba(185,138,31,.1)}
.badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* --- Karten --- */
.card{display:flex;flex-direction:column;gap:14px;padding:var(--pad-card);background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:transform var(--base) var(--ease),border-color var(--base) var(--ease),box-shadow var(--base) var(--ease)}
.card--link{color:inherit}
.card--link:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--sh-lg);color:inherit}
.card--link:hover .icon-tile{background:var(--accent);color:var(--surface-card)}
.theme-dark .card--link:hover .icon-tile{color:var(--deep-forest)}
.card--link:hover .card__more{transform:translateX(3px)}
.card__more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-size:var(--small);font-weight:700;color:var(--accent);transition:transform var(--base) var(--ease)}
.card__points{list-style:none;display:grid;gap:8px;padding:0}
.card__points li{display:flex;gap:10px;font-size:var(--small);line-height:1.5;color:var(--text-3)}
.card__points li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:8px;flex:0 0 auto}
.panel{padding:var(--pad-card);background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-md)}
.tile{display:grid;gap:10px;padding:18px 20px;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-md)}
.tile__label{font-family:var(--font-mono);font-size:var(--over);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.tile__value{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.02em}
.tile__foot{font-size:var(--small);color:var(--text-3)}

/* --- Header --- */
.header{position:sticky;top:0;z-index:50;background:var(--deep-forest);border-bottom:1px solid transparent;transition:background var(--base) var(--ease),border-color var(--base) var(--ease),box-shadow var(--base) var(--ease)}
.header.is-scrolled{background:rgba(7,29,18,.94);backdrop-filter:saturate(140%) blur(18px);border-bottom-color:rgba(247,248,243,.12);box-shadow:0 18px 40px -30px rgba(4,14,9,.9)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:76px}
.header__logo{display:inline-flex;align-items:center}
.header__logo img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:2px}
.nav__link{padding:9px 12px;border-radius:var(--r-pill);font-size:16px;font-weight:600;color:rgba(247,248,243,.74);white-space:nowrap}
.nav__link:hover{color:var(--off-white);box-shadow:inset 0 -2px 0 rgba(172,255,135,.24)}
.nav__link[aria-current="page"]{color:var(--lime)}
.header__actions{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:rgba(247,248,243,.06);border:1px solid rgba(247,248,243,.12);border-radius:var(--r-sm);color:var(--off-white);cursor:pointer}
.burger .icon{width:22px;height:22px}
.drawer{display:none;border-top:1px solid rgba(247,248,243,.12);background:var(--deep-forest)}
.drawer.is-open{display:block}
.drawer__list{list-style:none;padding:12px 0 24px;display:grid}
.drawer__list a{display:block;padding:15px 2px;font-size:18px;font-weight:600;color:var(--off-white);border-bottom:1px solid rgba(247,248,243,.12)}
.drawer__list a[aria-current="page"]{color:var(--lime)}
.drawer .btn{margin-top:16px}

/* --- Hero --- */
.hero{background:var(--deep-forest);padding-block:clamp(36px,4vw,64px) clamp(48px,6vw,84px)}
.hero__glow{position:absolute;inset:-10% -8% auto auto;width:min(460px,60vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(172,255,135,.16),transparent 62%);pointer-events:none}
.hero h1 .lime{color:var(--lime);display:block}
.ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__row{display:inline-flex;gap:26px;align-items:center;white-space:nowrap;animation:ticker 34s linear infinite;font-family:var(--font-mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.ticker__row span{color:var(--lime)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Hero-Visual (Telefon + Datenkarten) --- */
.showcase{display:flex;align-items:center;justify-content:center;gap:16px;position:relative}
.showcase__col{display:grid;gap:14px;width:200px}
.phone{width:250px;aspect-ratio:9/19;padding:8px;border-radius:34px;background:linear-gradient(160deg,rgba(7,29,18,.92),rgba(7,29,18,.7));border:1px solid rgba(7,29,18,.9);box-shadow:var(--sh-lg),var(--sh-lime);transform:rotate(-2deg)}
.phone--sm{width:158px;box-shadow:var(--sh-lg)}
.phone__screen{position:relative;width:100%;height:100%;border-radius:27px;overflow:hidden;background:#0c2717;display:flex;flex-direction:column}
.phone__notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:52px;height:5px;border-radius:999px;background:rgba(7,29,18,.85);z-index:2}
.phone__head{display:flex;align-items:center;gap:10px;padding:26px 14px 10px}
.phone__avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid rgba(172,255,135,.24);flex:0 0 auto}
.phone__avatar img{width:100%;height:100%;object-fit:cover}
.phone__handle{font-size:13px;font-weight:700;color:var(--off-white)}
.phone__meta{font-family:var(--font-mono);font-size:11px;color:rgba(247,248,243,.5)}
.phone__media{position:relative;flex:1;margin:0 12px;border-radius:14px;overflow:hidden}
.phone__media img{width:100%;height:100%;object-fit:cover}
.phone__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,29,18,.9))}
.phone__caption{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:grid;gap:5px}
.phone__caption strong{font-size:13px;line-height:1.35;color:var(--off-white)}
.phone__caption em{font-family:var(--font-mono);font-size:10px;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.phone__bar{display:flex;gap:14px;padding:12px 16px 16px;color:rgba(247,248,243,.7)}
.phone__bar .icon{width:17px;height:17px}
.spark{display:flex;align-items:flex-end;gap:4px;height:44px}
.spark span{flex:1;border-radius:3px;background:var(--accent-line)}
.spark span:last-child{background:var(--accent)}
.checklist{display:grid;gap:8px;list-style:none;padding:0;margin-top:4px}
.checklist li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-3)}
.checklist li::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--line-strong);flex:0 0 auto}
.checklist li.is-done{color:var(--accent-2)}
.checklist li.is-done::before{background:var(--accent);border-color:var(--accent)}

/* --- Bilder --- */
.media{margin:0;display:grid;gap:10px;min-width:0}
.media__frame{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface-alt);aspect-ratio:16/9}
.media__frame img{width:100%;height:100%;object-fit:cover}
.media--4-3 .media__frame{aspect-ratio:4/3}
.media--4-5 .media__frame{aspect-ratio:4/5}
.media figcaption{font-family:var(--font-mono);font-size:var(--over);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* --- Problemliste --- */
.problem{display:flex;gap:16px;align-items:flex-start;padding:17px 21px;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.problem__num{font-family:var(--font-mono);font-size:13px;color:var(--accent);margin-top:3px}
.problem__text{font-size:var(--small);line-height:1.6;color:var(--text-2)}
.callout{padding:24px 26px;border-radius:var(--r-md);background:var(--deep-forest);color:var(--lime);font-family:var(--font-display);font-size:var(--h3);font-weight:700}

/* --- Prozess --- */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px}
.steps li{position:relative;display:grid;gap:12px;padding-right:16px}
.steps li:not(:last-child)::after{content:"";position:absolute;top:17px;left:46px;right:0;height:1px;background:var(--accent-line)}
.steps--vertical{grid-template-columns:1fr;gap:26px}
.steps--vertical li{padding-left:50px;padding-right:0}
.steps--vertical li::after{display:none}
.steps--vertical li:not(:last-child)::before{content:"";position:absolute;top:38px;left:18px;bottom:-26px;width:1px;background:var(--accent-line)}
.steps__num{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--accent-line);background:var(--accent-quiet);color:var(--accent);font-family:var(--font-mono);font-size:14px;font-weight:600}
.steps--vertical .steps__num{position:absolute;left:0;top:0}

/* --- Phasen-Timeline --- */
.phases__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.phases__tab{display:grid;gap:12px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--text-3)}
.phases__tab i{display:block;height:3px;border-radius:999px;background:var(--track);transition:background var(--base) var(--ease)}
.phases__tab small{font-family:var(--font-mono);font-size:var(--over);letter-spacing:.12em}
.phases__tab strong{font-family:var(--font-display);font-size:var(--h4);font-weight:600}
.phases__tab.is-active{color:var(--text)}
.phases__tab.is-active i,.phases__tab.is-reached i{background:var(--accent)}
.phases__tab.is-active small{color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.chips li{padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--accent-line);background:var(--accent-quiet);color:var(--accent);font-size:var(--small);font-weight:600}

/* --- Cases / Personen --- */
.case,.person{display:flex;flex-direction:column;overflow:hidden;padding:0;gap:0}
.case__img,.person__img{position:relative;background:var(--surface-alt);aspect-ratio:4/3}
.person__img{aspect-ratio:4/5}
.case__img img,.person__img img{width:100%;height:100%;object-fit:cover}
.case__tag{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(7,29,18,.75);color:var(--lime);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.case__body,.person__body{display:flex;flex-direction:column;gap:14px;padding:var(--pad-card);flex:1}
.case__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:var(--small);color:var(--text-3)}
.case__meta b{font-family:var(--font-mono);font-weight:400;color:var(--accent)}
.case dl{display:grid;gap:12px}
.case dt{font-family:var(--font-mono);font-size:var(--over);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.case dd{margin:0;font-size:var(--small);line-height:1.58;color:var(--text-2)}
.case blockquote{margin-top:auto;padding-left:16px;border-left:2px solid var(--accent);font-size:var(--small);line-height:1.58}
.person__body h3{font-size:var(--h4);font-weight:700}
.person__role{font-size:var(--small);color:var(--text-2)}
.person__bio{font-size:var(--small);color:var(--text-3);line-height:1.6}

/* --- Hinweis / Disclaimer --- */
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--line);font-size:var(--small);line-height:1.6;color:var(--text-3)}
.note::before{content:"HINWEIS";font-family:var(--font-mono);font-size:var(--over);letter-spacing:.1em;color:var(--accent);flex:0 0 auto;margin-top:2px}
.note--gold{background:rgba(217,184,114,.1);border-color:rgba(217,184,114,.28)}
.note--gold::before{color:var(--gold)}

/* --- FAQ --- */
.faq{display:grid}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:21px 4px;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font-display);font-size:var(--h4);font-weight:600;color:var(--text)}
.faq__q:hover{color:var(--accent)}
.faq__q span{font-family:var(--font-mono);font-size:20px;color:var(--accent);transition:transform var(--base) var(--ease)}
.faq__q[aria-expanded="true"]{color:var(--accent)}
.faq__q[aria-expanded="true"] span{transform:rotate(45deg)}
.faq__a{overflow:hidden;max-height:0;transition:max-height var(--slow) var(--ease)}
.faq__a p{padding:0 56px 22px 4px;font-size:var(--small);line-height:1.62;color:var(--text-2)}

/* --- CTA-Band --- */
.cta{position:relative;overflow:hidden;padding:clamp(30px,4.5vw,64px);border-radius:var(--r-xl);border:1px solid rgba(172,255,135,.24);background:linear-gradient(135deg,var(--dark-green),var(--deep-forest) 65%);box-shadow:var(--sh-lg)}
.cta__glow{position:absolute;inset:-45% -12% auto auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(172,255,135,.13),transparent 62%);pointer-events:none}
.cta__inner{position:relative;display:grid;gap:18px;max-width:740px}

/* --- Formulare --- */
.field{display:grid;gap:8px}
.field > span{font-size:var(--small);font-weight:600;color:var(--text-2)}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--small);transition:border-color var(--base) var(--ease),box-shadow var(--base) var(--ease)}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-quiet)}
.field small{font-size:var(--small);color:var(--text-3)}
.field--req > span::after{content:" *";color:var(--accent)}
.form-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.form-grid .field--full{grid-column:1/-1}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:var(--small);line-height:1.6;color:var(--text-2);cursor:pointer}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brand-green);flex:0 0 auto}
.honeypot{position:absolute;left:-9999px}
.form-status{display:none;padding:14px 18px;border-radius:var(--r-sm);font-size:var(--small);line-height:1.55}
.form-status.is-visible{display:block}
.form-status--ok{background:rgba(47,138,60,.1);border:1px solid rgba(47,138,60,.3);color:var(--positive)}
.form-status--error{background:rgba(196,85,60,.1);border:1px solid rgba(196,85,60,.3);color:var(--critical)}
.theme-dark .form-status--ok{color:var(--lime);background:rgba(172,255,135,.1);border-color:rgba(172,255,135,.28)}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.slot{padding:11px 8px;border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--line);color:var(--text-2);font-family:var(--font-mono);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--fast) var(--ease)}
.slot:hover{border-color:var(--accent)}
.slot.is-active{background:var(--cta);border-color:var(--cta);color:var(--on-cta)}

/* --- Fortschritt --- */
.progress{display:grid;gap:9px}
.progress__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.progress__track{height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.progress__fill{height:100%;width:0;border-radius:999px;background:var(--accent);transition:width var(--slow) var(--ease)}
.progress--sm .progress__track{height:4px}
.dots{display:flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:999px;background:var(--track);transition:all var(--base) var(--ease)}
.dots i.is-done{background:var(--accent)}
.dots i.is-active{width:22px;background:var(--accent)}

/* --- Finanzcheck --- */
.choice{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:16px 18px;border-radius:var(--r-md);background:var(--surface-card);border:1px solid var(--line);cursor:pointer;transition:all var(--base) var(--ease)}
.choice:hover{transform:translateY(-2px);border-color:var(--accent-line)}
.choice.is-selected{background:var(--accent-quiet);border-color:var(--accent)}
.choice__key{width:22px;height:22px;flex:0 0 auto;margin-top:1px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-strong);font-family:var(--font-mono);font-size:11px;color:var(--text-3)}
.choice.is-selected .choice__key{background:var(--accent);border-color:var(--accent);color:#fff}
.choice__label{display:grid;gap:4px}
.choice__label b{font-size:var(--small);font-weight:600}
.choice__label small{font-size:13px;color:var(--text-3)}
.result-area{display:grid;gap:16px;padding:var(--pad-card);border-radius:var(--r-lg);background:var(--surface-alt);border:1px solid var(--line)}
.result-row{display:grid;gap:8px}
.result-row__head{display:flex;align-items:center;gap:10px}
.result-row__head b{flex:1;font-size:var(--small);font-weight:600}
.result-row__state{font-family:var(--font-mono);font-size:13px}
.state-ok{color:var(--positive)}.state-mid{color:var(--warning)}.state-open{color:var(--critical)}
.aside-sticky{position:sticky;top:100px;display:grid;gap:16px}
.trust-list{display:grid;gap:12px;list-style:none;padding:0}
.trust-list li{display:flex;gap:12px;align-items:center;font-size:var(--small);color:var(--text-2)}
.trust-list .icon{color:var(--accent);width:19px;height:19px}
.is-hidden{display:none !important}

/* --- Footer --- */
.footer{background:var(--deep-forest);color:var(--off-white);padding-block:clamp(48px,6vw,72px) 30px}
.footer a{color:rgba(247,248,243,.74)}
.footer a:hover{color:var(--lime)}
.footer__top{display:grid;gap:40px;grid-template-columns:minmax(240px,1.2fr) repeat(auto-fit,minmax(150px,1fr))}
.footer__brand{display:grid;gap:18px;align-content:start}
.footer__brand img{height:60px;width:auto}
.footer__contact{font-size:var(--small);line-height:1.9;color:rgba(247,248,243,.74)}
.footer__col{display:grid;gap:13px;align-content:start}
.footer__col h2{font-family:var(--font-mono);font-size:var(--over);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,248,243,.5)}
.footer__col ul{list-style:none;display:grid;gap:13px;padding:0}
.footer__col a{font-size:var(--small)}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{padding:8px 14px;border-radius:var(--r-pill);border:1px solid rgba(247,248,243,.12);font-family:var(--font-mono);font-size:var(--over);letter-spacing:.1em;text-transform:uppercase}
.socials a:hover{border-color:var(--lime)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:44px;padding-top:24px;border-top:1px solid rgba(247,248,243,.12);font-size:14px;color:rgba(247,248,243,.5)}
.footer__legal{display:flex;flex-wrap:wrap;gap:18px}

/* --- Scroll-Reveal --- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .72s var(--ease),transform .72s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* --- Fehlerseite --- */
.error-page{min-height:60vh;display:grid;place-items:center;text-align:center}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .nav{display:none}
  .header__actions .btn{display:none}
  .burger{display:inline-flex}
}
@media (max-width:1024px){
  .split,.split--wide-left,.split--wide-right{grid-template-columns:minmax(0,1fr)}
  .showcase{flex-direction:column;align-items:stretch}
  .showcase__col{width:100%;grid-template-columns:1fr 1fr;display:grid}
  .phone{margin-inline:auto}
  .phases__tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .aside-sticky{position:static;grid-template-columns:1fr 1fr}
  .steps li:not(:last-child)::after{display:none}
}
@media (max-width:760px){
  .form-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:24px}
  .steps li{padding-left:50px;padding-right:0}
  .steps li .steps__num{position:absolute;left:0;top:0}
  .showcase__col{grid-template-columns:1fr}
  .aside-sticky{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
  .faq__a p{padding-right:8px}
}
@media (max-width:520px){
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .socials{gap:8px}
  .phone{width:min(250px,80vw)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .header,.footer,.burger,.drawer{display:none}
  body{background:#fff;color:#000}
}