/* ============================================================
   agent-os.solutions — Design-System "Premium Brand Tech-Dark"
   agentOS, eine Marke der NovaData Solutions.
   Apple-/Linear-artig, poliert. Indigo + Mint auf Off-Black.
   Flaggschiff-Ausbau: Mannschaft, Architektur-Schaubilder,
   Interaktivität (Wellen, Zeit-Picker, Klick-Agenten, Loop).
   Signature: Orbiting Crew + Animated Beams + Flowchart.
   Handgeschrieben, build-frei.
   ============================================================ */

:root{
  /* ----- Farbwelt (dark) ----- */
  --bg:#0B0F1A;            /* near-black */
  --dark:#0B0F1A;
  --dark-2:#121829;        /* dunkle Glas-Karten-Basis / Kontrastband */
  --bg-ice:#0E1422;        /* atmosphärischer Sektions-BG (für Pflicht-Vtest) */
  --surface:#121829;       /* Karten/Inputs (dunkle Glas-Karte) */
  --surface-2:rgba(255,255,255,.04);
  --surface-glass:rgba(18,24,41,.72);

  --ink:#E8ECF5;           /* heller Text */
  --ink-soft:#9AA6C0;      /* mittel */
  --ink-faint:#6B7798;     /* zart */
  --on-dark:#E8ECF5;
  --on-dark-soft:#9AA6C0;

  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  /* Akzent Indigo */
  --accent:#4F46E5;
  --accent-deep:#4338CA;
  --accent-soft:rgba(79,70,229,.22);
  --accent-lite:#818CF8;
  --accent-glow:rgba(79,70,229,.4);
  --on-accent:#ffffff;

  /* Zweitakzent Mint (sparsam: aktiv/online, Beams) */
  --mint:#34D399;
  --mint-soft:rgba(52,211,153,.18);
  --mint-glow:rgba(52,211,153,.4);

  --radius:16px;
  --radius-lg:24px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px -28px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5);
  --shadow-accent:0 24px 70px -30px var(--accent-glow);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1200px;
  --font-display:'General Sans',-apple-system,sans-serif;
  --font-body:'Geist',-apple-system,sans-serif;

  /* Pflicht-Sektionen für die dunkle Welt tunen */
  --mc-bg:linear-gradient(180deg,#0B0F1A 0%,#0E1422 100%);
  --nd-bg:linear-gradient(160deg,#121829,#0B0F1A);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);
  font-size:clamp(16px,.5vw + 15px,17.5px);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.07;letter-spacing:-.02em;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent-soft);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.eyebrow{font-family:var(--font-body);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-lite)}
.accent{color:var(--accent-lite)}
.mint{color:var(--mint)}

/* gradient-clip auf Schlüsselwörtern (Headline-Treatment) */
.grad{background:linear-gradient(100deg,var(--accent-lite) 0%,var(--mint) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* sichtbarer Tastatur-Fokus */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,.crew-card:focus-visible,.fc-agent:focus-visible,.wave-tab:focus-visible,.layer-row:focus-visible,.po-range:focus-visible{outline:2px solid var(--accent-lite);outline-offset:3px;border-radius:6px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-body);font-weight:600;font-size:1rem;
  padding:.92em 1.55em;border-radius:12px;border:1.5px solid transparent;cursor:pointer;line-height:1;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),color .25s,border-color .25s}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 12px 30px -12px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-2px);background:var(--accent-deep);box-shadow:0 18px 40px -14px var(--accent-glow)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);transform:translateY(-2px)}
.btn-lg{font-size:1.05rem;padding:1.05em 1.85em}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* ---------- Header ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent}
.site-head .head-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.site-head.scrolled{background:rgba(11,15,26,.72);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em;color:var(--ink)}
.brand .dot{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-lite) 60%,var(--mint) 130%);box-shadow:0 0 14px var(--accent-glow);position:relative}
.brand .dot::after{content:"";position:absolute;inset:5px;border-radius:3px;background:rgba(11,15,26,.55)}
.brand b{font-weight:600}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.95rem;font-weight:500;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current]{color:var(--accent-lite)}
.nav-cta{display:flex;align-items:center;gap:1rem}
.burger{display:none;background:none;border:none;cursor:pointer;width:42px;height:42px;color:var(--ink)}
.burger svg{width:26px;height:26px}

/* ============================================================
   HERO — zentriert, Polier-Orbit-Hub als Held
   ============================================================ */
.hero{position:relative;padding:calc(72px + clamp(40px,7vw,90px)) 0 clamp(40px,6vw,80px);overflow:hidden;text-align:center}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg .nebula-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
  mask-image:radial-gradient(90% 80% at 50% 25%,#000 0%,transparent 80%);
  -webkit-mask-image:radial-gradient(90% 80% at 50% 25%,#000 0%,transparent 80%)}
.hero-bg .nebula{position:absolute;inset:0;background:
   radial-gradient(60% 50% at 50% 8%,var(--accent-glow),transparent 60%),
   radial-gradient(40% 40% at 80% 70%,var(--mint-soft),transparent 60%),
   radial-gradient(45% 45% at 16% 60%,rgba(67,56,202,.22),transparent 60%);
  opacity:.85}
.hero-bg .stars{position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.55) .9px,transparent .9px);
  background-size:46px 46px;mask-image:radial-gradient(80% 70% at 50% 30%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000 0%,transparent 75%);opacity:.22}
.hero-bg .glow-line{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-lite),transparent);opacity:.4}

.hero-inner{position:relative;z-index:2;max-width:920px;margin:0 auto}
.hero-pill{display:inline-flex;align-items:center;gap:.6em;padding:.45em 1em .45em .65em;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);font-size:.84rem;font-weight:500;color:var(--ink-soft);margin-bottom:1.7rem;backdrop-filter:blur(8px)}
.hero-pill .live{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-soft);animation:nd-live 2.4s ease-in-out infinite}
@keyframes nd-live{0%,100%{opacity:1}50%{opacity:.45}}
.hero h1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:600;letter-spacing:-.03em;margin-bottom:1.3rem;line-height:1.02}
.hero p.lead{font-size:clamp(1.12rem,1.6vw,1.32rem);color:var(--ink-soft);max-width:60ch;margin:0 auto 2.1rem}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero-trust{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-top:2.3rem;font-size:.9rem;color:var(--ink-soft)}
.hero-trust span{display:flex;align-items:center;gap:.45em}
.hero-trust svg{width:1.1em;height:1.1em;color:var(--mint)}

