/* =========================================================
   H & K · Design-System
   -----------------------------------------------------------
   Aufbau
   01  Tokens        Farben, Typo, Abstände, Radien, Schatten
   02  Reset & Basis
   03  Animations-Startzustände
   04  Primitives    Button, Badge, Card, Input, Pill
   05  Kopfzeile
   06  Hero
   07  Bereichs-Umschalter
   08  Sektionen, Bento-Raster
   09  Datenvisualisierung  Kurve, Ring, Balken, Tacho, KPI
   10  FAQ
   11  Formulare
   12  Bewertungen, Über mich, CTA, Footer
   13  Feste Leisten  Mobile-Bar, Cookie
   14  Responsive

   Die Token-Namen folgen der shadcn/ui-Konvention (--background,
   --foreground, --card, --muted, --border, --ring, --radius), damit
   sich das System später ohne Umbenennen nach React portieren lässt.
   Die Markenfarben liegen darunter als --brand-*.
   ========================================================= */

/* ============ 01 · TOKENS ============ */
:root{
  /* Marke */
  --brand-fam:#0f6e56;
  --brand-fam-mid:#5dcaa5;
  --brand-fam-tint:#e9f5f0;
  --brand-fam-deep:#08483a;
  --brand-fam-btn:#17916d;

  --brand-biz:#3f3a86;
  --brand-biz-mid:#8f89d8;
  --brand-biz-tint:#eeedfa;
  --brand-biz-deep:#2a2660;
  --brand-biz-btn:#5b54c4;

  /* Altersvorsorge – ein klares, kräftigeres Azurblau statt des
     gedeckten Stahlblaus vorher (wirkte wie klassische Bankfarbe),
     weiterhin klar unterscheidbar vom violettstichigen Indigo des
     Firmenbereichs */
  --brand-alt:#0d72b9;
  --brand-alt-mid:#6fc3f5;
  --brand-alt-tint:#e7f4fc;
  --brand-alt-deep:#063f6b;
  --brand-alt-btn:#1791e0;

  /* Oberflächen und Text */
  --background:#faf9f6;
  --surface:#f4f2ec;
  --card:#ffffff;
  --foreground:#171614;
  --muted-foreground:#5c5a55;
  --subtle-foreground:#8a8781;
  --border:#e7e4dc;
  --border-strong:#d8d4ca;
  --input:#e7e4dc;

  /* Akzent – wird vom Bereich überschrieben */
  --accent:#171614;
  --accent-mid:#8a8781;
  --accent-tint:#f0ede6;
  --accent-deep:#171614;
  --accent-btn:#171614;
  --ring:var(--accent-mid);

  /* Semantik */
  --warn:#BA7517;
  --danger:#A32D2D;
  --ok:#1d9e75;

  /* Typografie */
  --font-sans:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --text-xs:12.5px;
  --text-sm:14px;
  --text-base:16.5px;
  --text-lg:18.5px;
  --text-xl:clamp(19px,1.5vw,21px);
  --text-h3:clamp(18px,1.7vw,20px);
  --text-h2:clamp(26px,3.4vw,37px);
  --text-h1:clamp(35px,5.6vw,60px);
  --text-display:clamp(38px,7vw,68px);
  --track-tight:-.028em;
  --track-tighter:-.036em;

  /* Abstände */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px; --sp-32:128px;
  --sec-y:clamp(64px,8vw,104px);

  /* Radien */
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:26px;
  --radius-full:999px;

  /* Schatten – flach gestapelt statt eines weichen Klumpens */
  --shadow-xs:0 1px 2px rgba(23,22,20,.05);
  --shadow-sm:0 1px 2px rgba(23,22,20,.05), 0 2px 6px rgba(23,22,20,.04);
  --shadow-md:0 2px 4px rgba(23,22,20,.04), 0 8px 20px rgba(23,22,20,.06);
  --shadow-lg:0 4px 8px rgba(23,22,20,.04), 0 18px 44px rgba(23,22,20,.09);
  --shadow-ring:inset 0 1px 0 rgba(255,255,255,.7);

  --maxw:1160px;
  --headh:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

body.theme-fam{
  --accent:var(--brand-fam); --accent-mid:var(--brand-fam-mid);
  --accent-tint:var(--brand-fam-tint); --accent-deep:var(--brand-fam-deep);
  --accent-btn:var(--brand-fam-btn);
}
body.theme-biz{
  --accent:var(--brand-biz); --accent-mid:var(--brand-biz-mid);
  --accent-tint:var(--brand-biz-tint); --accent-deep:var(--brand-biz-deep);
  --accent-btn:var(--brand-biz-btn);
}
body.theme-alt{
  --accent:var(--brand-alt); --accent-mid:var(--brand-alt-mid);
  --accent-tint:var(--brand-alt-tint); --accent-deep:var(--brand-alt-deep);
  --accent-btn:var(--brand-alt-btn);
}

/* ============ 02 · RESET & BASIS ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:150px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--background);color:var(--foreground);
  font-size:var(--text-base);line-height:1.6;
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,32px)}

h1,h2,h3,h4{font-weight:600;line-height:1.08;letter-spacing:var(--track-tight)}
h1,h2{text-wrap:balance}
h1{font-size:var(--text-h1);letter-spacing:var(--track-tighter);line-height:1.04}
h2{font-size:var(--text-h2);line-height:1.1}
h3{font-size:var(--text-h3);line-height:1.25;letter-spacing:-.018em}

.eyebrow{font-size:var(--text-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--subtle-foreground);font-weight:500}
.lead{font-size:var(--text-xl);color:var(--muted-foreground);line-height:1.55}
.num,.trust strong,.kpi .k-val,.frow .val,.dlegend b,.blab b,.donut .center b,.g-center b{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

::selection{background:var(--accent-tint);color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ============ 03 · ANIMATIONS-STARTZUSTÄNDE ============
   Greifen nur bei <html class="anim">. Setzt ein Inline-Skript im
   <head>; bleibt eine der beiden Bibliotheken aus, entfernt ein
   Timer die Klasse nach 2,5 s und alles ist sichtbar. */
html.anim .reveal{opacity:0}
html.anim .hero .rise,html.anim .hero-banner{opacity:0}
html.anim .cards > *,
html.anim .steps > *,
html.anim .rev-grid > *,
html.anim .quals > *{opacity:0}
html.anim .kpi{opacity:0}
html.anim #fam-chart .serie{opacity:0}

/* will-change wird von app.js gesetzt und nach der Bewegung entfernt –
   dauerhaft auf 19 Elementen wären es 19 Compositor-Ebenen ab Seitenstart. */
.reveal.moving,.rise.moving{will-change:transform,opacity}

.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .wi{display:inline-block}

@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:200% 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  html.anim .reveal,html.anim .hero .rise,html.anim .hero-banner,html.anim .kpi,html.anim #fam-chart .serie,
  html.anim .cards > *,html.anim .steps > *,html.anim .rev-grid > *,html.anim .quals > *{opacity:1}
}

