/* ============================================================
   AintDumb — Marketing-Website · Design-System
   Reines CSS, zero JS. Tokens/Stil 1:1 aus dem Prototyp
   (_prototype/AintDumb _standalone_.html). Inhalt: siehe KONZEPT-VERIFIKATION.md
   ============================================================ */

/* ===== FONTS (Geist / Geist Mono, selbst gehostet, Variable) ===== */
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/fonts/Geist-latin.woff2") format('woff2');
  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';font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/fonts/Geist-latinext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/assets/fonts/GeistMono-latin.woff2") format('woff2');
  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';font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/assets/fonts/GeistMono-latinext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ===== TOKENS ===== */
*,*::before,*::after{box-sizing:border-box}
:root{
  /* Anthracite base */
  --bg:#0B0F17; --bg-1:#10151F; --bg-2:#161C29; --bg-3:#1D2431;
  --surface:#0E131C; --surface-2:#141A26;
  --line:rgba(255,255,255,0.06); --line-2:rgba(255,255,255,0.10); --line-3:rgba(255,255,255,0.16);
  /* Text */
  --fg:#F2F4F8; --fg-1:#C7CCD6; --fg-2:#8A92A2; --fg-3:#838B9C; /* fg-3 angehoben für WCAG-AA-Kontrast */
  /* Modern blue */
  --blue:#2864F0; --blue-2:#4F86FF; --blue-3:#7BA4FF; /* blue leicht abgedunkelt: Weiß-auf-Blau ≥4.5:1 */
  --blue-soft:rgba(45,108,255,0.12); --blue-glow:rgba(45,108,255,0.35);
  --cyan:#5EE2FF;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',monospace;
}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
body{overflow-x:hidden;background-image:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(45,108,255,0.18), transparent 60%), radial-gradient(ellipse 60% 40% at 90% 10%, rgba(94,226,255,0.06), transparent 60%);background-repeat:no-repeat}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:4px}

.wrap{max-width:1600px;margin:0 auto;padding:0 40px;position:relative}
.section{padding:100px 0;position:relative}
/* Einheitlicher, dezent leuchtender Sektions-Trenner für klaren Rhythmus */
main > section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 64px));height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.13),transparent);pointer-events:none}
main > section.trust::before{display:none}
@media (max-width:780px){.section{padding:72px 0}}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip-link:focus{left:16px;top:12px}

/* ===== TYPE ===== */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue-3);display:inline-flex;align-items:center;gap:10px;margin-bottom:24px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--blue);box-shadow:0 0 10px var(--blue-glow)}

h1.h1{font-family:var(--sans);font-weight:600;font-size:clamp(36px,5vw,78px);line-height:1.04;letter-spacing:-0.035em;margin:0 0 26px;color:var(--fg)}
h1.h1 .grad{background:linear-gradient(135deg,#fff 0%,var(--blue-3) 50%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h1.h1 .blue{color:var(--blue-2)}

h2.h2{font-family:var(--sans);font-weight:600;font-size:clamp(36px,4.4vw,60px);line-height:1.08;letter-spacing:-0.028em;margin:0 0 24px;max-width:1180px;color:var(--fg)}
h2.h2 .blue{color:var(--blue-2)}
h2.h2 .grad{background:linear-gradient(120deg,var(--fg) 0%,var(--blue-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

h3{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:-0.015em;margin:0 0 12px;line-height:1.3;color:var(--fg)}
h1,h2,h3,.h1,.h2{text-wrap:balance;overflow-wrap:break-word}
.lede,.lede-2,.callout p,.pillar p,.step p,.limit p{text-wrap:pretty}

.lede{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--fg-1);max-width:600px;margin:0 0 36px;font-weight:400}
.lede-2{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--fg-1);max-width:720px;margin:0 0 40px;font-weight:400}

/* ===== NAV ===== */
nav.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);background:rgba(11,15,23,0.7);border-bottom:1px solid var(--line)}
nav.top .row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-0.02em}
.logo-mark{width:32px;height:32px;border-radius:8px;background:#0E131C;border:1px solid rgba(255,255,255,0.10);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 16px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,0.06)}
.logo-mark svg{display:block}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--fg-2);font-weight:400}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a:hover{color:var(--fg)}
.nav-right{display:flex;align-items:center;gap:14px}

/* zero-JS Mobile-Menü via <details> */
.nav-mobile{display:none;position:relative}
.nav-mobile summary{list-style:none;cursor:pointer;width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--fg-1);background:rgba(255,255,255,0.04)}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile .nav-menu{position:absolute;right:0;top:calc(100% + 12px);min-width:220px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:2px;box-shadow:0 30px 60px -20px rgba(0,0,0,0.6)}
.nav-mobile .nav-menu a{padding:11px 14px;border-radius:8px;color:var(--fg-1);font-size:15px}
.nav-mobile .nav-menu a:hover{background:rgba(255,255,255,0.05);color:var(--fg)}
@media (max-width:920px){.nav-links{display:none}.nav-mobile{display:block}.nav-right .btn{display:none}}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;font-family:var(--sans);font-weight:500;font-size:14px;border-radius:10px;cursor:pointer;transition:all .2s ease;letter-spacing:-0.005em;border:1px solid transparent;white-space:nowrap}
.btn.primary{background:linear-gradient(135deg,#2864F0 0%,#3F78FF 55%,#2D6CFF 100%);color:#fff;position:relative;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 8px 26px -8px var(--blue-glow),0 0 22px -9px rgba(94,226,255,.5)}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.28) 48%,transparent 64%);transform:translateX(-130%)}
.btn.primary:hover{box-shadow:0 1px 0 rgba(255,255,255,0.26) inset,0 14px 36px -8px var(--blue-glow),0 0 30px -6px rgba(94,226,255,.65);transform:translateY(-1px)}
.btn.primary:hover::after{animation:btnSheen .85s ease}
@keyframes btnSheen{to{transform:translateX(130%)}}
.btn.ghost{background:rgba(255,255,255,0.04);color:var(--fg);border-color:var(--line-2)}
.btn.ghost:hover{background:rgba(255,255,255,0.08);border-color:var(--line-3)}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
.btn.lg{padding:14px 24px;font-size:14.5px;border-radius:12px}

/* ===== HERO ===== */
.hero{padding:96px 0 80px;position:relative}
/* 2-Spalten-Hero: Text links, wachsender Projektbaum rechts */
.hero-top{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
@media (max-width:1000px){.hero-top{grid-template-columns:1fr;gap:24px}}
.hero-text{min-width:0}
.hero-tree{min-width:0;position:relative}
.hero-tree .tree-fig{width:100%;max-width:440px;margin:0 auto}
.hero-tree .pt-card{max-width:480px;margin:0 auto}
@media (max-width:1000px){.hero-tree{margin-top:6px}}
@media (max-width:420px){.hero-tree .pt-card{padding:16px 12px 12px}}
.hero-cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero-film{display:inline-flex;align-items:center;gap:7px;margin:16px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--fg-3);text-decoration:none;transition:color .2s}
.hero-film:hover{color:var(--cyan)}
.hero .lede{margin-bottom:30px}
.hero-fineprint{font-size:13.5px;line-height:1.55;color:var(--fg-2);max-width:560px;margin:18px 0 0}
.hero-fineprint strong{color:var(--fg-1);font-weight:600}
.hero .meta{display:flex;gap:24px;align-items:center;margin-top:48px;padding-top:28px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-2);flex-wrap:wrap}
.hero .meta .item{display:flex;align-items:center;gap:8px}
.hero .meta .dot{width:6px;height:6px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 8px var(--blue-glow)}

.hero-figure{margin-top:80px;position:relative;border:1px solid var(--line-2);border-radius:18px;background:linear-gradient(180deg,var(--surface-2),var(--surface));padding:1px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.02) inset}
.hero-figure::before{content:"";position:absolute;inset:-1px;border-radius:18px;pointer-events:none;background:linear-gradient(135deg,rgba(45,108,255,0.4),transparent 30%,transparent 70%,rgba(94,226,255,0.2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;opacity:0.7}
.hero-figure-inner{position:relative;border-radius:17px;background:var(--bg-1);background-image:linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px);background-size:48px 48px;padding:32px}
.hf-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:24px;align-items:center;min-height:340px}
@media (max-width:880px){.hf-grid{grid-template-columns:1fr;gap:18px;min-height:auto}}
.hf-col{display:flex;flex-direction:column;gap:10px}
.hf-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,transform .2s}
.hf-card:hover{border-color:var(--line-3);transform:translateY(-1px)}
.hf-card .lbl{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:6px}
.hf-card .lbl::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 6px var(--blue-glow)}
.hf-card .val{font-size:14px;color:var(--fg);font-weight:400;line-height:1.35}
.hf-out{background:linear-gradient(135deg,rgba(45,108,255,0.12),rgba(45,108,255,0.04));border:1px solid rgba(45,108,255,0.3)}
.hf-out .lbl{color:var(--blue-3)}
.hf-out .lbl::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.hf-out.alt{background:linear-gradient(135deg,rgba(94,226,255,0.10),rgba(94,226,255,0.02));border-color:rgba(94,226,255,0.25)}
.hf-out.alt .lbl{color:var(--cyan)}
.hf-core{justify-self:center;align-self:center;position:relative;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2A3550,#0E131C 70%);display:grid;place-items:center;box-shadow:0 0 60px var(--blue-glow),0 30px 80px -20px rgba(0,0,0,0.5),inset 0 0 0 1px rgba(255,255,255,0.06),inset 0 -40px 60px rgba(45,108,255,0.18)}
.hf-core::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(45,108,255,0.25);animation:rot 18s linear infinite}
.hf-core::after{content:"";position:absolute;inset:-44px;border-radius:50%;border:1px dashed rgba(255,255,255,0.06);animation:rot 30s linear infinite reverse}
@keyframes rot{to{transform:rotate(360deg)}}
.hf-core-inner{text-align:center;display:flex;flex-direction:column;gap:6px;z-index:2}
.hf-core-inner .num{font-weight:600;font-size:32px;letter-spacing:-0.04em;background:linear-gradient(180deg,#fff,var(--blue-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hf-core-inner .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--fg-2)}
.hf-pulse{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:0.3;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}

/* ===== TRUST-STRIP ===== */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-1)}
.trust .row{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:center;align-items:center;padding:22px 0}
.trust .ti{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--fg-2);font-weight:400}
.trust .ti::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 8px var(--blue-glow);flex:0 0 auto}

/* ===== STORY / CALLOUTS ===== */
.story{background:var(--bg-1)}
.callouts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media (max-width:880px){.callouts{grid-template-columns:1fr}}
.callout{border:1px solid var(--line-2);border-radius:14px;padding:24px;background:var(--surface);display:flex;flex-direction:column;gap:10px;transition:border-color .2s,background .2s;position:relative;overflow:hidden}
.callout:hover{border-color:rgba(45,108,255,0.3);background:var(--surface-2)}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--blue),transparent);opacity:0.6}
.callout .num{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--blue-3);font-weight:500}
.callout h3{font-family:var(--sans);font-size:18px;margin:0;font-weight:600;line-height:1.35;letter-spacing:-0.012em;color:var(--fg)}
.callout p{font-size:14.5px;color:var(--fg-2);line-height:1.6;margin:0}