/* ----- Orbit-Hub (CSS, oberhalb-fold → NICHT .reveal) ----- */
.orbit{position:relative;width:min(560px,86vw);aspect-ratio:1;margin:clamp(28px,4vw,48px) auto 0}
.orbit .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(ellipse at 34% 30%,var(--accent-lite) 0%,var(--accent) 44%,var(--accent-deep) 100%);
  box-shadow:0 0 60px var(--accent-glow),0 0 140px var(--accent-glow),inset 0 2px 8px rgba(255,255,255,.25);
  display:grid;place-items:center;z-index:5;animation:nd-corepulse 5s var(--ease) infinite}
@keyframes nd-corepulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.045)}}
.orbit .core .core-img{position:absolute;inset:0;border-radius:50%;object-fit:cover;opacity:.5;mix-blend-mode:screen}
.orbit .core .core-lbl{position:relative;z-index:2;font-family:var(--font-display);font-weight:600;color:#fff;font-size:clamp(.85rem,1.7vw,1.12rem);letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.orbit .core::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}

/* Bahn-Ringe */
.orbit .ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--line);}
.orbit .ring.r1{width:62%;aspect-ratio:1;border-color:rgba(129,140,248,.28)}
.orbit .ring.r2{width:100%;aspect-ratio:1;border-color:rgba(52,211,153,.18)}

/* rotierende Träger → Monde sitzen am Rand */
.orbit .spin{position:absolute;top:50%;left:50%;width:0;height:0}
.orbit .spin.s1{animation:nd-spin 26s linear infinite}
.orbit .spin.s2{animation:nd-spin 38s linear infinite reverse}
@keyframes nd-spin{to{transform:rotate(360deg)}}
.moon{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;animation:nd-counter 26s linear infinite}
.orbit .spin.s2 .moon{animation-duration:38s;animation-direction:reverse}
@keyframes nd-counter{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.orbit .spin.s2 .moon{animation-name:nd-counter-rev}
@keyframes nd-counter-rev{to{transform:translate(-50%,-50%) rotate(360deg)}}
.moon .chip{display:flex;align-items:center;gap:.4em;padding:.4em .7em;border-radius:10px;background:var(--surface-glass);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:var(--shadow);white-space:nowrap}
.moon .chip .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-lite)}
.moon .chip .ic svg{width:15px;height:15px}
.moon .chip .nm{font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--ink);letter-spacing:-.01em}
.moon .chip .st{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint-glow)}
/* Monde positionieren (Träger r1: oben/unten · r2: links/rechts/diagonal) */
.orbit .spin.s1 .m-top{top:-31%;left:0}
.orbit .spin.s1 .m-bot{top:31%;left:0}
.orbit .spin.s2 .m-left{top:0;left:-50%}
.orbit .spin.s2 .m-right{top:0;left:50%}

/* Animated Beams (SVG, Core ↔ Bahnen) */
.orbit .beams{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.orbit .beams circle.pulse{fill:none;stroke:var(--mint);stroke-width:1.4;opacity:0}
.orbit .beams circle.p1{animation:nd-beam 3.4s var(--ease) infinite}
.orbit .beams circle.p2{animation:nd-beam 3.4s var(--ease) infinite 1.7s;stroke:var(--accent-lite)}
@keyframes nd-beam{0%{r:90px;opacity:.5}100%{r:265px;opacity:0}}

/* ============================================================
   Allgemeine Sektionen
   ============================================================ */
.sec{padding:clamp(58px,8vw,118px) 0;position:relative}
.sec-head{max-width:64ch;margin-bottom:clamp(34px,4vw,58px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(2.1rem,4.2vw,3.2rem);margin:.7rem 0 1rem;font-weight:600}
.sec-head p{font-size:1.12rem;color:var(--ink-soft)}
.sec-head.center p{max-width:62ch;margin-inline:auto}

/* Die Idee — editorial split mit crew-Bild */
.idea-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.idea-split h2{font-size:clamp(2rem,4vw,3rem);margin:.7rem 0 1rem}
.idea-lead{font-size:1.1rem;color:var(--ink-soft);margin-bottom:1.1rem;max-width:48ch}
.idea-list{list-style:none;display:flex;flex-direction:column;gap:.8rem;margin-top:1.4rem}
.idea-list li{display:flex;align-items:flex-start;gap:.7em;color:var(--ink-soft);font-size:1rem}
.idea-list svg{width:1.2em;height:1.2em;color:var(--mint);flex:none;margin-top:.2em}
.idea-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.idea-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(79,70,229,.12));pointer-events:none}
.idea-visual img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}

/* Logo-/Trust-Strip */
.proof{border-block:1px solid var(--line-soft);background:rgba(255,255,255,.012)}
.proof .wrap{padding-block:clamp(26px,3vw,38px)}
.proof-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.2rem,3.4vw,3rem);color:var(--ink-faint)}
.proof-row .lbl{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-faint)}
.proof-row .item{display:flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink-soft);letter-spacing:-.01em}
.proof-row .item svg{width:1.05em;height:1.05em;color:var(--accent-lite)}

/* ============================================================
   3 WELLEN — interaktiver Toggle
   ============================================================ */
