/* ═══════════════════════════════════════════════════════════════════════════
   euse-strom.ch — Design system
   Abgeleitet vom Token-System von interware.ch (gleiche Skalen, gleiche
   Typografie, gleiche Komponenten-Grammatik), eigener Akzent: Lime.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── self-hosted fonts ───────────────────────── */
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/geist-300.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-400.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-500.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/geist-600.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/geist-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');}

/* ───────────────────────── tokens ───────────────────────── */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --maxw:1280px;
  --font-ui:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --tr-eyebrow:0.22em;--tr-tight:-0.035em;--tr-snug:-0.02em;
  --r-sm:4px;--r-md:8px;--r-lg:14px;--r-full:999px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* dark — Markenvorgabe, Default */
:root,:root[data-theme="dark"]{
  --bg:#0A0C0F;--bg2:#0D1015;--surface:#13171D;--surfaceHi:#1A1F27;
  --ink:#EEF2F4;--dim:rgba(238,242,244,.60);--faint:rgba(238,242,244,.36);
  --rule:rgba(255,255,255,.085);--ruleHi:rgba(255,255,255,.16);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 20px 50px -30px rgba(0,0,0,.8);
  --grid-line:rgba(255,255,255,.04);
  --accent:#C8F84A;--accent-deep:#A8E020;--accent-ink:#0B1402;
  --accent-glow:rgba(200,248,74,.15);--accent-soft:rgba(200,248,74,.10);
}

/* light — eigener, dunklerer Grünton: Lime auf Weiss ist nicht lesbar */
:root[data-theme="light"]{
  --bg:#FBFBFA;--bg2:#F3F4F0;--surface:#FFFFFF;--surfaceHi:#FFFFFF;
  --ink:#0C1014;--dim:rgba(12,16,20,.62);--faint:rgba(12,16,20,.42);
  --rule:rgba(12,16,20,.12);--ruleHi:rgba(12,16,20,.22);
  --shadow:0 1px 2px rgba(12,16,20,.05),0 24px 50px -34px rgba(12,16,20,.22);
  --grid-line:rgba(12,16,20,.045);
  --accent:#4A7C0E;--accent-deep:#3A6209;--accent-ink:#FFFFFF;
  --accent-glow:rgba(74,124,14,.10);--accent-soft:rgba(74,124,14,.07);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-ui);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .4s var(--ease),color .4s var(--ease);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-6);}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--accent);}
.mono{font-family:var(--font-mono);}
.dim{color:var(--dim);} .faint{color:var(--faint);}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:var(--r-sm);}
.skip:focus{left:var(--space-6);top:var(--space-3);}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ───────────────────────── header ───────────────────────── */
header.site{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--rule);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.nav{display:flex;align-items:center;gap:var(--space-6);height:64px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand .mark{width:30px;height:30px;flex:0 0 auto;display:block;}
.brand .mark .node{fill:none;stroke:currentColor;stroke-width:4.5;}
.brand .mark .src{fill:var(--accent);stroke:none;}
.wordmark{font-size:21px;font-weight:600;letter-spacing:var(--tr-snug);line-height:1;white-space:nowrap;}
.wordmark .b{font-weight:400;color:var(--dim);}
.brand .sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;border-left:1px solid var(--rule);padding-left:10px;margin-left:2px;white-space:nowrap;}
@media (max-width:900px){.brand .sub{display:none;}}
.nav .links{display:flex;gap:18px;margin-left:auto;font-size:14px;}
.nav .links a{color:var(--dim);transition:color .15s;}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--ink);}
.nav .cta{margin-left:var(--space-4);}
.nav .tools{display:flex;align-items:center;gap:var(--space-2);margin-left:var(--space-4);}

.btn{
  font-family:var(--font-ui);font-size:14px;font-weight:500;cursor:pointer;
  padding:9px 16px;border-radius:var(--r-sm);border:1px solid var(--ink);
  background:transparent;color:var(--ink);display:inline-flex;align-items:center;gap:8px;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s,transform .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.btn.ghost{border-color:var(--rule);color:var(--dim);}
.btn.ghost:hover{border-color:var(--ruleHi);color:var(--ink);}
.btn .arr{transition:transform .18s var(--ease);}
.btn:hover .arr{transform:translateX(3px);}

.icon-btn{
  width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--dim);cursor:pointer;transition:color .15s,border-color .15s;
}
.icon-btn:hover{color:var(--ink);border-color:var(--ruleHi);}
.icon-btn .sun{display:none;}
:root[data-theme="light"] .icon-btn .sun{display:block;}
:root[data-theme="light"] .icon-btn .moon{display:none;}