/* ===== STEPS ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
@media (max-width:880px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:28px 28px 30px;display:flex;flex-direction:column;gap:14px;min-height:280px;transition:all .25s ease;position:relative;overflow:hidden}
.step:hover{border-color:rgba(45,108,255,0.3);transform:translateY(-2px);box-shadow:0 20px 40px -20px rgba(0,0,0,0.4)}
.step-row{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:4px}
.step-num{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue),#1A4DCC);display:grid;place-items:center;font-weight:600;font-size:15px;color:#fff;box-shadow:0 4px 14px -4px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,0.18)}
.step-tag{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-3)}
.step h3{font-size:21px;margin:0;line-height:1.3;letter-spacing:-0.015em;font-weight:600;color:var(--fg)}
.step p{font-size:14.5px;line-height:1.6;color:var(--fg-2);margin:0}

/* ===== APPS / EXAMPLES ===== */
.apps{background:var(--bg-1)}
.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
@media (max-width:1080px){.apps-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.apps-grid{grid-template-columns:1fr}}
.acard{border:1px solid var(--line-2);border-radius:16px;padding:24px;background:var(--surface);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:all .3s ease;min-height:200px}
.acard:hover{border-color:rgba(45,108,255,0.35);background:var(--surface-2);transform:translateY(-3px)}
.acard::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(45,108,255,0.10),transparent 50%);opacity:0;transition:opacity .3s;pointer-events:none}
.acard:hover::after{opacity:1}
.acard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.acard-kind{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;padding:4px 8px;border-radius:4px;font-weight:500}
.kind-app{color:var(--blue-3);background:rgba(45,108,255,0.10);border:1px solid rgba(45,108,255,0.20)}
.kind-flow{color:var(--cyan);background:rgba(94,226,255,0.08);border:1px solid rgba(94,226,255,0.20)}
.kind-agent{color:#FFB86B;background:rgba(255,184,107,0.06);border:1px solid rgba(255,184,107,0.20)}
.acard h3{font-size:19px;letter-spacing:-0.018em;line-height:1.3;font-weight:600;color:var(--fg);margin:0}
.acard .dept{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 4px}
.acard p{font-size:14px;color:var(--fg-2);line-height:1.55;margin:0}

/* ===== MODELS ===== */
.prov-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.prov{padding:8px 14px;border:1px solid var(--line-2);border-radius:8px;font-family:var(--mono);font-size:12.5px;color:var(--fg-1);background:var(--surface);letter-spacing:0.02em;display:inline-flex;align-items:center;gap:8px}
.prov .ok{color:var(--cyan)}
.prov-ghost{border-style:dashed;color:var(--fg-3)}
.note{font-size:14px;color:var(--fg-2);line-height:1.65;max-width:680px;margin:20px 0 0;padding:16px 18px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface)}
.note strong{color:var(--fg-1);font-weight:500}
/* Lösungen: Fakten-Strip + Karten-Link + Use-Case-Detail (konkret, geschäftlich) */
.fact-strip{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:-12px 0 36px;padding:0}
.fact-strip li{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--fg-2);padding:7px 13px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface)}
.fact-strip li strong{color:var(--fg);font-weight:600}
.acard-link{margin-top:auto;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--cyan);text-decoration:none;font-weight:500}
.acard-link:hover{text-decoration:underline}
.uc-list{margin-top:56px;display:flex;flex-direction:column;gap:22px}
.uc-list-h{font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--fg);margin:0 0 6px}
.uc{border:1px solid var(--line-2);border-radius:16px;padding:28px;background:var(--surface);scroll-margin-top:90px}
.uc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.uc-top h4{font-size:20px;font-weight:600;letter-spacing:-0.018em;color:var(--fg);margin:0;line-height:1.25}
.uc-line{font-size:15px;line-height:1.6;color:var(--fg-2);margin:0 0 10px;max-width:880px}
.uc-line strong{color:var(--fg);font-weight:600}
.uc-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;margin:18px 0}
@media (max-width:760px){.uc-grid{grid-template-columns:1fr;gap:16px}}
.uc-grid h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 10px}
.uc-flow{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.uc-flow li,.uc-needs li{font-size:14px;line-height:1.5;color:var(--fg-2)}
.uc-needs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.uc-needs li{position:relative;padding-left:20px}
.uc-needs li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.uc-meta{display:grid;grid-template-columns:1fr 1fr;margin:6px 0 4px;border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
@media (max-width:680px){.uc-meta{grid-template-columns:1fr}}
.uc-meta>div{padding:14px 16px;background:var(--surface-2)}
.uc-meta>div+div{border-left:1px solid var(--line-2)}
@media (max-width:680px){.uc-meta>div+div{border-left:0;border-top:1px solid var(--line-2)}}
.uc-meta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 5px}
.uc-meta dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--fg-2)}
.uc-grenzen{margin:14px 0 18px}
.uc-grenzen summary{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);cursor:pointer;padding:6px 0}
.uc-grenzen ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.uc-grenzen li{font-size:13.5px;color:var(--fg-2);line-height:1.5}

/* ===== PRICE ===== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media (max-width:880px){.price-grid{grid-template-columns:1fr}}
.price-card{border:1px solid var(--line-2);border-radius:18px;padding:30px 28px;background:var(--surface);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:all .25s ease}
.price-card:hover{border-color:rgba(45,108,255,0.3);background:var(--surface-2)}
.price-card.featured{border-color:rgba(45,108,255,0.45);box-shadow:0 30px 70px -30px var(--blue-glow)}
.price-card .tier{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue-3);font-weight:500}
.price-card .amt{font-size:42px;font-weight:600;letter-spacing:-0.03em;color:var(--fg);line-height:1}
.price-card .amt small{font-size:14px;font-weight:400;color:var(--fg-2);letter-spacing:0}
.price-card .sub{font-size:14px;color:var(--fg-2);line-height:1.5;margin:0 0 8px}
.price-card .feat{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.price-card .feat li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--fg-1);line-height:1.45}
.price-card .feat .ck{flex:0 0 auto;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--blue),#1A4DCC);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:600;margin-top:1px;box-shadow:0 2px 6px -2px var(--blue-glow)}
.price-foot{margin-top:36px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--fg-3);letter-spacing:0.04em}
.price-table{min-width:540px}
.price-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fg-1)}
.price-table thead th.num{text-align:right}
.price-table tbody tr.pop{background:linear-gradient(135deg,rgba(45,108,255,0.10),rgba(45,108,255,0.02))}
.price-table tbody tr.pop .way{color:var(--blue-2);font-weight:600}
.price-table tbody tr.pop td{color:var(--fg)}
.pop-tag{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#fff;padding:2px 8px;border-radius:999px;background:var(--blue);vertical-align:middle}
.mult-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.mult{padding:8px 14px;border:1px solid var(--line-2);border-radius:8px;font-family:var(--mono);font-size:12.5px;color:var(--fg-1);background:var(--surface);letter-spacing:0.01em}
.mult b{color:var(--blue-2);font-weight:600}

/* ===== FINAL ===== */
.final{padding:140px 0;text-align:center;border-top:1px solid var(--line);position:relative;overflow:hidden}
@media (max-width:780px){.final{padding:96px 0}}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(45,108,255,0.10),transparent 70%);pointer-events:none}
.final .wrap{position:relative}
.final h2{font-size:clamp(40px,5.4vw,76px);line-height:1.05;letter-spacing:-0.03em;margin:0 auto 24px;max-width:880px;font-weight:600}
.final h2 .grad{background:linear-gradient(120deg,var(--fg) 0%,var(--blue-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.final p{font-size:17px;color:var(--fg-1);max-width:560px;margin:0 auto 36px;line-height:1.6}
.final .hero-cta-row{justify-content:center}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line);padding:40px 0;background:var(--bg-1)}
footer .row{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--fg-2)}
footer a:hover{color:var(--fg)}
footer .links{display:flex;gap:24px;flex-wrap:wrap}
footer .copy{font-family:var(--mono);font-size:12px;color:var(--fg-3);letter-spacing:0.04em}

/* ===== GENERIC 2-COL ===== */
.duo{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start;margin-top:48px}
@media (max-width:920px){.duo{grid-template-columns:1fr;gap:40px}}
.duo .body p{font-size:16px;line-height:1.7;color:var(--fg-1);margin:0 0 16px}
.duo .body p strong{color:var(--fg);font-weight:500}

/* ===== PILLARS (Security / Engine) ===== */
.sec{background:var(--bg-1)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media (max-width:880px){.pillars{grid-template-columns:1fr}}
.pillar{border:1px solid var(--line-2);border-radius:16px;padding:26px;background:var(--surface);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:all .25s}
.pillar:hover{border-color:rgba(45,108,255,0.3);background:var(--surface-2)}
.pillar .ico{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,rgba(45,108,255,0.2),rgba(94,226,255,0.08));border:1px solid rgba(45,108,255,0.2);display:grid;place-items:center;color:var(--blue-2);font-size:18px}
.pillar h3{font-size:19px;margin:0;font-weight:600;letter-spacing:-0.015em}
.pillar p{font-size:14.5px;color:var(--fg-2);line-height:1.6;margin:0}

/* ===== CHECK CHIPS (Scanner) ===== */
.checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.check{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:13px;color:var(--fg-1)}
.check::before{content:"✓";width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--blue),#1A4DCC);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:600;flex:0 0 auto}

/* ===== HONEST LIMITS ===== */
.limits{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:44px}
@media (max-width:760px){.limits{grid-template-columns:1fr}}
.limit{border:1px solid var(--line-2);border-radius:12px;padding:18px 20px;background:var(--surface);display:flex;gap:12px;align-items:flex-start}
.limit .mk{flex:0 0 auto;color:var(--blue-3);font-family:var(--mono);font-size:13px;margin-top:1px}
.limit p{margin:0;font-size:14px;color:var(--fg-1);line-height:1.55}
.limit p strong{color:var(--fg);font-weight:500}

/* ===== ABOUT ===== */
.about-facts{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:14px}
.about-facts li{display:flex;gap:16px;font-size:15px;color:var(--fg-1);line-height:1.5}
.about-facts .k{flex:0 0 140px;color:var(--fg-3);font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding-top:3px}
@media (max-width:560px){.about-facts li{flex-direction:column;gap:2px}.about-facts .k{flex:none}}