/* ============ 04 · PRIMITIVES ============ */

/* Button. transform gehört Motion, deshalb nicht in der Transition. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;min-height:46px;border-radius:var(--radius-full);
  font-size:15.5px;font-weight:500;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;font-family:inherit;white-space:nowrap;
  border:1px solid var(--foreground);background:var(--foreground);color:var(--background);
  box-shadow:var(--shadow-xs);
  transition:background-color .22s var(--ease),border-color .22s var(--ease),
             box-shadow .22s var(--ease),color .22s var(--ease);
}
.btn .bi{width:18px;height:18px;flex:none;opacity:.9}
.btn:hover{background:#000;border-color:#000;box-shadow:var(--shadow-md)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--accent-mid)}
html:not(.anim) .btn:hover{transform:translateY(-2px)}

.btn.accent{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff}
.btn.accent:hover{background:var(--accent);border-color:var(--accent)}
.btn.accent:active,.btn.accent:focus-visible{box-shadow:0 0 0 4px var(--accent-mid)}

.btn.ghost{background:var(--card);color:var(--foreground);border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.btn.ghost:hover{background:var(--card);border-color:var(--accent);color:var(--accent-deep);box-shadow:var(--shadow-sm)}

.btn.light{background:var(--background);color:var(--foreground);border-color:var(--background)}
.btn.light:hover{background:#fff;border-color:#fff}

.btn.big{padding:15px 26px;min-height:54px;font-size:16.5px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* Badge */
.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border-radius:var(--radius-full);
  background:var(--card);border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  font-size:12.5px;letter-spacing:.02em;text-transform:none;
  color:var(--muted-foreground);font-weight:500;
}
.badge .pip{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--accent-mid);box-shadow:0 0 0 3px var(--accent-tint);
}

/* Karte – Premium-Behandlung: Hairline, innerer Lichtsaum, Hover-Lift */
.card{
  position:relative;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-8) var(--sp-8) var(--sp-6);
  box-shadow:var(--shadow-xs),var(--shadow-ring);
  contain:layout paint;
  transition:border-color .3s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:var(--shadow-lg);opacity:0;transition:opacity .3s var(--ease);
}
html:not(.anim) .card:hover{transform:translateY(-4px)}
.card:hover{border-color:var(--accent-mid)}
.card:hover::after{opacity:1}
.card .ic{
  width:44px;height:44px;border-radius:12px;
  background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5);
  border:1px solid var(--border);
  border-color:color-mix(in srgb,var(--accent) 14%,transparent);
}
.card .ic svg{width:21px;height:21px}
.card h3{margin-bottom:var(--sp-2)}
.card p{font-size:15.5px;color:var(--muted-foreground)}

/* ============ 05 · KOPFZEILE ============ */
header{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--border);
  background:rgba(250,249,246,.97);
  background:color-mix(in srgb,var(--background) 97%,transparent);
}
.bar{display:flex;align-items:center;justify-content:space-between;height:var(--headh);gap:var(--sp-5)}
.logo{display:flex;align-items:center;text-decoration:none}
.logo b{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.1;display:block}
/* Läuft bewusst mit --accent statt einer festen Farbe, damit "Finanz"
   im Logo mit der Welt mitfärbt: grün bei Familien, blau bei
   Altersvorsorge, lila bei Unternehmen. Nur der Bereich zwischen den
   drei Welten wechselt body.theme-fam/-biz/-alt, siehe setWorld() in
   app.js – die Rechtsseiten und die Quiz-Seite haben keinen
   Umschalter und bleiben deshalb dauerhaft grün (theme-fam). */
.logo .fin{color:var(--accent)}
.logo em{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle-foreground);font-weight:500;margin-top:2px}
nav{display:flex;align-items:center;gap:var(--sp-6)}
nav a{font-size:15px;color:var(--muted-foreground);text-decoration:none;position:relative}
nav a:not(.btn):not(.navtel)::after{
  content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1.5px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease);
}
nav a:not(.btn):hover{color:var(--foreground)}
nav a:not(.btn):not(.navtel):hover::after{transform:scaleX(1);transform-origin:left}
.navrechner{color:var(--accent-deep);font-weight:600}
.navrechner:hover{color:var(--accent-deep)}
.navtel{
  display:inline-flex;align-items:center;gap:7px;font-weight:500;
  color:var(--foreground);padding-right:var(--sp-2);
}
.navtel svg{width:15px;height:15px;color:var(--accent)}

/* ============ 06 · HERO ============ */
.hero{padding:var(--sp-10) 0 var(--sp-10);max-width:900px;position:relative;overflow:hidden}
/* Weicher Farbfleck hinter der Headline statt reiner Fläche – nutzt die
   aktive Akzentfarbe des Bereichs mit, deshalb kein eigener Token. */
.hero::before{
  content:"";position:absolute;top:-200px;right:-180px;width:600px;height:600px;
  background:radial-gradient(circle,var(--accent-mid) 0%,transparent 70%);
  opacity:.14;pointer-events:none;border-radius:50%;z-index:0;
}
.hero > *{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:var(--sp-6);text-transform:none;letter-spacing:0}
.hero h1{margin-bottom:var(--sp-6)}
.hero .lead{max-width:660px}
.hero-note{font-size:var(--text-sm);color:var(--subtle-foreground);margin-top:var(--sp-6)}

/* Titelbild randlos über volle Fensterbreite, damit es wie ein echtes
   Banner wirkt statt wie eine weitere Karte im Raster. Deshalb liegt es
   außerhalb von .wrap. Das Bild selbst ist höher als der Rahmen und
   wird beim Scrollen leicht verschoben – siehe heroParallax() in app.js.
   Beschriftung liegt direkt auf dem Bild, nicht nur die Buttons – sonst
   wirkt ein reines Foto schnell wie ein vergessenes Platzhalterelement. */