.burger{display:none;}
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;}
.mobile-nav{display:none;flex-direction:column;gap:2px;padding:var(--space-4) var(--space-5) var(--space-6);border-bottom:1px solid var(--rule);background:var(--bg);}
#navtoggle:checked ~ .mobile-nav{display:flex;}
.mobile-nav a{padding:12px 4px;border-top:1px solid var(--rule);font-size:16px;color:var(--dim);}
.mobile-nav a:first-child{border-top:0;}

/* ───────────────────────── hero ───────────────────────── */
.hero{position:relative;padding:var(--space-10) 0 var(--space-9);overflow:hidden;}
.hero.compact{padding:var(--space-9) 0 var(--space-8);}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% -8%,var(--accent-glow),transparent 60%),
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:auto,46px 46px,46px 46px;
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.hero .wrap{position:relative;}
.hero .top{display:flex;align-items:center;gap:14px;margin-bottom:var(--space-6);flex-wrap:wrap;}
.hero .top .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow);}
.h1{font-size:clamp(38px,6.2vw,82px);font-weight:500;line-height:1.0;letter-spacing:var(--tr-tight);margin:0;max-width:17ch;}
.h1 .soft{color:var(--dim);}
.h1 em{font-style:normal;color:var(--accent);}
.hero.compact .h1{font-size:clamp(32px,4.6vw,58px);max-width:22ch;}
.hero .lede{margin:var(--space-6) 0 0;font-size:clamp(16px,1.5vw,19px);color:var(--dim);max-width:60ch;line-height:1.62;}
.hero .actions{display:flex;gap:var(--space-3);margin-top:var(--space-7);flex-wrap:wrap;}

/* Viertelstunden-Ribbon: 96 Werte pro Tag */
.ribbon{margin-top:var(--space-9);border-top:1px solid var(--rule);padding-top:var(--space-5);}
.ribbon .track{display:flex;align-items:flex-end;gap:2px;height:54px;}
.ribbon .tick{flex:1;border-left:1px solid var(--rule);height:8px;position:relative;}
.ribbon .tick.major{height:18px;border-left-color:var(--ruleHi);}
.ribbon .tick.node{height:54px;}
.ribbon .tick.node::after{content:"";position:absolute;left:-3.5px;top:0;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow);}
.ribbon .labels{display:flex;justify-content:space-between;margin-top:var(--space-3);font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.08em;}
.ribbon .labels b{color:var(--ink);font-weight:500;}

/* ───────────────────────── proof stats ───────────────────────── */
.proof{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--bg2);}
.proof .grid{display:grid;grid-template-columns:repeat(4,1fr);}
.proof .stat{padding:var(--space-7) var(--space-5);border-left:1px solid var(--rule);}
.proof .stat:first-child{border-left:0;}
.proof .stat .n{font-size:clamp(28px,3.2vw,44px);font-weight:500;letter-spacing:var(--tr-tight);line-height:1;color:var(--ink);}
.proof .stat .n .u{color:var(--accent);}
.proof .stat .l{margin-top:var(--space-3);font-size:13.5px;color:var(--dim);line-height:1.45;max-width:24ch;}

/* ───────────────────────── section frame ───────────────────────── */
section.block{padding:var(--space-10) 0;border-bottom:1px solid var(--rule);}
section.block.tight{padding:var(--space-9) 0;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);margin-bottom:var(--space-8);}
.sec-head .l{max-width:62%;}
.sec-head h2{font-size:clamp(27px,3.3vw,43px);font-weight:500;letter-spacing:var(--tr-snug);line-height:1.04;margin:var(--space-4) 0 0;}
.sec-head h2 em{font-style:normal;color:var(--accent);}
.sec-head .r{font-size:14.5px;color:var(--dim);max-width:36ch;text-align:right;line-height:1.55;}
.idx{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);letter-spacing:var(--tr-eyebrow);}