/* ===== HERO PIPELINE ===== */
.pipeline{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.pnode{flex:1 1 0;min-width:130px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px 14px;display:flex;flex-direction:column;gap:7px;transition:border-color .2s,transform .2s}
.pnode:hover{border-color:var(--line-3);transform:translateY(-2px)}
.pnode .pnum{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue-3);display:flex;align-items:center;gap:6px}
.pnode .pnum::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 6px var(--blue-glow);flex:0 0 auto}
.pnode .pttl{font-size:15px;font-weight:600;color:var(--fg);letter-spacing:-0.01em}
.pnode .psub{font-size:12px;color:var(--fg-2);line-height:1.4}
.pnode.gate{background:linear-gradient(135deg,rgba(94,226,255,0.08),rgba(94,226,255,0.02));border-color:rgba(94,226,255,0.25)}
.pnode.gate .pnum{color:var(--cyan)}
.pnode.gate .pnum::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.pnode.live{background:linear-gradient(135deg,rgba(45,108,255,0.16),rgba(45,108,255,0.04));border-color:rgba(45,108,255,0.4)}
.pipeline-note{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--fg-3);display:flex;align-items:center;gap:8px}
.pipeline-note::before{content:"";width:14px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex:0 0 auto}
@media (max-width:880px){.pnode{flex:1 1 100%}}
/* === Sanfter Energie-Fluss durch die Pipeline === */
.pipeline{position:relative}
@media (min-width:881px) and (prefers-reduced-motion:no-preference){
  .pipeline::before{content:"";position:absolute;left:10px;right:10px;top:-16px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(94,226,255,.07),rgba(127,233,255,.5),rgba(94,226,255,.07));background-size:220% 100%;animation:lineFlow 8s linear infinite}
  .pnode{animation:softGlow 7s ease-in-out infinite}
  .pnode:nth-child(2){animation-delay:.8s}
  .pnode:nth-child(3){animation-delay:1.6s}
  .pnode:nth-child(4){animation-delay:2.4s}
  .pnode:nth-child(5){animation-delay:3.2s}
  .pnode:nth-child(6){animation-delay:4s}
}
/* === Sanfter Energie-Fluss für Schritt-Reihen === */
.flowrow{position:relative}
@media (min-width:881px) and (prefers-reduced-motion:no-preference){
  .flowrow::before{content:"";position:absolute;left:10px;right:10px;top:-18px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(94,226,255,.06),rgba(127,233,255,.46),rgba(94,226,255,.06));background-size:220% 100%;animation:lineFlow 9s linear infinite}
  .flowrow > *{animation:softGlow 7s ease-in-out infinite}
  .flowrow > *:nth-child(2){animation-delay:.7s}
  .flowrow > *:nth-child(3){animation-delay:1.4s}
  .flowrow > *:nth-child(4){animation-delay:2.1s}
  .flowrow > *:nth-child(5){animation-delay:2.8s}
  .flowrow > *:nth-child(6){animation-delay:3.5s}
  .flowrow > *:nth-child(7){animation-delay:4.2s}
}
@keyframes lineFlow{0%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes softGlow{0%,100%{box-shadow:none}50%{box-shadow:0 0 16px -3px rgba(94,226,255,.26)}}
/* === Flagship: Idee → Live Journey-Band === */
.journey-band{background:linear-gradient(180deg,var(--surface),var(--bg-1));border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.journey-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 38%,rgba(45,108,255,.07),transparent 70%);pointer-events:none}
.journey-eyebrow{display:flex;justify-content:center}
.journey-h2{text-align:center;max-width:none;margin:0 auto 64px}
.journey{position:relative;display:flex;justify-content:space-between;gap:8px;max-width:1320px;margin:0 auto}
.journey::before{content:"";position:absolute;left:7%;right:7%;top:15px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(94,226,255,.1),rgba(127,233,255,.5),rgba(94,226,255,.1));background-size:220% 100%}
.jstation{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;z-index:1}
.jdot{width:30px;height:30px;border-radius:50%;background:var(--bg-2);border:2px solid rgba(94,226,255,.4);position:relative;box-shadow:0 0 0 7px var(--bg-1)}
.jdot::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--blue-2)}
.jlive .jdot{border-color:var(--blue)}
.jlive .jdot::after{background:var(--cyan)}
.jlbl{font-size:15px;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.jsub{font-size:12.5px;color:var(--fg-2);line-height:1.4}
@media (prefers-reduced-motion:no-preference){
  .journey::before{animation:lineFlow 11s linear infinite}
  .jstation .jdot{animation:dotGlow 7s ease-in-out infinite}
  .jstation:nth-child(2) .jdot{animation-delay:.9s}
  .jstation:nth-child(3) .jdot{animation-delay:1.8s}
  .jstation:nth-child(4) .jdot{animation-delay:2.7s}
  .jstation:nth-child(5) .jdot{animation-delay:3.6s}
  .jstation:nth-child(6) .jdot{animation-delay:4.5s}
  .jstation:nth-child(7) .jdot{animation-delay:5.4s}
  @keyframes dotGlow{0%,100%{box-shadow:0 0 0 7px var(--bg-1)}50%{box-shadow:0 0 0 7px var(--bg-1),0 0 16px 0 rgba(94,226,255,.4)}}
}
@media (max-width:780px){.journey{flex-wrap:wrap;gap:26px 8px}.journey::before{display:none}.jstation{flex:1 1 40%}.journey-h2{margin-bottom:44px}}

/* ===== COST COMPARISON ===== */
.table-wrap{overflow-x:auto;margin-top:44px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface)}
.cost-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:680px}
.cost-table th,.cost-table td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.cost-table thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-3);font-weight:500}
.cost-table tbody tr:last-child td{border-bottom:none}
.cost-table .way{color:var(--fg);font-weight:500;white-space:nowrap}
.cost-table .cost{color:var(--fg-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.cost-table td{color:var(--fg-2);line-height:1.5}
.cost-table tr.ad{background:linear-gradient(135deg,rgba(45,108,255,0.10),rgba(45,108,255,0.02))}
.cost-table tr.ad .way{color:var(--blue-2);font-weight:600}
.cost-table tr.ad td{color:var(--fg-1)}
.cost-note{font-size:13px;color:var(--fg-3);margin-top:16px;line-height:1.6;max-width:760px}

/* ===== PAIN ===== */
.pain{background:var(--bg-1)}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
/* 7. (letzte) Pain-Karte mittig statt allein links — nur wenn es genau 7 sind (3·3·1 → zentriert) */
.pains .pain-card:nth-child(7):last-child{grid-column:2}
@media (max-width:880px){.pains{grid-template-columns:1fr}.pains .pain-card:nth-child(7):last-child{grid-column:auto}}
.pain-card{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.pain-card .x{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:8px}
.pain-card .x::before{content:"✕";color:#ff8a80;font-size:12px;flex:0 0 auto}
.pain-card p{margin:0;font-size:15px;color:var(--fg-1);line-height:1.5}

/* ===== BEFORE → AFTER ===== */
.ba-list{display:flex;flex-direction:column;gap:12px;margin:40px auto 0;max-width:1120px}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;border:1px solid var(--line-2);border-radius:14px;padding:18px 24px;background:var(--surface);transition:border-color .2s}
.ba:hover{border-color:rgba(45,108,255,0.3)}
@media (max-width:760px){.ba{grid-template-columns:1fr;gap:6px}.ba .ba-arrow{transform:rotate(90deg);justify-self:start;margin:2px 0}}
.ba .from{color:var(--fg-3);font-size:15px;line-height:1.4;text-align:right}
.ba .ba-arrow{color:var(--blue-2);font-size:20px;justify-self:center}
.ba .to{color:var(--fg);font-size:15px;line-height:1.4}
.ba .to b{color:var(--blue-2);font-weight:600}

/* ===== RISK REVERSAL ===== */
.risk{margin-top:32px;border:1px solid rgba(45,108,255,0.25);border-radius:14px;padding:20px 24px;background:linear-gradient(135deg,rgba(45,108,255,0.08),rgba(45,108,255,0.02));font-size:15px;color:var(--fg-1);line-height:1.6;max-width:760px}
.risk strong{color:var(--fg);font-weight:500}

/* ===== FAQ (zero-JS <details>) ===== */
.faq{margin-top:40px;border-top:1px solid var(--line);max-width:860px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:17px;font-weight:500;color:var(--fg)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--blue-2);font-size:24px;font-weight:300;line-height:1;flex:0 0 auto}
.qa[open] summary::after{content:"–"}
.qa .a{padding:0 0 24px;font-size:15px;color:var(--fg-2);line-height:1.65}
.qa .a strong{color:var(--fg-1);font-weight:500}

/* ===== DEMO / BEISPIEL-DURCHLAUF ===== */
.demo{margin-top:48px;display:flex;flex-direction:column;max-width:760px}
.demo-step{display:grid;grid-template-columns:auto 1fr;gap:20px;padding-bottom:30px;position:relative}
.demo-step:last-child{padding-bottom:0}
.demo-step::before{content:"";position:absolute;left:17px;top:40px;bottom:-2px;width:1px;background:var(--line-2)}
.demo-step:last-child::before{display:none}
.demo-badge{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue),#1A4DCC);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px;z-index:2;flex:0 0 auto;box-shadow:0 4px 14px -4px var(--blue-glow)}
.demo-body{min-width:0;padding-top:4px}
.demo-body .lbl{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.demo-input{font-size:18px;color:var(--fg);line-height:1.5;border-left:2px solid var(--blue);padding:2px 0 2px 16px}
.demo-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.demo-list li{font-size:13px;color:var(--fg-1);background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:8px 12px}
.demo-note{font-size:14.5px;color:var(--fg-1);line-height:1.55;margin:0}
/* Browser-Mock */
.mock{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--bg-1);max-width:480px}
.mock-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);background:rgba(0,0,0,0.25)}
.mock-dot{width:9px;height:9px;border-radius:50%}
.mock-dot.r{background:#FF5F57}.mock-dot.y{background:#FFBD2E}.mock-dot.g{background:#28C840}
.mock-url{margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--fg-3)}
.mock-body{padding:18px;display:flex;flex-direction:column;gap:12px}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock-card{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:12px;display:flex;flex-direction:column;gap:8px}
.mock-k{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3)}
.mock-v{font-size:18px;font-weight:600;color:var(--fg);letter-spacing:-0.02em}
.mock-row{height:9px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,0.09),rgba(255,255,255,0.02))}
.mock-row.s{width:55%}.mock-row.m{width:80%}
/* Prüfbericht */
.report{border:1px solid var(--line-2);border-radius:12px;background:var(--surface);max-width:480px;overflow:hidden}
.report-row{display:flex;align-items:center;gap:11px;padding:10px 18px;font-size:13.5px;color:var(--fg-1);border-bottom:1px solid var(--line)}
.report-row .ck{width:17px;height:17px;border-radius:5px;background:rgba(91,217,138,0.16);color:#5BD98A;display:grid;place-items:center;font-size:10px;flex:0 0 auto}
.report-row .st{margin-left:auto;font-family:var(--mono);font-size:11px;color:#5BD98A;letter-spacing:0.04em}
.report-foot{padding:12px 18px;font-family:var(--mono);font-size:11px;color:var(--cyan);background:rgba(94,226,255,0.04);display:flex;align-items:center;gap:8px}

/* ===== VERANTWORTLICHKEITEN ===== */
.resp{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
@media (max-width:760px){.resp{grid-template-columns:1fr}}
.resp-col{border:1px solid var(--line-2);border-radius:16px;background:var(--surface);padding:26px}
.resp-col.you{background:linear-gradient(135deg,rgba(45,108,255,0.08),rgba(45,108,255,0.02));border-color:rgba(45,108,255,0.3)}
.resp-col h3{font-size:18px;margin:0 0 16px}
.resp-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.resp-col li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--fg-1);line-height:1.45}
.resp-col li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-2);margin-top:7px;flex:0 0 auto;box-shadow:0 0 6px var(--blue-glow)}

/* ===== FORMULAR ===== */
.form{display:flex;flex-direction:column;gap:14px;margin:0;max-width:520px;position:relative}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--fg-2)}
.form input,.form textarea{font-family:var(--sans);font-size:15px;color:var(--fg);background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;width:100%}
.form input::placeholder,.form textarea::placeholder{color:var(--fg-3)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px var(--blue-soft)}
.form textarea{min-height:120px;resize:vertical;line-height:1.5}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button{align-self:flex-start;margin-top:4px}
.form .priv{font-size:12px;color:var(--fg-3);line-height:1.5;margin:0}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

/* ===== HERO WACHSTUMS-BAUM (Variante: Linien-Baum, zero-JS) ===== */
/* ===== AintDumb — Wachsender Projektbaum (Variante A: Linien-Baum, zero-JS) ===== */
.tree-fig{
  width:100%;
  max-width:540px;
  margin:0 auto;
  line-height:0;
}
.tree-svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

/* --- Äste zeichnen sich von unten nach oben (gestaffelt) --- */
.tree-strokes path{
  stroke-dasharray:1;            /* zusammen mit pathLength="1" → 0..1 Skala */
  stroke-dashoffset:1;           /* Startzustand: unsichtbar */
  animation:tree-draw 1100ms ease-out forwards;
}
.tree-strokes .tree-g0{ animation-delay:0ms; }     /* Wurzeln + Stamm unten */
.tree-strokes .tree-g1{ animation-delay:700ms; }   /* erste Äste */
.tree-strokes .tree-g2{ animation-delay:1300ms; }  /* zweite Äste / Stamm oben */
.tree-strokes .tree-g3{ animation-delay:1900ms; }  /* feine Zweige / Krone */

/* --- Boden-Glow --- */
.tree-floor{
  opacity:0;
  animation:tree-fade 1400ms ease-out 200ms forwards;
}

/* --- Blatt-Knoten: poppen nach ihrem Ast auf, dann sanftes Pulsieren --- */
.tree-leaf{
  transform:translate(var(--tree-lx),var(--tree-ly)) scale(0);
  opacity:0;
  transform-box:view-box;
  transform-origin:center;
}
.tree-leaf.tree-l2{
  animation:tree-pop 600ms cubic-bezier(.34,1.56,.64,1) 1500ms forwards,
            tree-pulse 4s ease-in-out 2400ms infinite;
}
.tree-leaf.tree-l3{
  animation:tree-pop 600ms cubic-bezier(.34,1.56,.64,1) 2100ms forwards,
            tree-pulse 4s ease-in-out 3000ms infinite;
}
.tree-leaf.tree-l4{
  animation:tree-pop 600ms cubic-bezier(.34,1.56,.64,1) 2700ms forwards,
            tree-pulse 4s ease-in-out 3600ms infinite;
}
.tree-leaf.tree-l5{
  animation:tree-pop 700ms cubic-bezier(.34,1.56,.64,1) 3100ms forwards,
            tree-pulse 4.4s ease-in-out 4000ms infinite;
}

@keyframes tree-draw{
  to{ stroke-dashoffset:0; }
}
@keyframes tree-fade{
  to{ opacity:1; }
}
@keyframes tree-pop{
  0%  { transform:translate(var(--tree-lx),var(--tree-ly)) scale(0);   opacity:0; }
  60% { opacity:1; }
  100%{ transform:translate(var(--tree-lx),var(--tree-ly)) scale(1);   opacity:1; }
}
@keyframes tree-pulse{
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.45); }
}

/* --- Barrierefreiheit: kein Bewegung, sofort fertig gewachsen --- */
@media (prefers-reduced-motion:reduce){
  .tree-strokes path{ stroke-dashoffset:0; animation:none; }
  .tree-floor{ opacity:1; animation:none; }
  .tree-leaf{
    transform:translate(var(--tree-lx),var(--tree-ly)) scale(1);
    opacity:1;
    animation:none;
  }
}
.tree-cap{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-3);text-align:center;margin:14px 0 0;display:flex;align-items:center;justify-content:center;gap:8px}
.tree-cap::before{content:"";width:14px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
@media (prefers-reduced-motion: reduce){.tree-strokes path{stroke-dashoffset:0 !important}.tree-leaf{opacity:1 !important;transform:none !important}}


/* ===== HERO V2-STIL: Label-Projektbaum (Glas-Karte) + Hero-Trust — V1-Farben ===== */
.hero-need{font-size:15px;line-height:1.6;color:var(--fg-1);max-width:560px;margin:0 0 28px;padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface)}
.hero-need strong{color:var(--fg);font-weight:600}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--fg-2)}
.hero-trust .ht{display:inline-flex;align-items:center;gap:8px}
.hero-trust .ht::before{content:"\2713";width:16px;height:16px;border-radius:5px;background:rgba(94,226,255,.14);color:var(--cyan);display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 auto}

