/* v9 Schrift: NeuzeitGrotesk wie auf 360vier.de (URW++, Webfont-Kit 32BE77, Lizenz klaeren), selbst gehostet.
   Fallback-Webfont Jost (SIL OFL, fontsource 5.3.0), wird nur geladen, wenn Neuzeit nicht verfuegbar ist. */
@font-face{font-family:"Jost";src:url("/fonts/Jost-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";src:url("/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --white:#FFFFFF;--soft:#F4F4F2;--soft-2:#ECECE9;
  --ink:#141417;--muted:#595B62;--line:#E2E2DF;--tile:#F3F3F1;
  --g1:#131626;--g2:#1E2024;--g3:#2B4520;
  --grad:linear-gradient(52deg,var(--g1) 22%,var(--g2) 63%,var(--g3));
  --d-ink:#FFFFFF;--d-muted:rgba(255,255,255,.68);--d-line:rgba(255,255,255,.12);
  --a1:#81BA49;--a2:#74AD3D;
  --accent:#81BA49;--accent-text:#46731F;--accent-on-dark:#81BA49;
  --btn-grad:linear-gradient(97deg,var(--a1) 55%,var(--a2) 104%);
  --spring:linear(0,0.0009 0.4%,0.0053 1.01%,0.0238,0.053 3.44%,0.0976 4.85%,0.1913 7.28%,0.5461 15.58%,0.6503 18.41%,0.7335 21.04%,0.8081,0.8678 26.7%,0.9171,0.9532,0.9786 35.8%,0.9965 39.04%,1.0081 42.68%,1.0141 46.93%,1.0145 53.4%,1.0054 70%,1);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --wrap:1240px;--r:20px;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Schrift: eine Zeile. Wechsel auf Jost: --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif; */
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Neuzeit hat 300, 400, 700. --fw-strong fuer kleine Auszeichnungen (Buttons, h3, Labels). */
  --fw-light:340;--fw-regular:400;--fw-strong:700;
  /* v9 Typo-Skala fuer Neuzeit (laeuft breiter als Geist, kleinere x-Hoehe) */
  --fs-display:clamp(2.5rem,1.05rem + 4.6vw,5rem);
  --fs-h2l:clamp(2.1rem,1.15rem + 2.95vw,3.75rem);
  --fs-h2:clamp(1.9rem,1.2rem + 2.2vw,3.25rem);
  --fs-h3l:clamp(1.6rem,1.15rem + 1.45vw,2.6rem);
  --fs-h4:clamp(1.3rem,1.15rem + .45vw,1.5rem);
  --fs-h5:1.25rem;
  --fs-lead:clamp(1.15rem,1rem + .4vw,1.375rem);
  color-scheme:light;
}
/* Dunkelmodus v9 ausgeschaltet. Aktiv nur mit Klasse .dm an <html>; die setzt das Inline-Script in index.html,
   wenn dort DARK_MODE=true steht. Ohne .dm greifen weder prefers-color-scheme noch data-theme. */
:root.dm[data-theme="dark"]{
  --white:#101115;--soft:#16171B;--soft-2:#1C1D22;
  --ink:#EDEDEB;--muted:#A4A5AC;--line:#2A2B31;--tile:#1F2025;
  --g1:#0C0E1A;--g2:#16171B;--g3:#233A19;
  --accent-text:#81BA49;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root.dm:not([data-theme="light"]){
    --white:#101115;--soft:#16171B;--soft-2:#1C1D22;
    --ink:#EDEDEB;--muted:#A4A5AC;--line:#2A2B31;--tile:#1F2025;
    --g1:#0C0E1A;--g2:#16171B;--g3:#233A19;
    --accent-text:#81BA49;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--sans);font-size:clamp(1.125rem,1.05rem + .2vw,1.1875rem);line-height:1.55;letter-spacing:.005em;font-kerning:normal;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--accent-text);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-weight:var(--fw-regular);margin:0;line-height:1.1}
h1{font-size:var(--fs-display);letter-spacing:-0.022em;line-height:1.02;text-wrap:balance;max-width:12.4em}
h2{font-size:var(--fs-h2);letter-spacing:-0.02em;line-height:1.08;text-wrap:balance}
h3{font-size:var(--fs-h5);font-weight:var(--fw-strong);letter-spacing:0;line-height:1.25}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--white);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.hl{color:var(--accent-on-dark)}

section{padding:clamp(88px,10vw,152px) 0}
.band-white{background:var(--white)}
.band-soft{background:linear-gradient(142deg,var(--soft) 15%,var(--soft-2) 85%)}
.band-dark{background:var(--grad);color:var(--d-ink);--ink:var(--d-ink);--muted:var(--d-muted);--line:var(--d-line);--accent-text:var(--accent-on-dark)}
.sec-h{margin-bottom:clamp(36px,5vw,64px)}

/* Wordmark */
.wordmark{font-weight:var(--fw-light);letter-spacing:-0.02em}
.wordmark b{font-weight:var(--fw-strong)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,#131626 92%,transparent);backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{display:flex;align-items:center;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:1.5rem;line-height:1}
.brand-mark{width:28px;height:28px}
.brand-mark .bm-head{fill:var(--accent-on-dark)}
.brand-mark .bm-body{fill:none;stroke:#fff;stroke-width:1.5}
.brand-by{font-family:var(--mono);font-size:.78rem;color:rgba(255,255,255,.78);text-decoration:none;padding-left:16px;border-left:1px solid rgba(255,255,255,.18);line-height:1.6}
.brand-by:hover{color:#fff}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{color:rgba(255,255,255,.82);text-decoration:none;font-size:1rem}
.nav a:hover{color:#fff}
.header-actions{display:flex;align-items:center;gap:12px}
.theme-toggle[hidden]{display:none}
.theme-toggle{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s}
.theme-toggle:hover{background:rgba(255,255,255,.18)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
@media (max-width:960px){.nav{display:none}.header-actions{margin-left:auto}}
@media (max-width:480px){.brand-by{display:none}.header-inner{height:68px}.brand{font-size:1.35rem}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:999px;background:var(--btn-grad);background-size:140% 100%;background-position:0 0;color:#141417;text-decoration:none;font-weight:var(--fw-strong);font-size:1.0625rem;letter-spacing:.01em;transition:background-position .5s var(--spring),transform .5s var(--spring),box-shadow .3s}
.btn:hover{background-position:100% 0;transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-small{min-height:42px;padding:0 20px;font-size:.95rem}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 28%,transparent)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px currentColor;background:transparent}
@media (max-width:420px){.btn-small{padding:0 14px;font-size:.88rem;min-height:40px}}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Hero */
.hero{color:#fff;padding:clamp(48px,6vw,88px) 0 0;background:linear-gradient(to bottom,transparent calc(100% - var(--hero-cut)),var(--white) 0),var(--grad);--hero-cut:clamp(150px,17vw,250px)}
.hero-copy{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px clamp(40px,5vw,80px);align-items:end}
.hero-side{display:grid;gap:32px;padding-bottom:.5em}
.lead{font-size:var(--fs-lead);font-weight:var(--fw-light);line-height:1.5;color:rgba(255,255,255,.88);margin:0;max-width:30em}
.hero-note{grid-column:1/-1;font-size:.88rem;color:rgba(255,255,255,.55);margin:6px 0 0}
@media (max-width:1000px){.hero-copy{grid-template-columns:1fr}.hero-side{padding-bottom:0}}
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:rise 1.1s var(--spring) both}
  .hero-side{animation:rise 1.1s .1s var(--spring) both}
  .stage{animation:rise-stage 1.4s .18s var(--spring) both}
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes rise-stage{from{opacity:0;transform:translateY(60px) scale(.98)}to{opacity:1;transform:none}}

/* Stage v7: Gutenberg-Block -> JSON -> Website */
.stage-wrap{margin-top:clamp(48px,5vw,72px);position:relative}
.stage{--u:min(14px,calc((100vw - 48px)/85));font-size:var(--u);position:relative;height:45em;width:85em;max-width:100%;margin:0 auto}
.win{position:absolute;border-radius:1em;overflow:hidden;box-shadow:0 2.5em 5em -1.5em rgba(5,6,12,.55),0 0 0 1px rgba(255,255,255,.08)}
.stage svg{width:1.6em;height:1.6em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.editor{left:0;top:0;width:47em;height:34em;background:#fff;color:#1e1e1e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;z-index:1}
.json{left:37em;top:14em;width:26em;background:#0B0D14;color:#D6D8E0;z-index:3;box-shadow:0 2.5em 5em -1.5em rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14)}
.site{left:61em;top:3em;width:24em;height:41em;background:#F7F6F2;color:#15161A;z-index:2;box-shadow:0 3em 6em -1.5em rgba(5,6,12,.6),0 0 0 1px rgba(255,255,255,.12)}
.ed-top{display:flex;align-items:center;height:4.3em;border-bottom:1px solid #e0e0e0;gap:.35em;padding-right:1em}
.ed-logo{width:4.3em;height:4.3em;background:#1e1e1e;color:#fff;display:grid;place-items:center;flex:none}
.ed-logo svg{width:2em;height:2em}
.ed-logo rect:first-child{fill:var(--accent-on-dark);stroke:none}
.ed-ins{width:2.3em;height:2.3em;border-radius:.2em;background:#3858e9;color:#fff;display:grid;place-items:center;margin:0 .5em 0 1em}
.ed-ins svg{stroke-width:2}
.ed-ic{width:2.4em;height:2.4em;display:grid;place-items:center;color:#1e1e1e}
.ed-ic.dim{color:#bbb}
.ed-hide-s{display:none}
.ed-title{margin:0 auto;background:#f0f0f0;border-radius:.3em;padding:.45em 1.2em;font-size:.95em;font-weight:500;min-width:11em;text-align:center}
.ed-right{display:flex;align-items:center;gap:.6em}
.ed-save{background:#3858e9;color:#fff;font-size:.92em;font-weight:500;padding:.6em 1em;border-radius:.2em;transition:background .2s,transform .2s}
.ed-save.is-pressed{background:#2145e6;transform:scale(.96);box-shadow:0 0 0 .15em #fff,0 0 0 .3em #3858e9}
.ed-canvas{position:relative;height:calc(100% - 4.3em);padding:4.2em 3.4em 2em}
.blk{position:relative;border-radius:.15em}
.blk-hero{padding:1.2em 1.3em 1.4em;outline:.12em solid #3858e9;outline-offset:0}
.blk-toolbar{position:absolute;left:-.12em;top:-3.3em;height:3em;display:flex;align-items:center;background:#fff;border:1px solid #1e1e1e;border-radius:.2em;padding:0 .2em;box-shadow:0 .3em .8em rgba(0,0,0,.08)}
.bt-ic{width:2.6em;height:2.6em;display:grid;place-items:center}
.bt-ic svg{width:1.45em;height:1.45em}
.bt-sep{border-left:1px solid #e0e0e0}
.bt-lock{color:#1e1e1e}
.bt-drag{display:grid;grid-template-columns:repeat(2,.25em);gap:.25em;padding:0 .6em}
.bt-drag i{width:.25em;height:.25em;border-radius:50%;background:#1e1e1e}
.ed-h{font-size:2.5em;font-weight:650;letter-spacing:-0.03em;line-height:1.08;margin:0 0 .35em;min-height:1.08em;color:#111;white-space:nowrap}
.caret{display:inline-block;width:.06em;height:.9em;background:#3858e9;margin-left:.04em;vertical-align:-.08em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ed-p{font-size:1.1em;color:#3c3c3c;line-height:1.5;margin:0 0 1.1em;max-width:27em}
.ed-btn{display:inline-block;background:#111;color:#fff;padding:.7em 1.3em;border-radius:.3em;font-size:.95em;font-weight:500}
.blk-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em;margin-top:2.2em;padding:0 1.3em;max-width:30em}
.blk-cols b{display:block;font-size:1.05em;font-weight:var(--fw-strong);margin-bottom:.6em}
.blk-cols i,.sp-cols i{display:block;height:.45em;border-radius:.3em;background:#e4e4e4;margin-bottom:.45em}
.blk-cols i.s{width:65%}
.ed-crumb{position:absolute;left:0;right:0;bottom:0;margin:0;height:2.6em;display:flex;align-items:center;gap:.6em;padding:0 1.3em;border-top:1px solid #e0e0e0;font-size:.88em;color:#757575}
.ed-crumb span::before{content:"/";margin-right:.6em;color:#bbb}
.ed-crumb span{color:#1e1e1e}

.json-bar{display:flex;justify-content:space-between;height:3em;align-items:center;padding:0 1.4em;font-family:var(--mono);font-size:.82em;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.08)}
.json pre{margin:0;padding:1.2em 1.4em 1.5em;font-family:var(--mono);font-size:.9em;line-height:1.65;white-space:pre;overflow:hidden}
.json .k{color:#B9BED0}.json .s{color:var(--accent-on-dark)}.json .p{color:#7D8193}
.jl{position:relative;display:inline-block}
.jl::before{content:"";position:absolute;inset:-.1em -.6em;border-radius:.3em;background:rgba(129,186,73,.2);opacity:0;transition:opacity .5s var(--ease-out)}
.jl.is-new::before{opacity:1}

.site-bar{height:3.2em;display:flex;align-items:center;justify-content:center;background:#ECEBE6;border-bottom:1px solid rgba(0,0,0,.06)}
.url{display:flex;align-items:center;gap:.45em;font-size:.88em;color:#5d5f66;background:#fff;padding:.35em 1.2em;border-radius:99em}
.url svg{width:1.1em;height:1.1em}
.sp{padding:1.6em 1.9em}
.sp-nav{display:flex;align-items:center;gap:1em;font-size:.95em;margin-bottom:2.6em}
.sp-nav b{font-weight:var(--fw-strong);letter-spacing:-0.01em}
.sp-nav span{display:flex;gap:.8em;margin-left:auto}
.sp-nav span i{display:block;width:2.4em;height:.4em;border-radius:.2em;background:rgba(0,0,0,.18)}
.sp-nav em{font-style:normal;font-size:.85em;border:1px solid rgba(0,0,0,.25);border-radius:99em;padding:.3em .9em}
.sp-hero{position:relative;border-radius:.6em}
.sp-hero::after{content:"";position:absolute;inset:-.6em;border-radius:.8em;box-shadow:0 0 0 .15em var(--accent);opacity:0;transition:opacity .5s var(--ease-out)}
.sp-hero.is-new::after{opacity:1}
.sp-h{font-size:2.2em;font-weight:var(--fw-strong);letter-spacing:-0.02em;line-height:1.04;margin:0 0 .5em;min-height:2.08em;transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
.sp-h.is-out{opacity:0;transform:translateY(.25em)}
.sp-p{font-size:1em;color:#55575e;line-height:1.5;margin:0 0 1.3em}
.sp-btn{display:inline-block;background:#15161A;color:#fff;border-radius:99em;padding:.6em 1.3em;font-size:.9em;font-weight:var(--fw-strong)}
.sp-media{position:relative;height:9em;margin:2em 0 1.6em;border-radius:.7em;overflow:hidden;background:linear-gradient(168deg,#22304a 0%,#5b4a52 52%,#e08a5c 100%)}
.sp-media .m1{position:absolute;width:4.6em;height:4.6em;border-radius:50%;background:radial-gradient(circle at 40% 40%,#ffe2c4,#f4a26e 70%);right:3.5em;bottom:2.6em}
.sp-media .m2{position:absolute;left:0;right:0;bottom:0;height:3.2em;background:linear-gradient(180deg,#2a2f3d,#14161c)}
.sp-media .m3{position:absolute;left:-10%;right:-10%;bottom:2.1em;height:2.4em;background:#3b3f4f;clip-path:polygon(0 100%,18% 30%,34% 70%,52% 10%,70% 60%,86% 25%,100% 100%)}
.sp-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.sp-cols b{display:block;font-size:.95em;font-weight:var(--fw-strong);margin-bottom:.5em}
.sp-toast{position:absolute;left:1.9em;bottom:1.6em;display:flex;align-items:center;gap:.5em;background:#15161A;color:#fff;font-size:.9em;font-weight:var(--fw-strong);padding:.6em 1em .6em .8em;border-radius:99em;box-shadow:0 1em 2em rgba(0,0,0,.25);opacity:0;transform:translateY(.8em);transition:opacity .4s var(--ease-out),transform .6s var(--spring)}
.sp-toast svg{width:1.25em;height:1.25em;color:var(--accent-on-dark);stroke-width:2.2}
.sp-toast.is-on{opacity:1;transform:none}

.stage-legend{--u:min(14px,calc((100vw - 48px)/85));font-size:var(--u);width:85em;max-width:100%;margin:2.2em auto 0;position:relative;height:1.6em;font-family:var(--mono);color:var(--muted)}
.stage-legend span{position:absolute;top:0;font-size:max(.78rem,.95em);white-space:nowrap;padding-top:.9em;border-top:1px solid var(--line)}
.stage-legend span:nth-child(1){left:0;width:40%}
.stage-legend span:nth-child(2){left:43.5%;width:24.7%}
.stage-legend span:nth-child(3){left:71.8%;width:28.2%}
.stage-cap{margin:40px 0 0;padding-right:200px;font-size:.98rem;color:var(--muted);max-width:46em}
.sample{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-left:8px;white-space:nowrap}
.motion-toggle{position:absolute;right:24px;bottom:-4px;font:inherit;font-size:.85rem;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:99px;padding:8px 16px;cursor:pointer;min-height:40px}
.motion-toggle:hover{color:var(--ink);border-color:var(--muted)}

@media (max-width:760px){
  .stage{--u:calc((100vw - 48px)/34);width:34em;height:58em}
  .editor{width:34em;height:25em}
  .ed-title{min-width:0;padding:.45em .9em}
  .ed-canvas{padding:4em 1.6em 1.5em}
  .ed-h{font-size:2.15em}
  .ed-p{font-size:1.05em}
  .blk-hero{padding:1em}
  .blk-cols,.ed-crumb{display:none}
  .json{left:2em;top:19.5em;width:32em}
  .json pre{font-size:1em}
  .site{left:0;top:38em;width:34em;height:20em}
  .sp{padding:1.3em 1.5em}
  .sp-nav{margin-bottom:1.6em}
  .sp-h{font-size:2em;min-height:1.04em}
  .sp-media,.sp-cols{display:none}
  .sp-toast{left:auto;right:1.5em}
  .stage-legend{display:none}
  .stage-wrap{display:flex;flex-direction:column}
  .motion-toggle{position:static;margin-top:14px;order:1;align-self:flex-start}
  .stage-cap{margin-top:24px;padding-right:0}
  .hero{--hero-cut:200px}
}

/* Problem */
.sec-problem{padding-top:clamp(72px,8vw,112px)}
.statement{display:grid;gap:32px}
.statement h2{font-size:var(--fs-h2l);max-width:15em}
.statement .prose{max-width:38em;margin-left:auto;margin-right:clamp(0px,8vw,120px);color:var(--muted);font-size:1.12rem}
.spectrum{position:relative;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(24px,3.5vw,48px);margin-top:clamp(64px,8vw,112px);padding-top:64px;align-items:start}
.spectrum::before{content:"";position:absolute;top:20px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--line),var(--muted) 30%,var(--accent) 50%,var(--muted) 70%,var(--line))}
.pole{position:relative}
.pole:not(.pole-hp)::before{content:"";position:absolute;top:-50px;left:0;width:13px;height:13px;border-radius:50%;background:var(--white);border:1.5px solid var(--muted)}
.pole h3{font-size:var(--fs-h4);font-weight:var(--fw-regular);letter-spacing:-0.01em}
.pole-sub{font-family:var(--mono);font-size:.82rem;color:var(--muted);margin:6px 0 16px}
.pole p:last-child{color:var(--muted)}
.pole-hp{background:var(--grad);color:#fff;border-radius:var(--r);padding:clamp(28px,3vw,40px);margin-top:-24px;box-shadow:0 30px 60px -30px rgba(19,22,38,.55)}
.pole-hp h3{font-size:var(--fs-h3l);letter-spacing:-0.018em;line-height:1.1;margin:18px 0 12px}
.pole-hp p:last-child{color:rgba(255,255,255,.8);font-size:1.12rem;line-height:1.5}
.pole-mark{position:absolute;top:-64px;left:clamp(28px,3vw,40px);width:40px;height:40px;padding:6px;background:var(--white);border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.pole-mark rect:first-child{fill:var(--accent)}
.pole-mark rect:last-child{fill:none;stroke:var(--ink);stroke-width:1.6}
@media (max-width:900px){
  .spectrum{grid-template-columns:1fr;padding-top:0;gap:40px}
  .spectrum::before{display:none}
  .pole:not(.pole-hp)::before{display:none}
  .pole-hp{order:-1;margin-top:20px}
  .pole-mark{top:-20px}
  .pole:not(.pole-hp){border-top:1px solid var(--line);padding-top:24px}
}

/* Split */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start;margin-bottom:clamp(48px,6vw,88px)}
.split:last-child{margin-bottom:0}
.prose{color:var(--muted);max-width:38em}
.prose-lg{font-size:var(--fs-lead);color:var(--ink);font-weight:var(--fw-light);line-height:1.5}
.prose-lg p+p{color:var(--muted)}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* Ansatz */
.openly{background:var(--grad);color:#fff;border-radius:calc(var(--r) + 4px);padding:clamp(32px,5vw,72px);margin:0 0 clamp(72px,9vw,128px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,5vw,80px);align-items:start}
.openly h3{font-size:var(--fs-h3l);font-weight:var(--fw-regular);letter-spacing:-0.018em;line-height:1.1}
.openly p{color:rgba(255,255,255,.8);font-size:1.1rem}
.openly a{color:var(--accent-on-dark)}
@media (max-width:860px){.openly{grid-template-columns:1fr}}
/* Architecture */
.arch-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;margin-bottom:clamp(56px,7vw,96px)}
.arch-head h2{margin-bottom:28px}
@media (max-width:960px){.arch-head{grid-template-columns:1fr}}
.code{margin:0;background:rgba(6,7,12,.45);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.code-bar{display:flex;justify-content:space-between;padding:14px 20px;font-family:var(--mono);font-size:.78rem;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.08)}
.code pre{margin:0;padding:22px 20px 26px;font-family:var(--mono);font-size:clamp(.74rem,.6rem + .4vw,.9rem);line-height:1.75;color:#D6D8E0;overflow-x:auto}
.code .k{color:#B9BED0}.code .s{color:var(--accent-on-dark)}.code .p{color:#7D8193}
.arch{margin:0}
.zones{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.zone{border-radius:var(--r);padding:24px}
.zone-int{border:1px dashed rgba(255,255,255,.26)}
.zone-pub{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.zone-label{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.8rem;color:var(--d-muted);margin:0 0 18px}
.zone-label svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;position:relative}
.node{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;min-height:150px}
.zone-pub .node{background:rgba(10,11,16,.35)}
.node strong{font-weight:var(--fw-strong);font-size:1.1rem;letter-spacing:0}
.node span{font-size:.86rem;color:var(--d-muted);line-height:1.45}
.node-accent{border-color:var(--accent-on-dark);box-shadow:inset 0 0 0 1px var(--accent-on-dark)}
.flow .node+.node::before{content:"";position:absolute;left:-23px;top:50%;width:22px;height:1px;background:rgba(255,255,255,.35)}
.zone-int .flow .node:last-child::after{content:"";position:absolute;right:-49px;top:50%;width:48px;height:2px;margin-top:-.5px;background:var(--accent-on-dark)}
.side-flows{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.side-flows p{margin:0;padding:18px 24px;border-top:1px solid rgba(255,255,255,.14);font-size:.95rem;color:var(--d-muted)}
.side-flows strong{display:block;color:#fff;font-weight:var(--fw-strong);margin-bottom:4px}
@media (max-width:1060px){
  .zones{grid-template-columns:1fr;gap:32px}
  .zone-int .flow .node:last-child::after{right:auto;left:50%;top:auto;bottom:-58px;width:2px;height:56px}
}
@media (max-width:640px){
  .flow{grid-template-columns:1fr;gap:16px}
  .node{min-height:0}
  .flow .node+.node::before{left:28px;top:-17px;width:1px;height:16px}
  .zone-int .flow .node:last-child::after{left:28px}
  .side-flows{grid-template-columns:1fr;gap:0}
  .side-flows p{padding:18px 0}
}
.hard-parts{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,5vw,80px)}
.hard-parts h3{font-size:var(--fs-h3l);font-weight:var(--fw-regular);letter-spacing:-0.018em;line-height:1.1}
.hard-parts p{color:var(--d-muted);margin:0;font-size:1.08rem}
@media (max-width:860px){.hard-parts{grid-template-columns:1fr}}

/* Modules: Inserter */
.inserter{border:1px solid var(--line);border-radius:var(--r);background:var(--white);box-shadow:0 40px 80px -50px rgba(19,22,38,.35);overflow:hidden}
.ins-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line)}
.ins-title{font-weight:var(--fw-strong)}
.ins-search{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);background:var(--tile);border-radius:8px;padding:8px 14px;min-width:220px}
.ins-search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.ins-grid{list-style:none;margin:0;padding:24px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 20px}
.ins-grid li{display:flex;flex-direction:column;gap:4px}
.ins-grid b{font-weight:var(--fw-strong);margin-top:10px}
.ins-grid li>span:last-child{font-size:.88rem;color:var(--muted);line-height:1.45}
.th{position:relative;display:grid;aspect-ratio:16/10;border-radius:12px;background:var(--tile);padding:14%;gap:7%;transition:box-shadow .3s,transform .5s var(--spring)}
.ins-grid li:hover .th{box-shadow:inset 0 0 0 2px var(--accent);transform:translateY(-2px)}
.th i{display:block;border-radius:4px;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.th-hero{grid-template-rows:2fr 1fr 1.4fr;justify-items:start}
.th-hero i:nth-child(1){width:88%;background:color-mix(in srgb,var(--ink) 70%,transparent)}
.th-hero i:nth-child(2){width:60%}
.th-hero i:nth-child(3){width:34%;background:var(--accent);border-radius:99px}
.th-teaser{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.th-feat{grid-template-columns:repeat(3,1fr)}
.th-feat i{border-top:5px solid var(--accent);background:color-mix(in srgb,var(--ink) 10%,transparent)}
.th-quote{grid-template-rows:1.6fr .6fr .6fr;justify-items:start}
.th-quote i:nth-child(1){width:24%;aspect-ratio:1;border-radius:50%;height:auto;background:color-mix(in srgb,var(--ink) 30%,transparent)}
.th-quote i:nth-child(2){width:90%}.th-quote i:nth-child(3){width:50%}
.th-faq{grid-template-rows:repeat(3,1fr);gap:9%}
.th-faq i{background:transparent;border-bottom:2px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:0;position:relative}
.th-faq i::after{content:"";position:absolute;right:0;top:20%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.th-price{grid-template-columns:repeat(3,1fr);align-items:end}
.th-price i{height:72%}
.th-price i:nth-child(2){height:100%;background:var(--ink)}
.th-team{grid-template-columns:repeat(3,1fr);align-items:center}
.th-team i{aspect-ratio:1;border-radius:50%;height:auto}
.th-jobs{grid-template-rows:repeat(3,1fr)}
.th-jobs i{background:color-mix(in srgb,var(--ink) 10%,transparent);position:relative}
.th-jobs i::after{content:"";position:absolute;right:6%;top:25%;bottom:25%;width:18%;border-radius:99px;background:var(--accent)}
.th-cta{background:var(--grad);grid-template-columns:1.6fr 1fr;align-items:center}
.th-cta i:nth-child(1){height:22%;background:rgba(255,255,255,.75)}
.th-cta i:nth-child(2){height:30%;background:var(--btn-grad);border-radius:99px}
.th-logos{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;padding:16% 12%}
.th-logos i{margin:18% 10%;background:color-mix(in srgb,var(--ink) 25%,transparent)}
@media (max-width:1060px){.ins-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.ins-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px;gap:22px 14px}.ins-search{min-width:0}.ins-bar{padding:14px 18px}.ins-search{display:none}}
.details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(56px,7vw,96px)}
.details>div{border-top:1px solid var(--ink);padding-top:22px}
.details h3{margin-bottom:10px;font-size:var(--fs-h5)}
.details p{color:var(--muted);font-size:1rem}
@media (max-width:860px){.details{grid-template-columns:1fr}}

/* Comparison */
.table-scroll{overflow-x:auto;border-radius:var(--r);background:var(--white);box-shadow:0 0 0 1px var(--line)}
.compare{width:100%;border-collapse:collapse;min-width:780px;font-size:.98rem}
.compare th,.compare td{text-align:left;vertical-align:top;padding:18px 22px;border-bottom:1px solid var(--line);line-height:1.45}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare thead th{font-weight:var(--fw-strong);font-size:1.1rem;letter-spacing:0;padding-top:24px;padding-bottom:20px}
.compare tbody th{font-weight:var(--fw-strong);width:19%;color:var(--ink)}
.compare td{color:var(--muted);width:27%}
.compare .col-hp{color:var(--ink);background:color-mix(in srgb,var(--accent) 7%,var(--white))}
.compare thead .col-hp{background:var(--grad);color:#fff}
.th-sub{display:block;font-family:var(--mono);font-weight:400;font-size:.76rem;color:var(--muted);margin-top:4px;letter-spacing:0}
.fineprint{font-size:.86rem;color:var(--muted);margin-top:18px;max-width:60em}
.scroll-hint{display:none;font-size:.86rem;color:var(--muted);margin:0 0 10px}
@media (max-width:800px){.scroll-hint{display:block}}
.compare tbody th,.compare thead th:first-child{position:sticky;left:0;z-index:1;background:var(--white)}
@media (max-width:800px){.compare tbody th{width:128px;min-width:128px}}

/* Fit */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px)}
.fit h3{font-size:var(--fs-h4);font-weight:var(--fw-regular);letter-spacing:-0.01em;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.4)}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{padding:16px 0 16px 34px;border-bottom:1px solid var(--d-line);color:var(--d-muted);position:relative}
.fit-yes li{color:#fff}
.fit-yes li::before{content:"";position:absolute;left:4px;top:23px;width:12px;height:7px;border-left:2px solid var(--accent-on-dark);border-bottom:2px solid var(--accent-on-dark);transform:rotate(-45deg)}
.fit-no li::before{content:"";position:absolute;left:3px;top:28px;width:14px;height:2px;background:rgba(255,255,255,.4)}
.fit-note{margin-top:40px;font-size:var(--fs-h4);font-weight:var(--fw-light);letter-spacing:0;line-height:1.4;color:#fff;max-width:30em}
@media (max-width:760px){.fit{grid-template-columns:1fr}}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px;position:relative}
.steps li{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.steps li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--white);border:1.5px solid var(--ink)}
.steps li:first-child::before{background:var(--accent);border-color:var(--accent)}
.steps h3{font-size:var(--fs-h5);margin-bottom:8px}
.steps p{font-size:.95rem;color:var(--muted)}
@media (max-width:980px){
  .steps{grid-template-columns:1fr;gap:0;border-left:1px solid var(--line);margin-left:5px}
  .steps li{border-top:0;padding:0 0 30px 28px}
  .steps li::before{top:4px;left:-6px}
}
.placeholder-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
@media (max-width:760px){.placeholder-row{grid-template-columns:1fr}}

/* Placeholder */
.ph{display:block;border:1.5px dashed var(--accent);border-radius:12px;padding:14px 16px;color:var(--ink);background:color-mix(in srgb,var(--accent) 5%,transparent);font-size:.95rem;margin:0}
.ph-label{display:inline-block;font-family:var(--mono);font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);margin-right:8px}

/* FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-weight:var(--fw-regular);font-size:var(--fs-h5);letter-spacing:0;line-height:1.35;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:1.5px;background:var(--ink);transition:transform .4s var(--spring)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq summary:hover{color:var(--accent-text)}
.faq details p{color:var(--muted);padding:0 44px 24px 0;margin:0}
.faq details p .ph{margin-top:12px}

/* CTA */
.cta h2{font-size:var(--fs-display);letter-spacing:-0.022em;line-height:1.02;max-width:11em}
.cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 56px;align-items:end;margin-top:clamp(36px,4vw,56px)}
.cta-row p{color:rgba(255,255,255,.8);font-size:var(--fs-lead);font-weight:var(--fw-light);margin:0;max-width:28em}
.cta-person{margin-top:48px !important;font-size:.9rem;color:rgba(255,255,255,.55)}
@media (max-width:900px){.cta-row{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:#0B0C12;color:rgba(255,255,255,.6);padding:24px 0 48px;font-size:.9rem;overflow:hidden}
.footer-giant{font-size:min(21.4vw,296px);font-weight:var(--fw-light);letter-spacing:-0.04em;line-height:.95;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);margin:0 0 32px;white-space:nowrap;user-select:none}
.footer-inner{display:grid;grid-template-columns:auto 1fr;gap:14px 40px;align-items:center;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.footer-brand{margin:0;color:rgba(255,255,255,.75)}
.footer-brand .wordmark{color:#fff;font-size:1.15rem;margin-right:10px}
.footer-brand a{color:#fff}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px;justify-self:end}
.footer-links a{color:rgba(255,255,255,.7)}
.footer-links a:hover{color:#fff}
.footer-legal{grid-column:1/-1;margin:10px 0 0;font-size:.8rem;color:rgba(255,255,255,.5)}
@media (max-width:700px){.footer-inner{grid-template-columns:1fr}.footer-links{justify-self:start}}

.hide-s{display:inline}
@media (max-width:480px){.hide-s{display:none}}

/* Reveal */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(32px)}
  .js .rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform 1.2s var(--spring)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* v3: Argumente im dunklen Panel */
.reasons{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,44px)}
.reasons>div{padding:18px 0 20px;border-top:1px solid rgba(255,255,255,.16)}
.reasons dt{font-weight:var(--fw-strong);font-size:1.08rem;letter-spacing:0;margin-bottom:6px;color:#fff}
.reasons dd{margin:0;color:rgba(255,255,255,.74);font-size:.98rem;line-height:1.5}
.openly h3{position:sticky;top:110px}
@media (max-width:860px){.openly h3{position:static}}
@media (max-width:620px){.reasons{grid-template-columns:1fr}}
.compare thead .col-hp .th-sub{color:rgba(255,255,255,.7)}


/* v7: Kostenvergleich */
.cost{margin:0 0 clamp(56px,7vw,88px);background:var(--white);border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:clamp(24px,3.5vw,44px)}
.cost-h{font-size:var(--fs-h4);font-weight:var(--fw-regular);letter-spacing:-0.01em;margin-bottom:28px}
.bars{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:0}
.bars li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr) 6.5em;gap:12px 28px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.bar-name{font-weight:var(--fw-strong);line-height:1.3}
.bar-name small{display:block;font-weight:400;font-size:.84rem;color:var(--muted);margin-top:3px}
.bar{height:14px;border-radius:99px;background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden}
.bar i{display:block;height:100%;width:calc(var(--v) * 100%);border-radius:99px;background:color-mix(in srgb,var(--ink) 62%,transparent);transform-origin:left center}
.bar-val{text-align:right;font-size:1.35rem;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.bars .is-hp .bar-name{color:var(--accent-text)}
.bars .is-hp .bar-val{color:var(--accent-text);font-weight:var(--fw-strong)}
.bars .is-hp .bar{background:transparent;box-shadow:inset 0 0 0 1px var(--accent)}
.cost .fineprint{margin:0}
@media (max-width:700px){.bars li{grid-template-columns:1fr auto;gap:10px 16px}.bar{grid-column:1/-1;grid-row:2}}
@media (prefers-reduced-motion:no-preference){
  .js .cost.rv .bar i{transform:scaleX(0)}
  .js .cost.in .bar i{transform:none;transition:transform 1.1s .25s var(--ease-out)}
}
/* v7: Dunkelmodus, Flächen etwas klarer trennen */
:root.dm[data-theme="dark"] .band-soft{background:#17181D}
@media (prefers-color-scheme:dark){:root.dm:not([data-theme="light"]) .band-soft{background:#17181D}}
:root.dm[data-theme="dark"] .sec-fit,:root.dm[data-theme="dark"] .cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.site-header :focus-visible,.hero :focus-visible,.band-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--accent-on-dark)}

@media (max-width:520px){.site-header .btn{white-space:nowrap;padding-left:16px;padding-right:16px;font-size:.88rem}}
.wrap > .openly:last-child{margin-bottom:0}
.brand-mark{flex:none}.brand{flex:none}
@media (max-width:420px){.header-inner{gap:12px}.header-actions{gap:8px}.site-header .btn{padding-left:12px;padding-right:12px;font-size:.82rem}.wordmark{font-size:1.3rem}}
/* v10: Balkenwerte ohne style-Attribute (CSP) */
.v-full{--v:1}.v-sanity{--v:.516}.v-zero{--v:0}
/* v10: Unterseiten Impressum, Datenschutz, 404 */
.page{padding:clamp(56px,8vw,112px) 0 clamp(72px,10vw,128px);background:var(--white)}
.page .wrap{max-width:52rem}
.page h1{font-size:var(--fs-h2);font-weight:var(--fw-regular);line-height:1.1;letter-spacing:-.02em;margin:0 0 .6em}
.page h2{font-size:var(--fs-h4);font-weight:var(--fw-strong);line-height:1.25;margin:2.2em 0 .5em}
.page p,.page li,.page address{color:var(--ink);font-style:normal;max-width:40em}
.page ul{padding-left:1.2em}
.page a{color:var(--accent-text)}
.page .meta{color:var(--muted);font-size:.95rem}
.page .actions{margin-top:2em}