@font-face{font-family:Outfit;font-weight:500;font-display:swap;src:url(fonts/outfit-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-weight:700;font-display:swap;src:url(fonts/outfit-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:500;font-display:swap;src:url(fonts/figtree-latin-500-normal.woff2) format("woff2")}
:root{--bg:#0E0626;--bg2:#160A3C;--ink:#fff;--muted:#C9BFE8;--violet:#6D28D9;--cyan:#22D3EE;--coral:#FF6B57}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 Figtree,system-ui,sans-serif;position:relative;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(90px);opacity:.55;z-index:0;pointer-events:none}
body::before{width:60vmax;height:60vmax;left:-20vmax;top:-25vmax;background:radial-gradient(circle,#7C3AED,transparent 65%);animation:drift 18s ease-in-out infinite alternate}
body::after{width:50vmax;height:50vmax;right:-18vmax;bottom:-20vmax;background:radial-gradient(circle,#22D3EE66,transparent 65%);animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(6vmax,4vmax) scale(1.1)}}
a{color:#fff;text-underline-offset:4px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:#fff;color:#160A3C;padding:10px 16px;border-radius:8px;z-index:10}
.skip:focus{top:12px}
header,main,footer{position:relative;z-index:1;width:100%;max-width:1040px;margin:0 auto;padding:0 24px}
header{padding-top:28px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand svg{width:44px;height:44px;flex:none}
.brand span{display:flex;flex-direction:column;line-height:1.2}
.brand b{font:700 1.15rem Outfit,sans-serif}
.brand small{color:var(--muted);font-size:.85rem}
main{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:8vh;padding-bottom:8vh}
.tag{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;padding:8px 16px;border:1px solid #ffffff33;border-radius:999px;background:#ffffff14;font:500 .9rem Figtree,sans-serif;color:#E9E3FF}
.tag i{width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 #FF6B5799;animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px #FF6B5700}100%{box-shadow:0 0 0 0 #FF6B5700}}
h1{font:700 clamp(2.6rem,8.5vw,6rem)/1.02 Outfit,sans-serif;letter-spacing:-.03em;margin:24px 0 20px}
h1 em{font-style:normal;background:linear-gradient(90deg,#22D3EE,#A78BFA 55%,#FF6B57);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:40rem;color:var(--muted);font-size:clamp(1.05rem,2.2vw,1.25rem);margin:0 0 32px}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 36px}
.chips li{padding:9px 18px;border-radius:999px;font:500 .95rem Figtree,sans-serif;background:#ffffff14;border:1px solid #ffffff2b}
.chips li:nth-child(1){border-color:#22D3EE99}.chips li:nth-child(2){border-color:#A78BFA99}.chips li:nth-child(3){border-color:#FF6B5799}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font:500 1.05rem Figtree,sans-serif;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn.p{background:var(--coral);color:#1a0a10;box-shadow:0 10px 30px -10px #FF6B57}
.btn.s{border:1.5px solid #ffffff66;color:#fff;background:#ffffff0d}
.btn:hover{transform:translateY(-2px)}
.card{margin-top:44px;display:flex;flex-wrap:wrap;gap:8px 32px;color:var(--muted);font-size:.98rem}
.card b{color:#fff;font-weight:500}
footer{padding-top:22px;padding-bottom:26px;border-top:1px solid #ffffff22;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--muted);font-size:.92rem}
footer nav{display:flex;gap:20px}
footer a{color:#E9E3FF}
/* Rechtsseiten */
.legal{padding-top:6vh;padding-bottom:6vh}
.legal h1{font-size:clamp(2rem,6vw,3.2rem);margin-top:8px}
.legal h2{font:700 1.25rem Outfit,sans-serif;margin:32px 0 8px}
.legal p{max-width:46rem;margin:0 0 12px;color:#E4DCFA}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* ---- Zusätzliche Bewegung (Basiszustand bleibt sichtbar; bei „reduzierte Bewegung“ entfällt alles) ---- */
@keyframes up{from{opacity:0;transform:translateY(26px)}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.9)}}
@keyframes slidein{from{opacity:0;transform:translateX(-18px)}}
@keyframes shift{to{background-position:100% 50%}}
@keyframes floaty{to{transform:translateY(-6px)}}
header .brand{animation:slidein .8s cubic-bezier(.2,.7,.2,1) both}
.brand svg{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover svg{transform:rotate(-10deg) scale(1.08)}
.tag{animation:pop .7s .1s cubic-bezier(.2,.8,.2,1) both}
h1{animation:up 1s .25s cubic-bezier(.2,.8,.2,1) both}
h1 em{background-size:240% 100%;animation:shift 6s 1.2s ease-in-out infinite alternate}
.lead{animation:up .9s .5s cubic-bezier(.2,.8,.2,1) both}
.chips li{animation:pop .7s cubic-bezier(.2,.8,.2,1) both,floaty 3.6s ease-in-out infinite alternate;transition:background .25s,transform .25s}
.chips li:nth-child(1){animation-delay:.7s,1.6s}.chips li:nth-child(2){animation-delay:.82s,2.1s}.chips li:nth-child(3){animation-delay:.94s,2.6s}
.chips li:hover{background:#ffffff26}
.actions{animation:up .9s 1s cubic-bezier(.2,.8,.2,1) both}
.card{animation:up .9s 1.15s cubic-bezier(.2,.8,.2,1) both}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,#ffffff59,transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.2,.7,.2,1)}
.btn:hover::after{left:130%}
.btn.p{animation:glow 3s 2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 10px 30px -10px #FF6B57,0 0 0 0 #FF6B5766}60%{box-shadow:0 10px 30px -10px #FF6B57,0 0 0 16px #FF6B5700}}
body{--mx:0;--my:0}
body::before{translate:calc(var(--mx)*-3vmax) calc(var(--my)*-3vmax);transition:translate .6s ease-out}
body::after{translate:calc(var(--mx)*4vmax) calc(var(--my)*4vmax);transition:translate .6s ease-out}
@media (prefers-reduced-motion:reduce){body::before,body::after{translate:none}}