/* site.css — Oliver Stapelkamp · Finanzberatung
   Moderne, nahbare Fintech-Optik. 4 umschaltbare Farbwelten via [data-theme]. */

/* ============ Farbwelten ============ */
:root,[data-theme="tiefblau"]{
  --bg:#f5f7fb; --surface:#ffffff; --surface-2:#eef2f9;
  --ink:#0e1b2e; --muted:#5a6b82; --faint:#8b99ad; --line:#e0e6f0;
  --primary:#123a6b; --primary-2:#1d5296; --primary-ink:#ffffff;
  --accent:#2e9df0; --accent-soft:#e4f2fd; --accent-ink:#0a3a5e;
  --hero-from:#0d2c52; --hero-to:#1b4f8f; --hero-ink:#eaf3ff;
  --ring:rgba(46,157,240,.35);
}
[data-theme="petrol"]{
  --bg:#f2f7f5; --surface:#ffffff; --surface-2:#e7f1ee;
  --ink:#0c211d; --muted:#4f6a63; --faint:#84998f; --line:#dce8e3;
  --primary:#0f4438; --primary-2:#166653; --primary-ink:#ffffff;
  --accent:#18b287; --accent-soft:#dcf5ec; --accent-ink:#0a4634;
  --hero-from:#0a352b; --hero-to:#12604c; --hero-ink:#e7f6f0;
  --ring:rgba(24,178,135,.35);
}
[data-theme="anthrazit"]{
  --bg:#f4f5f7; --surface:#ffffff; --surface-2:#ebedf1;
  --ink:#181b21; --muted:#5c626d; --faint:#8a909b; --line:#e0e2e8;
  --primary:#20242c; --primary-2:#333944; --primary-ink:#ffffff;
  --accent:#e0a52b; --accent-soft:#fbf1d9; --accent-ink:#6b4c07;
  --hero-from:#16181d; --hero-to:#2c313b; --hero-ink:#f2ede1;
  --ring:rgba(224,165,43,.4);
}
[data-theme="sand"]{
  --bg:#faf6f0; --surface:#ffffff; --surface-2:#f3ece1;
  --ink:#2a2118; --muted:#736657; --faint:#a2937f; --line:#e9dfd0;
  --primary:#8a5a2b; --primary-2:#a96f38; --primary-ink:#fffaf3;
  --accent:#127a6b; --accent-soft:#dcefe9; --accent-ink:#0c4b42;
  --hero-from:#3a2c1c; --hero-to:#7a5330; --hero-ink:#f7eddf;
  --ring:rgba(18,122,107,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:"Hanken Grotesk",system-ui,sans-serif; background:var(--bg); color:var(--ink);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .25s,color .25s;}
h1,h2,h3,h4{font-family:"Space Grotesk","Hanken Grotesk",sans-serif; line-height:1.12; margin:0; letter-spacing:-.02em; font-weight:600;}
p{margin:0;} a{color:var(--accent-ink); text-decoration:none;} a:hover{color:var(--primary);}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);}

/* ============ Buttons ============ */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:"Space Grotesk",sans-serif; font-weight:600;
  font-size:16px; border-radius:12px; padding:14px 24px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s, box-shadow .2s, background .2s; white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--primary); color:var(--primary-ink); box-shadow:0 8px 22px -10px var(--primary);}
.btn-primary:hover{background:var(--primary-2); color:var(--primary-ink);}
.btn-accent{background:var(--accent); color:#fff; box-shadow:0 8px 22px -10px var(--accent);}
.btn-accent:hover{filter:brightness(1.05); color:#fff;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-ink);}
.btn-lg{padding:16px 30px; font-size:17px;}
.btn-block{width:100%; justify-content:center;}

/* ============ Header / Nav ============ */
.nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 82%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; gap:20px; height:70px;}
.brand{display:flex; align-items:center; gap:11px; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:19px; color:var(--ink); letter-spacing:-.02em;}
.brand:hover{color:var(--ink);}
.brand-mark{width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--primary),var(--accent));
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:17px; box-shadow:0 6px 16px -8px var(--primary);}
.brand small{display:block; font-family:"Hanken Grotesk",sans-serif; font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.02em; margin-top:-2px;}
.nav-links{display:flex; align-items:center; gap:6px; margin-left:auto;}
.nav-links a{padding:9px 13px; border-radius:9px; font-size:15px; font-weight:600; color:var(--muted);}
.nav-links a:hover{background:var(--surface-2); color:var(--ink);}
.nav-links a.active{color:var(--ink);}
.nav-cta{margin-left:8px;}
.nav-toggle{display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line); background:var(--surface); border-radius:11px; font-size:20px; color:var(--ink); cursor:pointer;}