.hero-banner{
  position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  width:100vw;overflow:hidden;aspect-ratio:4/3;
}
.hero-banner img{
  position:absolute;top:-9%;left:0;width:100%;height:118%;
  object-fit:cover;display:block;will-change:transform;
}
.hero-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,7,6,.82) 0%,rgba(8,7,6,.52) 38%,rgba(8,7,6,.12) 68%,transparent 85%);
}
.hero-banner-content{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(20px,4.5vw,48px) clamp(20px,4vw,32px);
}
.hero-banner-eyebrow{
  display:block;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:10px;
}
.hero-banner-title{
  font-size:clamp(21px,3.2vw,32px);font-weight:600;letter-spacing:var(--track-tight);
  line-height:1.22;color:#fff;max-width:600px;margin-bottom:var(--sp-6);
}
.hero-banner-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.hero-banner-actions .btn{box-shadow:0 6px 20px rgba(0,0,0,.28)}
@media (min-width:640px){
  .hero-banner{aspect-ratio:16/9}
}
@media (min-width:900px){
  .hero-banner{aspect-ratio:2.4/1}
}

/* Vertrauensleiste */
.trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding:var(--sp-8) 0 var(--sp-16);
}
.trust div{padding-right:var(--sp-8);border-right:1px solid var(--border)}
.trust div:last-child{border-right:0}
.trust strong{display:block;font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:var(--track-tight);line-height:1.2}
.trust span{font-size:13.5px;color:var(--subtle-foreground);display:block;margin-top:2px}

/* ============ 07 · UMSCHALTER ============ */
.switcher{
  position:sticky;top:var(--headh);z-index:30;
  background:rgba(250,249,246,.98);
  background:color-mix(in srgb,var(--background) 98%,transparent);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.switcher .inner{
  display:flex;align-items:center;gap:var(--sp-5);
  padding:var(--sp-3) clamp(20px,4vw,32px);
  max-width:var(--maxw);margin:0 auto;flex-wrap:wrap;
}
.switcher .hint-txt{font-size:var(--text-sm);color:var(--subtle-foreground)}
.seg{
  display:inline-flex;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-full);padding:4px;gap:4px;
}
.seg button{
  border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:500;
  color:var(--muted-foreground);padding:10px 20px;min-height:44px;
  border-radius:var(--radius-full);cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  transition:color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.seg button:hover{color:var(--foreground)}
.seg button .dot{width:9px;height:9px;border-radius:50%;flex:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.seg button[data-w="familien"] .dot{background:var(--brand-fam-mid)}
.seg button[data-w="alt"] .dot{background:var(--brand-alt-mid)}
.seg button[data-w="flotte"] .dot{background:var(--brand-biz-mid)}
.seg button[aria-selected="true"]{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-sm)}
.seg button[aria-selected="true"][data-w="familien"]{color:var(--brand-fam)}
.seg button[aria-selected="true"][data-w="alt"]{color:var(--brand-alt)}
.seg button[aria-selected="true"][data-w="flotte"]{color:var(--brand-biz)}
.seg button[aria-selected="true"] .dot{transform:scale(1.3);box-shadow:0 0 0 4px var(--accent-tint)}

.world{padding-top:var(--sp-4)}
body.js .world{display:none}
body.js .world.active{display:block}
html:not(.anim) body.js .world.active{animation:fade .4s var(--ease)}

/* ============ 08 · SEKTIONEN & BENTO ============ */
.sec{padding:var(--sec-y) 0;border-top:1px solid var(--border)}
.sec:first-child{border-top:0}
.sec-head{max-width:680px;margin-bottom:var(--sp-10)}
.sec-head p{color:var(--muted-foreground);font-size:var(--text-lg);margin-top:var(--sp-4)}

.wintro{
  padding:var(--sp-12) 0 var(--sp-4);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;
}
.wintro h2{margin-bottom:var(--sp-4)}
.wintro p{color:var(--muted-foreground);font-size:var(--text-lg)}
.wintro p+p{margin-top:var(--sp-4)}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
/* Bento: die erste Karte trägt das Thema und bekommt mehr Raum */
.cards.bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,auto)}
.cards.bento .card{grid-column:span 1}
.cards.bento .card.feature{
  grid-column:span 3;
  display:grid;grid-template-columns:44px 1fr;gap:0 var(--sp-6);align-items:start;
  padding:var(--sp-10) var(--sp-10) var(--sp-8);
  background:linear-gradient(180deg,var(--accent-tint) 0%,var(--card) 62%);
}
.cards.bento .card.feature .ic{grid-row:span 2;margin-bottom:0}
.cards.bento .card.feature h3{font-size:clamp(21px,2.2vw,25px);margin-bottom:var(--sp-2)}
.cards.bento .card.feature p{font-size:var(--text-lg);max-width:62ch}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.step{padding-top:var(--sp-5);border-top:2px solid var(--accent-mid)}
.step b{display:block;font-size:12.5px;color:var(--accent);letter-spacing:.07em;text-transform:uppercase;margin-bottom:var(--sp-2)}
.step h3{margin-bottom:var(--sp-2)}
.step p{font-size:15.5px;color:var(--muted-foreground)}

/* Bild-Platzhalter */
.ph{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.ph.portrait{aspect-ratio:4/5}
.ph.square{aspect-ratio:1/1}
.ph.banner{aspect-ratio:16/9}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:var(--radius-full);
  padding:7px 14px;font-size:12.5px;color:var(--subtle-foreground);white-space:nowrap;
}
.ph .hint svg{width:14px;height:14px}

/* CTA-Band direkt nach den Rechnern */
.ctaband{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
  flex-wrap:wrap;margin:var(--sp-4) 0 0;
  padding:var(--sp-8) clamp(24px,3.4vw,40px);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm),var(--shadow-ring);
  position:relative;overflow:hidden;
}
.ctaband::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
}
.ctaband-txt strong{display:block;font-size:var(--text-xl);font-weight:600;letter-spacing:var(--track-tight)}
.ctaband-txt span{display:block;font-size:15.5px;color:var(--muted-foreground);margin-top:3px}
.ctaband-act{display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* ============ 09 · DATENVISUALISIERUNG ============ */
.calc{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);
  overflow:hidden;box-shadow:var(--shadow-md),var(--shadow-ring);
}
.calc-top{display:grid;grid-template-columns:322px 1fr}
.calc-controls{padding:var(--sp-8);border-right:1px solid var(--border);background:var(--background)}
.calc-chart{padding:var(--sp-6) var(--sp-8) var(--sp-4);position:relative;min-width:0}

.frow{margin-bottom:var(--sp-6)}
.frow:last-child{margin-bottom:0}
.frow label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--text-sm);font-weight:500;margin-bottom:10px}
.frow .val{color:var(--accent);font-weight:600;font-size:16.5px;transition:color .25s var(--ease)}

input[type=range]{
  width:100%;height:26px;cursor:pointer;background:transparent;
  accent-color:var(--accent);-webkit-appearance:none;appearance:none;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--surface);border:1px solid var(--border)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--card);border:2px solid var(--accent);margin-top:-9px;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08)}