.waves{position:relative;overflow:hidden}
.waves::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 0%,var(--accent-glow),transparent 60%);opacity:.35}
.waves .wrap{position:relative;z-index:1}
.wave-switch{display:inline-flex;gap:.4rem;padding:.4rem;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);margin:0 auto clamp(28px,4vw,40px);position:relative;left:50%;transform:translateX(-50%)}
.wave-tab{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.7rem 1.3rem;border:none;border-radius:12px;background:transparent;cursor:pointer;color:var(--ink-soft);transition:background .3s var(--ease),color .3s,box-shadow .3s}
.wave-tab .wn{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.wave-tab .wl{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:inherit}
.wave-tab:hover{color:var(--ink)}
.wave-tab.is-on{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;box-shadow:0 12px 30px -14px var(--accent-glow)}
.wave-tab.is-on .wn{opacity:.85}
.wave-stage{position:relative;max-width:760px;margin:0 auto;min-height:340px}
.wave-panel{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem)}
.wave-panel.is-on{opacity:1;visibility:visible;transform:none;position:relative}
.wave-era{font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--accent-lite);margin-bottom:.6rem}
.wave-panel h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.7rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.badge-os{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.02em;padding:.3em .7em;border-radius:999px;background:var(--mint-soft);color:var(--mint);border:1px solid rgba(52,211,153,.35);-webkit-text-fill-color:var(--mint)}
.wave-panel>p{color:var(--ink-soft);margin-bottom:1.3rem;max-width:60ch}
.wave-demo{display:flex;flex-direction:column;gap:.6rem;background:rgba(0,0,0,.25);border:1px solid var(--line-soft);border-radius:14px;padding:1.1rem;margin-bottom:1.3rem}
.wd-line{font-family:var(--font-body);font-size:.95rem;padding:.6rem .9rem;border-radius:10px;max-width:90%}
.wd-line.you{align-self:flex-end;background:var(--accent-soft);color:var(--ink);border:1px solid rgba(129,140,248,.3)}
.wd-line.bot{align-self:flex-start;background:rgba(255,255,255,.05);color:var(--ink-soft);border:1px solid var(--line-soft)}
.wd-line.bot.ok{color:var(--ink);border-color:rgba(52,211,153,.3)}
.wd-line.bot.ok b{color:var(--mint)}
.wave-verdict{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:600;font-size:1.05rem}
.wave-verdict svg{width:1.25em;height:1.25em;padding:.18em;border-radius:50%;flex:none}
.wave-verdict.miss{color:#F4978E}.wave-verdict.miss svg{background:rgba(244,151,142,.16)}
.wave-verdict.half{color:var(--accent-lite)}.wave-verdict.half svg{background:var(--accent-soft)}
.wave-verdict.win{color:var(--mint)}.wave-verdict.win svg{background:var(--mint-soft)}

/* ============================================================
   DIE MANNSCHAFT — Polier + anklickbare Agenten + Detail
   ============================================================ */
.crew{position:relative;overflow:hidden}
.crew::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 0%,var(--accent-glow),transparent 60%);opacity:.4}
.crew .wrap{position:relative;z-index:1}

/* Polier-Karte */
.polier-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1.2rem,3vw,2rem);
  background:linear-gradient(135deg,rgba(79,70,229,.16),var(--surface-2));border:1px solid rgba(129,140,248,.32);
  border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2rem);margin-bottom:1.5rem;box-shadow:var(--shadow-accent)}
.polier-badge{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;flex:none;
  background:radial-gradient(ellipse at 32% 28%,var(--accent-lite),var(--accent-deep));box-shadow:0 0 36px var(--accent-glow),inset 0 1px 4px rgba(255,255,255,.3)}
.polier-badge svg{width:32px;height:32px;color:#fff}
.polier-tag{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-lite);margin-bottom:.25rem}
.polier-body h3{font-size:clamp(1.5rem,2.6vw,1.9rem);margin-bottom:.4rem}
.polier-body p{color:var(--ink-soft);font-size:1rem;max-width:62ch}
.polier-flow{display:flex;flex-direction:column;align-items:center;gap:.35rem;flex:none}
.pf-dot{font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--ink-soft);padding:.35em .8em;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);white-space:nowrap}
.pf-dot.mid{color:#fff;background:var(--accent-soft);border-color:rgba(129,140,248,.4)}
.pf-arrow{width:34px;height:11px}
.pf-arrow .t{stroke:var(--accent-lite);stroke-width:1.4;fill:none;stroke-dasharray:3 4;animation:nd-flow 1.4s linear infinite}
.pf-arrow .a{stroke:var(--accent-lite);stroke-width:1.6;fill:none}
@keyframes nd-flow{to{stroke-dashoffset:-14}}

/* Layout: Gitter + Detail */
.crew-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.crew-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.crew-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;text-align:left;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.1rem;cursor:pointer;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s}
.crew-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);background:radial-gradient(120% 80% at 50% -10%,var(--accent-soft),transparent 60%)}
.crew-card:hover{transform:translateY(-4px);border-color:rgba(129,140,248,.4)}
.crew-card:hover::after{opacity:1}
.crew-card.is-active{border-color:var(--accent-lite);background:linear-gradient(150deg,var(--accent-soft),var(--surface-2));box-shadow:var(--shadow-accent)}
.crew-card.is-active::after{opacity:1}
.cc-avatar{position:relative;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:.6rem;
  background:linear-gradient(150deg,rgba(79,70,229,.4),rgba(18,24,41,.4));border:1px solid var(--line)}
.cc-avatar svg{width:23px;height:23px;color:var(--accent-lite)}
.cc-avatar .wave{position:absolute;inset:-1px;border-radius:13px;border:1px solid rgba(129,140,248,.5);opacity:0}
.crew-card.is-active .cc-avatar .wave{animation:nd-pw2 3s ease-out infinite}
@keyframes nd-pw2{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.3);opacity:0}}
.cc-name{font-family:var(--font-display);font-weight:600;font-size:1.18rem;color:var(--ink);line-height:1.1}
.cc-role{font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--ink-faint)}
.crew-card.is-active .cc-role{color:var(--accent-lite)}

/* Detail-Panel */
.crew-detail{position:sticky;top:90px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--shadow-lg);min-height:380px;overflow:hidden}
.cd-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.cd-avatar{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;flex:none;
  background:radial-gradient(ellipse at 32% 28%,var(--accent-lite),var(--accent-deep));box-shadow:0 0 28px var(--accent-glow)}
.cd-avatar svg{width:28px;height:28px;color:#fff}
.cd-name{font-family:var(--font-display);font-weight:600;font-size:1.6rem;line-height:1.05;color:var(--ink)}
.cd-role{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-lite);margin-top:.15rem}
.cd-job{color:var(--ink-soft);font-size:1rem;margin-bottom:1.1rem}
.cd-relieves{display:inline-flex;align-items:center;gap:.5em;font-size:.85rem;color:var(--ink-faint);margin-bottom:1.3rem}
.cd-relieves b{color:var(--ink-soft);font-weight:600}
.cd-relieves svg{width:1.05em;height:1.05em;color:var(--mint)}
.cd-usecase{background:rgba(0,0,0,.22);border:1px solid var(--line-soft);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1.3rem}
.cd-uc-k{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin-bottom:.4rem;display:block}
.cd-uc-t{color:var(--ink);font-size:.97rem}
.cd-steps-k{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.7rem;display:block}
.cd-steps{display:flex;flex-direction:column;gap:.5rem}
.cd-step{display:flex;align-items:flex-start;gap:.7rem;opacity:.35;transform:translateX(-4px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cd-step.lit{opacity:1;transform:none}
.cd-step .sn{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.78rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-lite))}
.cd-step.lit .sn{box-shadow:0 0 14px var(--accent-glow)}
.cd-step .stx{font-size:.92rem;color:var(--ink);padding-top:.15rem}
.cd-arrow{color:var(--ink-faint);margin-left:.5rem}

