:root{
  --night:#0B110E;--night-2:#121A15;--night-3:#1A2620;--night-line:rgba(210,246,130,.14);
  --moon:#E8EEDD;--moon-2:#A3AE9C;--moon-3:#6E7A69;
  --lime:#D2F682;--lime-soft:#EAFBC4;--moss:#2F5409;
  --dawn:#EEF3E2;--paper:#F8FAF3;--ink:#0E1510;--ink-2:#48524A;--ink-3:#7A8577;--line:#DCE3CF;
  --warn:#B4452E;--warn-soft:#FBE7E1;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
  --body:Figtree,ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:18px;line-height:1.7;background:var(--paper);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.3rem,7vw,4.4rem)}
h2{font-size:clamp(1.7rem,4.2vw,2.5rem)}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.015em}
.mono{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(11,17,14,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--night-line);color:var(--moon)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.02rem;text-decoration:none;color:var(--moon);white-space:nowrap}
.logo i{width:24px;height:24px;border-radius:50%;background:var(--lime);box-shadow:inset -6px -3px 0 0 var(--night)}
.logo span.full{display:none}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;margin-left:6px}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:none;text-decoration:none;font-size:.92rem;font-weight:600;color:var(--moon-2);padding:8px 12px;border-radius:999px}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);background:var(--lime)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:14px 24px;border-radius:999px;border:0;background:var(--lime);color:var(--ink);font-family:var(--body);font-weight:700;font-size:1.02rem;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .25s}
.btn .arr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--lime);transition:transform .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(47,84,9,.5)}
.btn:hover .arr{transform:translateX(3px)}
.btn.dark{background:var(--ink);color:var(--lime)}
.btn.dark .arr{background:var(--lime);color:var(--ink)}
.head-cta{display:none}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--moss);outline-offset:3px}
.site-head a:focus-visible{outline-color:var(--lime)}

/* Page hero */
.phero{position:relative;background:var(--night);color:var(--moon);padding-block:56px 64px;overflow:hidden}
.phero .stars{position:absolute;inset:0;opacity:.45;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 72%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 44% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 61% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 73% 64%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 86% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 82%,#fff 50%,transparent 51%)}
.phero .glow{position:absolute;width:480px;height:480px;right:-160px;top:-200px;border-radius:50%;filter:blur(80px);opacity:.2;background:var(--lime);pointer-events:none}
.phero .wrap{position:relative}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-family:var(--mono);font-size:.74rem;color:var(--moon-3);margin-bottom:26px;list-style:none}
.crumbs a{color:var(--moon-2);text-decoration:none}
.crumbs a:hover{color:var(--lime)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--moon-3)}
.kicker{display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);border:1px solid var(--night-line);border-radius:999px;padding:6px 13px;margin-bottom:22px}
.phero h1{max-width:18ch}
.phero .intro{font-size:clamp(1.08rem,2vw,1.28rem);color:var(--moon-2);max-width:60ch;margin-top:20px;line-height:1.6}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-family:var(--mono);font-size:.74rem;color:var(--moon-3)}