input[type=range]:active::-webkit-slider-thumb,
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--accent-tint)}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--surface);border:1px solid var(--border)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--accent);box-shadow:var(--shadow-sm)}

.legend{display:flex;gap:var(--sp-5);flex-wrap:wrap;padding:2px 0 var(--sp-3);font-size:13.5px;color:var(--muted-foreground)}
.legend i{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:8px;vertical-align:middle}
.legend .l-etf i{background:var(--accent)}
.legend .l-spar i{background:#8a8781}
.legend .l-real i{background:#c9c5bc}

.chart-wrap{position:relative}
.chart-wrap svg{width:100%;height:auto;display:block;overflow:visible;cursor:crosshair}
.grid-line{stroke:var(--border);stroke-width:1;stroke-dasharray:2 4}
.axis-base{stroke:var(--border-strong);stroke-width:1.5;stroke-dasharray:none}
.axis-txt{font-size:11.5px;fill:var(--subtle-foreground);font-family:inherit;font-variant-numeric:tabular-nums}
.serie{fill:none;stroke-linecap:round;stroke-linejoin:round}
.area{opacity:0}
html:not(.anim) .area.on{opacity:1}

.enddot,#fd-pulse,#fh-etf,#fh-spar{transform-box:fill-box;transform-origin:center}
.pulse{opacity:.22;transform:scale(2.1);transform-box:fill-box;transform-origin:center}
#fc-guide{stroke:var(--accent-mid);stroke-width:1;stroke-dasharray:3 4;transition:opacity .2s}
.hoverdot{opacity:0;transition:opacity .18s}
.hoverdot.on{opacity:1}

/* Position setzt app.js über transform, nicht über left/top –
   damit bleibt das Verschieben auf dem Compositor. */
.tip{
  position:absolute;left:0;top:0;pointer-events:none;opacity:0;
  transform:translate(-50%,-126%);
  background:var(--foreground);color:var(--background);
  border-radius:12px;padding:12px 15px;min-width:186px;
  font-size:13px;line-height:1.6;white-space:nowrap;z-index:5;
  box-shadow:0 10px 34px rgba(23,22,20,.3);
  transition:opacity .18s var(--ease);
}
.tip.on{opacity:1;will-change:transform}
.tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--foreground);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.tip .jahr{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(250,249,246,.55);margin-bottom:6px}
.tip .row{display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.tip .row+.row{margin-top:2px}
.tip .row i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:8px}
.tip .row span{color:rgba(250,249,246,.72)}
.tip .row b{font-variant-numeric:tabular-nums}

/* KPI-Kacheln */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)}
.kpi{padding:var(--sp-6) var(--sp-8);border-right:1px solid var(--border)}
.kpi:last-child{border-right:0}
.kpi .k-lab{font-size:12.5px;color:var(--subtle-foreground);letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px}
.kpi .k-val{font-size:clamp(25px,3.1vw,33px);font-weight:600;letter-spacing:var(--track-tighter);line-height:1.1}
.kpi .k-sub{font-size:13.5px;color:var(--muted-foreground);margin-top:6px}
.kpi.hi{background:var(--accent-tint)}
.kpi.hi .k-val{color:var(--accent-deep)}
.kpi.hi .k-lab{color:var(--accent)}

.advice{
  font-size:15.5px;color:var(--muted-foreground);margin-top:var(--sp-5);
  padding:var(--sp-5) var(--sp-6);background:var(--accent-tint);
  border-radius:var(--radius);border:1px solid var(--border);
  border-color:color-mix(in srgb,var(--accent) 12%,transparent);
}
.advice b{color:var(--accent-deep);font-weight:600}
.disclaim{font-size:12.5px;color:var(--subtle-foreground);margin-top:var(--sp-4);line-height:1.6}

/* Ring */
.split{display:grid;grid-template-columns:280px 1fr;gap:clamp(28px,4vw,52px);align-items:center;margin-top:var(--sp-8)}
.donut{position:relative;width:240px;margin:0 auto}
.donut svg{transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:24;stroke-linecap:round}
html:not(.anim) .donut circle{transition:stroke-dasharray .9s var(--ease)}
.donut .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut .center b{font-size:32px;font-weight:600;letter-spacing:var(--track-tighter);line-height:1}
.donut .center span{font-size:12.5px;color:var(--subtle-foreground);margin-top:5px}
.dlegend{display:flex;flex-direction:column;gap:var(--sp-3)}
.dlegend div{display:flex;align-items:baseline;gap:11px;font-size:15.5px;color:var(--muted-foreground)}
.dlegend i{width:11px;height:11px;border-radius:3px;flex:none;transform:translateY(1px)}
.dlegend b{color:var(--foreground);font-weight:600;margin-left:auto}

/* Balken */
.bars{display:flex;flex-direction:column;gap:var(--sp-6);margin-top:2px}
.barrow .blab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);font-size:var(--text-sm);margin-bottom:9px}
.barrow .blab b{font-size:17.5px;font-weight:600}
.btrack{height:48px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative}
.bfill{height:100%;width:0;border-radius:11px;transition:width 1.1s var(--ease-out)}
.bfill.now{background:linear-gradient(90deg,#c4c2b9,#b4b2a9)}
.bfill.opt{background:var(--accent)}
.bfill.span{background:var(--accent-mid);position:absolute;top:0;left:0}
.bnote{font-size:13px;color:var(--subtle-foreground);margin-top:8px}
.btick{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--foreground) 18%,transparent);transition:left 1.1s var(--ease-out)}
.btick span{
  position:absolute;top:50%;left:9px;transform:translateY(-50%);
  font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted-foreground);white-space:nowrap;font-weight:500;
}

/* Altersvorsorge: Ring und Netto-Vergleich nebeneinander statt
   dreier gestapelter Blöcke – halbiert die Höhe des Abschnitts. */
.altgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-5)}
.altcard{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-6) var(--sp-5);box-shadow:var(--shadow-xs),var(--shadow-ring);
  display:flex;flex-direction:column;
}
.altcard.hi{background:var(--accent-tint);border-color:var(--accent-mid)}
.altcard-h{
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;
  color:var(--subtle-foreground);margin-bottom:var(--sp-4);
}
.altcard.hi .altcard-h{color:var(--accent)}

.ring-wrap{display:grid;grid-template-columns:172px 1fr;gap:var(--sp-5);align-items:center;flex:1}
.ring-wrap .donut{width:172px}
.ring-wrap .donut circle{stroke-width:22}
.ring-wrap .donut .center b{font-size:26px}
.ring-wrap .dlegend{gap:9px}
.ring-wrap .dlegend div{font-size:13.5px}