.pt-card{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-radius:20px;padding:20px 18px 16px;position:relative;overflow:hidden;backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);box-shadow:0 40px 100px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset}
.pt-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(180,210,255,.5),transparent)}
.pt-card::after{content:"";position:absolute;inset:-1px;border-radius:20px;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,rgba(45,108,255,.18),transparent 70%)}
.pt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;position:relative;z-index:1}
.pt-title{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.pt-live{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:6px}
.pt-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pt-blink 1.8s infinite}
@keyframes pt-blink{0%,100%{opacity:1}50%{opacity:.35}}
.pt-stage{position:relative;aspect-ratio:1/1.04;width:100%}
.pt-svg{width:100%;height:100%;display:block;overflow:visible}
.pt-svg .pt-glow{filter:drop-shadow(0 0 6px rgba(94,226,255,.55))}
.pt-branch{fill:none;stroke:url(#ptBranchGrad);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);opacity:.9}
@media (prefers-reduced-motion:no-preference){.pt-branch{animation:pt-draw 1.1s cubic-bezier(.5,0,.2,1) forwards var(--bd,0s)}}
@keyframes pt-draw{to{stroke-dashoffset:0}}
.pt-node{opacity:1}
@media (prefers-reduced-motion:no-preference){.pt-node{opacity:0;transform-box:fill-box;transform-origin:center;animation:pt-pop .6s cubic-bezier(.2,1.3,.4,1) forwards var(--nd,0s)}}
@keyframes pt-pop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
.pt-dot{fill:var(--bg-2);stroke:var(--cyan);stroke-width:2}
.pt-core{fill:var(--cyan)}
@media (prefers-reduced-motion:no-preference){.pt-core{animation:pt-pulse 2.6s ease-in-out infinite var(--pd,0s);transform-box:fill-box;transform-origin:center}.pt-halo{transform-box:fill-box;transform-origin:center;animation:pt-haloA 2.6s ease-in-out infinite var(--pd,0s)}}
@keyframes pt-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.7}}
.pt-halo{fill:var(--cyan);opacity:0}
@keyframes pt-haloA{0%,100%{transform:scale(1);opacity:0}50%{transform:scale(2.6);opacity:.18}}
.pt-root .pt-dot{stroke:var(--blue-2)}.pt-root .pt-core,.pt-root .pt-halo{fill:var(--blue-2)}
.pt-crown .pt-dot{stroke:var(--cyan)}.pt-crown .pt-core,.pt-crown .pt-halo{fill:var(--cyan)}
.pt-label{font-family:var(--mono);font-size:8.6px;letter-spacing:.13em;text-transform:uppercase;fill:var(--fg);font-weight:500}
.pt-sub{font-family:var(--mono);font-size:6.4px;letter-spacing:.06em;fill:var(--fg-3)}
.pt-spark{fill:var(--cyan);opacity:0}
@media (prefers-reduced-motion:no-preference){.pt-spark{animation:pt-spark 4.5s ease-in-out infinite var(--sd,0s)}}
@keyframes pt-spark{0%{opacity:0;transform:translateY(0)}18%{opacity:.7}82%{opacity:.15}100%{opacity:0;transform:translateY(-46px)}}
.pt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--fg-3);position:relative;z-index:1}
.pt-foot b{color:var(--cyan);font-weight:600}
@media (prefers-reduced-motion:reduce){.pt-branch{stroke-dashoffset:0}.pt-node{opacity:1}.pt-spark{display:none}}


/* ====================================================================
   WOW-REDESIGN — Sektions-CSS (Workflow, brandkonform)
   ==================================================================== */
/* == Sektion: demo == */
/* ===== DEMO: Klartext → Live-Vorschau (id="demo") ===== */
.demo2{background:var(--bg-1)}
.demo2-stage{display:grid;grid-template-columns:1fr auto 1.15fr;gap:24px;align-items:center;margin-top:48px}
@media (max-width:920px){.demo2-stage{grid-template-columns:1fr;gap:18px}}
.demo2-pane{min-width:0;display:flex;flex-direction:column;gap:14px}
.demo2-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-3);display:inline-flex;align-items:center;gap:8px}
.demo2-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 6px var(--blue-glow);flex:0 0 auto}
.demo2-tag-live{color:var(--cyan)}
.demo2-tag-live::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

/* Klartext-Eingabefeld (links) */
.demo2-field{position:relative;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);padding:22px 24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02)}
.demo2-field::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--blue),var(--cyan));opacity:0.7}
.demo2-prompt{margin:0;font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--fg);font-weight:500;letter-spacing:-0.01em}
.demo2-caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-0.16em;background:var(--cyan);box-shadow:0 0 8px var(--cyan);border-radius:1px}
.demo2-meta{display:flex;flex-wrap:wrap;gap:8px}
.demo2-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 11px;background:var(--surface)}

/* Verbinder Pfeil */
.demo2-link{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--blue-2)}
.demo2-arrow{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(45,108,255,0.3);background:radial-gradient(circle at 35% 30%,rgba(45,108,255,0.18),var(--surface) 70%);box-shadow:0 0 28px -8px var(--blue-glow)}
.demo2-link-lbl{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);text-align:center;line-height:1.4;max-width:120px}
@media (max-width:920px){.demo2-arrow svg{transform:rotate(90deg)}}

/* App-Kopf in der Vorschau */
.demo2-apphead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:4px}
.demo2-apptitle{font-size:14px;font-weight:600;color:var(--fg);letter-spacing:-0.01em}
.demo2-applive{font-family:var(--mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:6px}
.demo2-applive::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

/* Tabelle offene Posten */
.demo2-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:2px}
.demo2-table th{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);font-weight:500;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.demo2-table td{padding:9px 8px;border-bottom:1px solid var(--line);color:var(--fg-1);line-height:1.3}
.demo2-table tr:last-child td{border-bottom:none}
.demo2-table .demo2-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.demo2-pill{font-family:var(--mono);font-size:9.5px;letter-spacing:0.04em;padding:3px 8px;border-radius:999px;white-space:nowrap}
.demo2-pill-ok{color:#5BD98A;background:rgba(91,217,138,0.14)}
.demo2-pill-warn{color:#FFB86B;background:rgba(255,184,107,0.12)}

/* Abschluss-Zeilen */
.demo2-line{margin:40px 0 0;text-align:center;font-size:clamp(18px,2vw,24px);font-weight:500;color:var(--fg-1);letter-spacing:-0.015em}
.demo2-line strong{color:var(--fg);font-weight:600}
.demo2-foot{margin:14px auto 0;text-align:center;max-width:640px;font-size:13px;color:var(--fg-3);line-height:1.6}
.demo2-foot strong{color:var(--fg-2);font-weight:500}

/* Dezenter Reveal: Vorschau wächst aus dem Satz */
@media (prefers-reduced-motion:no-preference){
  .demo2-out{animation:demo2-rise .8s cubic-bezier(.2,.9,.3,1) both .25s}
  .demo2-arrow{animation:demo2-pulse 2.8s ease-in-out infinite}
  .demo2-caret{animation:demo2-blink 1.1s steps(1) infinite}
  .demo2-applive::before{animation:demo2-blink 1.6s ease-in-out infinite}
}
@keyframes demo2-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes demo2-pulse{0%,100%{box-shadow:0 0 28px -8px var(--blue-glow)}50%{box-shadow:0 0 40px -6px var(--blue-glow)}}
@keyframes demo2-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* == Sektion: problem == */
/* ===== PROBLEM — Übergang Pain → Erleichterung ===== */
.problem-turn{margin:40px 0 22px;font-weight:500;color:var(--fg);max-width:760px}

/* == Sektion: loop == */
.loop-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
@media (max-width:1080px){.loop-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.loop-steps{grid-template-columns:1fr}}
.loop-steps .step{min-height:auto}
.loop-steps .step p{flex:1 1 auto}
.loop-auto{margin-top:6px;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--cyan);padding:7px 11px;border:1px solid rgba(94,226,255,0.22);border-radius:999px;background:rgba(94,226,255,0.05)}
.loop-auto svg{flex:0 0 auto;opacity:0.9}

/* == Sektion: ownership == */
.ico svg{width:20px;height:20px;display:block}

/* == Sektion: sicherheit == */
/* sicherheit: SVG-Icons in den bestehenden .ico-Containern korrekt zentrieren */
.sec .pillar .ico svg{display:block}

/* sicherheit: "Layer zwischen dir und der KI" — kompakte Ablauf-Leiste */
.sec-layer{margin-top:48px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface);padding:22px 24px}
.sec-layer-flow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sec-lnode{flex:1 1 180px;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-1);font-size:14px;font-weight:500;color:var(--fg-1);line-height:1.4}
.sec-lnode-mid{border-color:rgba(45,108,255,0.28);background:linear-gradient(135deg,rgba(45,108,255,0.10),rgba(94,226,255,0.04))}
.sec-lnode-gate{border-color:rgba(45,108,255,0.45);background:linear-gradient(135deg,rgba(45,108,255,0.18),rgba(94,226,255,0.06));color:var(--fg)}
.sec-larrow{flex:0 0 auto;font-family:var(--mono);font-size:18px;color:var(--blue-2);line-height:1}
.sec-layer-cap{margin:16px 0 0;font-size:13.5px;color:var(--fg-2);line-height:1.6}
@media (max-width:680px){
  .sec-layer-flow{flex-direction:column;align-items:stretch;gap:8px}
  .sec-lnode{flex:1 1 auto}
  .sec-larrow{align-self:center;transform:rotate(90deg)}
}

/* == Sektion: engine == */
/* ===== ENGINE — Wachstums-Baum (K15): Zustände + lose Äste ===== */
.eng-card{max-width:520px;margin:0;align-self:start}
@media (max-width:920px){.eng-card{margin:0 auto}}
.eng-svg .eng-branch{stroke:url(#engBranchGrad)}
/* lose Verbindung: gestrichelt, gedämpft (hängt noch in der Luft) */
.eng-svg .eng-loose-branch{stroke:var(--fg-3);stroke-dasharray:4 5;opacity:.55;animation:none}
/* Zustands-Farben pro Knoten */
.eng-svg .eng-bloom .pt-dot{stroke:var(--cyan)}
.eng-svg .eng-bloom .pt-core,.eng-svg .eng-bloom .pt-halo{fill:var(--cyan)}
.eng-svg .eng-grow .pt-dot{stroke:var(--blue-2)}
.eng-svg .eng-grow .pt-core,.eng-svg .eng-grow .pt-halo{fill:var(--blue-2)}
.eng-svg .eng-rest .pt-dot{stroke:var(--fg-3)}
.eng-svg .eng-rest .pt-core{fill:var(--fg-3)}
/* loser Knoten: gestrichelter Ring, kein Kern, kein Puls */
.eng-svg .eng-loose-dot{fill:var(--bg-2);stroke:var(--fg-3);stroke-width:2;stroke-dasharray:3 3;opacity:.7}
.eng-svg .eng-loose .pt-sub,.eng-svg .eng-loose-label{fill:var(--fg-3)}
/* Zustands-Legende unter dem Baum */
.eng-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--fg-3)}
.eng-st{display:inline-flex;align-items:center;gap:7px}
.eng-d{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.eng-d-bloom{background:var(--cyan);box-shadow:0 0 7px var(--cyan)}
.eng-d-grow{background:var(--blue-2);box-shadow:0 0 7px var(--blue-glow)}
.eng-d-rest{background:var(--fg-3)}
.eng-d-loose{background:transparent;border:1.5px dashed var(--fg-3)}

/* == Sektion: verantwortung == */
.resp-trust{margin:56px 0 0}
.resp-trust-eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue-3);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.resp-trust-eyebrow::before{content:"";width:18px;height:1px;background:var(--blue);box-shadow:0 0 10px var(--blue-glow)}
.resp-trust-lead{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--fg);font-weight:500;max-width:720px;margin:0}
.resp-trust-lead .blue{color:var(--blue-2)}

/* == Sektion: preis == */
/* PREIS — Trial-Banner (Risiko-Umkehr) */
.pr-trial{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;margin-top:48px;border:1px solid rgba(94,226,255,0.28);border-radius:18px;padding:28px 30px;background:linear-gradient(135deg,rgba(94,226,255,0.07),rgba(45,108,255,0.04))}
.pr-trial-tag{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--cyan);padding:5px 11px;border:1px solid rgba(94,226,255,0.3);border-radius:999px;background:rgba(94,226,255,0.06);margin-bottom:14px}
.pr-trial-amt{font-size:38px;font-weight:600;letter-spacing:-0.03em;color:var(--fg);line-height:1;margin:0 0 10px}
.pr-trial-amt small{font-size:14px;font-weight:400;color:var(--fg-2);letter-spacing:0}
.pr-trial-sub{font-size:15px;color:var(--fg-1);line-height:1.6;margin:0;max-width:440px}
.pr-trial-side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pr-trial-fine{font-size:13px;color:var(--fg-2);line-height:1.55;margin:0}
.pr-trial-fine strong{color:var(--fg-1);font-weight:600}
@media (max-width:780px){.pr-trial{grid-template-columns:1fr;gap:20px;padding:24px}.pr-trial-side .btn{width:100%;justify-content:center}}

