/* spixe GmbH – Design System */
:root{
  --bg:#06070c; --bg2:#0b0d15; --surface:#0f121c; --surface2:#151926;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#eef0f7; --muted:#99a0b6; --dim:#6b7289;
  --a:#7c5cff; --b:#19e3c3; --c:#ff5ca8;
  --grad:linear-gradient(120deg,var(--a),var(--b));
  --r:20px; --max:1200px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;font-size:17px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--a);color:#fff}
.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 14px;border-radius:8px;z-index:200}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--b);outline-offset:3px;border-radius:6px}

/* Typography */
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.025em;font-weight:700}
h1{font-size:clamp(2.5rem,6.4vw,5.2rem)}
h2{font-size:clamp(1.9rem,4vw,3.1rem)}
h3{font-size:1.25rem;letter-spacing:-.01em;line-height:1.25}
p.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);max-width:60ch}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--b);margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--grad);border-radius:2px}
section{padding:clamp(70px,10vw,130px) 0;position:relative}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head p{color:var(--muted);margin-top:18px;font-size:1.1rem}

/* Header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;transition:.3s;padding:14px 0}
.hdr.scrolled{background:rgba(6,7,12,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);padding:9px 0}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;letter-spacing:-.03em}
.logo i{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;font-style:normal;color:#06070c;font-weight:900;font-size:1.05rem;box-shadow:0 0 30px rgba(124,92,255,.5)}
.logo small{font-weight:500;color:var(--dim);font-size:.7em;margin-left:-4px}
.nav{display:flex;align-items:center;gap:6px}
.nav>a,.nav .dd>a,.nav .dd>button{padding:9px 14px;border-radius:10px;font-size:.95rem;color:var(--muted);background:none;border:0;cursor:pointer;font-family:inherit;transition:.2s}
.nav>a:hover,.nav .dd:hover>a,.nav .dd:hover>button,.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.06)}
.dd{position:relative}
.dd-menu{position:absolute;top:100%;left:-80px;width:340px;padding:10px;margin-top:8px;background:rgba(15,18,28,.97);border:1px solid var(--line2);border-radius:16px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.dd-menu a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;font-size:.93rem;color:var(--muted);transition:.2s}
.dd-menu a:hover{background:rgba(255,255,255,.06);color:#fff}
.dd-menu svg{width:20px;height:20px;color:var(--b);flex:none}
.burger{display:none;width:46px;height:46px;border-radius:50%;background:transparent;border:1px solid var(--line2);cursor:pointer;position:relative}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:12px;right:12px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.burger::before{top:16px}.burger span{top:21px}.burger::after{top:26px}
.burger[aria-expanded="true"]::before{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"]::after{top:21px;transform:rotate(-45deg)}
.burger[aria-expanded="true"] span{opacity:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:14px;font-weight:600;font-size:1rem;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:transform .25s,box-shadow .25s,background .25s;position:relative;overflow:hidden;will-change:transform}
.btn-primary{background:var(--grad);color:#06070c;box-shadow:0 10px 40px -8px rgba(124,92,255,.65)}
.btn-primary::after{content:"";position:absolute;inset:0;background:radial-gradient(180px circle at var(--bx,50%) var(--by,0%),rgba(255,255,255,.55),transparent 60%);opacity:0;transition:.3s}
.btn-primary:hover::after{opacity:1}
.btn-primary:hover{box-shadow:0 14px 50px -6px rgba(25,227,195,.55)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line2);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn svg{width:18px;height:18px;transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn-sm{padding:10px 18px;font-size:.92rem;border-radius:12px}

/* Hero */
.hero{min-height:100svh;display:flex;align-items:center;padding:140px 0 90px;overflow:hidden}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::before{content:"";position:absolute;width:900px;height:900px;left:-300px;top:-300px;background:radial-gradient(closest-side,rgba(124,92,255,.28),transparent);filter:blur(20px);z-index:0}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:220px;background:linear-gradient(transparent,var(--bg));z-index:1;pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 8px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line2);font-size:.85rem;color:var(--muted);margin-bottom:28px}
.pill b{background:var(--grad);color:#06070c;padding:3px 10px;border-radius:99px;font-size:.72rem;letter-spacing:.06em}
.hero h1{margin-bottom:26px;font-size:clamp(2.05rem,4.6vw,3.9rem);min-height:3.24em}
.nw{white-space:nowrap}
.rot{display:inline-block;position:relative;min-width:1ch}
.rot::after{content:"";display:inline-block;width:.07em;height:.85em;background:var(--b);margin-left:.06em;vertical-align:-.05em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero .lead{margin-bottom:38px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.trust{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:44px;color:var(--muted);font-size:.9rem}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg{width:18px;height:18px;color:var(--b)}

/* Flow-Karte im Hero */
.flow{position:relative;background:linear-gradient(160deg,rgba(21,25,38,.9),rgba(11,13,21,.9));border:1px solid var(--line2);border-radius:26px;padding:26px;backdrop-filter:blur(10px);box-shadow:0 40px 120px -20px rgba(124,92,255,.35);animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.flow-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-size:.8rem;color:var(--dim)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#2a3042}
.dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.step{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);position:relative;opacity:.35;transition:.5s}
.step+.step{margin-top:26px}
.step+.step::before{content:"";position:absolute;left:30px;top:-26px;width:2px;height:26px;background:linear-gradient(var(--line2),var(--line2))}
.step.on{opacity:1;border-color:rgba(25,227,195,.4);background:rgba(25,227,195,.07);box-shadow:0 0 30px -8px rgba(25,227,195,.4)}
.step.on+.step::before{background:var(--grad)}
.step .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(124,92,255,.18);color:#b9a8ff;flex:none}
.step.on .ic{background:var(--grad);color:#06070c}
.step .ic svg{width:20px;height:20px}
.step b{display:block;font-size:.95rem}.step span{font-size:.8rem;color:var(--muted)}
.step .ok{margin-left:auto;color:var(--b);font-weight:700;font-size:.8rem;opacity:0;transition:.4s}
.step.on .ok{opacity:1}
.flow-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted)}
.flow-foot strong{color:var(--b)}

/* Marquee */
.marquee{padding:34px 0;border-block:1px solid var(--line);background:var(--bg2);overflow:hidden;position:relative}
.marquee small{display:block;text-align:center;color:var(--dim);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.mq{display:flex;width:max-content;animation:mq 38s linear infinite;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee:hover .mq{animation-play-state:paused}
.mq span{padding:0 36px;font-size:1.35rem;font-weight:700;color:#4b5268;white-space:nowrap;display:flex;align-items:center;gap:12px;transition:.3s}
.mq span:hover{color:#fff}
.mq span::after{content:"✦";font-size:.7rem;color:var(--a);margin-left:36px}
@keyframes mq{to{transform:translateX(-50%)}}

/* Cards / Spotlight */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:32px;overflow:hidden;transition:transform .35s,border-color .35s;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(124,92,255,.22),transparent 55%);opacity:0;transition:.35s;z-index:-1}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(25,227,195,.8),transparent 50%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.35s;pointer-events:none}
.card:hover{transform:translateY(-6px)}
.card:hover::before,.card:hover::after{opacity:1}
.card .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(25,227,195,.18));border:1px solid var(--line2);color:var(--b);margin-bottom:22px}
.card .ico svg{width:26px;height:26px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.97rem}
.card .more{display:inline-flex;gap:8px;align-items:center;margin-top:22px;font-weight:600;font-size:.93rem;color:var(--b)}
.card .more svg{width:16px;height:16px;transition:transform .25s}
.card:hover .more svg{transform:translateX(5px)}
.card ul.mini{margin-top:18px;display:grid;gap:7px}
.card ul.mini li{font-size:.88rem;color:var(--dim);padding-left:18px;position:relative}
.card ul.mini li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--grad)}
.card.big{grid-column:span 2}