/* Die Differenz als Blickfang, die Herkunft darunter – ergänzt das
   Ergebnis-Panel oben im Rechner, statt es zu wiederholen. */
.vs2-num{
  display:block;font-size:clamp(30px,4vw,42px);font-weight:600;letter-spacing:var(--track-tighter);
  color:var(--accent-deep);line-height:1.05;font-variant-numeric:tabular-nums;
}
.vs2-sub{display:block;font-size:14px;color:var(--muted-foreground);margin-top:2px}
.vs2-meta{
  display:flex;flex-wrap:wrap;gap:4px var(--sp-5);margin-top:var(--sp-5);
  padding-top:var(--sp-4);border-top:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  font-size:12.5px;color:var(--muted-foreground);
}
.vs2-meta b{color:var(--accent-deep);font-weight:600;font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .altgrid{grid-template-columns:1fr}
  .ring-wrap{grid-template-columns:1fr;justify-items:center;text-align:left}
  .ring-wrap .dlegend{width:100%}
}

/* Zeitleiste der Reform – gleiche Optik wie „So läuft es ab", nur mit Datum */
.steps.timeline .step b{color:var(--accent);letter-spacing:.02em;text-transform:none;font-size:13.5px;font-weight:600}
.steps.timeline .step{border-top-width:2px}

/* Tacho für die Schadenquote */
.gauge{position:relative;margin-top:var(--sp-6);padding-top:var(--sp-2)}
.gauge svg{width:100%;max-width:230px;margin:0 auto;overflow:visible}
.gauge .g-bg{fill:none;stroke:var(--surface);stroke-width:14;stroke-linecap:round}
.gauge .g-val{fill:none;stroke:var(--accent);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:0 400;transition:stroke .35s var(--ease)}
html:not(.anim) .gauge .g-val{transition:stroke-dasharray .8s var(--ease),stroke .35s var(--ease)}
.g-center{position:absolute;left:0;right:0;bottom:26px;text-align:center;pointer-events:none}
.g-center b{display:block;font-size:26px;font-weight:600;letter-spacing:var(--track-tighter);line-height:1}
.g-center span{font-size:12px;color:var(--subtle-foreground)}
.g-scale{display:flex;justify-content:space-between;max-width:214px;margin:-6px auto 0;font-size:11px;color:var(--subtle-foreground)}

/* ============ 10 · FAQ ============ */
.faq details{border-bottom:1px solid var(--border)}
.faq details:first-of-type{border-top:1px solid var(--border)}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--sp-5) var(--sp-10) var(--sp-5) 0;
  position:relative;font-size:var(--text-lg);font-weight:500;letter-spacing:-.012em;
  transition:color .2s;
}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.faq .fq{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq details[open] .fq{grid-template-rows:1fr}
.faq .fq>div{overflow:hidden}
.faq .fq p{padding:0 var(--sp-10) var(--sp-6) 0;color:var(--muted-foreground);max-width:78ch}

/* ============ 11 · FORMULARE ============ */
.formsec{
  background:var(--accent-tint);border-radius:var(--radius-xl);
  padding:clamp(28px,4vw,52px);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,52px);
  transition:background-color .3s var(--ease);
  border:1px solid var(--border);
  border-color:color-mix(in srgb,var(--accent) 12%,transparent);
}
.formsec h2{margin-bottom:var(--sp-4)}
.formsec .side p{color:var(--muted-foreground);font-size:var(--text-lg)}
.formsec .side ul{list-style:none;margin-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.formsec .side li{font-size:15.5px;color:var(--muted-foreground);padding-left:28px;position:relative}
.formsec .side li::before{
  content:"";position:absolute;left:0;top:7px;width:15px;height:9px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}
form{
  background:var(--card);border-radius:var(--radius-lg);padding:var(--sp-8);
  border:1px solid var(--border);box-shadow:var(--shadow-sm),var(--shadow-ring);
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:13.5px;font-weight:500;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--foreground);
  background:var(--background);border:1px solid var(--input);border-radius:var(--radius-sm);
  padding:13px 14px;min-height:48px;
  transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.field textarea{min-height:104px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--subtle-foreground)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--border-strong)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--card);
  box-shadow:0 0 0 4px var(--accent-tint);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--danger)}
.consent{display:flex;gap:12px;align-items:flex-start;margin:var(--sp-4) 0 var(--sp-5)}
.consent input{margin-top:3px;accent-color:var(--accent);width:18px;height:18px;flex:none}
.consent label{font-size:13.5px;color:var(--muted-foreground);line-height:1.55}
.consent a{color:var(--accent);text-underline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:12.5px;color:var(--subtle-foreground);margin-top:var(--sp-3);text-align:center}
.formstate{display:none;padding:14px 16px;border-radius:var(--radius-sm);font-size:15px;margin-bottom:var(--sp-4)}
.formstate.ok{display:block;background:#e6f4ee;color:#08483a;border:1px solid #9fe1cb}
.formstate.err{display:block;background:#fceaea;color:#7d1f1f;border:1px solid #f0b6b6}

/* ============ 12 · BEWERTUNGEN, ÜBER MICH, CTA, FOOTER ============ */
.rev-head{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.rev-score{display:flex;align-items:center;gap:14px}
.rev-score .num{font-size:36px;font-weight:600;letter-spacing:var(--track-tighter);line-height:1}
.stars{display:flex;gap:2px}
.stars svg{width:17px;height:17px}
.rev-meta{font-size:14.5px;color:var(--subtle-foreground)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}

/* Laufband der Bewertungen ------------------------------------
   Reine CSS-Animation: eine Endlosschleife über JavaScript würde
   dauerhaft Rechenzeit binden, hier läuft sie auf dem Compositor.
   Die Dauer setzt app.js, damit die Geschwindigkeit unabhängig von
   der Anzahl der Karten konstant bleibt. */
.rev-marquee{
  position:relative;margin:-14px calc(-1 * clamp(20px,4vw,32px));
  padding:14px clamp(20px,4vw,32px);overflow:hidden;
}
/* Karten im Laufband bleiben sichtbar – die Spur bewegt sich, nicht sie */
html.anim .rev-marquee .rev-grid > *{opacity:1}
.rev-marquee::before,.rev-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(28px,6vw,80px);z-index:2;pointer-events:none;
}
.rev-marquee::before{left:0;background:linear-gradient(90deg,var(--background),transparent)}
.rev-marquee::after{right:0;background:linear-gradient(270deg,var(--background),transparent)}

.rev-marquee .rev-track{
  display:flex;grid-template-columns:none;gap:var(--sp-5);
  width:max-content;
}
.rev-marquee.running .rev-track{will-change:transform}
.rev-marquee .rev-track .rev{
  flex:0 0 auto;width:min(370px,80vw);
  display:flex;flex-direction:column;
  box-shadow:none;transition:none;
}
.rev-marquee .rev-track .rev::after{display:none}
.rev-marquee{contain:content}
.rev-marquee .rev-track .rev p{flex:1}

.rev-marquee.running .rev-track{animation:marquee var(--marquee-dur,44s) linear infinite}
.rev-marquee:hover .rev-track,
.rev-marquee:focus-within .rev-track{animation-play-state:paused}
.rev-marquee.paused .rev-track{animation-play-state:paused}

@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

@media (prefers-reduced-motion:reduce){
  .rev-marquee.running .rev-track{animation:none}
  .rev-marquee{overflow-x:auto;scroll-snap-type:x mandatory}
  .rev-marquee .rev{scroll-snap-align:start}
}
.rev{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-6);box-shadow:var(--shadow-xs),var(--shadow-ring);
  position:relative;contain:layout paint;
  transition:border-color .3s var(--ease);
}
.rev::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:var(--shadow-md);opacity:0;transition:opacity .3s var(--ease);
}
.rev:hover{border-color:var(--border-strong)}
.rev:hover::after{opacity:1}
.rev p{font-size:15.5px;color:var(--muted-foreground);margin:var(--sp-3) 0 var(--sp-4)}
.rev .who{display:flex;align-items:center;gap:11px}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none;
  border:1px solid var(--border);
  border-color:color-mix(in srgb,var(--accent) 14%,transparent);
}
.who b{font-size:14.5px;font-weight:500;display:block}
.who span{font-size:13px;color:var(--subtle-foreground)}