/* "Beliebt"-Pille auf der hervorgehobenen Karte */
.price-card.featured{padding-top:38px}
.pr-pop{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#fff;padding:4px 10px;border-radius:999px;background:var(--blue);box-shadow:0 4px 14px -4px var(--blue-glow)}

/* Prepaid-Cap-Hinweis */
.pr-cap{margin:20px 0 0;font-size:14px;color:var(--fg-2);line-height:1.6;max-width:760px}

/* Zwei-Rechnungen-Modell — prominent & ehrlich */
.pr-twobills{margin-top:24px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface);padding:26px 28px}
.pr-tb-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pr-tb-head svg{color:var(--blue-2);flex:0 0 auto}
.pr-tb-head h3{margin:0;font-size:19px;letter-spacing:-0.015em}
.pr-tb-lede{font-size:14.5px;color:var(--fg-1);line-height:1.6;margin:0 0 20px;max-width:720px}
.pr-tb-host{display:flex;gap:14px;align-items:flex-start;margin-top:14px;border:1px dashed var(--line-2);border-radius:12px;background:var(--surface-2);padding:16px 20px}
.pr-tb-host svg{color:var(--blue-2);flex:0 0 auto;margin-top:2px}
.pr-tb-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:780px){.pr-tb-grid{grid-template-columns:1fr}}
.pr-tb-item{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:18px 20px}
.pr-tb-n{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--blue),#1A4DCC);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px;box-shadow:0 4px 14px -4px var(--blue-glow)}
.pr-tb-t{font-size:15px;font-weight:600;color:var(--fg);margin:0 0 5px;letter-spacing:-0.01em}
.pr-tb-d{font-size:13.5px;color:var(--fg-2);line-height:1.6;margin:0}
.pr-tb-d strong{color:var(--fg-1);font-weight:600}

/* == Sektion: ueber == */
.ueber-mission{position:relative;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);padding:22px 24px;margin:0 0 22px;overflow:hidden}
.ueber-mission::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--blue),var(--cyan));opacity:.7}
.ueber-mission-k{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue-3);margin:0 0 10px}
.ueber-mission p{font-family:var(--sans);font-size:19px;line-height:1.5;letter-spacing:-0.012em;color:var(--fg);font-weight:500;margin:0}
.ueber-mission p strong{color:var(--blue-2);font-weight:600}
@media (max-width:560px){.ueber-mission{padding:18px 18px}.ueber-mission p{font-size:17px}}

/* == Sektion: final == */
.final p.final-fine{font-size:13.5px;line-height:1.55;color:var(--fg-2);max-width:560px;margin:48px auto 0;text-align:center}
.demo2-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media(max-width:780px){.demo2-flow{grid-template-columns:1fr}}
.demo2-fstep{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);padding:16px 18px}
.demo2-fstep .demo2-fn{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--blue),#1A4DCC);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;box-shadow:0 3px 10px -3px var(--blue-glow)}
.demo2-fstep strong{display:block;font-size:14.5px;color:var(--fg);font-weight:600;margin-bottom:3px}
.demo2-fstep span{font-size:13px;color:var(--fg-2);line-height:1.5}
.demo2-fstep,.wf-step,.pillar,.acard,.pain-card{transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s ease,box-shadow .28s ease,background .28s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .demo2-fstep:hover,.wf-step:hover,.pillar:hover,.acard:hover,.pain-card:hover{transform:translateY(-4px);border-color:rgba(45,108,255,0.38);box-shadow:0 22px 55px -30px var(--blue-glow)}
  .demo2-fstep:hover .demo2-fn{box-shadow:0 6px 18px -4px var(--blue-glow)}
}
.final-fine strong{color:var(--fg-1);font-weight:600}