/* ───────────────────────── Leistungs-Raster ───────────────────────── */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;}
.services.cols-3{grid-template-columns:repeat(3,1fr);}
.svc{background:var(--bg);padding:var(--space-7);position:relative;transition:background .25s var(--ease);min-height:230px;display:flex;flex-direction:column;}
.svc:hover{background:var(--surface);}
.svc .no{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.1em;}
.svc h3{font-size:21px;font-weight:500;letter-spacing:var(--tr-snug);margin:var(--space-5) 0 var(--space-3);}
.svc p{color:var(--dim);font-size:15px;line-height:1.6;margin:0;}
.svc ul{color:var(--dim);font-size:14.5px;line-height:1.6;margin:var(--space-3) 0 0;padding-left:18px;}
.svc li{margin-bottom:6px;}
.svc li::marker{color:var(--accent);}
.svc .ic{margin-top:auto;padding-top:var(--space-5);color:var(--faint);}
.svc:hover .ic{color:var(--accent);}

/* Chips */
.tech{margin-top:var(--space-7);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;}
.tech .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--faint);margin-right:var(--space-3);}
.chip{font-family:var(--font-mono);font-size:12.5px;padding:6px 12px;border-radius:var(--r-full);border:1px solid var(--rule);color:var(--dim);transition:border-color .15s,color .15s;}
.chip:hover{border-color:var(--accent);color:var(--ink);}

/* ───────────────────────── Ablauf / Zeitachse ───────────────────────── */
.tl{margin-top:var(--space-8);}
.tl-item{display:grid;grid-template-columns:150px 1fr;gap:var(--space-6);}
.tl-yr{font-family:var(--font-mono);font-size:12.5px;color:var(--accent);letter-spacing:.03em;text-align:right;padding-top:2px;}
.tl-body{border-left:1px solid var(--rule);padding:0 0 var(--space-7) var(--space-6);position:relative;}
.tl-item:last-child .tl-body{padding-bottom:0;}
.tl-body::before{content:"";position:absolute;left:-4.5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--surface);border:1px solid var(--ruleHi);}
.tl-body h3{font-size:18px;font-weight:500;letter-spacing:var(--tr-snug);margin:0;display:inline-block;}
.tl-body p{color:var(--dim);font-size:14.5px;line-height:1.6;margin:var(--space-3) 0 0;max-width:66ch;}
.tl-badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);border-radius:var(--r-full);padding:3px 9px;margin-left:12px;vertical-align:3px;white-space:nowrap;}
.tl-item.flag .tl-body{border-left-color:var(--accent);}
.tl-item.flag .tl-body::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow);}

/* ───────────────────────── Vergleichstabelle ───────────────────────── */
.table-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-lg);}
table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px;}
table.cmp caption{caption-side:top;text-align:left;padding:var(--space-5) var(--space-6);color:var(--dim);font-size:14px;border-bottom:1px solid var(--rule);}
table.cmp th,table.cmp td{padding:var(--space-4) var(--space-5);text-align:left;vertical-align:top;border-top:1px solid var(--rule);}
table.cmp thead th{border-top:0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--faint);font-weight:400;background:var(--bg2);}
table.cmp thead th.hl{color:var(--accent);}
table.cmp tbody th{font-weight:500;color:var(--ink);width:30%;}
table.cmp td{color:var(--dim);line-height:1.55;}
table.cmp tbody tr:hover{background:var(--surface);}
table.cmp .src{display:block;margin-top:6px;font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.03em;}

/* ───────────────────────── Fakten-Zeilen ───────────────────────── */
.facts{display:flex;flex-direction:column;gap:0;}
.facts .row{display:flex;justify-content:space-between;gap:var(--space-5);padding:var(--space-4) 0;border-top:1px solid var(--rule);font-size:14.5px;}
.facts .row:last-child{border-bottom:1px solid var(--rule);}
.facts .row .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;flex:0 0 auto;max-width:45%;}
.facts .row .v{color:var(--ink);text-align:right;}

/* ───────────────────────── Callout ───────────────────────── */
.callout{margin-top:var(--space-6);border:1px solid var(--rule);border-left:2px solid var(--accent);border-radius:var(--r-md);background:var(--bg2);padding:var(--space-6) var(--space-7);}
.callout .eyebrow{display:block;margin-bottom:var(--space-3);}
.callout p{margin:0 0 var(--space-4);color:var(--dim);font-size:15px;line-height:1.65;max-width:80ch;}
.callout p:last-child{margin-bottom:0;}
.callout strong{color:var(--ink);font-weight:500;}
.callout .num{font-family:var(--font-mono);color:var(--accent);}