.about{padding:var(--sec-y) 0;border-top:1px solid var(--border)}
.about h2{margin-bottom:var(--sp-5)}
.about > p{color:var(--muted-foreground);font-size:var(--text-lg);max-width:70ch}
.about > p+p{margin-top:var(--sp-4)}

.team{display:flex;flex-direction:column;gap:var(--sp-10);margin-top:var(--sp-10)}
.team-member{display:grid;grid-template-columns:240px 1fr;gap:clamp(28px,4vw,48px);align-items:start}
.team-member .ph{width:100%}
.team-member h3{font-size:var(--text-h3);margin-bottom:var(--sp-3)}
.team-member p{color:var(--muted-foreground);font-size:16px}
.quals{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-5)}
.qual{
  font-size:13.5px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-full);padding:7px 15px;color:var(--muted-foreground);
  transition:background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.qual:hover{background:var(--accent-tint);border-color:var(--accent-mid);color:var(--accent-deep)}

.cta{
  background:var(--foreground);color:var(--background);border-radius:var(--radius-xl);
  padding:clamp(38px,5vw,60px) clamp(28px,4vw,52px);margin:0 0 var(--sp-20);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-8);flex-wrap:wrap;
  transition:background-color .35s var(--ease);position:relative;overflow:hidden;
}
body.theme-fam .cta,body.theme-biz .cta,body.theme-alt .cta{background:var(--accent-deep)}
.cta h2{margin-bottom:var(--sp-3)}
.cta p{color:rgba(250,249,246,.72);font-size:var(--text-lg);max-width:470px}

footer{border-top:1px solid var(--border);padding:var(--sp-12) 0 var(--sp-16)}
.fgrid{display:flex;justify-content:space-between;gap:var(--sp-10);flex-wrap:wrap}
.fcol h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--subtle-foreground);font-weight:500;margin-bottom:var(--sp-4)}
.fcol a{display:block;font-size:15px;color:var(--muted-foreground);text-decoration:none;padding:4px 0;transition:color .2s,transform .2s var(--ease)}
.fcol a:hover{color:var(--foreground);transform:translateX(3px)}
.copy{
  margin-top:var(--sp-10);padding-top:var(--sp-6);border-top:1px solid var(--border);
  font-size:13.5px;color:var(--subtle-foreground);
  display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;
}

/* ============ 13 · FESTE LEISTEN ============ */
.cbar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:680px;margin:0 auto;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:var(--sp-6);
  display:none;gap:var(--sp-5);align-items:center;flex-wrap:wrap;
}
.cbar.show{display:flex}
.cbar p{font-size:14.5px;color:var(--muted-foreground);flex:1 1 300px}
.cbar .acts{display:flex;gap:var(--sp-2)}
.cbar .btn{padding:10px 18px;min-height:44px;font-size:14.5px}

