@font-face{font-family:"Orbitron";src:url(fonts/orbitron-latin.woff2) format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--bg:#05060f;--text:#e9ecff;--muted:#b0b7da;--faint:#8e96bd;--cyan:#22d3ee;--violet:#a78bfa;--magenta:#f472b6;
  --grad:linear-gradient(135deg,var(--cyan),var(--violet) 55%,var(--magenta));color-scheme:dark;
  --display:"Orbitron",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}

/* Hintergrund: Aurora, Partikelnetz, Körnung, Lichtkegel */
#net{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;width:56vmax;height:56vmax;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){left:-26vmax;top:-32vmax;background:radial-gradient(circle,rgba(34,211,238,.26),transparent 62%);animation:d1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:-32vmax;top:4vmax;background:radial-gradient(circle,rgba(167,139,250,.30),transparent 62%);animation:d2 27s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:6vmax;bottom:-44vmax;background:radial-gradient(circle,rgba(244,114,182,.20),transparent 62%);animation:d3 31s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate3d(16vmax,12vmax,0) scale(1.15)}}
@keyframes d2{to{transform:translate3d(-14vmax,16vmax,0) scale(.9)}}
@keyframes d3{to{transform:translate3d(18vmax,-12vmax,0) scale(1.2)}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  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")}

/* Bühne und Karte */
.stage{position:relative;z-index:2;min-height:100dvh;display:grid;grid-template-rows:1fr auto;justify-items:center;
  padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.card{align-self:center;width:min(440px,100%);position:relative;padding:36px 28px 26px;border-radius:30px;text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:0 30px 80px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14);
  will-change:transform;animation:cardIn .9s cubic-bezier(.2,.8,.2,1) both}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:.8;
  background:linear-gradient(135deg,var(--cyan),var(--violet) 55%,var(--magenta));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@keyframes cardIn{from{opacity:0;transform:perspective(900px) translateY(26px) scale(.97);filter:blur(10px)}to{opacity:1;filter:none}}

/* Logo mit kreisendem Ring */
.mark{position:relative;width:88px;height:88px;margin:0 auto 20px;display:grid;place-items:center}
.mark::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 50%,var(--cyan),var(--violet),var(--magenta),transparent);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 65%);mask:radial-gradient(circle,transparent 63%,#000 65%);animation:rot 5s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.mark button{all:unset;cursor:pointer;width:66px;height:66px;border-radius:22px;background:var(--grad);display:grid;place-items:center;
  font:800 1.9rem var(--display);color:#05060f;box-shadow:0 0 44px rgba(167,139,250,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.mark button:hover{transform:rotate(-8deg) scale(1.08)}
.mark button:active{transform:scale(.94)}

.eyebrow{margin:0 0 10px;font:600 .72rem var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);animation:up .8s .2s both}
.title{margin:0;font:900 clamp(1.45rem,7.4vw,2.55rem)/1.05 var(--display);letter-spacing:.13em;text-indent:.13em;text-transform:uppercase;
  background:var(--grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titleIn 1.2s .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes titleIn{from{opacity:0;letter-spacing:.5em;filter:blur(10px)}to{opacity:1}}
.lead{margin:14px 0 4px;font-size:1.05rem;color:var(--text);animation:up .8s .5s both}
.greet{margin:0;font-size:.9rem;color:var(--muted);animation:up .8s .6s both}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px 0 26px;padding:0;list-style:none}
.chips li{padding:6px 12px;border-radius:99px;font-size:.78rem;color:var(--muted);border:1px solid rgba(148,163,255,.18);background:rgba(255,255,255,.04);animation:up .7s both}
.chips li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:var(--c);box-shadow:0 0 8px var(--c)}
.chips li:nth-child(1){--c:var(--cyan);animation-delay:.75s}
.chips li:nth-child(2){--c:var(--violet);animation-delay:.82s}
.chips li:nth-child(3){--c:var(--magenta);animation-delay:.89s}
.chips li:nth-child(4){--c:#fbbf24;animation-delay:.96s}
.chips li:nth-child(5){--c:#34d399;animation-delay:1.03s}

/* Hauptknopf */
.cta{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px 22px;border-radius:18px;
  font:700 1.02rem var(--body);letter-spacing:.02em;color:#05060f;text-decoration:none;overflow:hidden;
  background:var(--grad);background-size:150% 100%;box-shadow:0 16px 44px -12px rgba(167,139,250,.7),inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .2s ease-out,box-shadow .3s,background-position .6s;animation:up .8s 1.1s both}
.cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);transition:left .8s}
.cta:hover,.cta:focus-visible{background-position:100% 0;box-shadow:0 20px 56px -10px rgba(244,114,182,.75),inset 0 0 0 1px rgba(255,255,255,.35)}
.cta:hover::after,.cta:focus-visible::after{left:130%}
.cta svg{width:20px;height:20px;transition:transform .25s}
.cta:hover svg{transform:translateX(5px)}
.cta:active{scale:.98}
.hint{margin:16px 0 0;font-size:.82rem;color:var(--faint);animation:up .8s 1.25s both}
.hint strong{color:var(--muted);font-weight:600}
.ios{margin:10px 0 0;font-size:.78rem;color:var(--faint);animation:up .8s 1.35s both}

.foot{display:flex;gap:18px;padding-top:18px;font-size:.78rem}
.foot a{color:var(--faint);text-decoration:none;padding:6px 4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot a:hover{color:var(--text);border-color:var(--violet)}

/* Rechtstexte */
.sheet{align-self:start;width:min(720px,100%);margin-top:4vh;padding:34px 30px;border-radius:26px;text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:0 30px 80px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(148,163,255,.16);animation:cardIn .7s both}
.sheet h1{margin:0 0 6px;font:800 1.6rem var(--display);letter-spacing:.06em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sheet h2{margin:26px 0 6px;font:700 1rem var(--body);color:var(--text)}
.sheet p,.sheet li{color:var(--muted);font-size:.95rem}
.sheet ul{padding-left:20px}
.sheet .stand{font-size:.8rem;color:var(--faint)}
.back{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;font-size:.88rem;color:var(--muted);text-decoration:none}
.back:hover{color:var(--text)}


@media (max-width:420px){.card{padding:30px 20px 22px;border-radius:26px}.sheet{padding:26px 20px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.card{transform:none}}
@media (prefers-contrast:more){.eyebrow,.hint,.ios,.foot a{color:var(--muted)}}