/* ───────────────────────── zweispaltig ───────────────────────── */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-9);align-items:center;}
.split.top{align-items:start;}
.split .big{font-size:clamp(23px,2.6vw,32px);font-weight:400;line-height:1.32;letter-spacing:var(--tr-snug);}
.split .big em{font-style:normal;color:var(--accent);}
.prose p{color:var(--dim);font-size:15.5px;line-height:1.68;margin:0 0 var(--space-4);max-width:72ch;}
.prose p:last-child{margin-bottom:0;}
.prose strong{color:var(--ink);font-weight:500;}
.prose h3{font-size:19px;font-weight:500;letter-spacing:var(--tr-snug);margin:var(--space-7) 0 var(--space-3);}
.prose ul,.prose ol{color:var(--dim);font-size:15px;line-height:1.65;margin:0 0 var(--space-4);padding-left:20px;max-width:72ch;}
.prose li{margin-bottom:8px;}
.prose li::marker{color:var(--accent);}

/* ───────────────────────── Preis-Karten ───────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.plan{border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--space-7);background:var(--bg);display:flex;flex-direction:column;transition:border-color .25s,transform .25s var(--ease);}
.plan:hover{border-color:var(--ruleHi);transform:translateY(-2px);}
.plan.featured{border-color:var(--accent);background:var(--surface);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.plan.featured .glow{position:absolute;width:260px;height:260px;border-radius:50%;background:var(--accent-glow);filter:blur(46px);top:-130px;right:-90px;pointer-events:none;}
.plan .badge{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:var(--r-full);padding:4px 11px;align-self:flex-start;position:relative;}
.plan h3{font-size:24px;font-weight:600;letter-spacing:var(--tr-snug);margin:var(--space-5) 0 var(--space-2);position:relative;}
.plan .who{color:var(--faint);font-size:13.5px;margin:0 0 var(--space-5);position:relative;}
.plan .price{font-family:var(--font-mono);font-size:15px;color:var(--ink);padding:var(--space-4) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);position:relative;}
.plan .price .sub{display:block;color:var(--faint);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;margin-top:6px;}
.plan ul{list-style:none;margin:var(--space-5) 0 0;padding:0;position:relative;}
.plan li{color:var(--dim);font-size:14.5px;line-height:1.5;padding-left:22px;margin-bottom:var(--space-3);position:relative;}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:2px;background:var(--accent);}
.plan .go{margin-top:auto;padding-top:var(--space-6);position:relative;}

/* ───────────────────────── FAQ ───────────────────────── */
.faq{border-top:1px solid var(--rule);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--space-5) 0;
  font-size:17px;font-weight:500;letter-spacing:var(--tr-snug);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--accent);font-size:20px;flex:0 0 auto;transition:transform .2s var(--ease);}
.faq details[open] summary::after{content:"–";}
.faq summary:hover{color:var(--accent);}
.faq .a{padding:0 0 var(--space-6);color:var(--dim);font-size:15px;line-height:1.65;max-width:78ch;}
.faq .a p{margin:0 0 var(--space-3);}
.faq .a p:last-child{margin-bottom:0;}
.faq .a strong{color:var(--ink);font-weight:500;}

/* ───────────────────────── Kontakt ───────────────────────── */
.contact{padding:var(--space-10) 0;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--rule);}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 100% at 50% 100%,var(--accent-glow),transparent 70%);pointer-events:none;}
.contact .wrap{position:relative;}
.contact h2{font-size:clamp(30px,4.4vw,56px);font-weight:500;letter-spacing:var(--tr-tight);line-height:1.04;margin:var(--space-4) auto 0;max-width:20ch;}
.contact h2 em{font-style:normal;color:var(--accent);}
.contact .lead{margin:var(--space-5) auto 0;max-width:58ch;font-size:15px;color:var(--dim);line-height:1.6;}
.contact .actions{margin-top:var(--space-7);display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;}
.contact .btn{padding:13px 22px;font-size:15px;}
.checklist{margin:var(--space-8) auto 0;max-width:640px;text-align:left;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--bg2);padding:var(--space-6) var(--space-7);}
.checklist .eyebrow{display:block;margin-bottom:var(--space-4);}
.checklist ol{margin:0;padding-left:20px;color:var(--dim);font-size:14.5px;line-height:1.6;}
.checklist li{margin-bottom:8px;}
.checklist li::marker{font-family:var(--font-mono);color:var(--accent);}