/* Crew-Foot / Erweiterbarkeit */
.fam-foot{text-align:center;margin-top:clamp(28px,4vw,44px);color:var(--ink-soft)}
.fam-foot .core-tag{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.02rem;max-width:60ch;text-align:left}
.fam-foot .core-tag .o{width:13px;height:13px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,var(--accent-lite),var(--accent-deep));box-shadow:0 0 12px var(--accent-glow)}

/* ============================================================
   ZEIT-PICKER — interaktiver Mini-ROI
   ============================================================ */
.picker{background:linear-gradient(180deg,var(--bg),#0E1422)}
.picker-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.picker-lead{font-size:1.08rem;color:var(--ink-soft);margin:.7rem 0 1.6rem;max-width:48ch}
.picker-list{display:flex;flex-direction:column;gap:.7rem}
.pick{display:flex;align-items:flex-start;gap:.9rem;padding:1rem 1.1rem;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.pick:hover{border-color:rgba(129,140,248,.4);transform:translateX(2px)}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick .box{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;margin-top:.1rem;transition:background .25s,border-color .25s}
.pick .box svg{width:15px;height:15px;color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease)}
.pick input:checked ~ .box{background:linear-gradient(135deg,var(--accent),var(--accent-lite));border-color:transparent}
.pick input:checked ~ .box svg{opacity:1;transform:none}
.pick input:focus-visible ~ .box{outline:2px solid var(--accent-lite);outline-offset:2px}
.pick .pl b{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink)}
.pick .pl small{display:block;color:var(--ink-faint);font-size:.86rem;margin-top:.1rem}
.pick:has(input:checked){border-color:var(--accent-lite);background:linear-gradient(150deg,var(--accent-soft),var(--surface-2))}

/* Ausgabe */
.picker-out{position:sticky;top:90px}
.po-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.po-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 60% at 50% 0%,var(--accent-glow),transparent 60%);opacity:.5}
.po-head{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;margin-bottom:1rem}
.po-k{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.po-live{display:inline-flex;align-items:center;gap:.4em;font-size:.74rem;font-weight:600;color:var(--mint)}
.po-live .d{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint-glow);animation:nd-live 2s ease-in-out infinite}
.po-hours{display:flex;align-items:baseline;gap:.5rem;position:relative;z-index:1}
.po-hours .num{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,7vw,4.2rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--accent-lite),var(--mint));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.po-hours .unit{font-family:var(--font-display);font-weight:600;color:var(--ink-soft);font-size:1rem}
.po-money{position:relative;z-index:1;color:var(--ink);font-size:1.05rem;margin-top:.5rem;font-weight:600}
.po-money #poMoney{color:var(--mint)}
.po-money .po-sub{display:block;font-weight:400;font-size:.82rem;color:var(--ink-faint);margin-top:.15rem}
.po-bar{position:relative;z-index:1;height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin:1.2rem 0}
.po-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--mint));transition:width .6s var(--ease)}
.po-agents-lbl{position:relative;z-index:1;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.6rem}
.po-agents{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.2rem}
.poa{font-size:.82rem;font-weight:600;color:var(--ink-faint);padding:.35em .8em;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);transition:color .3s,background .3s,border-color .3s,transform .3s var(--ease)}
.poa.lit{color:#fff;background:var(--accent-soft);border-color:rgba(129,140,248,.5);transform:translateY(-1px)}
.po-empty{position:relative;z-index:1;color:var(--ink-faint);font-size:.92rem;margin-bottom:1.2rem}
.po-cta{width:100%;justify-content:center;position:relative;z-index:1}
.po-foot{color:var(--ink-faint);font-size:.78rem;margin-top:.9rem;line-height:1.5}

/* Arbeitstage-Zeile */
.po-days{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5em;font-size:.92rem;color:var(--ink-soft);margin-top:.2rem}
.po-days svg{width:1.05em;height:1.05em;color:var(--accent-lite);flex:none}
.po-days b{font-family:var(--font-display);font-weight:700;color:var(--ink)}

/* Bürokräfte-Slider */
.po-staff{position:relative;z-index:1;margin:1.2rem 0 .2rem}
.po-staff-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.po-staff-lbl{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.po-staff-val{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink)}
.po-staff-val b{background:linear-gradient(100deg,var(--accent-lite),var(--mint));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:1.25rem}
.po-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,.08);outline:none;cursor:pointer}
.po-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(ellipse at 32% 28%,var(--accent-lite),var(--accent-deep));box-shadow:0 0 14px var(--accent-glow),0 2px 6px rgba(0,0,0,.4);border:2px solid #fff;cursor:pointer;transition:transform .15s var(--ease)}
.po-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.po-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:radial-gradient(ellipse at 32% 28%,var(--accent-lite),var(--accent-deep));box-shadow:0 0 14px var(--accent-glow);border:2px solid #fff;cursor:pointer}
.po-range::-moz-range-track{height:8px;border-radius:999px;background:rgba(255,255,255,.08)}
.po-range:focus-visible{outline:2px solid var(--accent-lite);outline-offset:4px}

/* ============================================================
   ARCHITEKTUR — Flowchart, Sandwich, Layers, Folders, Loop, Hub
   ============================================================ */
.arch{position:relative}
.arch .wrap{position:relative;z-index:1}

