@font-face{font-family:Inter;src:url(/fonts/Inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/JetBrainsMono-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#07080c;--bg2:#0d0f16;--ink:#f3f4f8;--muted:#9096a8;--faint:#5d6378;
  --line:rgba(255,255,255,.08);--glass:rgba(18,20,30,.55);
  --acc:#7fb2ff;--hero:#b48cff;
  --r:22px;--max:1160px;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);letter-spacing:.02em}

/* Hintergrund: Aurora in der Farbe des aktiven Kanals, Raster, Körnung */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfx .blob{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(90px);opacity:.33;transition:background 1.4s ease}
.bgfx .b1{background:var(--hero);top:-28vmax;left:-14vmax;animation:drift1 26s ease-in-out infinite alternate}
.bgfx .b2{background:#3a5bff;bottom:-34vmax;right:-20vmax;opacity:.22;animation:drift2 32s ease-in-out infinite alternate}
.bgfx .b3{background:var(--hero);top:30%;right:-30vmax;width:40vmax;height:40vmax;opacity:.14;animation:drift1 22s ease-in-out infinite alternate-reverse}
.bgfx .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);opacity:.6}
.bgfx .grain{position:absolute;inset:-50%;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift1{to{transform:translate(12vmax,8vmax) scale(1.15)}}
@keyframes drift2{to{transform:translate(-10vmax,-6vmax) scale(.9)}}

/* Kopfzeile */
.top{position:sticky;top:0;z-index:20;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.top.scrolled{background:rgba(7,8,12,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand .mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font:700 13px var(--mono);color:#07080c;background:conic-gradient(from 200deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g1))}
.top nav{display:flex;gap:6px}
.top nav a{text-decoration:none;color:var(--muted);font-size:15px;padding:8px 14px;border-radius:999px;transition:color .2s,background .2s}
.top nav a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
@media (max-width:640px){.top nav a:not(.cta){display:none}}
.top nav a.cta{color:var(--ink);border:1px solid var(--line)}

/* Hero */
.hero{padding:56px 0 40px}
.hero .hgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media (max-width:900px){.hero .hgrid{grid-template-columns:1fr;gap:40px}.hero{padding-top:28px}}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border:1px solid var(--line);border-radius:999px;background:var(--glass);font-size:14px;color:var(--muted);backdrop-filter:blur(8px)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:#3fd38a;box-shadow:0 0 0 0 rgba(63,211,138,.6);animation:ping 2s infinite;margin-left:6px}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(63,211,138,0)}100%{box-shadow:0 0 0 0 rgba(63,211,138,0)}}
h1{font-size:clamp(44px,7.2vw,92px);line-height:.98;letter-spacing:-.045em;margin:22px 0 22px;font-weight:700}
.grad{background:linear-gradient(100deg,var(--g1),var(--g2) 30%,var(--g3) 60%,var(--g4));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 8s linear infinite}
@keyframes sheen{to{background-position:200% 0}}
.lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:560px;margin:0 0 26px}
.ask{min-height:2.6em;font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.02em;margin:0 0 30px;display:flex;gap:12px;align-items:flex-start}
.ask .q{color:var(--hero);transition:color .6s}
.ask .caret{display:inline-block;width:3px;height:1.05em;background:var(--hero);margin-left:3px;vertical-align:-.12em;animation:blink 1s steps(1) infinite}
.ask .who{flex:none;font:700 12px/1 var(--mono);text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:6px 8px;margin-top:5px}
@keyframes blink{50%{opacity:0}}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:16px;padding:14px 22px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:transform .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.btn.primary{background:var(--ink);color:#07080c;border-color:transparent}
.btn.primary:hover{background:#fff}
.btn svg{width:18px;height:18px}

/* Handy */
.stage{position:relative;display:grid;place-items:center}
.stage .halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:var(--hero);filter:blur(80px);opacity:.42;transition:background 1s}
.phone{position:relative;width:min(300px,72vw);aspect-ratio:9/19.2;border-radius:46px;padding:11px;background:linear-gradient(145deg,#2a2d38,#0c0d12 40%,#1c1e27);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px #000;transform:rotate(-3deg);animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:rotate(-1.5deg) translateY(-12px)}}
.phone .screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#000}
.phone video,.phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.phone .island{position:absolute;top:12px;left:50%;translate:-50% 0;width:32%;height:22px;border-radius:20px;background:#000;z-index:2}
.phone .bar{position:absolute;left:12px;right:12px;bottom:12px;height:3px;border-radius:3px;background:rgba(255,255,255,.2);z-index:2;overflow:hidden}
.phone .bar i{display:block;height:100%;width:0;background:#fff}
.chip-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(14,16,24,.78);border:1px solid var(--line);backdrop-filter:blur(12px);font-weight:700;font-size:14px;box-shadow:0 20px 40px -10px rgba(0,0,0,.6);transition:opacity .4s}
.chip-float img{width:34px;height:34px;border-radius:10px}
.chip-float small{display:block;font:700 11px var(--mono);color:var(--muted);text-transform:uppercase}
.chip-float.c1{left:-4%;top:16%;animation:float 6s ease-in-out infinite reverse}
.chip-float.c2{right:-2%;bottom:14%;animation:float 8s ease-in-out infinite}
@media (max-width:480px){.phone{width:min(250px,64vw)}.chip-float{font-size:13px}.chip-float.c1{left:0;top:8%}.chip-float.c2{right:0;bottom:4%}}

/* Logo-Laufband */
.marquee{margin:34px 0 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:14px;width:max-content;animation:scroll 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee a{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border:1px solid var(--line);border-radius:16px;background:var(--glass);text-decoration:none;font-weight:700;white-space:nowrap;transition:border-color .2s}
.marquee a:hover{border-color:var(--c)}
.marquee img{width:40px;height:40px;border-radius:12px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Zahlen */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:72px 0 0}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(10px)}
.stat b{display:block;white-space:nowrap;font-size:clamp(30px,4.4vw,52px);line-height:1;letter-spacing:-.04em}
.stat span{color:var(--muted);font-size:15px}

/* Abschnitte */
section{padding:110px 0 0}
.kicker{font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--g1),var(--g3))}
h2{font-size:clamp(32px,5vw,60px);hyphens:auto;overflow-wrap:break-word;line-height:1.02;letter-spacing:-.04em;margin:14px 0 16px}
.sub{color:var(--muted);max-width:620px;font-size:19px;margin:0}

/* Kanalkarten */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.cards .card:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:960px){.cards{grid-template-columns:1fr}}
.card{--mx:50%;--my:50%;position:relative;display:grid;grid-template-columns:1fr 150px;gap:22px;padding:26px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--cv) 70%,transparent),rgba(10,11,16,.82));overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 28%,transparent),transparent 60%);opacity:0;transition:opacity .35s}
.card:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent);transform:translateY(-4px)}
.card:hover::before{opacity:1}
@media (max-width:520px){.card{grid-template-columns:1fr;padding:20px}.card .mini{width:150px;order:-1}}
.card .head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.card .head img{width:64px;height:64px;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 10px 30px -10px var(--c)}
.card h3{margin:0;font-size:24px;letter-spacing:-.02em;line-height:1.15}
.card .handle{font:700 13px var(--mono);color:var(--c)}
.card p{margin:0 0 16px;color:color-mix(in srgb,var(--ink) 78%,transparent);font-size:16px}
.card ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px}
.card li{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--ink)}
.card li::before{content:"▶";font-size:10px;color:var(--c);flex:none;translate:0 -1px}
.card .links{display:flex;gap:8px;flex-wrap:wrap}
.card .links a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;text-decoration:none;padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:background .2s,border-color .2s}
.card .links a:hover{background:color-mix(in srgb,var(--c) 18%,transparent);border-color:color-mix(in srgb,var(--c) 50%,transparent)}
.card .links svg{width:16px;height:16px}
.mini{position:relative;align-self:start;width:100%;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 50px -20px var(--c)}
.mini video,.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mini .tag{position:absolute;left:8px;bottom:8px;z-index:1;font:700 10px var(--mono);text-transform:uppercase;padding:4px 7px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;position:relative}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:26px;border-radius:var(--r);border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px)}
.step .n{font:700 13px var(--mono);color:var(--muted)}
.step .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin:14px 0 16px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.step .ico svg{width:26px;height:26px}
.step h3{margin:0 0 8px;font-size:20px;letter-spacing:-.02em}
.step p{margin:0;color:var(--muted);font-size:15px}