/* ===== HERO: ZWEI BÄUME IM LOOP (der Weg + die komplexe App) ===== */
.hl-stage{position:relative;aspect-ratio:1/1.04;width:100%}
.hl-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(56% 50% at 50% 46%,rgba(45,108,255,.13),transparent 72%);pointer-events:none;z-index:0}
.hl-tree{position:absolute;inset:0;opacity:0;transform-origin:50% 54%;z-index:1}
.hl-tree svg{width:100%;height:100%;display:block;overflow:visible}
.hl-svg .hl-glow{filter:drop-shadow(0 0 7px rgba(94,226,255,.6))}
.hl-branch{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:0;opacity:.58}
.hl-flow{fill:none;stroke:#c8f1ff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.28 .72;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 8px rgba(94,226,255,1))}
.hl-spark{fill:#cdeeff;opacity:0;transform-box:fill-box;transform-origin:center}
.hl-a .hl-branch{stroke:url(#hlGradA)}
.hl-b .hl-branch{stroke:url(#hlGradB)}
.hl-c .hl-branch{stroke:url(#hlGradC)}
.hl-dot{fill:var(--bg-2);stroke:var(--cyan);stroke-width:2}
.hl-core{fill:var(--cyan)}
.hl-halo{fill:var(--cyan);opacity:0}
.hl-junc{fill:var(--blue-3);opacity:.65}
.hl-tip{fill:var(--cyan);opacity:.8}
.hl-label{font-family:var(--mono);font-size:8.6px;letter-spacing:.1em;text-transform:uppercase;fill:var(--fg);font-weight:500}
.hl-sub{font-family:var(--mono);font-size:6.2px;letter-spacing:.05em;fill:var(--fg-3)}
.hl-root .hl-dot{stroke:var(--blue-2)}.hl-root .hl-core,.hl-root .hl-halo{fill:var(--blue-2)}
.hl-crown .hl-dot{stroke:var(--cyan)}.hl-crown .hl-core,.hl-crown .hl-halo{fill:var(--cyan)}
@media (prefers-reduced-motion:no-preference){
  .hl-a{animation:hlFadeA 18s ease-in-out infinite}
  .hl-b{animation:hlFadeB 18s ease-in-out infinite}
  .hl-c{animation:hlFadeC 18s ease-in-out infinite}
  .hl-flow{opacity:1;animation:hlFlow 1.7s linear infinite var(--fd,0s)}
  .hl-spark{animation:hlSpark 3.6s ease-in-out infinite var(--sd,0s)}
  .hl-core{animation:hlPulse 2.6s ease-in-out infinite var(--pd,0s);transform-box:fill-box;transform-origin:center}
  .hl-halo{animation:hlHalo 2.6s ease-in-out infinite var(--pd,0s);transform-box:fill-box;transform-origin:center}
  .hl-tip{animation:hlTwinkle 3s ease-in-out infinite var(--pd,0s)}
}
@keyframes hlFadeA{0%{opacity:0;transform:scale(.94)}3%{opacity:1;transform:scale(1)}28%{opacity:1;transform:scale(1)}32%{opacity:0;transform:scale(1.03)}100%{opacity:0;transform:scale(1.03)}}
@keyframes hlFadeB{0%{opacity:0;transform:scale(.94)}34%{opacity:0;transform:scale(.94)}37%{opacity:1;transform:scale(1)}61%{opacity:1;transform:scale(1)}65%{opacity:0;transform:scale(1.03)}100%{opacity:0;transform:scale(1.03)}}
@keyframes hlFadeC{0%{opacity:0;transform:scale(.94)}67%{opacity:0;transform:scale(.94)}70%{opacity:1;transform:scale(1)}94%{opacity:1;transform:scale(1)}98%{opacity:0;transform:scale(1.03)}100%{opacity:0;transform:scale(1.03)}}
@keyframes hlDrawA{0%{stroke-dashoffset:1}2%{stroke-dashoffset:1}16%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes hlDrawB{0%{stroke-dashoffset:1}34%{stroke-dashoffset:1}48%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes hlDrawC{0%{stroke-dashoffset:1}67%{stroke-dashoffset:1}81%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes hlPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}
@keyframes hlHalo{0%,100%{transform:scale(1);opacity:0}50%{transform:scale(2.4);opacity:.16}}
@keyframes hlFlow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hlSpark{0%{opacity:0;transform:translateY(10px) scale(.6)}18%{opacity:.95}80%{opacity:.3}100%{opacity:0;transform:translateY(-46px) scale(1)}}
@keyframes hlTwinkle{0%,100%{opacity:.28}50%{opacity:.95}}
.hl-cap{position:relative;margin-top:12px;min-height:1.35em}
.hl-cap span{position:absolute;left:0;right:0;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--fg-3);text-align:center;opacity:0}
.hl-cap .hl-cap-a{animation:hlFadeA 18s ease-in-out infinite}
.hl-cap .hl-cap-b{animation:hlFadeB 18s ease-in-out infinite}
.hl-cap .hl-cap-c{animation:hlFadeC 18s ease-in-out infinite}
.hl-cap b{color:var(--cyan);font-weight:600}

/* MCP-Workflow-Phase (Baum C) */
.hl-loop{fill:none;stroke:var(--cyan);stroke-width:1.3;opacity:.65;stroke-dasharray:2.4 3}
.hl-wf{fill:var(--blue-3);opacity:.85}
.hl-gate .hl-dot{stroke:var(--cyan);stroke-width:2.4}
.hl-gate .hl-core,.hl-gate .hl-halo{fill:var(--cyan)}
@media (prefers-reduced-motion:reduce){
  .hl-a,.hl-cap .hl-cap-a{opacity:1}
  .hl-b,.hl-c,.hl-cap .hl-cap-b,.hl-cap .hl-cap-c{opacity:0}
  .hl-flow,.hl-spark{display:none}
  .hl-branch{opacity:.85}
  .hl-branch{stroke-dashoffset:0}
}


/* ===== WORKFLOW-SEKTION (So arbeitet das System / warum unschlagbar) ===== */
.wf-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:8px 0 0}
.start-steps{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media(max-width:880px){.start-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.start-steps{grid-template-columns:1fr}}
.wf-step{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:16px 15px;position:relative;overflow:hidden}
.wf-step::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:.6}
.wf-step .wf-n{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--blue-3)}
.wf-step h4{font-size:15px;margin:9px 0 6px;color:var(--fg);font-weight:600;letter-spacing:-.01em}
.wf-step p{font-size:12.5px;color:var(--fg-2);line-height:1.5;margin:0}
.wf-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:30px}
.wf-card{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-radius:16px;padding:22px 20px}
.wf-card h3{font-size:17px;margin:0 0 8px;color:var(--fg);font-weight:600}
.wf-card h3::before{content:"✕";color:var(--cyan);font-weight:700;margin-right:8px;opacity:.0}
.wf-card p{font-size:13.5px;color:var(--fg-2);line-height:1.55;margin:0}

/* ===== UNTERSEITEN-KOPF (Mehrseiten-Struktur) ===== */
.page-hero{padding:120px 0 40px;position:relative}
.page-hero .h1{font-size:clamp(34px,4.8vw,62px);margin-bottom:20px}
.page-hero .lede-2{margin-bottom:0;max-width:680px}
.nav-links a[aria-current="page"]{color:var(--fg)}
@media(max-width:780px){.page-hero{padding:90px 0 26px}}


/* ============================================================
   AI LOOK & FEEL — Aurora-BG + Neuronen-Raster + Gradient-Rand
   (zero-JS; global *animation:none* unter prefers-reduced-motion greift)
   ============================================================ */
@property --eang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* Aurora-Hintergrund, driftet langsam */
body::before{content:"";position:fixed;inset:-12%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 32% at 15% 8%, rgba(40,100,240,.22), transparent 62%),
    radial-gradient(34% 28% at 88% 16%, rgba(94,226,255,.14), transparent 60%),
    radial-gradient(48% 42% at 72% 98%, rgba(40,100,240,.13), transparent 62%);
  animation:auroraShift 28s ease-in-out infinite alternate}
@keyframes auroraShift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(3%,-2%,0) scale(1.08)}}

/* feines Tech-/Neuronen-Punktraster, oben eingeblendet */
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.55;
  background:radial-gradient(rgba(123,164,255,.10) 1px, transparent 1.7px) 0 0/40px 40px;
  -webkit-mask-image:radial-gradient(130% 78% at 50% -6%, #000, transparent 70%);
  mask-image:radial-gradient(130% 78% at 50% -6%, #000, transparent 70%)}

/* rotierender Gradient-Rand auf Schlüssel-Karten (innen, wg. overflow:hidden) */
.mock::after, .price-card.featured::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:4;
  background:conic-gradient(from var(--eang), transparent 0 58%, rgba(94,226,255,.78) 76%, rgba(45,108,255,.62) 88%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:edgeSpin 9s linear infinite}
@keyframes edgeSpin{to{--eang:360deg}}

/* Hero-Baum-Karte: ruhiger Cyan-Glow-Puls */
.hero-tree .pt-card{animation:cardGlow 7s ease-in-out infinite}
@keyframes cardGlow{0%,100%{box-shadow:0 40px 100px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset,0 0 30px -16px rgba(94,226,255,.4)}50%{box-shadow:0 40px 100px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05) inset,0 0 46px -10px rgba(94,226,255,.62)}}

/* Hero-Film "Klartext wird Bauplan" — eine durchgehende 23s-Timeline */
.cf-stage{position:relative;width:440px;max-width:100%;height:460px;margin:0 auto}
.cf-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(56% 44% at 50% 42%,rgba(45,108,255,.12),transparent 72%);pointer-events:none}
.cf-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.cf-line,.cf-clink{stroke:var(--cyan);fill:none;opacity:0;stroke-dasharray:1;stroke-dashoffset:1}
.cf-line{stroke-width:1.4}
.cf-clink{stroke-width:1.4}
.cf-core{position:absolute;left:220px;top:196px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(45,108,255,.18),0 0 14px 0 rgba(94,226,255,.5);opacity:0;z-index:2}
.cf-prompt{position:absolute;left:0;top:16px;width:440px;height:58px;box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:0 16px;border:1px solid var(--line-2);border-radius:14px;background:linear-gradient(180deg,var(--surface-2),var(--surface));opacity:0;z-index:6}
.cf-pdot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px 0 rgba(94,226,255,.7)}
.cf-type{display:inline-block;overflow:hidden;white-space:nowrap;width:0;font-size:14px;color:var(--fg);font-weight:500}
.cf-cursor{flex:0 0 auto;width:2px;height:19px;background:var(--cyan);opacity:0}
.cf-appbar{position:absolute;left:0;top:16px;width:440px;height:30px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);opacity:0;z-index:3}
.cf-dots{display:flex;gap:5px}
.cf-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.cf-apptitle{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--fg-3);text-transform:uppercase}
.cf-conn{position:absolute;top:58px;height:40px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--line-2);border-radius:10px;background:linear-gradient(180deg,var(--surface-2),var(--surface));opacity:0;z-index:4}
.c0{left:0;width:128px}.c1{left:156px;width:128px}.c2{left:312px;width:128px}
.cf-cicon{flex:0 0 auto;width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#5EE2FF,#2D6CFF);box-shadow:0 0 8px -1px rgba(94,226,255,.6)}
.cf-cname{font-size:12.5px;font-weight:600;color:var(--fg)}
.cf-ctag{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--cyan);border:1px solid rgba(94,226,255,.4);border-radius:5px;padding:2px 5px}
.cf-mod{position:absolute;left:0;top:var(--rt);width:440px;height:50px;box-sizing:border-box;display:flex;align-items:center;gap:11px;padding:0 13px;overflow:hidden;border:1px solid var(--line-2);border-radius:24px;background:linear-gradient(180deg,var(--surface-2),var(--surface));color:var(--fg);font-size:14px;font-weight:600;opacity:0;z-index:5;will-change:transform,width}
.m0{--rt:114px;--sx:35px;--sy:19px;--px:140px;--py:-95px;--ny:2px}
.m1{--rt:176px;--sx:245px;--sy:-43px;--px:140px;--py:-157px;--ny:-8px}
.m2{--rt:238px;--sx:35px;--sy:-19px;--px:140px;--py:-219px;--ny:-18px}
.m3{--rt:300px;--sx:245px;--sy:-81px;--px:140px;--py:-281px;--ny:-28px}
.cf-lbl{white-space:nowrap}
.cf-badge{position:relative;flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--bg-2);border:1px solid var(--line-2);display:grid;place-items:center}
.cf-n,.cf-ck{grid-area:1/1}
.cf-n{font-family:var(--mono);font-size:11px;color:var(--cyan)}
.cf-ck{font-size:12px;color:#fff;opacity:0}
.cf-scan{position:absolute;left:0;top:114px;width:440px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 14px 1px rgba(94,226,255,.6);opacity:0;z-index:7}
.cf-mhead{position:absolute;left:162px;top:116px;width:278px;height:34px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);opacity:0;z-index:5}
.cf-mtitle{font-size:13px;font-weight:600;color:var(--fg)}
.cf-mpill{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--cyan);border:1px solid rgba(94,226,255,.4);border-radius:5px;padding:2px 6px}
.cf-chart{position:absolute;left:162px;top:160px;width:278px;height:96px;box-sizing:border-box;display:flex;align-items:flex-end;gap:12px;padding:12px;border:1px solid var(--line-2);border-radius:9px;background:linear-gradient(180deg,var(--surface-2),var(--surface));opacity:0;z-index:5}
.cf-chart i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(180deg,#5EE2FF,#2D6CFF);transform:scaleY(0);transform-origin:bottom}
.cf-trow{position:absolute;left:162px;width:278px;height:28px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);opacity:0;z-index:5}
.r0{top:268px}.r1{top:302px}.r2{top:336px}
.cf-tc{font-size:11.5px;color:var(--fg-2)}
.cf-tp{font-family:var(--mono);font-size:9px;color:var(--fg-3);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px}
.cf-tp.ok{color:var(--cyan);border-color:rgba(94,226,255,.4)}
.cf-foot{position:absolute;left:0;top:410px;width:440px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--fg-3);opacity:0}
.cf-cap{position:relative;margin-top:14px;min-height:1.4em}
.cf-cap span{position:absolute;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--fg-3);opacity:0}
.cf-cap b{color:var(--cyan)}
@media (prefers-reduced-motion:no-preference){
  .cf-type{animation:cfType 23s steps(50,end) infinite}
  .cf-cursor{animation:cfCursor 23s ease-in-out infinite}
  .cf-prompt{animation:cfPrompt 23s ease-in-out infinite}
  .cf-line{animation:cfLine 23s ease-in-out infinite}
  .cf-clink{animation:cfClink 23s ease-in-out infinite}
  .cf-core{animation:cfCore 23s ease-in-out infinite}
  .cf-mod{animation:cfMod 23s ease-in-out infinite}
  .cf-conn{animation:cfConn 23s ease-in-out infinite}
  .cf-n{animation:cfNum 23s ease-in-out infinite}
  .cf-ck{animation:cfCheck 23s ease-in-out infinite}
  .cf-badge{animation:cfBadge 23s ease-in-out infinite}
  .cf-scan{animation:cfScan 23s ease-in-out infinite}
  .cf-appbar{animation:cfFrame 23s ease-in-out infinite}
  .cf-mhead{animation:cfMHead 23s ease-in-out infinite}
  .cf-chart{animation:cfPanel 23s ease-in-out infinite}
  .cf-chart i{animation:cfBar 23s ease-in-out infinite}
  .cf-trow{animation:cfTRow 23s ease-in-out infinite}
  .cf-foot{animation:cfFoot 23s ease-in-out infinite}
  .cf-c1{animation:cfCap1 23s ease-in-out infinite}
  .cf-c2{animation:cfCap2 23s ease-in-out infinite}
  .cf-c3{animation:cfCap3 23s ease-in-out infinite}
  .cf-c4{animation:cfCap4 23s ease-in-out infinite}
  .cf-c5{animation:cfCap5 23s ease-in-out infinite}
}
@keyframes cfType{0%,2%{width:0}13%{width:50ch}100%{width:50ch}}
@keyframes cfCursor{0%{opacity:0}2%{opacity:1}26%{opacity:1}30%{opacity:0}100%{opacity:0}}
@keyframes cfPrompt{0%{opacity:0;transform:translateY(6px)}3%{opacity:1;transform:translateY(0)}24%{opacity:1;transform:translateY(0)}30%{opacity:0;transform:translateY(-8px)}97%{opacity:0;transform:translateY(-8px)}100%{opacity:0;transform:translateY(6px)}}
@keyframes cfLine{0%,13%{opacity:0;stroke-dashoffset:1}16%{opacity:.5;stroke-dashoffset:1}26%{opacity:.5;stroke-dashoffset:0}30%{opacity:.5;stroke-dashoffset:0}40%{opacity:0;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes cfClink{0%,46%{opacity:0;stroke-dashoffset:1}50%{opacity:.45;stroke-dashoffset:1}60%{opacity:.45;stroke-dashoffset:0}90%{opacity:.45;stroke-dashoffset:0}95%{opacity:0;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes cfCore{0%,13%{opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1)}30%{opacity:1;transform:scale(1)}38%{opacity:0;transform:scale(1.25)}100%{opacity:0}}
@keyframes cfMod{0%{opacity:0;transform:translate(var(--px),var(--py)) scale(.5);width:160px;border-radius:24px}10%{opacity:0;transform:translate(var(--px),var(--py)) scale(.6);width:160px;border-radius:24px}17%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1);width:160px;border-radius:24px}28%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1);width:160px;border-radius:24px}40%{opacity:1;transform:translate(0px,0px) scale(1);width:440px;border-radius:12px}72%{opacity:1;transform:translate(0px,0px) scale(1);width:440px;border-radius:12px}80%{opacity:1;transform:translate(0px,var(--ny)) scale(1);width:150px;border-radius:10px}93%{opacity:1;transform:translate(0px,var(--ny)) scale(1);width:150px;border-radius:10px}97%{opacity:0;transform:translate(var(--px),var(--py)) scale(.6);width:160px;border-radius:24px}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(.5);width:160px;border-radius:24px}}
@keyframes cfConn{0%,42%{opacity:0;transform:translateY(-14px)}50%{opacity:1;transform:translateY(0)}93%{opacity:1;transform:translateY(0)}96%{opacity:0;transform:translateY(-10px)}100%{opacity:0;transform:translateY(-14px)}}
@keyframes cfNum{0%,62%{opacity:1}66%{opacity:0}100%{opacity:0}}
@keyframes cfCheck{0%,62%{opacity:0}66%{opacity:1}94%{opacity:1}98%{opacity:0}100%{opacity:0}}
@keyframes cfBadge{0%,62%{opacity:1;background:var(--bg-2);border-color:var(--line-2)}66%{opacity:1;background:linear-gradient(135deg,#2D6CFF,#1A4DCC);border-color:transparent}76%{opacity:1;background:linear-gradient(135deg,#2D6CFF,#1A4DCC);border-color:transparent}82%{opacity:0;background:linear-gradient(135deg,#2D6CFF,#1A4DCC);border-color:transparent}100%{opacity:0;background:var(--bg-2);border-color:var(--line-2)}}
@keyframes cfScan{0%,60%{opacity:0;transform:translateY(0)}62%{opacity:.9;transform:translateY(0)}72%{opacity:.9;transform:translateY(236px)}75%{opacity:0;transform:translateY(236px)}100%{opacity:0;transform:translateY(236px)}}
@keyframes cfFrame{0%,68%{opacity:0}74%{opacity:1}93%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes cfMHead{0%,76%{opacity:0;transform:translateY(8px)}82%{opacity:1;transform:translateY(0)}93%{opacity:1;transform:translateY(0)}97%{opacity:0;transform:translateY(0)}100%{opacity:0;transform:translateY(8px)}}
@keyframes cfPanel{0%,78%{opacity:0}84%{opacity:1}93%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes cfBar{0%,80%{transform:scaleY(0)}88%{transform:scaleY(1)}93%{transform:scaleY(1)}97%{transform:scaleY(0)}100%{transform:scaleY(0)}}
@keyframes cfTRow{0%,82%{opacity:0;transform:translateY(6px)}88%{opacity:1;transform:translateY(0)}93%{opacity:1;transform:translateY(0)}97%{opacity:0;transform:translateY(0)}100%{opacity:0;transform:translateY(6px)}}
@keyframes cfFoot{0%,84%{opacity:0}90%{opacity:1}93%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes cfCap1{0%{opacity:0}3%{opacity:1}11%{opacity:1}15%{opacity:0}100%{opacity:0}}
@keyframes cfCap2{0%,15%{opacity:0}19%{opacity:1}38%{opacity:1}42%{opacity:0}100%{opacity:0}}
@keyframes cfCap3{0%,43%{opacity:0}47%{opacity:1}58%{opacity:1}62%{opacity:0}100%{opacity:0}}
@keyframes cfCap4{0%,62%{opacity:0}66%{opacity:1}72%{opacity:1}76%{opacity:0}100%{opacity:0}}
@keyframes cfCap5{0%,77%{opacity:0}82%{opacity:1}94%{opacity:1}98%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .cf-type{width:auto}
  .cf-prompt,.cf-line,.cf-clink,.cf-core,.cf-cursor,.cf-scan,.cf-c1,.cf-c2,.cf-c3,.cf-c4{opacity:0}
  .cf-mod{opacity:1;transform:translate(0,var(--ny));width:150px;border-radius:10px}
  .cf-badge{opacity:0}
  .cf-chart i{transform:scaleY(1)}
  .cf-appbar,.cf-conn,.cf-mhead,.cf-chart,.cf-trow,.cf-foot,.cf-c5{opacity:1}
}
@media (max-width:1000px){.cf-stage{transform:scale(.72);transform-origin:top center;margin-bottom:-128px}}
@media (max-width:360px){.cf-stage{transform:scale(.64);margin-bottom:-166px}}
.hl-solo{max-width:460px;margin:30px auto 0}
.hl-solo .pt-card{margin:0 auto;animation:cardGlow 7s ease-in-out infinite}

/* Sektions-Trenner: wandernder Cyan-Schimmer */
main > section::before{background:linear-gradient(90deg,transparent,rgba(94,226,255,.5),rgba(255,255,255,.14),transparent);background-size:50% 100%;animation:dividerScan 9s linear infinite}
@keyframes dividerScan{0%{background-position:-60% 0}100%{background-position:160% 0}}


/* ============================================================
   NON PLUS ULTRA — 2026 CSS: View Transitions (MPA), Scroll-Reveal,
   OKLCH-Gradients, schimmernder Akzent-Text, Container Queries.
   Alles zero-JS, @supports/prefers-reduced-motion-sicher.
   ============================================================ */

/* --- 1) Cross-Document View Transitions (sanfter Seitenwechsel) --- */
@view-transition { navigation: auto; }
nav.top{ view-transition-name: site-header; }   /* Header bleibt stabil */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: vtOut .16s ease both; }
  ::view-transition-new(root){ animation: vtIn .32s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes vtOut{ to{ opacity:0 } }
  @keyframes vtIn{ from{ opacity:0; transform: translateY(12px) } to{ opacity:1; transform:none } }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation: none; }
}

/* --- 2) Scroll-Reveal (JS via IntersectionObserver, cross-browser; No-JS-Fallback = sichtbar) --- */
.js-anim .reveal-sec{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js-anim .reveal-sec.in{opacity:1;transform:none}
.js-anim .reveal{opacity:0;transform:translateY(26px) scale(.985);filter:blur(2px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.js-anim .reveal.in{opacity:1;transform:none;filter:blur(0)}

/* --- 3) OKLCH-Gradients: lebendigerer Blau→Cyan-Verlauf + Akzent-Schimmer --- */
.btn.primary{ background: linear-gradient(135deg in oklch, #2864F0 0%, #4F86FF 55%, #2D6CFF 100%); }
h1.h1 .grad, h2.h2 .grad{
  background: linear-gradient(110deg in oklch, #ffffff 0%, var(--cyan) 32%, var(--blue-3) 58%, var(--blue) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- 4) Container Queries: Karten reagieren auf ihre eigene Breite --- */
.apps-grid, .pillars, .wf-steps, .price-grid, .wf-why{ container-type: inline-size; }
@container (max-width: 420px){
  .wf-step h4{ font-size:14px } .wf-step p{ font-size:12px }
  .pillar h3, .wf-card h3{ font-size:16px }
}


/* Sicherheit: animierter KI-Council ("KI prueft KI"), ~14s-Loop */
.council{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.cnl-step{flex:1 1 120px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:center;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-1)}
.cnl-k{font-size:14px;font-weight:600;color:var(--fg)}
.cnl-s{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--fg-3)}
.cnl-wire{flex:0 1 30px;align-self:center;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(94,226,255,.08),rgba(127,233,255,.55),rgba(94,226,255,.08));background-size:220% 100%;background-position:130% 0;opacity:.25}
.cnl-hub{flex:2 1 230px;min-width:0;display:flex;flex-direction:column;gap:6px;padding:11px;border:1px solid rgba(45,108,255,.28);border-radius:12px;background:linear-gradient(135deg,rgba(45,108,255,.10),rgba(94,226,255,.03))}
.cnl-rev{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-1);font-size:12.5px;color:var(--fg-1)}
.cnl-rd{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--blue-2)}
.cnl-rn{flex:1 1 auto}
.cnl-rc{flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#2D6CFF,#1A4DCC);color:#fff;font-size:11px;display:grid;place-items:center;opacity:0;transform-origin:center}
.cnl-nets{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.cnl-net{font-family:var(--mono);font-size:9px;letter-spacing:.03em;color:var(--cyan);border:1px solid rgba(94,226,255,.2);border-radius:5px;padding:3px 7px;display:inline-flex;align-items:center;gap:5px}
.cnl-net::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--cyan);opacity:.5}
.cnl-gate{position:relative;overflow:hidden}
.cnl-gok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--cyan);font-weight:600;font-size:14px;opacity:0;border-radius:12px;background:linear-gradient(135deg,rgba(45,108,255,.18),rgba(94,226,255,.06)),var(--bg-1)}
@media (prefers-reduced-motion:no-preference){
  .cnl-wire.w1{animation:cnlW1 14s ease-in-out infinite}
  .cnl-wire.w2{animation:cnlW2 14s ease-in-out infinite}
  .cnl-wire.w3{animation:cnlW3 14s ease-in-out infinite}
  .v0 .cnl-rc{animation:cnlCk0 14s ease-in-out infinite}
  .v1 .cnl-rc{animation:cnlCk1 14s ease-in-out infinite}
  .v2 .cnl-rc{animation:cnlCk2 14s ease-in-out infinite}
  .v0{animation:cnlRow0 14s ease-in-out infinite}
  .v1{animation:cnlRow1 14s ease-in-out infinite}
  .v2{animation:cnlRow2 14s ease-in-out infinite}
  .cnl-net{animation:cnlNet 14s ease-in-out infinite}
  .cnl-gate{animation:cnlGate 14s ease-in-out infinite}
  .cnl-gq{animation:cnlGq 14s ease-in-out infinite}
  .cnl-gok{animation:cnlGok 14s ease-in-out infinite}
  .cnl-out{animation:cnlOut 14s ease-in-out infinite}
}
@keyframes cnlW1{0%,3%{opacity:.22;background-position:130% 0}8%{opacity:1}15%{background-position:-30% 0}19%{opacity:.22;background-position:-30% 0}100%{opacity:.22;background-position:-30% 0}}
@keyframes cnlW2{0%,44%{opacity:.22;background-position:130% 0}49%{opacity:1}55%{background-position:-30% 0}59%{opacity:.22;background-position:-30% 0}100%{opacity:.22;background-position:-30% 0}}
@keyframes cnlW3{0%,60%{opacity:.22;background-position:130% 0}65%{opacity:1}71%{background-position:-30% 0}75%{opacity:.22;background-position:-30% 0}100%{opacity:.22;background-position:-30% 0}}
@keyframes cnlCk0{0%,18%{opacity:0;transform:scale(.5)}23%{opacity:1;transform:scale(1)}88%{opacity:1}92%{opacity:0}100%{opacity:0}}
@keyframes cnlCk1{0%,26%{opacity:0;transform:scale(.5)}31%{opacity:1;transform:scale(1)}88%{opacity:1}92%{opacity:0}100%{opacity:0}}
@keyframes cnlCk2{0%,34%{opacity:0;transform:scale(.5)}39%{opacity:1;transform:scale(1)}88%{opacity:1}92%{opacity:0}100%{opacity:0}}
@keyframes cnlRow0{0%,16%{border-color:var(--line-2)}21%{border-color:rgba(94,226,255,.5)}30%{border-color:rgba(45,108,255,.3)}90%{border-color:rgba(45,108,255,.3)}94%{border-color:var(--line-2)}100%{border-color:var(--line-2)}}
@keyframes cnlRow1{0%,24%{border-color:var(--line-2)}29%{border-color:rgba(94,226,255,.5)}38%{border-color:rgba(45,108,255,.3)}90%{border-color:rgba(45,108,255,.3)}94%{border-color:var(--line-2)}100%{border-color:var(--line-2)}}
@keyframes cnlRow2{0%,32%{border-color:var(--line-2)}37%{border-color:rgba(94,226,255,.5)}46%{border-color:rgba(45,108,255,.3)}90%{border-color:rgba(45,108,255,.3)}94%{border-color:var(--line-2)}100%{border-color:var(--line-2)}}
@keyframes cnlNet{0%,100%{border-color:rgba(94,226,255,.18)}45%{border-color:rgba(94,226,255,.45)}}
@keyframes cnlGate{0%,48%{border-color:var(--line-2);box-shadow:none}54%{border-color:rgba(94,226,255,.5);box-shadow:0 0 22px -8px rgba(94,226,255,.6)}90%{border-color:rgba(94,226,255,.5);box-shadow:0 0 22px -8px rgba(94,226,255,.6)}94%{border-color:var(--line-2);box-shadow:none}100%{border-color:var(--line-2);box-shadow:none}}
@keyframes cnlGq{0%,48%{opacity:1}51%{opacity:0}91%{opacity:0}96%{opacity:1}100%{opacity:1}}
@keyframes cnlGok{0%,52%{opacity:0}56%{opacity:1}90%{opacity:1}94%{opacity:0}100%{opacity:0}}
@keyframes cnlOut{0%,62%{opacity:.4}68%{opacity:1}90%{opacity:1}95%{opacity:.4}100%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.cnl-rc{opacity:1}.cnl-gq{opacity:0}.cnl-gok{opacity:1}.cnl-out{opacity:1}}
@media (max-width:640px){.council{flex-direction:column;align-items:stretch}.cnl-wire{display:none}}


/* Problem: Chaos -> saubere App */
.chaos{display:flex;align-items:stretch;gap:14px;margin:30px 0 6px;flex-wrap:wrap}
.ch-mess,.ch-app{flex:1 1 250px;min-width:0;border-radius:14px;padding:14px;position:relative}
.ch-mess{border:1px solid var(--line-2);background:var(--bg-1);min-height:178px;overflow:hidden}
.ch-app{border:1px solid rgba(45,108,255,.28);background:linear-gradient(135deg,rgba(45,108,255,.08),rgba(94,226,255,.03));display:flex;flex-direction:column;gap:8px}
.ch-cap{position:absolute;top:12px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);z-index:2}
.ch-chip{position:absolute;display:inline-flex;align-items:center;padding:7px 12px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--fg-2);background:var(--surface);border:1px solid var(--line-2);box-shadow:0 6px 16px -8px rgba(0,0,0,.6);white-space:nowrap;transform:rotate(var(--r))}
.ch-chip::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--fg-3);opacity:.5;margin-right:7px}
.cm0{--r:-6deg;top:42px;left:16px}.cm1{--r:4deg;top:86px;left:96px}.cm2{--r:-3deg;top:130px;left:24px}.cm3{--r:7deg;top:52px;left:150px}.cm4{--r:-5deg;top:120px;left:158px}
.ch-wire{flex:0 1 30px;align-self:center;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(94,226,255,.08),rgba(127,233,255,.55),rgba(94,226,255,.08));background-size:220% 100%;background-position:130% 0}
.ch-bar{display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid var(--line-2)}
.ch-dots{display:flex;gap:5px}.ch-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.ch-title{font-size:13px;font-weight:600;color:var(--fg)}
.ch-live{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--cyan);border:1px solid rgba(94,226,255,.4);border-radius:5px;padding:2px 6px}
.ch-row{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-1);font-size:13px;color:var(--fg);font-weight:500}
.ch-ok{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#2D6CFF,#1A4DCC);color:#fff;font-size:11px;display:grid;place-items:center}
@media (prefers-reduced-motion:no-preference){
  .ch-chip{animation:chJit 7s ease-in-out infinite}
  .cm1{animation-delay:.9s}.cm2{animation-delay:1.7s}.cm3{animation-delay:2.6s}.cm4{animation-delay:3.4s}
  .ch-wire{animation:chWire 6s linear infinite}
  .ch-ok{animation:chOk 4.5s ease-in-out infinite}
  .r1 .ch-ok{animation-delay:.55s}.r2 .ch-ok{animation-delay:1.1s}
}
@keyframes chJit{0%,100%{transform:rotate(var(--r)) translate(0,0)}50%{transform:rotate(calc(var(--r) + 2.5deg)) translate(3px,-4px)}}
@keyframes chWire{0%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes chOk{0%,100%{box-shadow:0 0 0 0 rgba(94,226,255,0)}50%{box-shadow:0 0 12px -2px rgba(94,226,255,.55)}}
@media (max-width:640px){.chaos{flex-direction:column}.ch-wire{display:none}}


/* Demo: lebendiges Vorschau-Mockup (Count-up KPIs + Zeilen-Highlight) */
@property --cu0{syntax:"<integer>";inherits:false;initial-value:0}
@property --cu1{syntax:"<integer>";inherits:false;initial-value:0}
@property --cu2{syntax:"<integer>";inherits:false;initial-value:0}
.mv0{--cu0:14;counter-reset:cu0 var(--cu0)}.mv0::after{content:counter(cu0)}
.mv1{--cu1:5;counter-reset:cu1 var(--cu1)}.mv1::after{content:counter(cu1)}
.mv2{--cu2:9;counter-reset:cu2 var(--cu2)}.mv2::after{content:counter(cu2)}




/* Section-Koepfe ueber voll-breitem Inhalt zentrieren (fuellt den Leerraum, Codex-Empfehlung) */
@supports selector(:has(*)){
.section:has(>.wrap>.pains)>.wrap>.eyebrow, .section:has(>.wrap>.apps-grid)>.wrap>.eyebrow, .section:has(>.wrap>.wf-steps)>.wrap>.eyebrow, .section:has(>.wrap>.loop-steps)>.wrap>.eyebrow, .section:has(>.wrap>.pillars)>.wrap>.eyebrow, .section:has(>.wrap>.demo2-stage)>.wrap>.eyebrow, .section:has(>.wrap>.resp)>.wrap>.eyebrow, .section:has(>.wrap>.table-wrap)>.wrap>.eyebrow{display:flex;justify-content:center}
.section:has(>.wrap>.pains)>.wrap>.h2, .section:has(>.wrap>.apps-grid)>.wrap>.h2, .section:has(>.wrap>.wf-steps)>.wrap>.h2, .section:has(>.wrap>.loop-steps)>.wrap>.h2, .section:has(>.wrap>.pillars)>.wrap>.h2, .section:has(>.wrap>.demo2-stage)>.wrap>.h2, .section:has(>.wrap>.resp)>.wrap>.h2, .section:has(>.wrap>.table-wrap)>.wrap>.h2{margin-left:auto;margin-right:auto;text-align:center;text-wrap:balance}
.section:has(>.wrap>.pains)>.wrap>.h2+.lede-2, .section:has(>.wrap>.apps-grid)>.wrap>.h2+.lede-2, .section:has(>.wrap>.wf-steps)>.wrap>.h2+.lede-2, .section:has(>.wrap>.loop-steps)>.wrap>.h2+.lede-2, .section:has(>.wrap>.pillars)>.wrap>.h2+.lede-2, .section:has(>.wrap>.demo2-stage)>.wrap>.h2+.lede-2, .section:has(>.wrap>.resp)>.wrap>.h2+.lede-2, .section:has(>.wrap>.table-wrap)>.wrap>.h2+.lede-2{margin-left:auto;margin-right:auto;text-align:center;max-width:760px}
}
@media (max-width:760px){
.section:has(>.wrap>.pains)>.wrap>.h2, .section:has(>.wrap>.apps-grid)>.wrap>.h2, .section:has(>.wrap>.wf-steps)>.wrap>.h2, .section:has(>.wrap>.loop-steps)>.wrap>.h2, .section:has(>.wrap>.pillars)>.wrap>.h2, .section:has(>.wrap>.demo2-stage)>.wrap>.h2, .section:has(>.wrap>.resp)>.wrap>.h2, .section:has(>.wrap>.table-wrap)>.wrap>.h2{text-align:left;margin-left:0}
.section:has(>.wrap>.pains)>.wrap>.h2+.lede-2, .section:has(>.wrap>.apps-grid)>.wrap>.h2+.lede-2, .section:has(>.wrap>.wf-steps)>.wrap>.h2+.lede-2, .section:has(>.wrap>.loop-steps)>.wrap>.h2+.lede-2, .section:has(>.wrap>.pillars)>.wrap>.h2+.lede-2, .section:has(>.wrap>.demo2-stage)>.wrap>.h2+.lede-2, .section:has(>.wrap>.resp)>.wrap>.h2+.lede-2, .section:has(>.wrap>.table-wrap)>.wrap>.h2+.lede-2{text-align:left;margin-left:0}
.section:has(>.wrap>.pains)>.wrap>.eyebrow, .section:has(>.wrap>.apps-grid)>.wrap>.eyebrow, .section:has(>.wrap>.wf-steps)>.wrap>.eyebrow, .section:has(>.wrap>.loop-steps)>.wrap>.eyebrow, .section:has(>.wrap>.pillars)>.wrap>.eyebrow, .section:has(>.wrap>.demo2-stage)>.wrap>.eyebrow, .section:has(>.wrap>.resp)>.wrap>.eyebrow, .section:has(>.wrap>.table-wrap)>.wrap>.eyebrow{justify-content:flex-start}
}

/* Projekt-Baum-Sektion (.hl-solo): Kopf ebenfalls zentrieren */
@supports selector(:has(*)){
.section:has(>.wrap>.hl-solo)>.wrap>.eyebrow{display:flex;justify-content:center}
.section:has(>.wrap>.hl-solo)>.wrap>.h2{margin-left:auto;margin-right:auto;text-align:center;text-wrap:balance}
.section:has(>.wrap>.hl-solo)>.wrap>.h2+.lede-2{margin-left:auto;margin-right:auto;text-align:center;max-width:760px}
}
@media (max-width:760px){
.section:has(>.wrap>.hl-solo)>.wrap>.h2{text-align:left;margin-left:0}
.section:has(>.wrap>.hl-solo)>.wrap>.h2+.lede-2{text-align:left;margin-left:0}
.section:has(>.wrap>.hl-solo)>.wrap>.eyebrow{justify-content:flex-start}
}

/* === Unterseiten-Hero: 2-spaltig (Text + ruhiges Signature-Visual) === */
.page-hero-2{padding:110px 0 70px}
.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:920px){.ph-grid{grid-template-columns:1fr;gap:34px}}
.ph-text{min-width:0}
.page-hero-2 .ph-text .lede-2{margin-bottom:0;max-width:560px}
.ph-vis{min-width:0}
/* Bühne (eine Komponente für alle Unterseiten) */
.hv-card{max-width:460px;margin:0 auto;border:1px solid var(--line-2);border-radius:18px;background:linear-gradient(180deg,var(--surface-2),var(--surface));padding:18px;position:relative;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset}
.hv-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(180,210,255,.5),transparent)}
.hv-card::after{content:"";position:absolute;inset:-1px;border-radius:18px;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,rgba(45,108,255,.16),transparent 70%)}
.hv-bar{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--line-2)}
.hv-dots{display:flex;gap:5px}.hv-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.hv-title{font-size:13.5px;font-weight:600;color:var(--fg)}
.hv-chip{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(94,226,255,.4);border-radius:5px;padding:3px 7px}
.hv-rows{position:relative;z-index:1;display:flex;flex-direction:column;gap:9px}
.hv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-1);font-size:13.5px;color:var(--fg);font-weight:500}
.hv-val{font-family:var(--mono);font-size:12px;color:var(--cyan)}
@media (prefers-reduced-motion:no-preference){
  .hv-row{animation:hvCycle 9s ease-in-out infinite;animation-delay:calc(var(--i)*2.25s)}
}
@keyframes hvCycle{0%{border-color:rgba(94,226,255,.5);background:linear-gradient(135deg,rgba(45,108,255,.14),rgba(94,226,255,.05));box-shadow:0 0 22px -10px rgba(94,226,255,.5)}9%{border-color:var(--line-2);background:var(--bg-1);box-shadow:none}100%{border-color:var(--line-2);background:var(--bg-1);box-shadow:none}}