/* --- B1 Flowchart (3 Ebenen / Datenfluss) --- */
.flowchart{display:flex;flex-direction:column;align-items:center;gap:0;background:linear-gradient(180deg,var(--surface-2),rgba(255,255,255,.012));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,3rem) clamp(1.2rem,3vw,2.4rem);margin-bottom:clamp(2rem,4vw,3rem)}
.fc-row{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem}
.fc-node{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1rem 1.5rem;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);max-width:90%}
.fc-step{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.fc-desc{font-size:.86rem;color:var(--ink-soft);margin-top:.25rem;max-width:46ch}
.fc-node.goal{border-color:rgba(129,140,248,.4);background:linear-gradient(135deg,var(--accent-soft),var(--surface))}
.fc-node.goal .fc-step{color:var(--accent-lite)}
.fc-node.orch{border-color:rgba(129,140,248,.5);background:radial-gradient(120% 120% at 50% 0%,var(--accent-soft),var(--surface));padding:1.2rem 2rem}
.fc-node.orch .fc-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:.5rem;background:radial-gradient(ellipse at 32% 28%,var(--accent-lite),var(--accent-deep));box-shadow:0 0 24px var(--accent-glow)}
.fc-node.orch .fc-ic svg{width:22px;height:22px;color:#fff}
.fc-lbl{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink)}
.fc-lbl em{font-style:normal;font-weight:500;color:var(--accent-lite);font-size:.92rem}
.fc-node.result{flex-direction:row;align-items:center;gap:.7rem;border-color:rgba(52,211,153,.4);background:linear-gradient(135deg,var(--mint-soft),var(--surface))}
.fc-node.result svg{width:1.5em;height:1.5em;color:var(--mint);flex:none}
.fc-node.result .fc-step{color:var(--mint)}
.fc-node.result .fc-desc{text-align:left}

/* Konnektoren zwischen Reihen */
.fc-conn{height:clamp(26px,3.5vw,42px);display:flex;align-items:stretch;justify-content:center;position:relative}
.fc-conn span{width:2px;background:linear-gradient(180deg,var(--accent-lite),transparent);position:relative;overflow:hidden}
.fc-conn span::after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(180deg,transparent,var(--mint));animation:nd-down 1.8s linear infinite}
@keyframes nd-down{to{transform:translateY(360%)}}
.fc-conn.fan{width:100%;max-width:560px;gap:0}
.fc-conn.fan span:nth-child(1){transform:rotate(18deg)}
.fc-conn.fan span:nth-child(3){transform:rotate(-18deg)}
.fc-conn.fan span{margin:0 clamp(40px,12vw,120px)}

/* Agenten-Reihe (anklickbar) */
.fc-agents{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.fc-agent{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.05em;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .3s var(--ease),border-color .3s,background .3s,box-shadow .3s}
.fc-agent .d{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint-glow)}
.fc-agent:hover{transform:translateY(-3px);border-color:rgba(129,140,248,.5)}
.fc-agent.is-active{border-color:var(--accent-lite);background:var(--accent-soft);box-shadow:var(--shadow-accent)}
.fc-agents-cap{margin-top:.7rem}
.fc-agents-cap span{font-size:.85rem;color:var(--ink-faint)}
.fc-agents-cap em{font-style:normal;color:var(--accent-lite)}

/* Werkzeuge-Reihe */
.fc-tools{align-items:center;gap:.6rem}
.fc-tools-lbl{width:100%;text-align:center;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.3rem}
.fc-tool{display:inline-flex;align-items:center;gap:.45em;padding:.5em .9em;border-radius:10px;border:1px solid var(--line-soft);background:rgba(255,255,255,.03);color:var(--ink-soft);font-size:.88rem;font-weight:500}
.fc-tool svg{width:1.05em;height:1.05em;color:var(--accent-lite)}

/* --- B2 Sandwich --- */
.sandwich{margin-bottom:clamp(2rem,4vw,3rem)}
.sw-head{text-align:center;margin-bottom:clamp(1.4rem,3vw,2rem)}
.sw-head h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.6rem;max-width:24ch;margin-inline:auto}
.sw-head p{color:var(--ink-soft);max-width:60ch;margin-inline:auto}
.sw-layer{position:relative;border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.5rem;text-align:center}
.sw-layer.people{background:var(--surface-2);margin-bottom:34px}
.sw-layer.os{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border-color:transparent;box-shadow:var(--shadow-accent);padding:1.5rem;margin-bottom:34px}
.sw-layer.systems{background:var(--surface-2)}
.sw-lbl{display:block;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.8rem}
.sw-items{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.sw-chip{font-size:.86rem;font-weight:500;color:var(--ink-soft);padding:.4em .9em;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft)}
.sw-os-name{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:#fff;letter-spacing:-.01em}
.sw-os-name .dot{width:14px;height:14px;border-radius:5px;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.6)}
.sw-os-claim{display:block;color:rgba(255,255,255,.9);font-weight:500;margin-top:.4rem;letter-spacing:.02em}
.sw-flow{position:absolute;left:50%;transform:translateX(-50%);font-size:.78rem;font-weight:600;color:var(--accent-lite);background:var(--bg);padding:.2em .7em;border-radius:999px;border:1px solid var(--line)}
.sw-flow.down{bottom:-30px}
.sw-flow.up{top:-30px;color:var(--mint)}

/* --- B3/B4 Duo: Layers + (Folders + Loop) --- */
.arch-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;margin-bottom:clamp(2rem,4vw,3rem);align-items:stretch}
.arch-side{display:flex;flex-direction:column;gap:1.5rem}
.layers-card,.folders-card,.loop-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2rem)}
.layers-card .k,.folders-card .k,.loop-card .k{display:inline-flex;align-items:center;gap:.5em;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-lite);margin-bottom:.8rem}
.layers-card .k svg,.folders-card .k svg,.loop-card .k svg{width:1.1em;height:1.1em}
.layers-card h3,.folders-card h3,.loop-card h3{font-size:1.25rem;margin-bottom:.5rem}
.card-h{display:flex;align-items:center;gap:.5em}
.card-h svg{width:1.05em;height:1.05em;color:var(--accent-lite);flex:none}
.lc-sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.2rem}
.onion{display:flex;flex-direction:column;gap:.6rem}
.layer-row{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;padding:.85rem 1rem;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);cursor:pointer;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.layer-row:hover,.layer-row.is-on{border-color:rgba(129,140,248,.45);background:linear-gradient(135deg,var(--accent-soft),rgba(255,255,255,.02));transform:translateX(3px)}
.layer-row .ln{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.86rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-lite));transition:box-shadow .3s}
.layer-row.is-on .ln{box-shadow:0 0 16px var(--accent-glow)}
.layer-row .lt b{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink)}
.layer-row .lt span{display:block;color:var(--ink-soft);font-size:.86rem;margin-top:.1rem}