/* ============ Hero ============ */
.hero{position:relative; overflow:hidden; background:linear-gradient(150deg,var(--hero-from),var(--hero-to)); color:var(--hero-ink);}
.hero::after{content:""; position:absolute; right:-140px; top:-140px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at center,var(--accent),transparent 62%); opacity:.28;}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; padding-top:82px; padding-bottom:92px;}
.hero .eyebrow{color:color-mix(in srgb,var(--accent) 65%, white);}
.hero h1{font-size:clamp(34px,5vw,58px); color:#fff; margin:16px 0 20px; font-weight:700;}
.hero-lead{font-size:19px; color:color-mix(in srgb,var(--hero-ink) 90%, white); max-width:44ch;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}
.hero-trust{display:flex; gap:26px; margin-top:38px; flex-wrap:wrap;}
.hero-trust div{display:flex; flex-direction:column;}
.hero-trust b{font-family:"Space Grotesk",sans-serif; font-size:26px; color:#fff;}
.hero-trust span{font-size:13px; color:color-mix(in srgb,var(--hero-ink) 78%, transparent);}

/* Hero-Grafik: Depot-Wachstum */
.hero-card{background:color-mix(in srgb,#ffffff 12%, transparent); border:1px solid color-mix(in srgb,#ffffff 22%, transparent);
  border-radius:22px; padding:22px; backdrop-filter:blur(6px); box-shadow:0 30px 60px -30px rgba(0,0,0,.55);}
.hero-card-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.hero-card-top b{font-family:"Space Grotesk",sans-serif; font-size:15px; color:#fff;}
.hero-card-top .pos{font-size:13px; font-weight:700; color:color-mix(in srgb,var(--accent) 70%, white);}
.hero-card-amt{font-family:"Space Grotesk",sans-serif; font-size:32px; color:#fff; margin-bottom:14px;}
.spark{width:100%; height:112px; display:block;}
.chart{display:flex; gap:8px;}
.chart-y{display:flex; flex-direction:column; justify-content:space-between; height:112px; font-size:10px; letter-spacing:.02em; color:color-mix(in srgb,var(--hero-ink) 62%, transparent); text-align:right; flex:0 0 auto;}
.chart-plot{flex:1; min-width:0;}
.chart-grid{color:color-mix(in srgb,#ffffff 16%, transparent);}
.chart-x{display:flex; justify-content:space-between; margin-top:6px; font-size:10px; letter-spacing:.02em; color:color-mix(in srgb,var(--hero-ink) 62%, transparent);}

/* Interaktive Depot-Kalkulation */
.calc-panel{background:linear-gradient(150deg,var(--hero-from),var(--hero-to)); color:var(--hero-ink);
  border-radius:22px; padding:24px; margin:26px 0; box-shadow:0 30px 60px -34px rgba(0,0,0,.5); position:relative; overflow:hidden;}
.calc-panel .hero-card-top b{color:#fff;}
.calc-panel .hero-card-amt{color:#fff;}
.calc-sub{display:flex; gap:16px; margin:-8px 0 14px; font-size:12px; color:color-mix(in srgb,var(--hero-ink) 78%, transparent);}
.calc-sub b{font-family:"Space Grotesk",sans-serif; color:#fff; font-weight:600; margin-left:4px;}
.calc-fields,.calc-alloc{display:flex; flex-direction:column; gap:9px; margin-top:16px; padding-top:14px; border-top:1px solid color-mix(in srgb,#ffffff 16%, transparent);}
.calc-row{display:grid; grid-template-columns:104px 1fr 122px; align-items:center; gap:10px; cursor:pointer;}
.calc-row-alloc{grid-template-columns:104px 1fr 66px 74px;}
.calc-lbl{font-size:12px; color:color-mix(in srgb,var(--hero-ink) 84%, transparent); display:flex; align-items:center; gap:6px;}
.calc-val,.calc-ret{font-size:11px; color:color-mix(in srgb,var(--hero-ink) 66%, transparent); white-space:nowrap; text-align:left;}
.calc-row input.calc-num{width:80px; background:color-mix(in srgb,#ffffff 12%, transparent); border:1px solid color-mix(in srgb,#ffffff 20%, transparent);
  border-radius:6px; color:#fff; font:600 12px/1 "Space Grotesk",sans-serif; padding:5px 6px; text-align:right; outline:none;}
.calc-row input.calc-num:focus{border-color:var(--accent); background:color-mix(in srgb,#ffffff 18%, transparent);}

.calc-ret input.calc-num{width:52px;}
.calc-row-alloc input.calc-num{width:52px;}
.calc-range{-webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px; background:color-mix(in srgb,#ffffff 22%, transparent); outline:none; cursor:pointer;}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid #fff; cursor:pointer;}
.calc-range::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid #fff; cursor:pointer;}
.calc-alloc-h{display:flex; justify-content:space-between; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:color-mix(in srgb,var(--hero-ink) 62%, transparent);}
.calc-alloc-h span:last-child{font-family:"Space Grotesk",sans-serif; color:#fff;}
.calc-bar{display:flex; height:7px; border-radius:4px; overflow:hidden; background:color-mix(in srgb,#ffffff 14%, transparent); margin-bottom:4px;}
.calc-bar i{display:block; transition:width .15s;}
.calc-bar .a,.dot.a{background:var(--accent);}
.calc-bar .b,.dot.b{background:color-mix(in srgb,var(--accent) 45%, #ffffff);}
.calc-bar .c,.dot.c{background:#a78bfa;}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 auto;}

/* Tortendiagramm */
.calc-pie{display:grid; grid-template-columns:140px 1fr; gap:20px; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid color-mix(in srgb,#ffffff 16%, transparent);}
.pie{width:140px; height:140px; display:block;}
.pie-track{stroke:color-mix(in srgb,#ffffff 12%, transparent);}
#p-eq{stroke:var(--accent);}
#p-bd{stroke:color-mix(in srgb,var(--accent) 45%, #ffffff);}
#p-re{stroke:#a78bfa;}
.pie-legend{display:flex; flex-direction:column; gap:8px;}
.pie-item{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; font-size:13px; color:color-mix(in srgb,var(--hero-ink) 84%, transparent);}
.pie-item b{font-family:"Space Grotesk",sans-serif; color:#fff; font-size:14px;}
.pie-item-total{grid-template-columns:1fr auto; margin-top:4px; padding-top:9px; border-top:1px solid color-mix(in srgb,#ffffff 14%, transparent);}
.pie-item-total b{color:color-mix(in srgb,var(--accent) 70%, white);}
@media(max-width:520px){ .calc-pie{grid-template-columns:1fr; justify-items:center;} }

/* Portraitfoto */
.portrait{border-radius:22px; overflow:hidden; box-shadow:0 30px 60px -34px rgba(16,32,56,.45); background:var(--surface-2); max-width:480px; margin-inline:auto;}
.portrait img{display:block; width:100%; height:auto; object-fit:cover;}

/* Admin-Tools */
.admin-tools{display:flex; flex-direction:column; gap:28px;}
.admin-tool{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px;}
.admin-tool.is-empty{border-style:dashed; opacity:.75;}
.admin-tool-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.admin-tool-head h2{font-size:22px; margin:0;}
.admin-tag{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:20px; padding:4px 11px;}
.admin-tool-lead{color:var(--muted); font-size:15px; margin:8px 0 0;}
.admin-tool .calc-panel{margin-bottom:0;}

/* Depot-Check: Renditevergleich */
.d-gap{fill:color-mix(in srgb,var(--accent) 30%, transparent);}
.d-now{stroke:color-mix(in srgb,#ffffff 55%, transparent);}
.d-opt{stroke:var(--accent);}
.dot.d-swatch-opt{background:var(--accent);}
.dot.d-swatch-now{background:color-mix(in srgb,#ffffff 55%, transparent);}

.calc-warn{font-size:12px; line-height:1.5; margin:14px 0 0; padding:10px 12px; border-radius:8px;
  background:color-mix(in srgb,#e0a52b 20%, transparent); border:1px solid color-mix(in srgb,#e0a52b 45%, transparent);
  color:color-mix(in srgb,#ffd98a 88%, white);}

/* Renten-Balken + Ergebnisliste */
.rbars{margin-top:16px; padding-top:14px; border-top:1px solid color-mix(in srgb,#ffffff 16%, transparent); display:flex; flex-direction:column; gap:10px;}
.rbar-row{display:grid; grid-template-columns:104px 1fr 72px; align-items:center; gap:10px;}
.rbar-lbl{font-size:12px; color:color-mix(in srgb,var(--hero-ink) 84%, transparent);}
.rbar{display:flex; height:16px; border-radius:5px; overflow:hidden; background:color-mix(in srgb,#ffffff 12%, transparent);}
.rbar i{display:block; transition:width .15s;}
.rbar .need{background:color-mix(in srgb,#ffffff 34%, transparent);}
.rbar .a,.dot.a{background:var(--accent);}
.rbar .b,.dot.b{background:color-mix(in srgb,var(--accent) 45%, #ffffff);}
.rbar .gap,.dot.gap{background:color-mix(in srgb,#e0574a 82%, var(--hero-to));}
.rbar-row b{font-family:"Space Grotesk",sans-serif; color:#fff; font-size:13px; text-align:right;}
.rbar-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:color-mix(in srgb,var(--hero-ink) 66%, transparent);}
.rbar-legend span{display:inline-flex; align-items:center; gap:6px;}
.rres{margin-top:16px; padding-top:14px; border-top:1px solid color-mix(in srgb,#ffffff 16%, transparent); display:flex; flex-direction:column; gap:7px;}
.rres-row{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:color-mix(in srgb,var(--hero-ink) 82%, transparent);}
.rres-row b{font-family:"Space Grotesk",sans-serif; color:#fff;}
.rres-row.is-total{margin-top:4px; padding-top:9px; border-top:1px solid color-mix(in srgb,#ffffff 14%, transparent);}
.rres-row.is-total b{color:color-mix(in srgb,var(--accent) 70%, white); font-size:15px;}
@media(max-width:520px){ .rbar-row{grid-template-columns:88px 1fr 64px;} }
.calc-note{font-size:10.5px; line-height:1.5; color:color-mix(in srgb,var(--hero-ink) 55%, transparent); margin:12px 0 0;}
@media(max-width:520px){
  .calc-row{grid-template-columns:72px 1fr 118px;}
  .calc-row-alloc{grid-template-columns:72px 1fr 62px;}
  .calc-row input.calc-num{width:76px;}
  .calc-row-alloc input.calc-num{width:52px;}
  .calc-row-alloc .calc-ret{grid-column:2 / -1; text-align:left;}
}
.hero-alloc{display:flex; gap:14px; flex-wrap:wrap; margin:-6px 0 14px; font-size:12px; color:color-mix(in srgb,var(--hero-ink) 82%, transparent);}
.hero-alloc i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:-1px;}
.hero-card-legend{display:flex; gap:16px; margin-top:12px; font-size:12px; color:color-mix(in srgb,var(--hero-ink) 82%, transparent);}
.hero-card-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px;}

/* ============ Sections ============ */
.section{padding:78px 0;}
.section-head{max-width:640px; margin-bottom:42px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(26px,3.4vw,40px); margin:12px 0 14px;}
.section-head p{color:var(--muted); font-size:18px;}
.alt{background:var(--surface-2);}

/* ============ Leistungs-Karten ============ */
.grid{display:grid; gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);}
.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; transition:transform .15s, box-shadow .2s, border-color .2s; display:flex; flex-direction:column;}
.card:hover{transform:translateY(-3px); box-shadow:0 20px 40px -26px rgba(20,40,80,.4); border-color:color-mix(in srgb,var(--accent) 40%,var(--line));}
.card-ico{width:52px; height:52px; border-radius:14px; background:var(--accent-soft); color:var(--accent-ink);
  display:grid; place-items:center; margin-bottom:18px;}
.card-ico svg{width:26px; height:26px;}
.card h3{font-size:21px; margin-bottom:9px;}
.card p{color:var(--muted); font-size:16px; flex:1;}
.card-link{margin-top:16px; font-weight:700; font-family:"Space Grotesk",sans-serif; font-size:15px; color:var(--accent-ink); display:inline-flex; align-items:center; gap:7px;}
.card:hover .card-link{gap:11px;}
.card-num{font-family:"Space Grotesk",sans-serif; font-size:13px; font-weight:700; color:var(--faint); letter-spacing:.1em;}

/* ============ Prozess ============ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step;}
.step{position:relative; padding-top:16px;}
.step::before{counter-increment:step; content:"0" counter(step); font-family:"Space Grotesk",sans-serif; font-size:15px; font-weight:700; color:#fff; background:var(--primary); width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:16px; box-shadow:0 8px 18px -10px var(--primary);}
.step h3{font-size:19px; margin-bottom:7px;}
.step p{color:var(--muted); font-size:15px;}

/* ============ Testimonials ============ */
.quote{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:18px;}
.quote-stars{color:var(--accent); letter-spacing:3px; font-size:15px;}
.quote p{font-size:17px; color:var(--ink);}
.quote-by{display:flex; align-items:center; gap:12px; margin-top:auto;}
.avatar{width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; display:grid; place-items:center; font-family:"Space Grotesk",sans-serif; font-weight:700;}
.quote-by b{display:block; font-size:15px;} .quote-by span{font-size:13px; color:var(--muted);}

/* ============ Logos / Referenzen ============ */
.logos{display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; justify-content:center; opacity:.85;}
.logo-chip{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:19px; color:var(--muted); letter-spacing:-.01em; display:flex; align-items:center; gap:8px;}
.logo-chip i{width:22px; height:22px; border-radius:6px; background:var(--surface-2); display:inline-block;}

/* ============ Über / Split ============ */
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center;}
.split.rev{grid-template-columns:1.1fr .9fr;}
.about-list{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:14px;}
.about-list li{display:flex; gap:12px; font-size:16px; color:var(--ink);}
.about-list svg{flex:0 0 auto; width:22px; height:22px; color:var(--accent-ink); margin-top:2px;}

/* Bild-Platzhalter */
.ph{position:relative; border-radius:20px; overflow:hidden; background:
  linear-gradient(135deg,color-mix(in srgb,var(--primary) 14%,var(--surface)),var(--surface-2));
  border:1px solid var(--line); display:grid; place-items:center; min-height:340px; color:var(--muted); text-align:center;}
.ph .ph-inner{display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px;}
.ph svg{width:44px; height:44px; color:var(--faint);}
.ph b{font-family:"Space Grotesk",sans-serif; font-weight:600; color:var(--ink); font-size:16px;}
.ph span{font-size:13px; color:var(--muted); max-width:30ch;}
.ph-tag{position:absolute; top:12px; left:12px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--surface); border:1px solid var(--line); color:var(--muted); padding:4px 9px; border-radius:8px;}
.ph.tall{min-height:460px;}

/* Stat-Band */
.statband{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:34px;}
.stat b{display:block; font-family:"Space Grotesk",sans-serif; font-size:36px; color:var(--primary);}
.stat span{font-size:14px; color:var(--muted);}

/* ============ CTA-Band ============ */
.cta{background:linear-gradient(150deg,var(--hero-from),var(--hero-to)); color:#fff; border-radius:26px; padding:56px; position:relative; overflow:hidden;}
.cta::after{content:""; position:absolute; left:-120px; bottom:-160px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,var(--accent),transparent 62%); opacity:.3;}
.cta-in{position:relative; z-index:2; display:grid; grid-template-columns:1.3fr .7fr; gap:36px; align-items:center;}
.cta h2{color:#fff; font-size:clamp(26px,3.2vw,38px); margin-bottom:12px;}
.cta p{color:color-mix(in srgb,var(--hero-ink) 88%, white); font-size:18px;}
.cta-actions{display:flex; flex-direction:column; gap:12px;}
.cta-note{font-size:13px; color:color-mix(in srgb,var(--hero-ink) 75%, transparent); text-align:center;}

/* ============ Footer ============ */
.footer{background:var(--ink); color:#c7d2e0; padding:60px 0 30px; margin-top:10px;}
[data-theme="sand"] .footer{color:#e8dcca;}
.footer .brand{color:#fff;} .footer .brand small{color:#9fb0c4;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; margin-bottom:40px;}
.footer h4{font-size:14px; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin-bottom:16px; font-family:"Hanken Grotesk",sans-serif; font-weight:700;}
.footer a{color:#c7d2e0; display:block; padding:5px 0; font-size:15px;} .footer a:hover{color:#fff;}
.footer-note{font-size:14px; color:#93a2b6; max-width:44ch;}
.footer-legal{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:#8695a9;}
.disclaimer{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:16px 18px; font-size:13px; color:#9fb0c4; margin-bottom:30px; line-height:1.55;}

/* ============ Farbwelt-Umschalter (Vorschau) ============ */
.theme-switch{position:fixed; right:18px; bottom:18px; z-index:60; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 18px 44px -20px rgba(20,40,80,.5); padding:12px 14px; display:flex; flex-direction:column; gap:9px; max-width:230px;}
.theme-switch .ts-label{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px;}
.ts-swatches{display:flex; gap:8px;}
.ts-sw{width:34px; height:34px; border-radius:10px; border:2px solid var(--line); cursor:pointer; position:relative; padding:0;}
.ts-sw.active{border-color:var(--ink); box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink);}
.ts-sw span{position:absolute; inset:0; border-radius:7px;}
.ts-hint{font-size:11px; color:var(--faint);}

/* ============ Sub-Page Header (Leistung) ============ */
.subhero{background:linear-gradient(150deg,var(--hero-from),var(--hero-to)); color:var(--hero-ink); padding:56px 0 66px; position:relative; overflow:hidden;}
.subhero::after{content:""; position:absolute; right:-120px; top:-120px; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle,var(--accent),transparent 62%); opacity:.25;}
.subhero-in{position:relative; z-index:2; max-width:760px;}
.crumb{font-size:14px; color:color-mix(in srgb,var(--hero-ink) 80%, transparent); margin-bottom:18px;}
.crumb a{color:color-mix(in srgb,var(--hero-ink) 80%, transparent);} .crumb a:hover{color:#fff;}
.subhero h1{font-size:clamp(30px,4.4vw,48px); color:#fff; margin-bottom:16px;}
.subhero p{font-size:19px; color:color-mix(in srgb,var(--hero-ink) 90%, white); max-width:56ch;}

.prose{max-width:760px;} .prose h2{font-size:28px; margin:38px 0 14px;} .prose h3{font-size:20px; margin:26px 0 10px;}
.prose p{color:var(--ink); margin-bottom:16px;} .prose ul{margin:0 0 18px; padding-left:0; list-style:none; display:grid; gap:10px;}
.prose ul li{display:flex; gap:11px; color:var(--ink);} .prose ul li svg{flex:0 0 auto; width:21px; height:21px; color:var(--accent-ink); margin-top:3px;}

.callout{background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:16px; padding:24px 26px; margin:26px 0;}
.callout b{font-family:"Space Grotesk",sans-serif;}

/* Beispiel-Box / Fake-Kalkulation */
.example{background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin:26px 0;}
.example-head{background:var(--surface-2); padding:14px 22px; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:15px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line);}
.example-body{padding:22px;}
.exrow{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:16px;}
.exrow:last-child{border-bottom:none;}
.exrow span{color:var(--muted);} .exrow b{font-family:"Space Grotesk",sans-serif; font-variant-numeric:tabular-nums;}
.exrow.total{border-top:2px solid var(--line); border-bottom:none; margin-top:6px; padding-top:14px; font-size:19px;}
.exrow.total b{color:var(--primary);}
.badge{display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--accent-soft); color:var(--accent-ink);}

/* Vergleichstabelle */
.cmp{width:100%; border-collapse:collapse; margin:26px 0; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.cmp th,.cmp td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:16px;}
.cmp thead th{background:var(--surface-2); font-family:"Space Grotesk",sans-serif; font-size:15px;}
.cmp td:first-child{color:var(--muted);} .cmp tbody tr:last-child td{border-bottom:none;}
.yes{color:var(--accent-ink); font-weight:700;} .no{color:var(--faint);}

/* ============ Responsive ============ */
@media(max-width:960px){
  .hero-in,.split,.split.rev,.cta-in{grid-template-columns:1fr; gap:34px;}
  .grid-3{grid-template-columns:1fr 1fr;} .steps{grid-template-columns:1fr 1fr;} .statband{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;} .nav-links{display:none;} .nav-toggle{display:block;}
  .nav-links.open{display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; background:var(--surface); border-bottom:1px solid var(--line); padding:14px 24px; gap:4px;}
  .nav-links.open a{padding:12px;} .nav-links.open .nav-cta{margin:8px 0 0;}
}
@media(max-width:600px){
  body{font-size:16px;}
  .grid-3,.grid-2,.steps,.statband,.footer-grid{grid-template-columns:1fr;}
  .section{padding:56px 0;} .cta{padding:34px;} .hero-in{padding-top:56px; padding-bottom:64px;}
  .theme-switch{right:12px; bottom:12px; padding:10px;}
}