.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,249,246,.98);
  background:color-mix(in srgb,var(--background) 98%,transparent);
  border-top:1px solid var(--border);
  transform:translateY(110%);
}
.mobilebar a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;border-radius:var(--radius-full);font-size:16px;font-weight:500;
  text-decoration:none;
}
.mobilebar svg{width:19px;height:19px}
.mb-call{background:var(--card);border:1px solid var(--border-strong);color:var(--foreground)}
.mb-cta{background:var(--accent-btn);color:#fff;border:1px solid var(--accent-btn);box-shadow:var(--shadow-md)}

/* ============ 14 · RESPONSIVE ============ */
@media (max-width:1080px){
  .calc-top{grid-template-columns:290px 1fr}
  .trust div{padding-right:var(--sp-5)}
}
@media (max-width:960px){
  .cards.bento{grid-template-columns:repeat(2,1fr)}
  .cards.bento .card.feature{grid-column:span 2}
  .split{grid-template-columns:1fr;gap:var(--sp-8)}
  .rev-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:860px){
  .wintro,.formsec{grid-template-columns:1fr;gap:var(--sp-8)}
  .team-member{grid-template-columns:1fr;gap:var(--sp-5)}
  .team-member .ph{max-width:280px}
  .calc-top{grid-template-columns:1fr}
  .calc-controls{border-right:0;border-bottom:1px solid var(--border)}
  .kpis{grid-template-columns:1fr}
  .kpi{border-right:0;border-bottom:1px solid var(--border)}
  .kpi:last-child{border-bottom:0}
  .about .ph.portrait{max-width:300px}
  nav .hide{display:none}
  .trust{grid-template-columns:1fr 1fr;gap:var(--sp-5) 0;padding-bottom:var(--sp-12)}
  .trust div:nth-child(2){border-right:0}
  .switcher .hint-txt{display:none}
  html{scroll-padding-top:180px}
  .ctaband{flex-direction:column;align-items:flex-start}
  .ctaband-act{width:100%}
  .ctaband-act .btn{flex:1}
}
@media (max-width:640px){
  .cards,.cards.bento,.rev-grid,.grid2{grid-template-columns:1fr}
  .cards.bento .card.feature{grid-column:span 1;grid-template-columns:1fr;padding:var(--sp-8)}
  .cards.bento .card.feature .ic{grid-row:auto;margin-bottom:var(--sp-5)}
  .hero{padding-top:var(--sp-12)}
  .hero-actions{gap:var(--sp-3)}
  .hero-actions .btn{flex:1 1 100%}
  .hero-note{flex:1 1 100%;text-align:center}
  .calc-controls,.calc-chart{padding:var(--sp-6)}
  .kpi{padding:var(--sp-5) var(--sp-6)}
  form{padding:var(--sp-6)}
  .cta{padding:var(--sp-8) var(--sp-6)}
  .donut{width:210px}
  body.js .mobilebar{display:flex}
  body{padding-bottom:76px}
  .cbar{bottom:84px}
  .tip{min-width:0;font-size:12px;padding:10px 12px}
  .legend{gap:var(--sp-3);font-size:12.5px}
  .faq summary{font-size:16.5px}
}
@media (max-width:380px){
  .trust{grid-template-columns:1fr}
  .trust div{border-right:0;padding-right:0}
}

/* Regler ohne Wirkung ausgrauen – etwa die Laufzeit der Kinderzulage,
   solange keine Kinder eingestellt sind. */
.frow.inaktiv{opacity:.42;pointer-events:none}
.frow.inaktiv .val{color:var(--subtle-foreground)}

/* Rechner mit vielen Reglern: Bedienung quer über die volle Breite,
   Diagramm darunter. Sonst ist die Reglerspalte doppelt so hoch wie
   das Diagramm und rechts bleibt eine leere Fläche stehen. */
.calc.calc-wide .calc-top{display:block}
.calc-wide .calc-controls{
  border-right:0;border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5) var(--sp-8);
  padding:var(--sp-6) var(--sp-8);
}
.calc-wide .calc-controls .frow{margin-bottom:0}
.calc-wide .calc-controls > p{grid-column:1 / -1;margin-top:0}
.calc-wide .calc-chart{padding:var(--sp-5) var(--sp-8) var(--sp-2)}
.calc-wide .chart-wrap svg{max-height:420px}

@media (max-width:860px){
  .calc-wide .calc-controls{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .calc-wide .calc-controls{grid-template-columns:1fr;gap:var(--sp-5)}
}

/* Altersvorsorge-Rechner: Regler in zwei nummerierten Gruppen statt
   einer undifferenzierten Liste, plus Zahlenfeld neben jedem Slider
   für punktgenaue Eingabe – beides nach dem Vorbild des
   Finanzfluss-Rechners, ohne dessen Layout zu kopieren. */
.calc-alt .calc-controls{
  grid-template-columns:1fr 1fr;gap:var(--sp-8);
}
.calc-alt .calc-controls .fgroup{display:flex;flex-direction:column;gap:var(--sp-5)}
.calc-alt .calc-controls > p{grid-column:1 / -1}

.fgroup-h{
  display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);margin-bottom:2px;
}
.fgroup-n{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:19px;height:19px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent-deep);
  font-size:11px;font-weight:700;
}

.frow-input{display:flex;align-items:center;gap:12px}
.frow-input input[type=range]{flex:1;min-width:0}
.num-wrap{position:relative;flex:none}
.frow-num{
  width:68px;flex:none;text-align:center;font-family:inherit;
  padding:7px 8px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:var(--card);color:var(--foreground);font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.num-wrap .frow-num{text-align:left;padding-right:24px}
.num-suffix{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--subtle-foreground);pointer-events:none;font-weight:500;
}
.frow-num::-webkit-outer-spin-button,.frow-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.frow-num:hover{border-color:var(--accent-mid)}
.frow-num:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.frow.inaktiv .frow-num{pointer-events:none}

/* Großer Ergebniswert vor dem Diagramm, statt erst in einer KPI-
   Kachel weiter unten – das Ergebnis zuerst, die Details danach. */
.calc-hero-stat{
  padding:var(--sp-6);margin-bottom:var(--sp-5);
  background:linear-gradient(135deg,var(--accent-tint) 0%,var(--card) 130%);
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
}
.chs-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.chs-lab{font-size:12.5px;color:var(--subtle-foreground);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.chs-delta{
  font-size:12.5px;font-weight:700;color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent);
  padding:3px 10px;border-radius:var(--radius-full);font-variant-numeric:tabular-nums;
}
.chs-val{
  display:block;font-size:clamp(36px,4.6vw,50px);font-weight:600;
  letter-spacing:var(--track-tighter);line-height:1.05;color:var(--accent-deep);
  font-variant-numeric:tabular-nums;margin-top:8px;
}
.chs-sub{display:block;font-size:14px;color:var(--muted-foreground);margin-top:5px}

/* Förderquote/Förderung/Aufwand direkt im selben Panel wie der große
   Ergebniswert – ein Kasten statt zwei, durch eine Trennlinie
   gegliedert statt durch eine eigene Karte. */
.chs-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
  margin-top:var(--sp-5);padding-top:var(--sp-5);
  border-top:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
}
.chs-stat{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  padding-left:var(--sp-4);border-left:1px solid color-mix(in srgb,var(--accent) 14%,transparent);
}
.chs-stat:first-child{padding-left:0;border-left:0}
.chs-stat-lab{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--subtle-foreground);font-weight:500}
.chs-stat-val{font-size:19px;font-weight:600;letter-spacing:var(--track-tighter);color:var(--foreground);font-variant-numeric:tabular-nums}
.chs-stat-sub{font-size:11.5px;color:var(--muted-foreground);line-height:1.35}

/* Kickback: eigene, auffällige Box statt einer schmalen Zeile – der
   Schalter verändert das große Ergebnis oben und soll das auch aussehen. */
.kick{
  display:block;cursor:pointer;margin-top:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--radius);
  background:color-mix(in srgb,var(--accent) 9%,var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
}
.kick-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.kick-badge{
  display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:var(--accent-btn);border-radius:var(--radius-full);padding:3px 10px;
}
.kick-switch{position:relative;flex:none}
.kick-switch input{position:absolute;opacity:0;width:1px;height:1px}
.kick-track{
  display:block;width:40px;height:23px;border-radius:var(--radius-full);
  background:var(--border-strong);transition:background .18s var(--ease);
}
.kick-thumb{
  display:block;width:17px;height:17px;margin:3px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-xs);transition:transform .18s var(--ease);
}
.kick-switch input:checked + .kick-track{background:var(--accent-btn)}
.kick-switch input:checked + .kick-track .kick-thumb{transform:translateX(17px)}
.kick-switch input:focus-visible + .kick-track{outline:2px solid var(--accent);outline-offset:2px}
.kick-txt{display:block;margin-top:var(--sp-3);font-size:15px;font-weight:600;color:var(--foreground)}
.kick-delta{
  display:inline-block;margin-top:4px;font-size:17px;font-weight:700;
  color:var(--ok);font-variant-numeric:tabular-nums;letter-spacing:var(--track-tighter);
}
.kick-sub{display:block;font-size:12.5px;color:var(--muted-foreground);margin-top:6px;font-weight:400;line-height:1.5}