/* Folders */
.folders{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1rem}
.folder{display:flex;flex-direction:column;gap:.2rem;padding:1rem;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft)}
.folder .fic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-lite);margin-bottom:.4rem}
.folder .fic svg{width:18px;height:18px}
.folder b{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:.98rem}
.folder span{color:var(--ink-faint);font-size:.84rem}
.fcmd{color:var(--ink-soft);font-size:.94rem;margin-bottom:1rem}
.fcmd .cmd{font-family:var(--font-body);font-weight:600;color:var(--mint);background:var(--mint-soft);padding:.1em .5em;border-radius:6px}
.onprem{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;border-radius:12px;background:rgba(0,0,0,.2);border:1px solid var(--line-soft);color:var(--ink-soft);font-size:.88rem}
.onprem svg{width:1.4em;height:1.4em;color:var(--accent-lite);flex:none;margin-top:.1em}

/* Loop */
.loop{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.lp{font-family:var(--font-display);font-weight:600;font-size:.96rem;color:var(--ink-soft);padding:.55em 1em;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);transition:color .3s,background .3s,border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.lp.on{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-lite));border-color:transparent;box-shadow:0 0 20px var(--accent-glow);transform:translateY(-2px)}
.lp[data-i="3"].on{background:linear-gradient(135deg,var(--mint),#10B981);box-shadow:0 0 20px var(--mint-glow)}
.lp-arrow{color:var(--ink-faint);font-size:1.1rem}
.loop-sub{color:var(--ink-soft);font-size:.92rem;text-align:center}
.loop-sub b{color:var(--ink)}

/* --- B5 Integrations-Hub --- */
.hubsec{background:linear-gradient(160deg,var(--surface-2),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,3rem)}
.hub-head{text-align:center;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.hub-head h3{font-size:clamp(1.4rem,2.8vw,2rem);margin:.6rem 0 .6rem;max-width:26ch;margin-inline:auto}
.hub-head p{color:var(--ink-soft);max-width:60ch;margin-inline:auto}
.hub{position:relative;width:min(560px,90vw);aspect-ratio:1;margin:0 auto}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-lines .hl path{fill:none;stroke:var(--accent-lite);stroke-width:1.6;opacity:.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.hub.drawn .hub-lines .hl path{stroke-dashoffset:0}
.hub-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;z-index:3;
  background:radial-gradient(ellipse at 34% 30%,var(--accent-lite),var(--accent) 50%,var(--accent-deep));box-shadow:0 0 50px var(--accent-glow),0 0 110px var(--accent-glow)}
.hub-core .hc-lbl{font-family:var(--font-display);font-weight:700;color:#fff;font-size:clamp(.8rem,1.7vw,1.05rem);z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.hub-core .hc-pulse{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.4);animation:nd-hubpulse 3s ease-out infinite}
@keyframes nd-hubpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.2);opacity:0}}
.hub-node{position:absolute;display:inline-flex;align-items:center;gap:.45em;padding:.5em .85em;border-radius:11px;background:var(--surface-glass);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:var(--shadow);font-family:var(--font-display);font-weight:600;font-size:.84rem;color:var(--ink);white-space:nowrap;transform:translate(-50%,-50%);opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hub-node svg{width:1.05em;height:1.05em;color:var(--accent-lite)}
.hub.drawn .hub-node{opacity:1}
.hub-node.n1{top:15%;left:50%}
.hub-node.n2{top:29%;left:85%}
.hub-node.n3{top:71%;left:85%}
.hub-node.n4{top:85%;left:50%}
.hub-node.n5{top:71%;left:15%}
.hub-node.n6{top:29%;left:15%}

/* ============================================================
   USE-CASES — Ergebnis-Karten + Handwerks-Liste
   ============================================================ */
.cases .case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.case-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.case-card:hover{transform:translateY(-4px);border-color:rgba(129,140,248,.4);box-shadow:var(--shadow-lg)}
.case-card.big{grid-row:span 2;grid-column:1}
.case-photo{position:relative;overflow:hidden}
.case-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.case-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,15,26,.5));pointer-events:none}
.case-body{padding:clamp(1.4rem,2.5vw,1.9rem);display:flex;flex-direction:column;gap:.5rem;flex:1}
.case-branch{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-lite)}
.case-card h3{font-size:1.18rem;line-height:1.25}
.case-card.big h3{font-size:1.4rem}
.case-card p{color:var(--ink-soft);font-size:.94rem}
.case-metric{margin-top:auto;padding-top:1rem;display:flex;flex-direction:column;gap:.1rem;border-top:1px solid var(--line-soft)}
.cm-num{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--accent-lite),var(--mint));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.05}
.cm-lbl{font-size:.84rem;color:var(--ink-faint)}
.case-card.big .case-body{position:relative}

/* Handwerks-Liste */
.case-list{margin-top:1.4rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2rem)}
.cl-head{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.1rem;text-align:center}
.cl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.6rem}
.cl-item{display:flex;align-items:flex-start;gap:.6em;color:var(--ink-soft);font-size:.96rem}
.cl-item svg{width:1.15em;height:1.15em;color:var(--mint);flex:none;margin-top:.18em}

/* ============================================================
   „EIN TAG IM BETRIEB" — Live-Feed (Zeilen erscheinen nacheinander)
   ============================================================ */
.dayfeed{margin-top:clamp(28px,4vw,44px);background:linear-gradient(160deg,var(--surface-2),rgba(255,255,255,.012));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2.2rem);max-width:780px;margin-inline:auto;position:relative;overflow:hidden}
.dayfeed::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 50% 0%,var(--accent-glow),transparent 60%);opacity:.3}
.df-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.df-title{display:flex;align-items:center;gap:.6em}
.df-title .df-k{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.df-title svg{width:1.2em;height:1.2em;color:var(--accent-lite)}
.df-live{display:inline-flex;align-items:center;gap:.4em;font-size:.74rem;font-weight:600;color:var(--mint);letter-spacing:.04em}
.df-live .d{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint-glow);animation:nd-live 2s ease-in-out infinite}
.df-list{position:relative;z-index:1;display:flex;flex-direction:column}
.df-row{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.df-row:last-child{border-bottom:none}
.df-row.on{opacity:1;transform:none}
.df-time{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--accent-lite);font-variant-numeric:tabular-nums;min-width:4.2em}
.df-who{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--ink);padding:.25em .7em;border-radius:999px;background:var(--accent-soft);border:1px solid rgba(129,140,248,.35);white-space:nowrap}
.df-who .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint-glow);flex:none}
.df-task{color:var(--ink-soft);font-size:.95rem}
.df-task b{color:var(--ink);font-weight:600}
.df-foot{position:relative;z-index:1;margin-top:1.1rem;display:flex;align-items:center;gap:.5em;font-size:.88rem;color:var(--ink-soft)}
.df-foot svg{width:1.1em;height:1.1em;color:var(--mint);flex:none}