/* Tool + Kontakt */
.tool{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin-top:40px;padding:30px;border-radius:28px;border:1px solid var(--line);background:var(--glass)}
@media (max-width:640px){.tool{grid-template-columns:1fr}}
.tool .ico{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:conic-gradient(from 200deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g1));color:#07080c}
.tool .ico svg{width:34px;height:34px}
.tool h3{margin:0 0 6px;font-size:22px}
.tool p{margin:0;color:var(--muted)}
.contact{text-align:center;padding:120px 0 40px}
.contact h2{margin-bottom:22px}
.mailbig{display:inline-block;font-size:clamp(26px,5vw,56px);font-weight:700;letter-spacing:-.03em;text-decoration:none;border-bottom:2px solid var(--line);padding-bottom:6px;transition:border-color .3s}
.mailbig:hover{border-color:var(--hero)}

/* Fußzeile */
footer{border-top:1px solid var(--line);margin-top:80px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;padding:28px 20px 40px;color:var(--faint);font-size:14px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}

/* Rechtstexte */
.legal{max-width:820px;margin:40px auto 0;padding:0 20px}
.legal .paper{padding:clamp(24px,5vw,54px);border-radius:28px;border:1px solid var(--line);background:rgba(13,15,22,.78);backdrop-filter:blur(14px)}
.legal h1{font-size:clamp(30px,7.4vw,58px);margin:10px 0 18px;hyphens:auto;overflow-wrap:break-word}
.legal h2{font-size:21px;letter-spacing:-.01em;margin:34px 0 8px}
.legal p{color:color-mix(in srgb,var(--ink) 82%,transparent);margin:0 0 12px}
.legal a{color:var(--acc)}
.legal .muted{color:var(--muted)}
.legal ul{margin:0 0 12px;padding-left:22px;color:color-mix(in srgb,var(--ink) 82%,transparent)}.legal li{margin:4px 0}.legal code{font:700 .85em var(--mono)}

/* Einblenden beim Scrollen */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}