/* ───────────────────────── App-Platzhalter ───────────────────────── */
.stage{min-height:calc(100vh - 64px);display:flex;align-items:center;position:relative;overflow:hidden;}
.stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 0%,var(--accent-glow),transparent 62%),
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:auto,46px 46px,46px 46px;
}
.stage .wrap{position:relative;text-align:center;}
.stage h1{font-size:clamp(30px,4.2vw,52px);font-weight:500;letter-spacing:var(--tr-tight);line-height:1.05;margin:var(--space-4) auto var(--space-5);max-width:20ch;}
.stage h1 em{font-style:normal;color:var(--accent);}
.stage .lead{color:var(--dim);font-size:16px;line-height:1.65;max-width:56ch;margin:0 auto;}
.preview{margin:var(--space-8) auto 0;max-width:760px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;text-align:left;}
.preview .bar{display:flex;align-items:center;gap:8px;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--rule);background:var(--bg2);}
.preview .bar .d{width:9px;height:9px;border-radius:50%;background:var(--rule);}
.preview .bar .t{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);letter-spacing:.08em;margin-left:var(--space-3);}
.preview .body{padding:var(--space-6) var(--space-7);}
.preview .rows{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;}
.preview .r{display:grid;grid-template-columns:1fr auto auto;gap:var(--space-4);background:var(--bg);padding:var(--space-4) var(--space-5);font-size:14px;align-items:center;}
.preview .r.head{background:var(--bg2);font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--faint);}
.preview .r .num{font-family:var(--font-mono);color:var(--ink);text-align:right;}
.preview .r .num.acc{color:var(--accent);}
.preview .note{margin:var(--space-5) 0 0;font-size:13px;color:var(--faint);line-height:1.55;}

/* ───────────────────────── Rechtstexte ───────────────────────── */
.legal{max-width:76ch;}
.legal h2{font-size:22px;font-weight:500;letter-spacing:var(--tr-snug);margin:var(--space-8) 0 var(--space-3);}
.legal h2:first-of-type{margin-top:var(--space-6);}
.legal h3{font-size:17px;font-weight:500;margin:var(--space-6) 0 var(--space-2);}
.legal p,.legal li{color:var(--dim);font-size:15px;line-height:1.68;}
.legal p{margin:0 0 var(--space-4);}
.legal ul{padding-left:20px;margin:0 0 var(--space-4);}
.legal li{margin-bottom:8px;}
.legal li::marker{color:var(--accent);}
.legal a{color:var(--accent);}
.legal a:hover{text-decoration:underline;}

/* ───────────────────────── footer ───────────────────────── */
footer.site{padding:var(--space-8) 0;color:var(--dim);font-size:13.5px;}
footer .top{display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;align-items:flex-start;}
footer .links{display:flex;gap:var(--space-6);flex-wrap:wrap;}
footer .links a:hover{color:var(--ink);}
footer .foot-byline{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:10px;}
footer .copy{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--faint);}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width:1040px){
  .nav .links{display:none;}
  .nav .cta{display:none;}
  .burger{display:inline-flex;background:transparent;border:1px solid var(--rule);border-radius:var(--r-sm);width:34px;height:34px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);}
  .nav .tools{margin-left:auto;}
}
@media (max-width:920px){
  .proof .grid{grid-template-columns:repeat(2,1fr);}
  .proof .stat:nth-child(2n+1){border-left:0;}
  .proof .stat:nth-child(n+3){border-top:1px solid var(--rule);}
  .split{grid-template-columns:1fr;gap:var(--space-7);}
  .sec-head{flex-direction:column;align-items:flex-start;}
  .sec-head .l{max-width:100%;}
  .sec-head .r{text-align:left;max-width:48ch;}
  .services.cols-3{grid-template-columns:repeat(2,1fr);}
  .plans{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .wrap{padding:0 var(--space-5);}
  section.block{padding:var(--space-9) 0;}
  .hero{padding:var(--space-9) 0 var(--space-8);}
  .services,.services.cols-3{grid-template-columns:1fr;}
  .proof .grid{grid-template-columns:1fr;}
  .proof .stat{border-left:0!important;border-top:1px solid var(--rule);}
  .proof .stat:first-child{border-top:0;}
  .tl-item{grid-template-columns:1fr;gap:var(--space-1);}
  .tl-yr{text-align:left;}
  .tl-body{border-left:0;padding-left:0;}
  .tl-body::before{display:none;}
  .h1{font-size:38px;}
  .facts .row{flex-direction:column;gap:4px;}
  .facts .row .v{text-align:left;}
  .facts .row .k{max-width:100%;}
  .ribbon{margin-top:var(--space-8);}
}