/* ============================================================
   CTA-Band (schlanke Wiederhol-CTAs nach Sektionen)
   ============================================================ */
.cta-band{margin-top:clamp(30px,4vw,48px)}
.cta-band .cb-inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(79,70,229,.14),var(--surface-2));border:1px solid rgba(129,140,248,.3);
  border-radius:var(--radius-lg);padding:clamp(1.2rem,3vw,1.8rem) clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-accent)}
.cta-band.mint .cb-inner{background:linear-gradient(135deg,var(--mint-soft),var(--surface-2));border-color:rgba(52,211,153,.32);box-shadow:0 24px 70px -30px var(--mint-glow)}
.cb-txt{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.cb-txt b{font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--ink);letter-spacing:-.01em}
.cb-txt span{color:var(--ink-soft);font-size:.95rem}
.cb-actions{display:flex;gap:.7rem;flex-wrap:wrap;flex:none}

/* ============================================================
   PREIS / ROI
   ============================================================ */
.pricing{background:linear-gradient(180deg,var(--bg),#0E1422)}
.price-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.5rem;align-items:stretch}
.price-main{position:relative;background:linear-gradient(160deg,rgba(79,70,229,.16),var(--surface));border:1px solid rgba(129,140,248,.35);border-radius:var(--radius-lg);padding:clamp(1.8rem,4vw,2.6rem);box-shadow:var(--shadow-accent);overflow:hidden}
.price-main::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 80% 0%,var(--accent-glow),transparent 60%);opacity:.6}
.pm-tag{position:relative;z-index:1;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-lite)}
.pm-amount{position:relative;z-index:1;font-family:var(--font-display);font-weight:600;font-size:1.4rem;color:var(--ink-soft);margin:.4rem 0 .1rem;display:flex;align-items:baseline;gap:.4rem}
.pm-amount span{font-weight:700;font-size:clamp(2.8rem,6vw,4rem);letter-spacing:-.03em;color:var(--ink);
  background:linear-gradient(100deg,var(--accent-lite),var(--mint));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pm-note{position:relative;z-index:1;color:var(--ink-faint);font-size:.92rem;margin-bottom:1.4rem}
.pm-list{position:relative;z-index:1;list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.5rem}
.pm-list li{display:flex;align-items:flex-start;gap:.6em;color:var(--ink-soft);font-size:.96rem}
.pm-list svg{width:1.15em;height:1.15em;color:var(--mint);flex:none;margin-top:.18em}
.pm-extra{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.6rem}
.pm-extra .pe{flex:1;min-width:180px;display:flex;flex-direction:column;gap:.1rem;padding:.9rem 1rem;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);font-size:.86rem;color:var(--ink-faint)}
.pm-extra .pe b{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1rem}
.price-main .btn{position:relative;z-index:1}

.price-roi{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column}
.price-roi .k{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.2rem}
.roi-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.3rem}
.rstat{display:flex;flex-direction:column;gap:.1rem;padding:1rem;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft)}
.rstat .rn{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink)}
.rstat:nth-child(1) .rn,.rstat:nth-child(2) .rn{background:linear-gradient(100deg,var(--accent-lite),var(--mint));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rstat .rl{font-size:.8rem;color:var(--ink-faint)}
.roi-note{color:var(--ink-soft);font-size:.9rem;margin-bottom:1.3rem}
.roi-cta{margin-top:auto;justify-content:center;width:100%}

/* ============================================================
   UNTER DER HAUBE — aufklappbarer Tech-Stack
   ============================================================ */
.hood-wrap{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.hood-wrap summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1.3rem,3vw,1.8rem)}
.hood-wrap summary::-webkit-details-marker{display:none}
.hood-left{display:flex;align-items:center;gap:1rem}
.hood-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent-lite)}
.hood-ic svg{width:24px;height:24px}
.hood-txt b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--ink)}
.hood-txt small{color:var(--ink-soft);font-size:.9rem}
.hood-chev{color:var(--accent-lite);transition:transform .35s var(--ease);flex:none}
.hood-chev svg{width:1.6em;height:1.6em;display:block}
.hood-wrap[open] .hood-chev{transform:rotate(180deg)}
.hood-body{padding:0 clamp(1.3rem,3vw,1.8rem) clamp(1.5rem,3vw,2rem)}
.hood-lead{color:var(--ink-soft);font-size:.98rem;margin-bottom:1.4rem;max-width:75ch}
.hood-lead b{color:var(--ink)}.hood-lead em{color:var(--accent-lite);font-style:normal}
.hood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.hood-cat{padding:1.1rem;border-radius:14px;background:rgba(0,0,0,.2);border:1px solid var(--line-soft)}
.hc-k{display:block;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink);margin-bottom:.7rem}
.hc-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.hc-tags span{font-size:.8rem;font-weight:500;color:var(--ink-soft);padding:.3em .7em;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft)}

/* ============================================================
   SICHERHEIT / EU-HOSTING TRUST-BAND
   ============================================================ */
.trust{position:relative;overflow:hidden;background:linear-gradient(160deg,#121829,#0B0F1A)}
.trust::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 80% 0%,var(--mint-soft),transparent 60%);opacity:.6}
.trust .wrap{position:relative;z-index:1}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:clamp(28px,3vw,40px)}
.tcard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;transition:transform .3s var(--ease),border-color .3s}
.tcard:hover{transform:translateY(-3px);border-color:rgba(52,211,153,.35)}
.tcard .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--mint-soft);color:var(--mint);margin-bottom:1rem}
.tcard .ic svg{width:21px;height:21px}
.tcard h3{font-size:1.1rem;margin-bottom:.4rem}
.tcard p{color:var(--ink-soft);font-size:.92rem}
.trust-note{margin-top:clamp(28px,3vw,40px);display:flex;flex-wrap:wrap;gap:1.6rem;color:var(--ink-soft);font-size:.92rem}
.trust-note span{display:flex;align-items:center;gap:.5em}
.trust-note svg{width:1.1em;height:1.1em;color:var(--mint);flex:none}