/* Artikel */
.article-grid{display:grid;gap:40px;padding-block:56px 80px}
.article-grid>*,.split>*{min-width:0}
body{overflow-x:clip}
.toc{border:1px solid var(--line);border-radius:18px;background:#fff;padding:20px}
.toc strong{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;font-weight:500}
.toc ol{list-style:none;display:grid;gap:4px;counter-reset:t}
.toc a{display:block;text-decoration:none;font-size:.95rem;color:var(--ink-2);padding:6px 10px;border-radius:8px;line-height:1.35}
.toc a:hover{background:var(--dawn);color:var(--ink)}
.toc .btn{display:flex;margin-top:18px;width:100%;min-height:48px;font-size:.95rem;padding:10px 16px}
.toc a.btn:hover{background:var(--lime)}
.prose{max-width:720px}
.prose > * + *{margin-top:20px}
.prose h2{margin-top:56px;scroll-margin-top:90px}
.prose h3{margin-top:34px}
.prose p,.prose li{color:#27302A}
.prose ul,.prose ol{padding-left:24px;display:grid;gap:8px}
.prose a{text-decoration:underline;text-decoration-color:var(--moss);text-underline-offset:3px}
.prose strong{color:var(--ink)}
.answer{border-radius:20px;background:var(--ink);color:var(--moon);padding:24px 26px}
.answer .lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);display:block;margin-bottom:8px}
.answer p{color:var(--moon)!important;font-size:1.08rem}
.answer ul{margin-top:12px;padding-left:20px}
.answer li{color:var(--moon-2)!important}
.answer strong{color:var(--lime)!important}
.box{border-radius:18px;background:var(--dawn);padding:22px 24px}
.box h3{margin-top:0!important;margin-bottom:8px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;background:var(--paper)}
tr:last-child td{border-bottom:0}
.yes{color:var(--moss);font-weight:700}.no{color:var(--warn);font-weight:700}.maybe{color:#8A6A0C;font-weight:700}
blockquote{border-left:4px solid var(--lime);background:#fff;border-radius:0 14px 14px 0;padding:16px 20px;font-family:var(--display);font-size:1.18rem;line-height:1.4}
blockquote cite{display:block;margin-top:8px;font-family:var(--mono);font-style:normal;font-size:.72rem;color:var(--ink-3)}
.template{border-radius:16px;border:1px solid var(--line);background:#fff;overflow:hidden}
.template .th{padding:12px 18px;border-bottom:1px solid var(--line);font-weight:700;background:var(--paper)}
.template .th small{display:block;font-weight:400;font-size:.8rem;color:var(--ink-3)}
.template .tb{padding:18px;white-space:pre-line;font-size:.98rem;color:var(--ink-2)}
.steps-list{list-style:none!important;padding-left:0!important;counter-reset:s;gap:14px!important}
.steps-list li{position:relative;padding:18px 18px 18px 64px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.steps-list li::before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-family:var(--display);font-weight:800}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.3;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:0;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--dawn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%230E1510' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--lime)}
.faq .a{padding:0 0 18px;color:var(--ink-2)}
.sources{font-size:.88rem;color:var(--ink-2)}
.sources ol{padding-left:22px}
.sources a{word-break:break-word}

/* CTA Band */
.cta-band{background:var(--lime);color:var(--ink);padding-block:72px;position:relative;overflow:hidden}
.cta-band .wrap{display:grid;gap:26px;align-items:center}
.cta-band h2{font-size:clamp(2rem,5vw,3.2rem)}
.cta-band p{font-size:1.12rem;max-width:52ch;margin-top:12px}
.cta-band .sun{position:absolute;right:-12%;top:-60%;width:620px;height:620px;border-radius:50%;background:radial-gradient(closest-side,#F4FFD8,rgba(244,255,216,0));pointer-events:none}

/* Karten */
.cards{display:grid;gap:18px}
.card{display:flex;flex-direction:column;gap:12px;border-radius:22px;background:#fff;border:1px solid var(--line);padding:24px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(14,21,16,.35)}
.card .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.card h3{font-size:1.35rem}
.card p{color:var(--ink-2);font-size:.98rem;line-height:1.55}
.card .more{margin-top:auto;font-weight:700;display:flex;align-items:center;gap:8px}
.card.dark{background:var(--ink);color:var(--moon);border-color:var(--ink)}
.card.dark p{color:var(--moon-2)}
.card.dark .tag{color:var(--lime)}
.section{padding-block:72px}
.section.dawn{background:var(--dawn)}
.section.white{background:#fff}
.section .lead{font-size:1.15rem;color:var(--ink-2);max-width:60ch;margin-top:14px}
.eyebrow{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);margin-bottom:14px}
.split{display:grid;gap:36px}
.bignum{border-radius:24px;padding:28px;background:var(--ink);color:var(--moon)}
.bignum b{display:block;font-family:var(--display);font-size:clamp(3rem,8vw,5rem);line-height:.92;letter-spacing:-.045em;color:var(--lime)}
.bignum span{display:block;margin-top:14px;font-size:1.05rem}
.bignum small{display:block;margin-top:10px;font-family:var(--mono);font-size:.7rem;color:var(--moon-3)}
.chat{display:grid;gap:10px}
.chat span{display:block;width:fit-content;max-width:100%;padding:12px 16px;border-radius:16px 16px 16px 4px;background:#fff;border:1px solid var(--line);font-size:1rem}
.chat span.me{margin-left:auto;border-radius:16px 16px 4px 16px;background:var(--lime);border-color:var(--lime)}

/* Footer */
.site-foot{background:var(--night);color:var(--moon-2);padding-block:60px 36px;font-size:.92rem}
.foot-cols{display:grid;gap:32px}
.site-foot .fh{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moon-3);font-weight:500;margin-bottom:12px}
.site-foot ul{list-style:none;display:grid;gap:8px}
.site-foot a{text-decoration:none;color:var(--moon-2)}
.site-foot a:hover{color:var(--lime)}
.site-foot .brand p{margin-top:12px;max-width:34ch}
.copy{margin-top:40px;padding-top:20px;border-top:1px solid var(--night-line);font-family:var(--mono);font-size:.72rem;color:var(--moon-3)}
.todo{background:var(--lime-soft);border-radius:4px;padding:0 5px;font-family:var(--mono);font-size:.85em}

@media (min-width:700px){
  .logo span.full{display:inline}.logo span.short{display:none}
  .cards{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1.4fr 1fr 1fr 1fr}
}
@media (min-width:1024px){
  .head-cta{display:inline-flex;min-height:44px;padding:9px 16px;font-size:.92rem}
  .head-cta .arr{width:24px;height:24px}
  .phero{padding-block:80px 96px}
  .article-grid{grid-template-columns:270px 1fr;gap:72px;align-items:start}
  .toc{position:sticky;top:96px}
  .cta-band .wrap{grid-template-columns:1.4fr auto}
  .cards.four{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
  .section{padding-block:100px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Button auf dem Handy dauerhaft sichtbar */
.m-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(11,17,14,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--night-line)}
.m-cta .btn{width:100%;min-height:50px}
body{padding-bottom:76px}
@media (min-width:1024px){.m-cta{display:none}body{padding-bottom:0}}