:root{--bg:#000;--fg:#f5f5f7;--fg2:#86868b;--fg3:#6e6e73;--link:#2997ff;--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:400 17px/1.47 var(--font);letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
main{flex:1;width:min(980px,100% - 44px);margin-inline:auto}
.hero{min-height:calc(100svh - 72px);display:grid;place-content:center;text-align:center;gap:22px;padding-block:80px}
.mark{font-size:clamp(96px,22vw,200px);line-height:.9;font-weight:700;letter-spacing:-.05em;margin:0}
.claim{font-size:clamp(24px,4.6vw,40px);line-height:1.12;font-weight:600;letter-spacing:-.01em;margin:0}
.claim span{color:var(--fg2)}
.soon{font-size:17px;color:var(--fg2);margin:12px 0 0}
.rise{opacity:0;transform:translateY(24px);animation:rise 1s cubic-bezier(.33,1,.68,1) forwards;animation-delay:calc(.2s + var(--d,0)*.15s)}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}}
footer{width:min(980px,100% - 44px);margin-inline:auto;padding:22px 0 28px;border-top:1px solid #424245;display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--fg3)}
footer a{color:var(--fg2)}
footer .sp{flex:1}
.doc{max-width:692px;padding-block:72px 96px}
.doc h1{font-size:40px;line-height:1.1;font-weight:600;margin:0 0 40px}
.doc h2{font-size:21px;font-weight:600;margin:40px 0 8px}
.doc p,.doc li{color:#d2d2d7;margin:0 0 12px}
.back{display:inline-block;margin-bottom:40px;font-size:14px}
.btn{display:inline-flex;align-items:center;margin-top:12px;padding:12px 24px;border-radius:980px;background:#0071e3;color:#fff;font-size:17px;font-weight:400}
.btn:hover{background:#0077ed;text-decoration:none}
.wl{width:min(420px,86%);margin:12px auto 0;text-align:center}
.wl-row{display:flex;flex-direction:column;gap:10px}
.wl input[type=email],.wl input.wl-name{flex:1;min-width:0;padding:12px 18px;border-radius:980px;border:1px solid #424245;background:#1d1d1f;color:var(--fg);font:inherit;font-size:17px}
.wl input::placeholder{color:var(--fg3)}
.wl input[type=email]:focus,.wl input.wl-name:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 3px rgba(41,151,255,.25)}
.wl .btn{margin:0;border:0;cursor:pointer;font-family:inherit;white-space:nowrap}
.wl .btn:disabled{opacity:.5;cursor:default}
.wl.done .wl-row{display:none}
.wl .msg{min-height:1.47em;margin:14px 0 0;font-size:15px;color:var(--fg)}
.wl .msg.err{color:#ff6961}
.wl .fine{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--fg3)}
.wl .fine a{color:var(--fg2);text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wl .btn{justify-content:center;padding-block:14px}
footer .brand{display:inline-flex;align-items:center;gap:8px}
footer .brand img{border-radius:4px;display:block}
.nf{gap:14px}
.nf-mark{width:min(120px,30vw);height:auto;margin:0 auto 12px;display:block}
.nf-code{font-size:clamp(72px,16vw,140px)}
.nf .btn{margin-top:18px}
/* Teaser-Video oben auf der Startseite */
.teaser{position:relative;width:min(1100px,100vw,calc(64vh * 16 / 9));margin:-40px auto -5vh;aspect-ratio:16/9;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 100%)}
.teaser-video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.hero:has(.teaser){padding-top:24px}
@media (max-width:600px){.teaser{width:100vw;margin:-30px calc(50% - 50vw) -3vh}}
@media (prefers-reduced-motion:reduce){.teaser-video{display:none}.teaser{background:url(/media/27x-teaser-poster.jpg) center/cover}}
/* Variante B: Video hinter der 27x-Schrift */
.stage{position:relative;display:grid;place-items:center;margin:-40px auto -2vh}
.stage .teaser-bg{grid-area:1/1;margin:0;opacity:.95}
.stage-mark{grid-area:1/1;position:relative;z-index:1;margin:0;mix-blend-mode:normal;text-shadow:0 0 60px rgba(0,0,0,.6)}
/* Variante C: 27x unter dem Video */
.mark-c{font-size:clamp(64px,12vw,120px);margin-top:-2vh}
/* Variante D: Video vollflächig hinter allem, nach unten abgedunkelt */
.hero-d{position:relative;isolation:isolate;padding-top:0}
.bgv{position:absolute;z-index:-1;left:50%;top:0;width:100vw;height:100svh;transform:translateX(-50%);overflow:hidden;background:#000}
.bgv-video{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;transform:translateY(-8%)}
.bgv-shade{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.9) 78%,#000 96%),
  radial-gradient(ellipse 90% 70% at 50% 40%,transparent 50%,rgba(0,0,0,.55) 100%)}
.bgv-spacer{height:57svh}
.mark-d{font-size:clamp(64px,11vw,112px)}
@media (max-aspect-ratio:4/5){.bgv-video{transform:translateY(-14%)}.bgv-spacer{height:46svh}}

html,body{overflow-x:clip}