/* ============================================================
   NACHTS / DOGFOOD-BAND
   ============================================================ */
.night{position:relative;overflow:hidden;text-align:center}
.night-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.night-bg img{width:100%;height:100%;object-fit:cover;opacity:.32;
  mask-image:radial-gradient(110% 90% at 50% 50%,#000 20%,transparent 85%);
  -webkit-mask-image:radial-gradient(110% 90% at 50% 50%,#000 20%,transparent 85%)}
.night::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 70% at 50% 50%,var(--accent-glow),transparent 60%);opacity:.4}
.night-inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
.night-inner h2{font-size:clamp(2.1rem,4.4vw,3.2rem);margin:.7rem 0 1rem}
.night-inner p{color:var(--ink-soft);font-size:1.12rem;max-width:56ch;margin:0 auto 2rem}
.night-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px;margin-inline:auto}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:1.3rem 2.5rem 1.3rem 0;font-family:var(--font-display);font-weight:600;font-size:1.14rem;position:relative;transition:color .2s;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-size:1.7rem;color:var(--accent-lite);transition:transform .3s var(--ease);font-family:var(--font-body)}
.qa[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.qa summary:hover{color:var(--accent-lite)}
.qa .a{padding:0 2.5rem 1.4rem 0;color:var(--ink-soft);font-size:1rem}

/* ---------- Footer ---------- */
.site-foot{background:#0A0E18;border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
.foot-brand .brand{margin-bottom:1rem}
.foot-brand p{color:var(--ink-soft);font-size:.95rem;max-width:38ch}
.foot-col h4{font-family:var(--font-body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1rem;font-weight:600}
.foot-col a,.foot-col span{display:block;color:var(--ink-soft);font-size:.95rem;margin-bottom:.6rem;transition:color .2s}
.foot-col a:hover{color:var(--accent-lite)}
.foot-bottom{border-top:1px solid var(--line);padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.87rem;color:var(--ink-faint)}
.foot-bottom .nd{color:var(--ink-soft)}
.foot-bottom .nd a{color:var(--accent-lite);font-weight:600}

/* ---------- Legal ---------- */
.legal-page{padding-top:72px}
.legal-page .site-head{background:rgba(11,15,26,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.legal-hero{padding:clamp(40px,6vw,72px) 0 1rem}
.legal-hero h1{font-size:clamp(2rem,4vw,3rem)}
.legal-hero p{color:var(--ink-soft);margin-top:.6rem}
.legal-body{max-width:820px;padding-bottom:clamp(56px,8vw,100px)}
.legal-body h2{font-size:1.5rem;margin:2.4rem 0 .8rem;color:var(--ink)}
.legal-body h3{font-family:var(--font-body);font-weight:700;font-size:1.08rem;margin:1.6rem 0 .4rem;color:var(--ink)}
.legal-body p,.legal-body li{color:var(--ink-soft);margin-bottom:.8rem}
.legal-body ul,.legal-body ol{padding-left:1.3rem;margin-bottom:1rem}
.legal-body strong{color:var(--ink)}
.legal-body a{color:var(--accent-lite);text-decoration:underline;text-underline-offset:2px}
.legal-note{background:var(--accent-soft);border:1px solid rgba(129,140,248,.3);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.5rem 0;font-size:.95rem;color:var(--ink)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:980px){
  .idea-split{grid-template-columns:1fr;gap:2rem}
  .crew-layout{grid-template-columns:1fr;gap:1.4rem}
  .crew-detail{position:static}
  .picker-grid{grid-template-columns:1fr;gap:2rem}
  .picker-out{position:static}
  .arch-duo{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .hood-grid{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .cta-band .cb-inner{flex-direction:column;align-items:flex-start}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .burger{display:grid;place-items:center;margin-left:.5rem}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:rgba(11,15,26,.98);backdrop-filter:blur(20px);padding:1.5rem;gap:1.2rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg)}
  .nav-links.open a{color:var(--ink)}
  .polier-card{grid-template-columns:auto 1fr;grid-template-areas:"b body" "flow flow";row-gap:1.2rem}
  .polier-badge{grid-area:b}.polier-body{grid-area:body}.polier-flow{grid-area:flow;flex-direction:row;justify-content:center}
  .pf-arrow{transform:rotate(0)}
  .cases .case-grid{grid-template-columns:1fr}
  .case-card.big{grid-row:auto;grid-column:auto}
}
@media(max-width:600px){
  .crew-grid{grid-template-columns:1fr 1fr}
  .roi-stats{grid-template-columns:1fr 1fr}
  .hood-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .cl-grid{grid-template-columns:1fr}
  .folders{grid-template-columns:1fr}
  .pm-extra .pe{min-width:0}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column}
  .nav-cta .btn .lbl{display:none}
  .nav-cta .btn{gap:0;padding:.7em}
  .wave-switch{width:100%;left:0;transform:none;justify-content:space-between}
  .wave-tab{flex:1;padding:.6rem .4rem;align-items:center;text-align:center}
  .wave-tab .wl{font-size:.92rem}
  .sw-os-name{font-size:1.3rem}
  /* Orbit auf Mobil: Chips kleiner */
  .moon .chip{padding:.32em .55em}
  .moon .chip .nm{font-size:.74rem}
  .moon .chip .ic{width:22px;height:22px}
  /* Hub-Nodes näher heranziehen */
  .hub-node{font-size:.74rem;padding:.4em .6em}
}
@media(max-width:420px){
  .crew-grid{grid-template-columns:1fr 1fr}
  .hub-node.n2,.hub-node.n3{left:82%}
  .hub-node.n5,.hub-node.n6{left:18%}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .orbit .spin{transform:translate(-50%,-50%)}
  .hub .hub-lines .hl path{stroke-dashoffset:0}
  .hub .hub-node{opacity:1}
  .wave-panel{transition:none}
  .cd-step{opacity:1;transform:none}
  .df-row{opacity:1;transform:none}
}