/* ===================== HERO-FILME (Unterseiten) ===================== */
.film-card .flm{position:relative;height:300px;z-index:1}
.film-card{padding-bottom:20px}
/* gemeinsame Bausteine */
.flm-prompt{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:11px 13px;box-sizing:border-box;border:1px solid var(--line-2);border-radius:11px;background:linear-gradient(180deg,var(--surface-2),var(--surface));opacity:0;z-index:3}
.flm-pdot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.flm-type{overflow:hidden;white-space:nowrap;width:0;font-size:12.5px;color:var(--fg);font-weight:500}
.flm-cur{flex:0 0 auto;width:2px;height:16px;background:var(--cyan);opacity:0}
/* Pipeline (how-it-works) */
.flm-pipe{position:absolute;left:6px;right:6px;top:74px;display:flex;flex-direction:column;gap:8px}
.flm-pline{position:absolute;left:18px;top:4px;bottom:4px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(94,226,255,.12),rgba(127,233,255,.55),rgba(94,226,255,.12));transform:scaleY(0);transform-origin:top}
.flm-step{position:relative;display:flex;align-items:center;gap:13px;padding:7px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-1);opacity:0;z-index:1}
.flm-dot{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--cyan)}
.flm-slbl{font-size:13px;font-weight:600;color:var(--fg)}
.flm-ck{margin-left:auto;width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#2D6CFF,#1A4DCC);color:#fff;font-size:11px;display:grid;place-items:center;opacity:0}
.flm-live{position:absolute;left:6px;right:6px;bottom:-6px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--cyan);border:1px solid rgba(94,226,255,.35);border-radius:9px;padding:9px;background:linear-gradient(135deg,rgba(45,108,255,.12),rgba(94,226,255,.04));opacity:0}
@media (prefers-reduced-motion:no-preference){
  .flm-how .flm-prompt{animation:flmFade 18s ease-in-out infinite}
  .flm-how .flm-type{animation:flmType 18s ease-in-out infinite}
  .flm-how .flm-cur{animation:flmCur 18s ease-in-out infinite}
  .flm-how .flm-pline{animation:flmLine 18s ease-in-out infinite}
  .flm-how .s0{animation:flmStep 18s ease-in-out infinite;animation-delay:.0s}
  .flm-how .s1{animation:flmStep 18s ease-in-out infinite;animation-delay:.0s}
  .flm-how .s2{animation:flmStep 18s ease-in-out infinite;animation-delay:.0s}
  .flm-how .s3{animation:flmStep 18s ease-in-out infinite;animation-delay:.0s}
  .flm-how .s0 .flm-ck{animation:flmCk0 18s ease-in-out infinite}
  .flm-how .s1 .flm-ck{animation:flmCk1 18s ease-in-out infinite}
  .flm-how .s2 .flm-ck{animation:flmCk2 18s ease-in-out infinite}
  .flm-how .s3 .flm-ck{animation:flmCk3 18s ease-in-out infinite}
  .flm-how .flm-live{animation:flmLive 18s ease-in-out infinite}
}
.flm-how .s0{--d:18%}.flm-how .s1{--d:22%}.flm-how .s2{--d:26%}.flm-how .s3{--d:30%}
@keyframes flmFade{0%{opacity:0}3%{opacity:1}90%{opacity:1}96%{opacity:0}100%{opacity:0}}
@keyframes flmType{0%,2%{width:0}14%{width:40ch}100%{width:40ch}}
@keyframes flmCur{0%{opacity:0}3%{opacity:1}16%{opacity:1}20%{opacity:0}100%{opacity:0}}
@keyframes flmLine{0%,16%{transform:scaleY(0)}30%{transform:scaleY(1)}92%{transform:scaleY(1)}98%{transform:scaleY(0)}100%{transform:scaleY(0)}}
@keyframes flmStep{0%,16%{opacity:0;transform:translateX(-10px)}24%{opacity:1;transform:translateX(0)}40%{opacity:1;transform:translateX(0)}90%{opacity:1;transform:translateX(0)}97%{opacity:0;transform:translateX(-6px)}100%{opacity:0}}
@keyframes flmCk0{0%,42%{opacity:0;transform:scale(.5)}46%{opacity:1;transform:scale(1)}92%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes flmCk1{0%,50%{opacity:0;transform:scale(.5)}54%{opacity:1;transform:scale(1)}92%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes flmCk2{0%,58%{opacity:0;transform:scale(.5)}62%{opacity:1;transform:scale(1)}92%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes flmCk3{0%,66%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1)}92%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes flmLive{0%,74%{opacity:0;transform:translateY(6px)}82%{opacity:1;transform:translateY(0)}92%{opacity:1}97%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.flm-how .flm-prompt,.flm-how .flm-step,.flm-how .flm-live{opacity:1}.flm-how .flm-type{width:auto}.flm-how .flm-pline{transform:scaleY(1)}.flm-how .flm-ck{opacity:1}}

/* Überschriften: brechen nur ZWISCHEN den Teilen, nie mitten im Satz (Desktop) */
.h1 .hl-lead,.h2 .hl-lead,.h1 .grad,.h1 .blue,.h2 .grad,.h2 .blue{white-space:nowrap}
.page-hero-2 .h1{font-size:clamp(26px,3vw,44px)}
/* Hero-Zeile 1 „Dein Betrieb läuft anders." nie umbrechen — etwas kleiner, bündig mit Zeile 2 (DE).
   EN-Headline ist länger -> dort natürlicher Umbruch, sonst Überlauf. */
.h1 .h1-lead{white-space:nowrap;font-size:0.8em}
:lang(en) .h1 .h1-lead{white-space:normal;font-size:1em}
@media (max-width:640px){.h1 .hl-lead,.h2 .hl-lead,.h1 .grad,.h1 .blue,.h2 .grad,.h2 .blue{white-space:normal}.h1 .h1-lead{white-space:normal;font-size:1em}}