/* Stats-Band */
.band{background:var(--bg2);border-block:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat b{display:block;font-size:clamp(2.2rem,4vw,3.4rem);letter-spacing:-.03em;line-height:1}
.stat span{color:var(--muted);font-size:.95rem;display:block;margin-top:10px}

/* Scroll-Stack Prozess */
.stack{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.stack-head{position:sticky;top:130px}
.stack-head p{color:var(--muted);margin-top:18px}
.stack-cards{display:grid;gap:0}
.scard{position:sticky;top:calc(120px + var(--i)*26px);margin-bottom:34px;background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--line2);border-radius:26px;padding:38px;box-shadow:0 -20px 60px rgba(0,0,0,.45);min-height:250px}
.scard .num{font-size:4.5rem;font-weight:800;line-height:1;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
.scard h3{font-size:1.6rem;margin:14px 0 10px}
.scard p{color:var(--muted)}
.scard ul{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.scard li{font-size:.82rem;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted)}

/* Produkte */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chip{padding:9px 18px;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--muted);cursor:pointer;font:inherit;font-size:.9rem;transition:.2s}
.chip:hover{color:#fff;border-color:var(--line2)}
.chip.on{background:var(--grad);color:#06070c;border-color:transparent;font-weight:600}
.prod{padding:26px}
.prod .tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--a);font-weight:700;margin-bottom:10px;display:block}
.prod h3{font-size:1.1rem;margin-bottom:8px}
.prod p{font-size:.92rem}
.prod[hidden]{display:none}

/* Split / Features */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.checks{display:grid;gap:18px;margin-top:30px}
.checks li{display:flex;gap:16px;align-items:flex-start}
.checks .tick{flex:none;width:28px;height:28px;border-radius:9px;background:var(--grad);display:grid;place-items:center;color:#06070c;margin-top:2px}
.checks .tick svg{width:16px;height:16px}
.checks b{display:block;margin-bottom:2px}
.checks span{color:var(--muted);font-size:.96rem}
.panel{background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--line2);border-radius:26px;padding:34px}
.panel h3{margin-bottom:6px}
.bar{margin-top:20px}
.bar div{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:8px;color:var(--muted)}
.bar i{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i::after{content:"";display:block;height:100%;width:var(--w);background:var(--grad);border-radius:99px;transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.in .bar i::after{transform:scaleX(1)}

/* FAQ */
.faq{max-width:860px}
details{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;transition:.25s}
details[open]{border-color:var(--line2);background:var(--surface2)}
summary{cursor:pointer;list-style:none;padding:22px 26px;font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.6rem;color:var(--b);transition:.3s;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 26px 24px;color:var(--muted)}

/* CTA */
.cta{padding:0 0 clamp(70px,10vw,120px)}
.cta-box{position:relative;overflow:hidden;border-radius:34px;padding:clamp(40px,7vw,90px);text-align:center;background:radial-gradient(900px 400px at 50% -20%,rgba(124,92,255,.55),transparent),radial-gradient(700px 400px at 100% 120%,rgba(25,227,195,.4),transparent),var(--surface);border:1px solid var(--line2)}
.cta-box h2{max-width:18ch;margin:0 auto 20px}
.cta-box p{color:#c4c9da;max-width:56ch;margin:0 auto 34px;font-size:1.1rem}
.cta-box .cta-row{justify-content:center}

/* Sub-Hero */
.phero{padding:170px 0 80px;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;width:800px;height:800px;right:-300px;top:-400px;background:radial-gradient(closest-side,rgba(124,92,255,.3),transparent)}
.phero::after{content:"";position:absolute;width:600px;height:600px;left:-300px;bottom:-400px;background:radial-gradient(closest-side,rgba(25,227,195,.16),transparent)}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(2.3rem,5.4vw,4.4rem);max-width:18ch;margin-bottom:24px}
.crumbs{display:flex;gap:10px;font-size:.88rem;color:var(--dim);margin-bottom:26px;flex-wrap:wrap}
.crumbs a:hover{color:#fff}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--line2)}
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc .card{padding:28px}
.svc .card h3{display:flex;gap:12px;align-items:center}
.svc .card h3 i{font-style:normal;font-size:.8rem;font-weight:700;color:var(--b);background:rgba(25,227,195,.1);border-radius:8px;padding:3px 9px}
.cat-block{padding:clamp(40px,6vw,70px) 0;border-top:1px solid var(--line)}
.cat-block:first-of-type{border-top:0}
.cat-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:50px}
.cat-grid>div:first-child{position:sticky;top:110px;align-self:start}
.cat-grid .ico{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,92,255,.3),rgba(25,227,195,.2));border:1px solid var(--line2);color:var(--b);margin-bottom:22px}
.cat-grid .ico svg{width:30px;height:30px}
.cat-grid p{color:var(--muted);margin:14px 0 22px}
.rows li{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);transition:.25s}
.rows li:hover{padding-left:12px}
.rows b{display:block;margin-bottom:3px}
.rows span{color:var(--muted);font-size:.95rem}
.rows em{font-style:normal;color:var(--dim);font-weight:700;font-size:.85rem;padding-top:3px;min-width:28px}
.rel{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.rel a{padding:10px 18px;border-radius:99px;border:1px solid var(--line2);background:var(--surface);font-size:.92rem;color:var(--muted);transition:.2s}
.rel a:hover{color:#fff;border-color:var(--b)}

/* Kontakt */
.kgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start}
.kinfo{display:grid;gap:16px}
.kitem{display:flex;gap:16px;align-items:center;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:18px;transition:.25s}
a.kitem:hover{border-color:var(--b);transform:translateX(6px)}
.kitem .ico{width:46px;height:46px;border-radius:14px;background:rgba(25,227,195,.1);color:var(--b);display:grid;place-items:center;flex:none}
.kitem .ico svg{width:22px;height:22px}
.kitem small{display:block;color:var(--dim);font-size:.8rem}
.kitem b{font-size:1.02rem}
form.form{background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--line2);border-radius:28px;padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
.field.full{grid-column:1/-1}
label{font-size:.85rem;font-weight:600;color:#c9cee0}
input,select,textarea{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line2);color:#fff;border-radius:13px;padding:14px 16px;font:inherit;font-size:.98rem;transition:.2s}
textarea{min-height:150px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%2319e3c3' stroke-width='2'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
select option{background:#0f121c}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--b);box-shadow:0 0 0 4px rgba(25,227,195,.12)}
input:user-invalid,textarea:user-invalid{border-color:#ff5c7a}
.consent{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--muted);font-size:.86rem}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--b);flex:none}
.consent a{color:var(--b);text-decoration:underline}
.hp{position:absolute;left:-9999px}
.form-msg{grid-column:1/-1;padding:16px 18px;border-radius:14px;font-size:.95rem;display:none}
.form-msg.ok{display:block;background:rgba(25,227,195,.1);border:1px solid rgba(25,227,195,.4);color:#8ff3df}
.form-msg.err{display:block;background:rgba(255,92,122,.1);border:1px solid rgba(255,92,122,.4);color:#ffb0bf}

/* Legal */
.legal{max-width:780px}
.legal h2{font-size:1.5rem;margin:40px 0 12px}
.legal p,.legal li{color:var(--muted);margin-bottom:12px}
.legal ul{list-style:disc;padding-left:22px}
.legal .todo{background:rgba(255,92,168,.1);border:1px solid rgba(255,92,168,.35);padding:14px 18px;border-radius:12px;color:#ffc0dc}

/* Footer */
.ftr{border-top:1px solid var(--line);background:var(--bg2);padding:70px 0 30px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.ftr h4{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.ftr li{margin-bottom:10px}
.ftr li a{color:var(--muted);font-size:.95rem;transition:.2s}
.ftr li a:hover{color:#fff}
.ftr p{color:var(--muted);font-size:.95rem;margin-top:16px;max-width:34ch}
.fbot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;color:var(--dim);font-size:.85rem}
.fbot a:hover{color:#fff}

/* Reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.noscroll{overflow:hidden}

@media (max-width:1000px){
  .hero .wrap,.split,.stack,.kgrid,.cat-grid{grid-template-columns:1fr}
  .flow{max-width:480px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .card.big{grid-column:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stack-head,.cat-grid>div:first-child{position:static}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .burger{display:block}
  .nav{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .g2,.g3,.g4,.svc,.stats,.fgrid{grid-template-columns:1fr}
  form.form{grid-template-columns:1fr}
  .scard{position:relative;top:0}
  .hero{padding-top:120px}
  .cta-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .mq{animation:none}
  .bar i::after{transform:none}
}

/* Nutzen-Leiste */
.strip{background:var(--bg2);border-block:1px solid var(--line);padding:30px 0}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.si{display:flex;gap:14px;align-items:center}
.si>span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(25,227,195,.18));border:1px solid var(--line2);color:var(--b)}
.si svg{width:22px;height:22px}
.si b{display:block;font-size:1.02rem}
.si small{color:var(--muted);font-size:.86rem}
@media (max-width:1000px){.strip .wrap{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.strip .wrap{grid-template-columns:1fr}}

/* Mobiles Vollbild-Menü */
.mnav{display:none}
@media (max-width:860px){
  .hdr{z-index:120}
  .hdr.menu-open{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
  .burger{z-index:121;transition:.3s}
  .burger:hover{border-color:var(--b)}
  .mnav{display:block;position:fixed;inset:0;z-index:110;background:#050609;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mnav::before{content:"";position:absolute;width:520px;height:520px;right:-260px;top:-160px;background:radial-gradient(closest-side,rgba(124,92,255,.3),transparent);pointer-events:none}
  .mnav.open{visibility:visible;opacity:1;transition:opacity .35s}
  .mnav-in{position:relative;padding:130px 24px 50px;min-height:100%}
  .mnav-in>a{display:flex;align-items:baseline;gap:16px;padding:10px 0;color:#8a90a6;transform:translateY(24px);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s,color .25s}
  .mnav-in>a b{font-size:clamp(2.4rem,11vw,3.4rem);letter-spacing:-.03em;line-height:1.1;font-weight:800}
  .mnav-in>a small{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
  .mnav-in>a[aria-current="page"],.mnav-in>a:active,.mnav-in>a:hover{color:#fff}
  .mnav.open .mnav-in>a,.mnav.open .mnav-info{transform:none;opacity:1}
  .mnav.open .mnav-in>a:nth-child(2){transition-delay:.06s}
  .mnav.open .mnav-in>a:nth-child(3){transition-delay:.12s}
  .mnav.open .mnav-in>a:nth-child(4){transition-delay:.18s}
  .mnav-info{margin-top:38px;padding-top:30px;border-top:1px solid var(--line);display:grid;gap:4px;transform:translateY(24px);opacity:0;transition:transform .6s .26s cubic-bezier(.2,.8,.2,1),opacity .6s .26s}
  .mnav-info .lab{display:flex;align-items:center;gap:12px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:14px 0 8px}
  .mnav-info .lab::before{content:"";width:34px;height:1px;background:var(--grad)}
  .mnav-info .mi{color:var(--muted);padding:7px 0;font-size:1.05rem}
  .mnav-info .mi:hover{color:#fff}
}

/* Über uns / Referenzen */
.stats3{grid-template-columns:repeat(3,1fr);gap:30px}
.strip .stat b{font-size:clamp(2.6rem,5vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.strip .stat span{max-width:26ch}
.member{text-align:center}
.avatar{width:128px;height:128px;margin:0 auto 22px;border-radius:50%;padding:3px;background:var(--grad)}
.avatar span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--surface2);font-size:2.6rem;font-weight:800;color:var(--dim)}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.member .role{display:block;color:var(--b);font-size:.85rem;font-weight:600;letter-spacing:.04em;margin-bottom:14px}
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ref{aspect-ratio:3/2;display:grid;place-items:center;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:border-color .3s,transform .3s,background .3s}
.ref:hover{border-color:var(--line2);transform:translateY(-4px);background:var(--surface2)}
.ref img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.75;transition:.3s}
.ref:hover img{filter:none;opacity:1}
.ref.ph{border-style:dashed;border-color:var(--line2);background:transparent}
.ref.ph span{color:var(--dim);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:1100px){.nav>a,.nav .dd>a{padding:9px 10px;font-size:.9rem}.nav .btn{display:none}}

@media (max-width:640px){.strip .stats3{grid-template-columns:1fr}.refs{grid-template-columns:repeat(2,1fr);gap:12px}.ref{padding:18px}}
@media (max-width:860px){.mnav.open .mnav-in>a:nth-child(5){transition-delay:.24s}.mnav.open .mnav-in>a:nth-child(6){transition-delay:.3s}.mnav-in>a b{font-size:clamp(2.1rem,10vw,3rem)}.mnav-in{padding-top:110px}.mnav-info{transition-delay:.36s}}

/* Wortmarke */
.logo .wm{font-size:1.7rem;font-weight:800;letter-spacing:-.045em;line-height:1;background:linear-gradient(110deg,#9b86ff 0%,#7c5cff 25%,#19e3c3 60%,#7cf5de 80%,#9b86ff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wm 8s linear infinite;padding-bottom:.08em}
@keyframes wm{to{background-position:-220% 0}}

/* Chatbot (Prototyp) */
.chat{position:fixed;right:20px;bottom:20px;z-index:130;font-family:var(--font)}
.chat-fab{width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;background:var(--grad);color:#06070c;display:grid;place-items:center;box-shadow:0 12px 40px -6px rgba(124,92,255,.7);transition:transform .3s,box-shadow .3s;position:relative}
.chat-fab:hover{transform:scale(1.07)}
.chat-fab svg{width:28px;height:28px;position:absolute;transition:.3s}
.chat-fab .i-x{opacity:0;transform:rotate(-90deg)}
.chat.open .i-chat{opacity:0;transform:rotate(90deg)}
.chat.open .i-x{opacity:1;transform:none}
.chat-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--b);animation:ping 2.4s ease-out infinite;pointer-events:none}
.chat.open .chat-fab::after{display:none}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.chat-panel{position:fixed;right:20px;bottom:98px;top:auto;padding:0;width:min(400px,calc(100vw - 32px));height:min(560px,calc(100svh - 120px));display:flex;flex-direction:column;background:rgba(11,13,21,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line2);border-radius:24px;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.65);transform-origin:bottom right;animation:chatIn .35s cubic-bezier(.2,.8,.2,1)}
.chat-panel[hidden]{display:none}
@keyframes chatIn{from{opacity:0;transform:translateY(16px) scale(.94)}}
.chat-head{display:flex;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,rgba(124,92,255,.22),rgba(25,227,195,.1))}
.chat-av{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#06070c;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.chat-head b{display:block;font-size:.98rem}
.chat-head small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.78rem}
.chat-head small i{width:7px;height:7px;border-radius:50%;background:#28c840;box-shadow:0 0 8px #28c840}
.chat-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:82%;padding:11px 15px;border-radius:18px;font-size:.94rem;line-height:1.45;animation:msgIn .3s ease;word-wrap:break-word}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}}
.msg.bot{align-self:flex-start;background:var(--surface2);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:var(--grad);color:#06070c;font-weight:500;border-bottom-right-radius:5px}
.msg.typing{display:flex;gap:5px;padding:14px 16px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--dim);animation:dot 1.1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.chat-form{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line)}
.chat-form input{flex:1;min-width:0;border-radius:99px;padding:12px 18px;font-size:16px}
.chat-form button{flex:none;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:var(--grad);color:#06070c;display:grid;place-items:center;transition:transform .2s}
.chat-form button:hover{transform:scale(1.08)}
.chat-form button svg{width:20px;height:20px}
@media (max-width:520px){.chat{right:14px;bottom:14px}.chat-panel{right:16px;bottom:88px;height:min(560px,calc(100svh - 104px))}}
body.noscroll .chat{display:none}
@media (prefers-reduced-motion:reduce){.chat-fab::after{display:none}}

/* Demo-Dashboards */
.demo{padding-bottom:40px}
.dtabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.dtab{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:.25s}
.dtab svg{width:18px;height:18px}
.dtab:hover{color:#fff;border-color:var(--line2)}
.dtab.on{background:var(--grad);color:#06070c;border-color:transparent;box-shadow:0 10px 30px -8px rgba(124,92,255,.6)}
.dwin{background:linear-gradient(160deg,#10131f,#0a0c14);border:1px solid var(--line2);border-radius:26px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(124,92,255,.35)}
.dbar{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.dtitle{flex:1;text-align:center;color:var(--dim);font-size:.8rem;letter-spacing:.04em}
.dbadge{font-size:.68rem;font-weight:800;letter-spacing:.12em;padding:4px 10px;border-radius:99px;background:rgba(255,92,168,.14);color:#ff8cc2;border:1px solid rgba(255,92,168,.35)}
.dpanel{padding:20px;min-height:430px}
.dpanel[hidden]{display:none}
.ftop{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.fstatus{color:var(--muted);font-size:.92rem}
.fstatus b{color:var(--b);font-size:1.1rem}
.btn:disabled{opacity:.55;cursor:default}
.cscroll{overflow-x:auto;border-radius:18px;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.canvas{position:relative;width:1000px;height:300px;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:22px 22px;background-color:#080a11;touch-action:pan-x}
.edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.edge{fill:none;stroke:#2e3550;stroke-width:2.5;stroke-dasharray:7 7;animation:dash 1s linear infinite}
.edge.live{stroke:var(--b);filter:drop-shadow(0 0 6px rgba(25,227,195,.7))}
@keyframes dash{to{stroke-dashoffset:-14}}
.elabel{position:absolute;left:0;top:0;font-size:.72rem;font-weight:700;color:var(--b);background:#0b1218;border:1px solid rgba(25,227,195,.4);padding:2px 9px;border-radius:99px;pointer-events:none}
.node{position:absolute;left:0;top:0;width:175px;height:64px;display:flex;align-items:center;gap:10px;padding:0 12px;background:#141828;border:1px solid var(--line2);border-radius:14px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:border-color .3s,box-shadow .3s,background .3s}
.node.drag{cursor:grabbing;z-index:5;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.node .nic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(124,92,255,.2);color:#b9a8ff;flex:none;transition:.3s}
.node .nic svg{width:18px;height:18px}
.node small{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.node b{display:block;font-size:.8rem;line-height:1.2}
.node .st{position:absolute;right:9px;top:9px;width:8px;height:8px;border-radius:50%;background:#2e3550;transition:.3s}
.node.active{border-color:#ffd166;box-shadow:0 0 30px -6px rgba(255,209,102,.6)}
.node.active .st{background:#ffd166;animation:blink .6s steps(1) infinite}
.node.done{border-color:rgba(25,227,195,.55);background:#0e1d22}
.node.done .nic{background:var(--grad);color:#06070c}
.node.done .st{background:var(--b);box-shadow:0 0 8px var(--b)}
.dhint{margin-top:12px;color:var(--dim);font-size:.82rem}
.dnote{margin-top:14px;color:var(--dim);font-size:.82rem;text-align:center}
/* Dashboard */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.kpi{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.kpi small{color:var(--muted);font-size:.8rem}
.kpi b{display:block;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em;margin:4px 0}
.kpi em{font-style:normal;color:var(--b);font-size:.78rem;font-weight:700}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dcard{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:18px}
.dcard.span2{grid-column:span 2}.dcard.span3{grid-column:span 3}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;font-size:.9rem}
.seg{display:flex;background:rgba(0,0,0,.35);border-radius:10px;padding:3px}
.seg button{background:none;border:0;color:var(--muted);font:inherit;font-size:.78rem;padding:5px 11px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--surface2);color:#fff}
.bars{height:190px;display:flex;align-items:flex-end;gap:8px}
.bcol{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;position:relative}
.bcol i{display:block;width:100%;max-width:34px;height:0;background:linear-gradient(180deg,var(--b),var(--a));border-radius:7px 7px 3px 3px;transition:height 1s cubic-bezier(.2,.8,.2,1)}
.bars.go .bcol i{height:calc((100% - 32px) * var(--h) / 100)}
.bcol small{font-size:.7rem;color:var(--dim)}
.bval{position:absolute;top:0;font-size:.68rem;color:var(--muted);opacity:0;transition:.2s}
.bcol:hover .bval{opacity:1}.bcol:hover i{filter:brightness(1.25)}
.donutw{position:relative;width:150px;margin:6px auto 0}
.donut{width:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke:rgba(255,255,255,.08);stroke-width:11}
.donut .arc{stroke:url(#none);stroke:var(--b);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1)}
.donut.go .arc{stroke-dasharray:87 100}
.donutw span{position:absolute;inset:0;display:grid;place-items:center;font-size:1.7rem;font-weight:800}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.75rem}
.live i{width:7px;height:7px;border-radius:50%;background:#28c840;box-shadow:0 0 8px #28c840;animation:blink 1.4s steps(1) infinite}
.feed{display:grid;gap:8px}
.feed li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.25);font-size:.88rem;animation:msgIn .4s ease}
.feed li i{width:8px;height:8px;border-radius:50%;background:var(--b);flex:none}
.feed li span{flex:1}
.feed li small{color:var(--dim);font-size:.75rem;white-space:nowrap}
/* Rechnungen */
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.inv{width:100%;border-collapse:collapse;min-width:520px;font-size:.92rem}
.inv th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:14px 18px;border-bottom:1px solid var(--line)}
.inv td{padding:15px 18px;border-bottom:1px solid var(--line);color:var(--muted)}
.inv td:first-child{color:var(--dim)}
.inv td:nth-child(2){color:var(--text);font-weight:600}
.inv .num{text-align:right}
.inv tr:last-child td{border-bottom:0}
.inv tr.new{animation:rowIn .5s ease}
@keyframes rowIn{from{opacity:0;background:rgba(124,92,255,.25)}}
.chip-s{display:inline-block;padding:4px 12px;border-radius:99px;font-size:.78rem;font-weight:700;transition:.3s}
.chip-s.s0{background:rgba(255,255,255,.08);color:var(--muted)}
.chip-s.s1{background:rgba(124,92,255,.2);color:#b9a8ff}
.chip-s.s2{background:rgba(255,209,102,.16);color:#ffd166}
.chip-s.s3{background:rgba(25,227,195,.16);color:var(--b)}
@media (max-width:860px){.kpis{grid-template-columns:repeat(2,1fr)}.dgrid{grid-template-columns:1fr}.dcard.span2,.dcard.span3{grid-column:auto}.dpanel{padding:14px}.dtitle{display:none}.dbar{justify-content:space-between}}
@media (prefers-reduced-motion:reduce){.edge{animation:none}.bcol i{transition:none}}
.stats3{text-align:center;justify-items:center}
.stats3 .stat span{margin-inline:auto;max-width:28ch}

/* ===== Startseite 2026: Hero-Visual ===== */
.hero .wrap{grid-template-columns:1fr 1.05fr;gap:40px}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);min-height:3.3em}
.hero .lead{max-width:34ch}
.hv{position:relative;width:100%;max-width:600px;margin-inline:auto;aspect-ratio:1}
.hv img{width:100%;height:100%;translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -16px);transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.hv-card{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:rgba(15,18,28,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line2);box-shadow:0 24px 60px -12px rgba(0,0,0,.7);translate:calc(var(--px,0) * 30px) calc(var(--py,0) * 30px);transition:translate .5s cubic-bezier(.2,.8,.2,1);animation:float 7s ease-in-out infinite;white-space:nowrap}
.hv-toast{left:-2%;top:3%}
.hv-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#06070c;flex:none}
.hv-ic svg{width:18px;height:18px}
.hv-toast b{display:block;font-size:.92rem;min-width:15ch}
.hv-toast b.sw{animation:swap .45s cubic-bezier(.2,.8,.2,1)}
@keyframes swap{from{opacity:0;transform:translateY(6px)}}
.hv-toast small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.74rem}
.hv-toast small i{width:7px;height:7px;border-radius:50%;background:#28c840;box-shadow:0 0 8px #28c840;animation:blink 1.4s steps(1) infinite}
.hv-years{right:-2%;top:47%;animation-delay:-2.3s;gap:10px}
.hv-years b{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.hv-years span{font-size:.78rem;color:var(--muted);line-height:1.25}
.hv-speed{left:3%;bottom:3%;animation-delay:-4.6s;flex-direction:column;align-items:flex-start;gap:3px;min-width:200px}
.hv-speed small{font-size:.72rem;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.hv-speed b{font-size:.95rem;color:var(--b)}
.hv-speed i{display:block;width:100%;height:5px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:6px;position:relative;overflow:hidden}
.hv-speed i::after{content:"";position:absolute;inset:0;background:var(--grad);border-radius:inherit;transform-origin:left;animation:fill 3.6s cubic-bezier(.6,0,.2,1) infinite}
@keyframes fill{0%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}}

/* Zahlen-Leiste */
.strip .nums{grid-template-columns:repeat(4,1fr)}
.num-i{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.num-i b{font-size:clamp(2.6rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.num-i span{color:var(--muted);font-size:.92rem;line-height:1.4;max-width:20ch}
.strip .stats3{grid-template-columns:repeat(3,1fr)}
.cta{padding-top:clamp(60px,8vw,110px)}

/* Leistungskarten mit Mini-Animationen */
.svc-card{padding:22px 22px 26px}
.svc-card p{font-size:.95rem}
.vbox{height:120px;border-radius:14px;background:radial-gradient(260px 120px at 50% 120%,rgba(124,92,255,.18),transparent),rgba(0,0,0,.3);border:1px solid var(--line);margin-bottom:20px;display:grid;place-items:center;padding:10px}
.viz{width:100%;height:100%;overflow:visible}
.viz *{transform-box:fill-box}
/* Automatisierung */
.v-auto .vl{stroke:rgba(255,255,255,.14);stroke-width:2;stroke-dasharray:4 6}
.v-auto .vb{fill:#0c0f19;stroke:rgba(255,255,255,.14);stroke-width:1.5;animation:vlit 3s infinite}
.v-auto .b2{animation-delay:1.1s}.v-auto .b3{animation-delay:2.1s}
@keyframes vlit{0%,40%,100%{stroke:rgba(255,255,255,.14)}6%,24%{stroke:#19e3c3}}
.v-auto .vi{fill:none;stroke:#b9a8ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v-auto .vchk{fill:none;stroke:#19e3c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:32;animation:vdraw 3s infinite}
@keyframes vdraw{0%,68%{stroke-dashoffset:32}80%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.v-auto .vdot{fill:#19e3c3;filter:drop-shadow(0 0 6px #19e3c3);animation:vmove 3s cubic-bezier(.6,0,.3,1) infinite}
@keyframes vmove{0%{transform:translateX(0);opacity:0}8%{opacity:1}70%{transform:translateX(160px);opacity:1}78%,100%{transform:translateX(160px);opacity:0}}
/* KI */
.v-ki .bub{fill:#1a1f30;stroke:rgba(255,255,255,.1)}
.v-ki .txt{stroke:#6b7289;stroke-width:5;stroke-linecap:round}
.v-ki .bub2{fill:url(#vg)}
.v-ki .td{fill:#06070c;animation:dot 1.1s infinite}
.v-ki .td:nth-of-type(2){animation-delay:.15s}.v-ki .td:nth-of-type(3){animation-delay:.3s}
.v-ki .cb{animation:bubin 4s cubic-bezier(.2,.8,.2,1) infinite}
.v-ki .c2{animation-delay:.6s}
@keyframes bubin{0%{opacity:0;transform:translateY(10px)}10%,85%{opacity:1;transform:none}95%,100%{opacity:0}}
/* Code */
.v-code .win{fill:#0c0f19;stroke:rgba(255,255,255,.14)}
.v-code .sep{stroke:rgba(255,255,255,.1)}
.v-code .cl{transform-origin:left center;animation:type 4s cubic-bezier(.6,0,.3,1) infinite}
.v-code .l1{fill:#7c5cff}.v-code .l2{fill:#19e3c3;animation-delay:.35s}.v-code .l3{fill:#ff5ca8;animation-delay:.7s}.v-code .l4{fill:#4b5268;animation-delay:1.05s}
@keyframes type{0%{transform:scaleX(0)}18%,85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
/* Daten */
.v-data .base{stroke:rgba(255,255,255,.14);stroke-width:1.5}
.v-data .br{fill:url(#vgv);transform-origin:bottom;animation:vbar 2.6s ease-in-out infinite}
.v-data .br:nth-of-type(2){animation-delay:-.4s}.v-data .br:nth-of-type(3){animation-delay:-.8s}.v-data .br:nth-of-type(4){animation-delay:-1.2s}.v-data .br:nth-of-type(5){animation-delay:-1.6s}.v-data .br:nth-of-type(6){animation-delay:-2s}.v-data .br:nth-of-type(7){animation-delay:-2.3s}
@keyframes vbar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
/* IT */
.v-it .rack{fill:#0c0f19;stroke:rgba(255,255,255,.14)}
.v-it .slot{stroke:#2a3042;stroke-width:4;stroke-linecap:round}
.v-it .led{fill:#28c840;animation:blink 1.6s steps(1) infinite}
.v-it .k1{fill:#19e3c3;animation-delay:.4s}.v-it .k2{animation-delay:.9s}.v-it .k3{fill:#7c5cff;animation-delay:1.2s}
.v-it .shield path:first-child{fill:rgba(25,227,195,.12);stroke:#19e3c3;stroke-width:2;stroke-linejoin:round}
.v-it .shield{transform-origin:center;animation:breathe 2.6s ease-in-out infinite}
.v-it .sc{fill:none;stroke:#19e3c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes breathe{50%{transform:scale(1.08)}}
/* Beratung */
.v-plan .road0{fill:none;stroke:rgba(255,255,255,.1);stroke-width:3;stroke-dasharray:3 7;stroke-linecap:round}
.v-plan .road{fill:none;stroke:url(#vg);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;animation:road 4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes road{0%{stroke-dashoffset:100}55%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.v-plan .ms{fill:#0c0f19;stroke:#4b5268;stroke-width:2.5;animation:ms 4s infinite}
.v-plan .m2{animation-delay:.9s}.v-plan .m3{animation-delay:2.1s}
@keyframes ms{0%,100%{stroke:#4b5268;fill:#0c0f19}8%,60%{stroke:#19e3c3;fill:#19e3c3}}

/* 21-Jahre-Ring */
.ring{position:relative;width:min(380px,100%);aspect-ratio:1;margin-inline:auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.r-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:14}
.r-dash{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.5;stroke-dasharray:2 8}
.r-prog{fill:none;stroke:url(#vg);stroke-width:14;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 2.2s cubic-bezier(.2,.8,.2,1) .2s;filter:drop-shadow(0 0 14px rgba(124,92,255,.6))}
.ring.in .r-prog{stroke-dasharray:100 100}
.r-orb{transform-origin:160px 160px;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.r-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.r-in b{font-size:clamp(5rem,12vw,7.5rem);font-weight:800;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.r-in span{color:var(--muted);font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-top:10px}
.checks.short li{align-items:center}
.checks.short b{font-size:1.12rem;margin:0}

/* Zeitstrahl */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;counter-reset:s}
.tl::before,.tl::after{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:var(--line2)}
.tl::after{background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform 1.8s cubic-bezier(.6,0,.2,1) .3s}
.tl.in::after{transform:scaleX(1)}
.tl li{position:relative;z-index:1}
.tl-n{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--surface2);border:1px solid var(--line2);color:var(--dim);margin-bottom:20px;transition:background .5s,color .5s,box-shadow .5s}
.tl.in .tl-n{background:var(--grad);color:#06070c;box-shadow:0 0 0 6px var(--bg),0 0 30px rgba(124,92,255,.55)}
.tl.in li:nth-child(2) .tl-n{transition-delay:.7s}.tl.in li:nth-child(3) .tl-n{transition-delay:1.2s}.tl.in li:nth-child(4) .tl-n{transition-delay:1.7s}
.tl.in li:nth-child(1) .tl-n{transition-delay:.3s}
.tl b{display:block;font-size:1.25rem;margin-bottom:4px}
.tl small{color:var(--muted);font-size:.95rem}

/* CTA lebendiger */
.cta-box::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,92,168,.28),transparent);left:-120px;top:20%;animation:drift 12s ease-in-out infinite;pointer-events:none}
.cta-box>*{position:relative}
@keyframes drift{50%{transform:translate(70vw,-30%)}}
.marquee{border-block:1px solid var(--line)}

@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:20px}
  .hero h1{min-height:0}
  .hv{max-width:520px}
  .strip .nums{grid-template-columns:repeat(2,1fr);row-gap:30px}
  .tl{grid-template-columns:1fr 1fr;row-gap:40px}
  .tl::before,.tl::after{display:none}
}
@media (max-width:640px){
  .hv-card{padding:9px 12px;gap:9px;border-radius:13px}
  .hv-toast{left:0;top:0}
  .hv-ic{width:30px;height:30px}
  .hv-toast b{font-size:.82rem}
  .hv-years{right:0}
  .hv-years b{font-size:1.8rem}
  .hv-speed{left:0;bottom:0;min-width:170px}
  .hv-speed b{font-size:.85rem}
  .num-i{gap:6px}
  .tl{grid-template-columns:1fr;row-gap:22px}
  .tl li{display:grid;grid-template-columns:56px 1fr;column-gap:18px;align-items:center}
  .tl-n{margin:0;grid-row:span 2}
}
@media (max-width:520px){.strip .nums{grid-template-columns:repeat(2,1fr);gap:26px 16px}}
@media (prefers-reduced-motion:reduce){.r-prog{stroke-dasharray:100 100}.tl::after{transform:none}}

/* Geschichte seit 2005 */
.hist .sec-head{margin-inline:auto;text-align:center}
.hist .sec-head .eyebrow::after{content:"";width:28px;height:2px;background:var(--grad);border-radius:2px}
.era{position:relative;display:grid;gap:34px;max-width:1000px;margin-inline:auto;padding:10px 0}
.era::before,.era::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line2);border-radius:2px}
.era::after{background:linear-gradient(var(--a),var(--b));transform:scaleY(var(--p,0));transform-origin:top;box-shadow:0 0 14px rgba(25,227,195,.5)}
.era-i{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.era-i::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--bg);border:2px solid var(--line2);z-index:1;transition:.6s .3s}
.era-i.in::before{background:var(--b);border-color:var(--b);box-shadow:0 0 0 6px rgba(25,227,195,.15),0 0 24px var(--b)}
.era-y{text-align:right;font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);transition:.8s .2s}
.era-i.in .era-y{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0}
.era-i:nth-child(even) .era-y{order:2;text-align:left}
.era-c{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px 26px;transition:border-color .3s,transform .3s}
.era-c:hover{border-color:var(--line2);transform:translateY(-4px)}
.era-c small{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b);font-weight:700;margin-bottom:4px}
.era-c b{display:block;font-size:1.2rem;letter-spacing:-.01em}
.era-c p{color:var(--muted);font-size:.95rem;margin-top:6px}
.era-code{display:block;margin:16px 0 14px;padding:11px 14px;border-radius:11px;background:#07080d;border:1px solid var(--line);font:500 .86rem/1.4 ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;color:#c9cee0;white-space:nowrap;overflow:hidden}
.era-code i{font-style:normal}.era-code .k{color:#ff5ca8}.era-code .s{color:#19e3c3}.era-code .f{color:#b9a8ff}
.ty{display:inline-block;vertical-align:bottom;overflow:hidden;white-space:nowrap;width:0;transition:width 1.4s steps(24) .5s}
.era-i.in .ty{width:calc(var(--n) * 1ch)}
.era-code::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.2em;background:currentColor;opacity:.7;animation:blink 1s steps(1) infinite}
.era-old .era-code{background:#020803;border-color:rgba(61,255,122,.25);color:#3dff7a;text-shadow:0 0 8px rgba(61,255,122,.55)}
.era-ki .era-c{border:1px solid transparent;background:linear-gradient(var(--surface2),var(--surface2)) padding-box,var(--grad) border-box;box-shadow:0 20px 60px -20px rgba(124,92,255,.6)}
.era-ki .era-code{border-color:rgba(124,92,255,.4)}
.era-t{display:flex;flex-wrap:wrap;gap:6px}
.era-t li{font-size:.76rem;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted)}
@media (max-width:760px){
  .era::before,.era::after{left:11px}
  .era-i{grid-template-columns:1fr;gap:10px;padding-left:40px}
  .era-i::before{left:11px;top:18px}
  .era-y,.era-i:nth-child(even) .era-y{order:0;text-align:left;font-size:2.2rem}
}
@media (prefers-reduced-motion:reduce){.era{--p:1}.ty{width:calc(var(--n) * 1ch)}}

/* ===== Über uns: Hologramm-Teamkarten ===== */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ang{to{--ang:360deg}}
.team-sec .sec-head{margin-inline:auto;text-align:center}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1300px}
.tcard{position:relative;border-radius:28px;padding:2px;background:conic-gradient(from var(--ang),#7c5cff,#19e3c3,#ff5ca8,#ffd166,#7c5cff);animation:ang 7s linear infinite;box-shadow:0 30px 80px -30px rgba(124,92,255,.55)}
.tcard.in{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .9s,box-shadow .4s}
.tcard:hover{box-shadow:0 40px 100px -25px rgba(25,227,195,.45)}
.tcard:nth-child(2){animation-delay:-2.3s}.tcard:nth-child(3){animation-delay:-4.6s}
.tc-in{position:relative;height:100%;border-radius:26px;padding:24px 24px 26px;text-align:center;overflow:hidden;background:radial-gradient(500px 260px at 50% -10%,rgba(124,92,255,.22),transparent 70%),linear-gradient(170deg,#151a2a,#0b0d15 65%)}
.tc-in::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px;-webkit-mask:linear-gradient(#000,transparent 55%);mask:linear-gradient(#000,transparent 55%);pointer-events:none}
.tc-in>*{position:relative}
.tc-top{display:flex;justify-content:space-between;align-items:center}
.tc-no{font:600 .8rem ui-monospace,Consolas,monospace;color:var(--dim)}
.tc-role{font-size:.78rem;font-weight:800;letter-spacing:.16em;padding:5px 12px;border-radius:99px;background:var(--grad);color:#06070c}
.tc-ph{width:148px;height:148px;margin:14px auto 22px;border-radius:50%;display:grid;place-items:center;isolation:isolate}
.tc-ph::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from var(--ang),#7c5cff,#19e3c3,transparent 55%,#7c5cff);animation:ang 3.5s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.tc-ph::after{content:"";position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(closest-side,rgba(124,92,255,.35),transparent);z-index:-1;animation:breathe 3.4s ease-in-out infinite}
.tc-ini{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 25%,#2c2558,#10131f 72%);border:1px solid var(--line2);font-size:2.7rem;font-weight:800;letter-spacing:-.04em;color:#d9d2ff;text-shadow:0 0 24px rgba(124,92,255,.8)}
.tc-ph img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.tcard h3{font-size:1.45rem;letter-spacing:-.02em}
.tc-sub{display:block;color:var(--b);font-size:.8rem;font-weight:600;margin:6px 0 12px;line-height:1.4}
.tc-in p{color:var(--muted);font-size:.94rem}
.tc-term{margin:18px 0 16px;text-align:left;background:#06070b;border:1px solid var(--line);border-radius:12px;padding:11px 14px;font:500 .8rem/1.55 ui-monospace,"Cascadia Code",Consolas,monospace;min-height:72px}
.tc-term span{display:block;color:var(--dim)}
.tc-term b{font-weight:500;color:#19e3c3}
.tc-term b::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.15em;background:#19e3c3;animation:blink 1s steps(1) infinite}
.tc-sk{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.tc-sk li{font-size:.75rem;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted)}
.tc-foil,.tc-glare{position:absolute;inset:2px;border-radius:26px;pointer-events:none}
.tc-foil{background:repeating-linear-gradient(115deg,transparent 0%,rgba(124,92,255,.5) 7%,rgba(25,227,195,.5) 14%,rgba(255,209,102,.4) 21%,rgba(255,92,168,.45) 28%,transparent 35%);background-size:320% 320%;background-position:var(--fx,50%) var(--fy,50%);mix-blend-mode:color-dodge;opacity:.12;transition:opacity .4s}
.tc-glare{background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.3),transparent 45%);mix-blend-mode:overlay;opacity:0;transition:opacity .35s}
.tcard:hover .tc-foil{opacity:.5}.tcard:hover .tc-glare{opacity:1}
@media (hover:none){.tc-foil{opacity:.28;animation:foil 7s linear infinite}.hint-hover{display:none}}
@keyframes foil{to{background-position:320% 0}}

/* ===== Massanfertigung statt Stange ===== */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;margin-bottom:56px}
.vs-col{border-radius:22px;padding:26px 28px}
.vs-tag{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:99px;margin-bottom:18px}
.vs-col ul{display:grid;gap:14px}
.vs-col li{display:flex;align-items:center;gap:14px;font-weight:600}
.vs-col li i{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:.9rem;font-weight:800}
.vs-std{background:var(--surface);border:1px dashed var(--line2);filter:saturate(.4)}
.vs-std .vs-tag{background:rgba(255,255,255,.06);color:var(--dim)}
.vs-std li{color:var(--dim)}
.vs-std li i{background:rgba(255,92,122,.12);color:#ff5c7a}
.vs-std li span{text-decoration:line-through 1.5px transparent;transition:text-decoration-color .7s ease}
.vs.in .vs-std li span{text-decoration-color:#ff5c7a}
.vs.in .vs-std li:nth-child(2) span{transition-delay:.25s}.vs.in .vs-std li:nth-child(3) span{transition-delay:.5s}
.vs-sp{border:1px solid transparent;background:linear-gradient(var(--surface2),var(--surface2)) padding-box,conic-gradient(from var(--ang),#7c5cff,#19e3c3,#ff5ca8,#7c5cff) border-box;animation:ang 6s linear infinite;box-shadow:0 30px 80px -30px rgba(124,92,255,.6);transform:scale(1.03)}
.vs-sp .vs-tag{background:var(--grad);color:#06070c}
.vs-sp li i{background:var(--grad);color:#06070c;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.vs.in .vs-sp li i{transform:scale(1)}
.vs.in .vs-sp li:nth-child(1) i{transition-delay:.8s}.vs.in .vs-sp li:nth-child(2) i{transition-delay:1s}.vs.in .vs-sp li:nth-child(3) i{transition-delay:1.2s}
.vs-mid{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg);border:1px solid var(--line2)}
.sub-h{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:18px}
@media (max-width:800px){.vs{grid-template-columns:1fr;gap:14px}.vs-mid{margin:-6px auto}.vs-sp{transform:none}}
@media (prefers-reduced-motion:reduce){.vs-sp li i{transform:none}}

/* ===== Live-Cockpit ===== */
.ck-sec{padding-top:clamp(20px,3vw,40px)}
.ck-sec .sec-head{margin-inline:auto;text-align:center}
.ck-sec .sec-head p{margin-inline:auto}
/* Datenquellen */
.src{text-align:center;margin-bottom:6px}
.src-h{font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.02em;line-height:1.2;margin:0 auto 14px}
.src-p{color:var(--muted);max-width:62ch;margin:0 auto 26px;font-size:1.05rem}
.src-p b{color:var(--text)}
.src-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin-inline:auto}
.src-chips li{display:flex;align-items:center;gap:9px;padding:9px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line2);font-weight:700;font-size:.92rem;color:#dfe3f0;animation:chipglow 5s ease-in-out infinite}
.src-chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:#28c840;box-shadow:0 0 8px #28c840}
.src-chips li:nth-child(2){animation-delay:.5s}.src-chips li:nth-child(3){animation-delay:1s}.src-chips li:nth-child(4){animation-delay:1.5s}.src-chips li:nth-child(5){animation-delay:2s}.src-chips li:nth-child(6){animation-delay:2.5s}.src-chips li:nth-child(7){animation-delay:3s}.src-chips li:nth-child(8){animation-delay:3.5s}.src-chips li:nth-child(9){animation-delay:4s}.src-chips li:nth-child(10){animation-delay:4.5s}
@keyframes chipglow{0%,100%{border-color:var(--line2);box-shadow:none}10%{border-color:var(--b);box-shadow:0 0 24px -4px rgba(25,227,195,.6)}}
.src-flow{display:block;width:100%;height:90px;margin-top:4px}
.src-flow path{fill:none;stroke:url(#vg);stroke:#3b3f66;stroke-width:1.5;vector-effect:non-scaling-stroke}
.src-flow path{stroke-dasharray:4 10;animation:dash 1.2s linear infinite}
.src-flow path:nth-child(odd){stroke:#7c5cff}.src-flow path:nth-child(even){stroke:#19e3c3}
.src-node{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:16px;font-weight:700;border:1px solid transparent;background:linear-gradient(var(--surface2),var(--surface2)) padding-box,var(--grad) border-box;box-shadow:0 14px 40px -10px rgba(124,92,255,.6);position:relative;text-align:left}
.src-node small{display:block;font-weight:500;color:var(--muted);font-size:.75rem}
.src-node::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:34px;background:linear-gradient(var(--b),transparent)}
.src+.ck{margin-top:34px}

/* Cockpit-Fenster */
.ck{background:linear-gradient(160deg,#0f1220,#07080e);border:1px solid var(--line2);border-radius:26px;overflow:hidden;box-shadow:0 50px 140px -40px rgba(124,92,255,.55),0 0 0 1px rgba(25,227,195,.05)}
.ck-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.ck-title{flex:1;font-size:.88rem;color:#dfe3f0}
.ck-live{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;letter-spacing:.12em;color:#28c840}
.ck-live i{width:8px;height:8px;border-radius:50%;background:#28c840;box-shadow:0 0 10px #28c840;animation:blink 1.2s steps(1) infinite}
.ck-live.sm{font-size:.68rem;font-weight:700}
.ck-clock{font:600 .82rem ui-monospace,Consolas,monospace;color:var(--muted);font-variant-numeric:tabular-nums}
.ck-fs{width:34px;height:34px;border-radius:10px;border:1px solid var(--line2);background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.2s}
.ck-fs:hover{color:#fff;border-color:var(--b)}
.ck-fs svg{width:16px;height:16px}
.ck-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;padding:14px}
.ck-kpi,.ck-card{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:16px;padding:16px 18px;position:relative;overflow:hidden;min-width:0}
.ck-kpi{grid-column:span 3;padding-bottom:44px}
.ck-kpi small{color:var(--muted);font-size:.78rem}
.ck-kpi b{display:block;font-size:clamp(1.3rem,2.3vw,1.9rem);font-weight:800;letter-spacing:-.03em;margin:4px 0 2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ck-kpi em{font-style:normal;font-size:.72rem;color:var(--dim);font-weight:600}
.ck-kpi em.up{color:#28c840}.ck-kpi em.dn{color:var(--b)}
.ck-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:38px}
.ck-spark .l{fill:none;stroke:#19e3c3;stroke-width:2;vector-effect:non-scaling-stroke}
.ck-spark .a{fill:rgba(25,227,195,.12)}
.ck-kpi[data-k="rev"] .l{stroke:#7c5cff}.ck-kpi[data-k="rev"] .a{fill:rgba(124,92,255,.16)}
.ck-kpi[data-k="open"] .l{stroke:#ff5ca8}.ck-kpi[data-k="open"] .a{fill:rgba(255,92,168,.12)}
.ck-kpi.bump{animation:bump .9s ease-out}
@keyframes bump{0%{box-shadow:inset 0 0 0 1px rgba(25,227,195,.9),0 0 30px -6px rgba(25,227,195,.6)}100%{box-shadow:inset 0 0 0 1px transparent}}
.ck-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:.88rem}
.ck-h span{color:var(--dim);font-size:.74rem}
.ck-chart{grid-column:span 8;display:flex;flex-direction:column}
.ck-chart canvas{width:100%;height:220px;display:block;flex:1}
.ck-feed{grid-column:span 4;grid-row:span 2}
.ck-feed ul{display:grid;gap:7px}
.ck-feed li{display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:center;padding:9px 11px;border-radius:11px;background:rgba(0,0,0,.28);font-size:.8rem;line-height:1.35;animation:feedin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes feedin{from{opacity:0;transform:translateX(-14px);background:rgba(25,227,195,.18)}}
.ck-feed li i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.ck-feed li.new i{background:#7c5cff}.ck-feed li.paid i{background:#28c840;box-shadow:0 0 8px #28c840}.ck-feed li.auto i{background:#ffd166}
.ck-feed li b{color:#fff}
.ck-feed li small{color:var(--dim);font:500 .7rem ui-monospace,Consolas,monospace}
.ck-flow{grid-column:span 8}
.ck-lane{position:relative;height:178px}
.ck-st{position:absolute;top:0;width:20%;display:grid;justify-items:center;gap:1px;text-align:center}
.ck-st:nth-of-type(1){left:0}.ck-st:nth-of-type(2){left:20%}.ck-st:nth-of-type(3){left:40%}.ck-st:nth-of-type(4){left:60%}.ck-st:nth-of-type(5){left:80%}
.ck-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(124,92,255,.16);color:#b9a8ff;border:1px solid var(--line2);transition:.4s}
.ck-ico svg{width:19px;height:19px}
.ck-st b{font-size:1.05rem;font-variant-numeric:tabular-nums;line-height:1.3;margin-top:4px}
.ck-st small{font-size:.68rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.ck-st.busy .ck-ico{background:var(--grad);color:#06070c;box-shadow:0 0 22px -4px rgba(25,227,195,.7)}
.ck-st:nth-of-type(5) .ck-ico{background:rgba(40,200,64,.16);color:#28c840}
.ck-dots{position:absolute;left:0;right:0;top:96px;bottom:2px;border-radius:12px;background:linear-gradient(90deg,transparent 19.9%,rgba(255,255,255,.06) 20%,transparent 20.1%,transparent 39.9%,rgba(255,255,255,.06) 40%,transparent 40.1%,transparent 59.9%,rgba(255,255,255,.06) 60%,transparent 60.1%,transparent 79.9%,rgba(255,255,255,.06) 80%,transparent 80.1%),rgba(0,0,0,.25)}
.ck-rail{position:absolute;left:10%;right:10%;top:137px;height:2px;background:linear-gradient(90deg,#7c5cff,#19e3c3,#28c840);opacity:.35;z-index:0}
.ck-dots i{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;box-shadow:0 0 12px currentColor;transition:left 1s cubic-bezier(.6,0,.2,1),top 1s cubic-bezier(.6,0,.2,1)}
.ck-dots i.hop{animation:hop .5s ease-out}
@keyframes hop{50%{transform:scale(1.7)}}
.ck-dots i.paid{animation:paid 1.2s ease-out forwards;background:#28c840!important}
@keyframes paid{30%{transform:scale(2.2);box-shadow:0 0 24px #28c840}100%{transform:scale(0);opacity:0}}
.ck-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:.74rem;color:var(--muted)}
.ck-legend span{display:flex;align-items:center;gap:7px}
.ck-legend i,.ck-dl i{width:9px;height:9px;border-radius:50%;display:inline-block}
.ck-ai{grid-column:span 4;border:1px solid transparent;background:linear-gradient(#11142099,#111420) padding-box,var(--grad) border-box}
.ck-spk{display:inline-block;color:var(--b);animation:spin 4s linear infinite;margin-right:4px}
.ck-ai-t{font-size:1.02rem;line-height:1.5;color:#e7eaf5;min-height:4.6em}
.ck-ai-t::after{content:"";display:inline-block;width:.45em;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--b);animation:blink 1s steps(1) infinite}
.ck-donut{grid-column:span 4}
.ck-dw{position:relative;width:132px;margin:0 auto 10px}
.ck-dw svg{width:100%;transform:rotate(-90deg)}
.ck-dw circle{fill:none;stroke-width:13}
.ck-dw .trk{stroke:rgba(255,255,255,.06)}
.ck-dw .seg{stroke-dasharray:0 100;transition:stroke-dasharray .9s cubic-bezier(.2,.8,.2,1),stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1);stroke-linecap:round}
.ck-dw .s0{stroke:#19e3c3}.ck-dw .s1{stroke:#7c5cff}.ck-dw .s2{stroke:#ff5ca8}
.ck-dc{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ck-dc b{font-size:1.6rem;font-weight:800;line-height:1}.ck-dc small{font-size:.66rem;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.ck-dl{display:grid;gap:5px;font-size:.8rem;color:var(--muted)}
.ck-dl li{display:flex;align-items:center;gap:8px}.ck-dl b{margin-left:auto;color:#fff;font-variant-numeric:tabular-nums}
.ck-sites{grid-column:span 4}
.ck-sites ul{display:grid;gap:12px}
.ck-sites li{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font-size:.84rem}
.ck-sites li span{color:var(--muted)}.ck-sites li b{font-variant-numeric:tabular-nums}
.ck-sites li>i{grid-column:1/-1;height:7px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.ck-sites li>i i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.ck-cta{text-align:center;margin-top:26px}
.ck:fullscreen{overflow:auto;border-radius:0;border:0;background:#06070c}
.ck:fullscreen .ck-grid{gap:16px;padding:20px}
.ck:fullscreen .ck-chart canvas{height:34vh}
@media (max-width:1000px){
  .ck-kpi{grid-column:span 6}
  .ck-chart,.ck-feed,.ck-flow,.ck-ai{grid-column:span 12}
  .ck-feed{grid-row:auto}
  .ck-donut,.ck-sites{grid-column:span 6}
}
@media (max-width:600px){
  .ck-grid{padding:10px;gap:10px}
  .ck-kpi{padding:12px 13px 40px}
  .ck-kpi em{display:none}
  .ck-donut,.ck-sites{grid-column:span 12}
  .ck-chart canvas{height:170px}
  .ck-st small{font-size:.56rem;letter-spacing:0}
  .ck-ico{width:32px;height:32px}
  .ck-clock{display:none}
  .src-flow{height:60px}
}

/* ===== Mobile-Feinschliff ===== */
.pipe-run{min-height:36px}
@media (max-width:640px){
  /* Hero: animiertes Bild zuerst, damit es sofort sichtbar ist */
  .hero{padding-top:96px;padding-bottom:60px}
  .hero .wrap>.hv{order:-1;width:100%;max-width:290px;margin:0 auto 10px;display:flex;flex-direction:column;align-items:center}
  /* Schwebende Karten verdecken auf kleinen Screens die Symbole: nur den Live-Status zeigen, unter der Grafik */
  .hv-years,.hv-speed{display:none}
  .hv-toast{position:relative;left:auto;top:auto;margin-top:-14px;translate:none}
  .hero h1{font-size:clamp(2.3rem,10.5vw,2.9rem);margin-bottom:18px}
  .hero .lead{margin-bottom:28px}
  .pill{margin-bottom:18px;font-size:.8rem}
  .pill b{white-space:nowrap}
  /* Leistungen & Lösungsbeispiele als Wisch-Karussell */
  .svc-grid,#produkte .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-20px;padding:4px 20px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svc-grid::-webkit-scrollbar,#produkte .grid::-webkit-scrollbar{display:none}
  .svc-grid>.card,#produkte .grid>.card{flex:0 0 84%;scroll-snap-align:center}
  .svc-grid>.rv,#produkte .grid>.rv{transform:none}
  .svc-grid>.card:hover,#produkte .grid>.card:hover{transform:none}
  /* Cockpit */
  .ck-st small{font-size:.66rem;text-transform:none;letter-spacing:0;white-space:nowrap}
  .ck-feed li:nth-child(n+5){display:none}
  .src-node{padding-right:16px}
  .sec-head{margin-bottom:36px}
  .strip .stats3{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px) and (hover:none){.logo{padding:8px 0}}

/* Projekt-Pipeline */
.pipe{display:grid;gap:26px}
.pipe-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:10px 0;--pp:0}
.pipe-line{position:absolute;left:10%;right:10%;top:53.5px;height:3px;border-radius:3px;background:var(--line2)}
.pipe-fill{position:absolute;inset:0;border-radius:inherit;background:var(--grad);transform:scaleX(var(--pp));transform-origin:left;transition:transform 1.1s cubic-bezier(.6,0,.2,1);box-shadow:0 0 14px rgba(25,227,195,.7)}
.pipe-pk{position:absolute;z-index:2;top:48px;left:calc(10% + var(--pp) * 80%);width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(25,227,195,.25),0 0 24px #19e3c3;transition:left 1.1s cubic-bezier(.6,0,.2,1),top 1.1s cubic-bezier(.6,0,.2,1)}
.pn{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:3px}
.pn-ic{width:70px;height:70px;margin:10px 0;border-radius:20px;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line2);color:var(--muted);font-weight:800;font-size:1.05rem;transition:background .5s,color .5s,transform .5s,box-shadow .5s,border-color .5s}
.pn-ic svg{width:28px;height:28px}
.pn.on .pn-ic{background:var(--grad);color:#06070c;border-color:transparent;transform:scale(1.08);box-shadow:0 12px 40px -8px rgba(124,92,255,.7)}
.pn.cur .pn-ic{animation:pnp 1.3s ease-in-out infinite}
@keyframes pnp{50%{box-shadow:0 0 0 12px rgba(25,227,195,.14),0 12px 40px -6px rgba(25,227,195,.8)}}
.pn b{font-size:.98rem;line-height:1.25}
.pn small{color:var(--dim);font-size:.8rem}
.pn.on small{color:var(--b)}
.pipe-log{width:100%;max-width:820px;margin-inline:auto;background:#06070b;border:1px solid var(--line2);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(124,92,255,.4)}
.pl-head{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:.78rem;color:var(--dim)}
.pl-head>span:nth-child(2){flex:1}
.pipe-run{background:none;border:1px solid var(--line2);color:var(--muted);border-radius:8px;padding:4px 10px;font:inherit;font-size:.78rem;cursor:pointer;transition:.2s}
.pipe-run:hover{color:#fff;border-color:var(--b)}
.pipe-log ul{display:grid;align-content:start;gap:6px;min-height:178px;padding:14px 18px;font:500 .85rem/1.55 ui-monospace,"Cascadia Code",Consolas,monospace;color:#c9cee0}
.pipe-log li{display:flex;gap:14px;animation:msgIn .4s ease}
.pipe-log li em{font-style:normal;color:var(--dim);min-width:68px;flex:none}
.pipe-log li b{color:#b9a8ff;font-weight:600}
.pipe-log li:last-child span{color:#19e3c3}
@media (max-width:1000px){.tcards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
@media (max-width:760px){
  .pipe-track{grid-template-columns:1fr;gap:0;padding:0}
  .pn{grid-template-columns:70px 1fr;justify-items:start;text-align:left;column-gap:18px;align-items:center}
  .pn-ic{grid-row:span 2;margin:8px 0}
  .pn b{align-self:end}.pn small{align-self:start}
  .pipe-line{left:33.5px;right:auto;width:3px;top:10%;bottom:10%;height:auto}
  .pipe-fill{transform:scaleY(var(--pp));transform-origin:top}
  .pipe-pk{left:35px;top:calc(10% + var(--pp) * 80%);margin-top:-7px}
  .pipe-log li{flex-direction:column;gap:0}
}