:root{
  --bg:#FFFFFF; --bg2:#F6F4FC; --karte:#FFFFFF;
  --ink:#171426; --ink2:#544D68; --ink3:#8A82A0;
  --line:#E7E3F0; --line2:#D6D0E6;
  --akz:#6C4BF0; --akz-tief:#4E2FCE; --akz-weich:#EFEAFF;
  --rad:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F0E16; --bg2:#16141F; --karte:#181624;
    --ink:#F4F1FB; --ink2:#ABA3C1; --ink3:#807899;
    --line:#282539; --line2:#38344D;
    --akz:#A992FF; --akz-tief:#C3B2FF; --akz-weich:#241E3B;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.marke{font-family:"Outfit","Plus Jakarta Sans",sans-serif; text-wrap:balance; margin:0}
h1{font-weight:700; font-size:clamp(2.3rem,6vw,3.9rem); line-height:1.03; letter-spacing:-.025em}
h2{font-weight:700; font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.15; letter-spacing:-.015em}
h3{font-weight:600; font-size:1.08rem}
p{margin:0}
a{color:var(--akz-tief); text-underline-offset:3px}
.huelle{max-width:1080px; margin:0 auto; padding:0 24px}
.schmal{max-width:46rem; margin:0 auto; padding:0 24px}

/* Kopfzeile */
.kopf{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.kopf .huelle{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px}
.marke{font-weight:700; font-size:1.12rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none;
  display:flex; align-items:center; gap:9px}
.note{display:flex; align-items:flex-end; gap:2.5px; height:16px}
.note i{width:3px; border-radius:1px; background:var(--akz); display:block}

/* Knöpfe */
.knopf{display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:999px;
  font-weight:600; font-size:.97rem; text-decoration:none; border:1px solid transparent; white-space:nowrap}
.knopf.voll{background:var(--akz); color:#fff}
.knopf.voll:hover{background:var(--akz-tief)}
.knopf.leer{border-color:var(--line2); color:var(--ink)}
.knopf.leer:hover{border-color:var(--akz); color:var(--akz-tief)}
@media(prefers-color-scheme:dark){.knopf.voll{color:#14101F}}

/* Held */
.held{padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,80px)}
.held .lede{font-size:1.16rem; color:var(--ink2); max-width:34rem; margin-top:20px}
.aufruf{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.kleing{color:var(--ink3); font-size:.88rem; margin-top:14px}

/* Zahlen */
.zahlen{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin-top:56px}
.zahl{background:var(--bg2); border:1px solid var(--line); border-radius:var(--rad); padding:20px}
.zahl b{font-family:"Outfit",sans-serif; font-weight:700; font-size:2rem; color:var(--akz-tief); display:block; line-height:1.1}
.zahl span{color:var(--ink2); font-size:.94rem}

/* Abschnitte */
section{padding:clamp(48px,7vw,88px) 0; border-top:1px solid var(--line)}
.titelblock{display:flex; flex-direction:column; gap:12px; max-width:38rem; margin-bottom:36px}
.titelblock p{color:var(--ink2)}
.lab{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); font-weight:600}

.raster{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.karte{background:var(--karte); border:1px solid var(--line); border-radius:var(--rad); padding:22px 24px;
  display:flex; flex-direction:column; gap:9px}
.karte p{color:var(--ink2); font-size:.96rem}
.schritt b{font-family:"Outfit",sans-serif; font-weight:700; color:var(--akz); font-size:.9rem}

/* Preise */
.preise{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); align-items:start}
.preis{border:1px solid var(--line); border-radius:var(--rad); padding:24px; background:var(--karte);
  display:flex; flex-direction:column; gap:8px}
.preis.hebt{border-color:var(--akz); background:var(--akz-weich)}
.preis .betrag{font-family:"Outfit",sans-serif; font-weight:700; font-size:2rem; line-height:1.1}
.preis ul{margin:10px 0 0; padding-left:19px; color:var(--ink2); font-size:.95rem; display:flex; flex-direction:column; gap:6px}

/* Rechtsseiten */
.recht{padding:56px 0 96px}
.recht h1{font-size:clamp(1.9rem,4.6vw,2.5rem); margin-bottom:8px}
.recht .stand{color:var(--ink3); font-size:.92rem; margin-bottom:32px}
.recht h2{font-size:1.18rem; margin:36px 0 10px; padding-top:20px; border-top:1px solid var(--line)}
.recht h3{margin:22px 0 6px}
.recht p,.recht li{color:var(--ink2); margin:0 0 12px}
.recht ul{padding-left:20px}
.recht table{border-collapse:collapse; width:100%; font-size:.95rem; margin:0 0 14px}
.recht td,.recht th{text-align:left; padding:9px 11px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink2)}
.recht th{color:var(--ink); font-weight:600; width:36%}
.tbd{background:#FFE7A3; color:#4A3600; padding:1px 6px; border-radius:4px; font-weight:600}
@media(prefers-color-scheme:dark){.tbd{background:#4A3600; color:#FFE7A3}}

/* Fuß */
.fuss{border-top:1px solid var(--line); background:var(--bg2); padding:40px 0; margin-top:0}
.fuss .huelle{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center}
.fuss nav{display:flex; flex-wrap:wrap; gap:20px}
.fuss a{color:var(--ink2); text-decoration:none; font-size:.93rem}
.fuss a:hover{color:var(--akz-tief)}
.fuss small{color:var(--ink3); font-size:.88rem}