@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("./fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("./fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
:root{
    --bg:#070A12; --bg2:#0A0E18; --s1:#0D1220; --s2:#111728; --s3:#161D31;
    --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
    --text:#F5F7FF; --text2:#A6AEC3; --text3:#69728A;
    --grad:linear-gradient(135deg,#437BFF 0%,#604BFF 40%,#923DFF 72%,#D84DFF 100%);
    --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.6 Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,92vw);margin:0 auto}

header{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:rgba(7,10,18,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;height:68px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.26em;font-size:1.05rem}
.brand img{width:32px;height:32px;filter:drop-shadow(0 0 12px rgba(132,62,255,.6))}
.nav nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.nav nav a{padding:9px 14px;border-radius:10px;color:var(--text2);font-size:.9rem;transition:background .14s var(--ease),color .14s var(--ease)}
.nav nav a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px;border-radius:11px;font-weight:600;font-size:.92rem;border:1px solid var(--line2);background:rgba(255,255,255,.06);cursor:pointer;transition:transform .14s var(--ease),filter .14s var(--ease),background .14s var(--ease)}
.btn:hover{background:rgba(255,255,255,.1)}
.btn:active{transform:scale(.97)}
.btn.grad{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 10px 30px rgba(96,75,255,.35)}
.btn.grad:hover{filter:brightness(1.08)}
.btn.lg{height:52px;padding:0 26px;font-size:1rem}

.hero{position:relative;padding:92px 0 80px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(60% 80% at 78% 10%,rgba(132,62,255,.35),transparent 62%),
    radial-gradient(45% 70% at 92% 70%,rgba(216,77,255,.22),transparent 60%),
    radial-gradient(50% 60% at 10% 0%,rgba(67,123,255,.22),transparent 62%);pointer-events:none}
.hero h1{position:relative;margin:0 0 16px;font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.05;letter-spacing:-.035em;font-weight:700}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{position:relative;margin:0 0 30px;font-size:1.1rem;color:var(--text2);max-width:58ch}
.cta{position:relative;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.meta{position:relative;margin-top:16px;font-size:.84rem;color:var(--text3)}
.shot{position:relative;margin-top:56px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--s1);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.shot img{display:block;width:100%;height:auto}
.heroring{position:absolute;right:-90px;top:20px;width:420px;height:420px;pointer-events:none;opacity:.9}
.heroring i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(146,61,255,.3)}
.heroring i:nth-child(2){inset:60px;border-color:rgba(67,123,255,.35);animation:spin 26s linear infinite}
.heroring i:nth-child(3){inset:120px;border-color:rgba(216,77,255,.4);animation:spin 16s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

section{padding:76px 0}
h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;margin:0 0 10px}
.lead{color:var(--text2);max-width:62ch;margin:0 0 34px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{padding:24px;border-radius:18px;background:var(--s1);border:1px solid var(--line);transition:transform .14s var(--ease),border-color .14s var(--ease)}
.card:hover{transform:translateY(-3px);border-color:var(--line2)}
.card h3{margin:0 0 8px;font-size:1.05rem}
.card p{margin:0;color:var(--text2);font-size:.92rem}
.card .ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;background:rgba(96,75,255,.18);color:#C9B8FF}

.dl{background:linear-gradient(180deg,rgba(13,18,32,.6),transparent)}
.dlbox{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:34px;border-radius:20px;background:var(--s1);border:1px solid var(--line)}
.dlbox .info{flex:1;min-width:260px}
.dlbox h3{margin:0 0 6px;font-size:1.3rem;letter-spacing:-.02em}
.dlbox p{margin:0;color:var(--text2);font-size:.94rem}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{font-size:.78rem;color:var(--text2);padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.steps{counter-reset:s;display:grid;gap:12px;margin-top:34px}
.step{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:700;font-size:.82rem;flex:none}
.step b{display:block;font-size:.95rem}
.step span{color:var(--text2);font-size:.88rem}

.faq details{padding:18px 20px;border-radius:14px;background:var(--s1);border:1px solid var(--line);margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--text3)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--text2);margin:10px 0 0;font-size:.92rem}

footer{border-top:1px solid var(--line);padding:38px 0 50px;color:var(--text3);font-size:.86rem}
.fgrid{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.fgrid nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.fgrid nav a:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Abstände statt Inline-Styles */
.mt12{margin-top:12px}
.mt24{margin-top:24px}