@media (max-width:860px){
  .calc-alt .calc-controls{grid-template-columns:1fr}
}
@media (max-width:520px){
  .chs-stats{grid-template-columns:1fr;gap:var(--sp-3)}
  .chs-stat{padding-left:0;border-left:0;padding-top:var(--sp-3);border-top:1px solid color-mix(in srgb,var(--accent) 14%,transparent)}
  .chs-stat:first-child{padding-top:0;border-top:0}
}

/* Häkchenliste in den Weg-Karten */
.tickliste{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.tickliste li{font-size:15.5px;color:var(--muted-foreground);padding-left:28px;position:relative;line-height:1.5}
.tickliste li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}

/* ============ MUSTERDEPOT · großer Ring ============
   Dreht dauerhaft und langsam, hält beim Hovern an. Gedreht wird das
   gesamte <svg>, nicht die einzelnen Segmente – ein Element, eine
   Compositor-Ebene, kein Neuzeichnen des Inhalts. */
.pf-stage{display:flex;flex-direction:column;align-items:center;margin-top:var(--sp-8)}

.pf-ring{position:relative;width:clamp(280px,38vw,420px);aspect-ratio:1}
.pf-ring svg{
  width:100%;height:100%;display:block;
  transform:rotate(-90deg);transform-origin:50% 50%;
}
html.anim .pf-ring.spin svg{animation:pfspin 80s linear infinite;will-change:transform}
.pf-ring.spin:hover svg,
.pf-ring.spin.halt svg{animation-play-state:paused}
@keyframes pfspin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}

.pf-track{fill:none;stroke:var(--surface);stroke-width:26;pointer-events:none}
.pf-seg{
  fill:none;stroke-width:26;stroke-linecap:butt;cursor:pointer;
  transition:opacity .25s var(--ease),stroke-width .25s var(--ease);
}
.pf-ring.focus .pf-seg{opacity:.24}
.pf-ring .pf-seg.on{opacity:1;stroke-width:34}

.pf-center{
  position:absolute;inset:22%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none;
}
.pf-center b{
  font-size:clamp(34px,4.6vw,52px);font-weight:600;letter-spacing:var(--track-tighter);
  line-height:1;font-variant-numeric:tabular-nums;color:var(--accent-deep);
}
.pf-center span{
  font-size:clamp(12.5px,1.3vw,15px);color:var(--muted-foreground);
  margin-top:8px;line-height:1.35;max-width:14ch;
}

.pf-role{
  margin-top:var(--sp-6);max-width:60ch;text-align:center;
  font-size:16.5px;color:var(--muted-foreground);min-height:3.2em;
  transition:opacity .2s var(--ease);
}

.pf-why{margin-top:var(--sp-8)}
.pf-why-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-8)}
.pf-why-list b{color:var(--accent-deep);font-weight:600}
.pf-note{margin-top:var(--sp-5);font-size:14px;color:var(--muted-foreground)}
.pf-perf{margin-top:var(--sp-5)}

/* Unbelegte Zahl, die vor Veröffentlichung noch mit einer echten Quelle
   zu füllen ist – gleiche Kennzeichnung wie auf den Rechtsseiten
   (.legal .fill), hier aber ohne weiteren Elternselektor, damit sie
   auch außerhalb von .legal nutzbar ist, und mit Zeilenumbruch statt
   nowrap, weil der Platzhaltertext hier länger ist. */
.fill{
  background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);border-radius:4px;
  padding:1px 7px;font-size:.92em;font-weight:600;
}

@media (max-width:860px){
  .pf-why-list{grid-template-columns:1fr}
}
@media (max-width:520px){
  .pf-ring{width:min(88vw,340px)}
  .pf-role{font-size:15px}
}

/* ============ 15 · RECHTSSEITEN ============
   Impressum, Datenschutzerklärung, Erstinformation – eigene, schlichte
   Seiten außerhalb der Welten-Umschaltung. Fließtext statt Karten,
   deshalb eigene, engere Typo-Regeln nur für .legal. */
.legal{max-width:720px;margin:0 auto;padding:var(--sec-y) 0}
.legal h1{margin-bottom:var(--sp-3)}
.legal .legal-updated{color:var(--subtle-foreground);font-size:var(--text-sm);margin-bottom:var(--sp-8)}
.legal h2{font-size:var(--text-h3);margin:var(--sp-10) 0 var(--sp-3)}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:15.5px;margin:var(--sp-5) 0 var(--sp-2)}
.legal p{color:var(--muted-foreground);font-size:var(--text-base);line-height:1.7;margin-bottom:var(--sp-4)}
.legal ul{margin:0 0 var(--sp-4) var(--sp-5);color:var(--muted-foreground);line-height:1.7}
.legal li{margin-bottom:var(--sp-2)}
.legal a{color:var(--accent);text-underline-offset:2px}
.legal strong{color:var(--foreground);font-weight:600}
.legal .fill{
  background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);border-radius:4px;
  padding:1px 7px;font-size:.92em;font-weight:600;white-space:nowrap;
}
.legal .noteblock{
  background:var(--accent-tint);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-6);margin:0 0 var(--sp-8);font-size:14.5px;color:var(--muted-foreground);
}
.legal .noteblock strong{color:var(--accent-deep)}
.legal .back{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--muted-foreground);margin-bottom:var(--sp-8);text-decoration:none}
.legal .back svg{width:15px;height:15px;transform:rotate(180deg)}
.legal .back:hover{color:var(--foreground)}

/* Partnerliste: lange, alphabetische Aufzählung – Mehrspalten statt eigener
   Aufzählungspunkte je Firma, damit die Liste nicht seitenlang wird. */
.legal .partnerlist{
  columns:200px 3;column-gap:var(--sp-6);margin:0 0 var(--sp-6);
  font-size:13.5px;line-height:1.65;color:var(--muted-foreground);
}
.legal .partnerlist .ltr{
  font-weight:600;color:var(--foreground);margin-top:var(--sp-3);
  break-after:avoid-column;break-inside:avoid;
}
.legal .partnerlist .co{break-inside:avoid}