/* ============================================================
   NITE — nite-portal.com
   Kosmische Bühne: jeder Abschnitt ist eine eigene Szene.
   Keine eingebetteten Stile, keine externen Schriften.
   ============================================================ */

:root{
  /* Grundraum */
  --space:#0A0B1E;
  --space-deep:#060714;
  --chrome:#141629;
  --surface:#1B1E36;

  /* NITE-Identität */
  --violet:#7C6BFF;
  --violet-dark:#5A45E0;
  --violet-soft:#A99BFF;
  --pink:#E879F9;
  --blue:#4D7CFF;
  --teal:#4BE3C6;
  --amber:#FFC55C;
  --red:#F4344E;

  /* Text */
  --snow:#FFFFFF;
  --fog:#BDC0E6;
  --mute:#8B90C0;

  --font:'Inter', 'Segoe UI Variable Display', 'Segoe UI', ui-sans-serif, system-ui, -apple-system, Roboto, sans-serif;
  --max:1200px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}

body{
  margin:0; color:var(--snow); font-family:var(--font); overflow-x:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #2A2170 0%, #141A52 35%, var(--space) 70%),
    var(--space);
  -webkit-font-smoothing:antialiased;
}

/* Sternenfeld über dem ganzen Dokument */
.stars{position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 28% 62%, #dcd8ff, transparent),
    radial-gradient(1.2px 1.2px at 44% 24%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 62% 78%, #c9e8ff, transparent),
    radial-gradient(1.2px 1.2px at 74% 36%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 88% 68%, #f4d6ff, transparent),
    radial-gradient(1.2px 1.2px at 8% 84%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 54% 92%, #fff, transparent);
  background-size:1200px 900px;
  animation:drift 140s linear infinite;
}
@keyframes drift{to{background-position:1200px 900px}}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px; position:relative; z-index:1}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* ── Typografie ──────────────────────────── */
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.02em; line-height:.92}
h1{font-size:clamp(40px,6.6vw,61px)}
h2{font-size:clamp(32px,5vw,48px); text-transform:uppercase; letter-spacing:-.01em}
h3{font-size:clamp(26px,3.6vw,36px); text-transform:uppercase; letter-spacing:-.01em}
p{margin:0 0 16px; font-size:16px; line-height:1.5; color:var(--fog)}
.lede{font-size:20px; line-height:1.38; color:var(--fog); max-width:44ch}

/* ── Knöpfe ──────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font); font-size:16px;
  font-weight:600; border:none; cursor:pointer; border-radius:12px; transition:transform .14s, filter .18s, background .18s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--violet); color:#fff; padding:19px 26px;
  box-shadow:0 0 0 0 rgba(124,107,255,.6); animation:pulse 4s ease-in-out infinite}
.btn-primary:hover{background:var(--violet-dark); animation:none}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(124,107,255,.45)}
  50%{box-shadow:0 0 0 14px rgba(124,107,255,0)}
}
.btn-white{background:#fff; color:#141629; padding:15px 24px}
.btn-white:hover{filter:brightness(.93)}
.btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7); padding:14px 22px}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* ── Navigation ──────────────────────────── */
.nav{position:fixed; top:0; left:0; right:0; z-index:40; padding-top:env(safe-area-inset-top,0px);
  transition:background .3s, backdrop-filter .3s}
.nav.scrolled{background:rgba(10,11,30,.82); backdrop-filter:blur(14px)}
.nav-inner{max-width:var(--max); margin:0 auto; padding:18px 24px; display:flex; align-items:center; gap:28px}
.logo{display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; letter-spacing:.14em}
.logo img{width:34px; height:34px; filter:drop-shadow(0 0 14px rgba(124,107,255,.75))}
.nav-links{display:flex; gap:6px; margin-left:12px}
.nav-links a{font-size:16px; padding:9px 13px; border-radius:10px; color:#fff}
.nav-links a:hover{background:rgba(255,255,255,.1)}
.nav-right{margin-left:auto; display:flex; gap:10px; align-items:center}
@media(max-width:940px){.nav-links{display:none}}

/* ── Held ────────────────────────────────── */
.hero{padding:180px 0 120px; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:56px; align-items:center}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:32px}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap}
.hero-meta{margin-top:24px; font-size:14px; color:var(--mute)}
.hero-orb{position:absolute; border-radius:50%; filter:blur(2px); opacity:.85; pointer-events:none}
.orb-1{width:88px; height:88px; left:4%; top:22%;
  background:radial-gradient(circle at 34% 30%, #A99BFF, #5A45E0 60%, transparent 72%);
  animation:float 9s ease-in-out infinite}
.orb-2{width:54px; height:54px; right:8%; top:14%;
  background:radial-gradient(circle at 34% 30%, #F9B6FF, #E879F9 60%, transparent 72%);
  animation:float 11s ease-in-out infinite reverse}
.orb-3{width:120px; height:120px; left:46%; bottom:-40px;
  background:radial-gradient(circle at 34% 30%, #9BF3E4, #4BE3C6 55%, transparent 70%);
  opacity:.5; animation:float 13s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(8deg)}}
@media(max-width:940px){.hero{padding:140px 0 80px}.hero-grid{grid-template-columns:1fr; gap:40px}}

/* ── App-Vorschau ────────────────────────── */
.app{border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.14);
  background:var(--space-deep); position:relative;
  box-shadow:0 40px 90px rgba(4,5,18,.75)}
.app-tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:3;
  background:var(--violet); color:#fff; font-size:12px; font-weight:700; letter-spacing:.05em;
  padding:4px 12px; border-radius:999px}
.app-bar{height:38px; background:var(--chrome); display:flex; align-items:center; gap:9px; padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.08); font-size:12px}
.app-bar img{width:17px; height:17px}
.app-bar b{letter-spacing:.12em; font-size:12px}
.app-bar .ver{color:var(--mute); font-family:ui-monospace,Menlo,monospace}
.app-bar .win{margin-left:auto; display:flex; gap:13px}
.app-bar .win i{width:10px; height:10px; border-radius:2px; background:#3A3E63}
.app-body{display:grid; grid-template-columns:58px 190px minmax(0,1fr) 150px; height:376px; font-size:12px}
.rail{background:#05060f; border-right:1px solid rgba(255,255,255,.07); padding:11px 0;
  display:flex; flex-direction:column; align-items:center; gap:9px}
.srv{width:36px; height:36px; border-radius:12px; display:grid; place-items:center; font-size:10px;
  font-weight:700; color:var(--fog); background:rgba(255,255,255,.07)}
.srv.on{background:linear-gradient(135deg,var(--blue),var(--violet),var(--pink)); color:#0A0B1E}
.srv.t{background:linear-gradient(135deg,var(--teal),var(--blue)); color:#06201A}
.srv.a{background:linear-gradient(135deg,var(--amber),#FF8A28); color:#241100}
.srv.add{border:1px dashed rgba(255,255,255,.22); color:var(--mute)}
.side{background:rgba(255,255,255,.035); border-right:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column}
.side-banner{height:54px; background:linear-gradient(130deg, var(--violet), var(--pink))}
.side-name{padding:9px 12px; font-weight:700; display:flex; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.07)}
.cat{padding:11px 12px 4px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
.ch{padding:5px 12px; color:var(--fog); display:flex; justify-content:space-between; align-items:center}
.ch.on{background:rgba(255,255,255,.09); color:#fff}
.ch em{font-style:normal; background:var(--red); color:#fff; font-size:9px; padding:1px 6px; border-radius:99px}
.vu{display:flex; align-items:center; gap:6px; padding:4px 12px 4px 20px; color:var(--fog); font-size:11px}
.vu b{margin-left:auto; background:var(--red); color:#fff; font-size:8px; padding:1px 5px; border-radius:3px}
.me{margin-top:auto; display:flex; align-items:center; gap:8px; padding:9px 12px;
  background:rgba(255,255,255,.06); border-top:1px solid rgba(255,255,255,.07)}
.me span{display:flex; flex-direction:column; line-height:1.25}
.me small{color:var(--teal); font-size:9px}
.chat{display:flex; flex-direction:column; background:var(--space-deep)}
.chat-top{height:36px; display:flex; align-items:center; gap:10px; padding:0 15px; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.07)}
.chat-top span{color:var(--mute); font-weight:400; border-left:1px solid rgba(255,255,255,.12); padding-left:10px}
.msg{display:flex; gap:10px; padding:10px 15px 0}
.av{width:29px; height:29px; border-radius:50%; flex:none; background:linear-gradient(140deg,var(--blue),var(--violet))}
.av.b{background:linear-gradient(140deg,var(--pink),var(--violet))}
.av.c{background:linear-gradient(140deg,var(--teal),var(--blue))}
.av.s,.av-s{width:19px; height:19px}
.msg b{font-size:12px; font-weight:600}
.msg time{color:var(--mute); font-size:9px; margin-left:6px}
.msg p{margin:2px 0 0; font-size:12px; line-height:1.45}
.react{display:flex; gap:5px; margin-top:6px}
.react span{border:1px solid rgba(124,107,255,.55); background:rgba(124,107,255,.2);
  border-radius:99px; padding:1px 7px; font-size:10px}
.composer{margin:auto 15px 14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:9px 12px; color:var(--mute)}
.mem{background:rgba(255,255,255,.035); border-left:1px solid rgba(255,255,255,.07); padding:12px}
.mem-h{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:8px}
.mem-r{display:flex; align-items:center; gap:8px; padding:4px 0; color:var(--fog)}
@media(max-width:1100px){.app-body{grid-template-columns:52px 160px minmax(0,1fr)} .mem{display:none}}
@media(max-width:620px){.app-body{grid-template-columns:48px minmax(0,1fr); height:300px} .side{display:none}}

/* ── Laufband ────────────────────────────── */
.marquee{overflow:hidden; padding:26px 0; margin:40px 0 0;
  background:linear-gradient(90deg, rgba(124,107,255,.22), rgba(232,121,249,.22));
  border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1)}
.marquee-track{display:flex; gap:44px; width:max-content; animation:slide 26s linear infinite}
.marquee span{font-size:clamp(24px,3.2vw,38px); font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; white-space:nowrap; display:flex; align-items:center; gap:44px}
.marquee img{width:26px; height:26px; opacity:.9}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── Szenen-Karten ───────────────────────── */
section{padding:80px 0; position:relative}
.scene{border-radius:32px; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:center; position:relative; overflow:hidden}
.scene.reverse .scene-art{order:2}
.scene h3{margin-bottom:16px}
.scene p{color:rgba(255,255,255,.88); max-width:42ch}
.scene .btn{margin-top:8px}
.sc-violet{background:linear-gradient(135deg,#5A45E0 0%, #9C3FD8 55%, #E879F9 100%)}
.sc-teal{background:linear-gradient(135deg,#0E6E6A 0%, #17A398 50%, #4BE3C6 100%)}
.sc-amber{background:linear-gradient(135deg,#7A3B10 0%, #C86A16 55%, #FFC55C 100%)}
.sc-blue{background:linear-gradient(135deg,#17307E 0%, #2C52CE 55%, #4D7CFF 100%)}
.scene::after{content:''; position:absolute; width:320px; height:320px; right:-90px; top:-110px;
  border-radius:50%; background:rgba(255,255,255,.12)}
@media(max-width:940px){
  .scene{grid-template-columns:1fr; padding:32px; border-radius:24px}
  .scene.reverse .scene-art{order:0}
}

/* Mini-Oberflächen in den Szenen */
.mini{background:rgba(6,7,20,.72); border:1px solid rgba(255,255,255,.16); border-radius:16px;
  padding:16px; backdrop-filter:blur(6px)}
.mini-title{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65);
  margin-bottom:12px}
.ev{display:flex; gap:12px; align-items:center; background:rgba(255,255,255,.08); border-radius:12px;
  padding:11px 13px; margin-bottom:9px}
.ev-date{width:46px; text-align:center; background:rgba(0,0,0,.35); border-radius:9px; padding:6px 0}
.ev-date b{display:block; font-size:18px; line-height:1}
.ev-date small{font-size:9px; text-transform:uppercase; color:rgba(255,255,255,.7)}
.ev-main b{font-size:13px}
.ev-main small{display:block; font-size:11px; color:rgba(255,255,255,.72); margin-top:2px}
.ev-go{margin-left:auto; font-size:11px; font-weight:700; background:#fff; color:#141629;
  padding:5px 11px; border-radius:99px}
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{aspect-ratio:16/10; border-radius:12px; position:relative; overflow:hidden;
  background:linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,.06))}
.tile.live::after{content:'LIVE'; position:absolute; top:8px; right:8px; background:var(--red);
  font-size:9px; font-weight:800; padding:2px 6px; border-radius:4px}
.tile b{position:absolute; left:10px; bottom:9px; font-size:11px}
.badges{display:flex; flex-wrap:wrap; gap:9px}
.bg-chip{display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:7px 11px; font-size:12px; font-weight:600}
.bg-dot{width:16px; height:16px; border-radius:5px}
.code{font-family:ui-monospace,Menlo,monospace; font-size:12px; line-height:1.75; color:rgba(255,255,255,.9)}
.code .k{color:#9BF3E4} .code .s{color:#FFD79B} .code .c{color:rgba(255,255,255,.5)}

/* ── Raster ──────────────────────────────── */
.kicker{font-size:14px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--violet-soft); margin:0 0 14px}
.sub{font-size:20px; line-height:1.38; color:var(--fog); max-width:60ch; margin:0 0 48px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.feature{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:16px;
  padding:24px; transition:transform .16s, border-color .18s, background .18s}
.feature:hover{transform:translateY(-3px); border-color:rgba(124,107,255,.6); background:rgba(124,107,255,.1)}
.f-ico{width:34px; height:34px; border-radius:10px; margin-bottom:14px}
.i1{background:linear-gradient(140deg,#4D7CFF,#7C6BFF)}
.i2{background:linear-gradient(140deg,#4BE3C6,#4D7CFF)}
.i3{background:linear-gradient(140deg,#E879F9,#7C6BFF)}
.i4{background:linear-gradient(140deg,#FFC55C,#FF8A28)}
.i5{background:linear-gradient(140deg,#57F287,#4BE3C6)}
.i6{background:linear-gradient(140deg,#FF6B9D,#F4344E)}
.i7{background:linear-gradient(140deg,#A99BFF,#4D7CFF)}
.i8{background:linear-gradient(140deg,#9BF3E4,#57F287)}
.feature h4{margin:0 0 8px; font-size:19px; font-weight:700}
.feature p{margin:0; font-size:15px}

/* ── Vergleich ───────────────────────────── */
.compare{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:24px; overflow:hidden}
.crow{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px; padding:18px 28px;
  border-bottom:1px solid rgba(255,255,255,.08); align-items:center; font-size:16px}
.crow:last-child{border-bottom:none}
.crow.head{background:rgba(255,255,255,.05); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute)}
.crow b{font-weight:600}
.crow .them{color:var(--mute)}
.crow .us{color:var(--teal); font-weight:600}
@media(max-width:760px){.crow{grid-template-columns:1fr; gap:6px; padding:16px 20px}}

/* ── Preise ──────────────────────────────── */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.tier{border-radius:24px; padding:28px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column}
.tier.hot{background:linear-gradient(150deg, rgba(124,107,255,.35), rgba(232,121,249,.22));
  border-color:rgba(124,107,255,.7)}
.tier .chip{align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; background:rgba(255,255,255,.16); padding:4px 10px; border-radius:99px; margin-bottom:14px}
.tier .amount{font-size:40px; font-weight:800; letter-spacing:-.02em; line-height:1}
.tier .amount small{font-size:15px; font-weight:400; color:var(--fog); letter-spacing:0}
.tier .vat{display:block; margin-top:8px; font-size:12.5px; color:var(--fog); opacity:.85}
.tier ul{list-style:none; margin:18px 0 24px; padding:0}
.tier li{font-size:15px; color:var(--fog); padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.tier li::before{content:'✦ '; color:var(--violet-soft)}
.tier .btn{margin-top:auto; justify-content:center}

/* ── Abschluss ───────────────────────────── */
.finale{text-align:center; padding:112px 0 96px; position:relative}
.finale h2{margin-bottom:18px}
.finale .lede{margin:0 auto 32px}
.finale-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.finale-logo{width:88px; height:88px; margin:0 auto 26px;
  filter:drop-shadow(0 0 34px rgba(124,107,255,.85)); animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Fusszeile ───────────────────────────── */
footer{background:var(--space-deep); border-top:1px solid rgba(255,255,255,.08); padding:64px 0 40px;
  position:relative; z-index:1}
.fgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px}
.fgrid h5{font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 14px; color:#fff}
.fgrid a{display:block; color:var(--fog); font-size:15px; padding:6px 0}
.fgrid a:hover{color:#fff}
.fbottom{border-top:1px solid rgba(255,255,255,.08); margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mute); font-size:14px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}

/* ── Einblenden beim Scrollen ────────────── */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.3,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .marquee-track,.finale-logo,.hero-orb,.stars,.btn-primary{animation:none}
}

/* ============================================================
   Maskottchen Nyx und die 3D-Iconfamilie
   ============================================================ */
.sprite{position:absolute; width:0; height:0; overflow:hidden}

/* ── Nyx im Helden ───────────────────────── */
.nyx-wrap{position:absolute; right:3%; bottom:2%; width:210px; z-index:2; pointer-events:none;
  animation:nyxfloat 7s ease-in-out infinite}
.nyx{width:100%; height:auto; display:block; filter:drop-shadow(0 22px 40px rgba(8,6,32,.65))}
@keyframes nyxfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-22px) rotate(2deg)}}

.nyx .nyx-ring{transform-origin:120px 118px; animation:nyxring 14s linear infinite}
@keyframes nyxring{to{transform:rotate(360deg)}}

.nyx .nyx-eyes{transform-origin:120px 112px; animation:nyxblink 5.5s ease-in-out infinite}
@keyframes nyxblink{
  0%,92%,100%{transform:scaleY(1)}
  95%{transform:scaleY(.08)}
}

.nyx .nyx-spark{animation:nyxspark 3.4s ease-in-out infinite}
@keyframes nyxspark{0%,100%{opacity:.35; transform:scale(.9)}50%{opacity:1; transform:scale(1.12)}}

.nyx .nyx-face{animation:nyxlook 9s ease-in-out infinite}
@keyframes nyxlook{0%,100%{transform:translateX(0)}30%{transform:translateX(5px)}65%{transform:translateX(-5px)}}

@media(max-width:1180px){.nyx-wrap{width:150px; right:1%; bottom:-10px; opacity:.9}}
@media(max-width:940px){.nyx-wrap{display:none}}

/* ── Nyx im Abschluss ────────────────────── */
.finale-nyx{width:150px; margin:0 auto 22px; animation:nyxfloat 6s ease-in-out infinite}
.finale-nyx .nyx{filter:drop-shadow(0 0 40px rgba(124,107,255,.7))}

/* ── Icons ───────────────────────────────── */
.f-ico{width:52px; height:52px; margin-bottom:16px; display:block;
  filter:drop-shadow(0 8px 16px rgba(6,7,20,.55)); transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.feature:hover .f-ico{transform:translateY(-4px) rotate(-6deg) scale(1.08)}

.bg-ico{width:20px; height:20px; flex:none; filter:drop-shadow(0 3px 6px rgba(6,7,20,.5))}
.bg-chip{align-items:center}

.scene-ico{width:46px; height:46px; margin-bottom:14px; display:block;
  filter:drop-shadow(0 8px 16px rgba(6,7,20,.45))}

/* ============================================================
   NITE Bubble — derselbe Look wie in der App
   ============================================================ */

@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --space: #110B2A;
  --space-deep: #0D0822;
  --chrome: #1A1240;
  --violet: #8B7AFF;
  --violet-dark: #6E5CF0;
  --violet-soft: #FF9BE3;
  --pink: #FF7AD9;
  --teal: #4DF0A5;
  --amber: #FFD66B;
  --red: #FF4D8D;
  --snow: #FFF7FE;
  --fog: #D2C8F0;
  --mute: #A195CF;
  --sun: linear-gradient(135deg, #FFD66B 0%, #FF7AD9 100%);
  --sun-ink: #22114A;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
}

body {
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(255, 122, 217, .2), transparent 60%),
    radial-gradient(800px 700px at 0% 30%, rgba(122, 140, 255, .16), transparent 60%),
    var(--space);
  font-weight: 600;
}
h1, h2, h3, h4, .logo, .kicker, .amount, .btn, .marquee span, .fgrid h5, .chip, .tier .chip {
  font-family: var(--display);
}
h1 { font-weight: 700; letter-spacing: -.01em; }
h2, h3 { font-weight: 700; letter-spacing: -.005em; text-transform: none; }
.kicker { color: var(--pink); letter-spacing: .1em; }
p, .lede, .sub { font-weight: 600; }

/* Knöpfe als Pillen mit Tiefe */
.btn { border-radius: 999px; font-weight: 600; transition: transform .35s var(--spring), box-shadow .2s, filter .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); }
.btn-primary {
  background: var(--sun); color: var(--sun-ink);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 12px 30px rgba(255, 122, 217, .4);
  animation: none;
}
.btn-primary:hover { background: var(--sun); filter: brightness(1.05) saturate(1.1); }
.btn-white { background: #FFF7FE; color: var(--sun-ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); }
.btn-ghost { border: 2px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .04); }

/* Navigation */
.nav.scrolled { background: rgba(17, 11, 42, .85); }
.logo { font-weight: 700; letter-spacing: .16em; }

/* Held mit echtem Screenshot */
.hero-grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
.shot {
  position: relative; margin: 0;
  border-radius: 26px; padding: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  box-shadow: 0 40px 90px rgba(8, 4, 26, .7), inset 0 -5px 0 rgba(0, 0, 0, .25);
  transform: perspective(1400px) rotateY(-6deg) rotateX(3deg);
  transition: transform .8s var(--spring);
  animation: shotIn .9s var(--spring) both .15s;
}
.shot:hover { transform: perspective(1400px) rotateY(0) rotateX(0) scale(1.01); }
.shot img { display: block; width: 100%; height: auto; border-radius: 18px; }
.shot-tag {
  position: absolute; top: -14px; left: 26px; z-index: 2;
  padding: 6px 14px; border-radius: 999px;
  background: var(--sun); color: var(--sun-ink);
  font-family: var(--display); font-weight: 600; font-size: 13px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 8px 20px rgba(255, 122, 217, .4);
}
@keyframes shotIn { from { opacity: 0; transform: perspective(1400px) rotateY(-14deg) rotateX(6deg) translateY(40px) scale(.94); } }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } .shot { transform: none; } }

/* Laufband */
.marquee { background: linear-gradient(90deg, rgba(255, 122, 217, .2), rgba(139, 122, 255, .2)); border-color: rgba(255, 255, 255, .08); }
.marquee span { text-transform: none; font-weight: 700; }

/* Szenen und Karten */
.scene { border-radius: 36px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), 0 30px 70px rgba(8, 4, 26, .45); }
.scene::after { background: rgba(255, 255, 255, .14); }
.sc-violet { background: linear-gradient(135deg, #FF7AD9 0%, #B07AFF 55%, #7A8CFF 100%); }
.sc-teal { background: linear-gradient(135deg, #1FB88C 0%, #4DF0A5 60%, #7AF0FF 100%); }
.sc-amber { background: linear-gradient(135deg, #FF7A59 0%, #FFB35C 55%, #FFD66B 100%); }
.sc-blue { background: linear-gradient(135deg, #4D5CFF 0%, #7A8CFF 55%, #B8ADFF 100%); }
.mini { border-radius: 22px; background: rgba(17, 11, 42, .7); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); border: 0; }
.ev { border-radius: 16px; }
.ev-go { background: var(--sun); color: var(--sun-ink); font-family: var(--display); font-weight: 600; }
.feature { border-radius: 24px; background: #1A1240; border: 0; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); transition: transform .45s var(--spring), box-shadow .3s; }
.feature:hover { transform: translateY(-6px) rotate(-.8deg); background: #1F1650; border: 0; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 20px 40px rgba(255, 122, 217, .18); }
.feature h4 { font-family: var(--display); font-weight: 600; }
.feature:hover .f-ico { transform: translateY(-4px) rotate(-10deg) scale(1.12); }

.compare { border-radius: 28px; background: #1A1240; border: 0; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.crow.head { background: rgba(255, 255, 255, .04); font-family: var(--display); }
.crow .us { color: var(--teal); }

.tier { border-radius: 30px; background: #1A1240; border: 0; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .2); transition: transform .45s var(--spring); }
.tier:hover { transform: translateY(-6px); }
.tier.hot { background: linear-gradient(160deg, #3A2A80, #1A1240 70%); box-shadow: 0 0 0 3px rgba(255, 155, 227, .55), inset 0 -5px 0 rgba(0, 0, 0, .2), 0 24px 60px rgba(255, 122, 217, .25); }
.tier .chip { background: rgba(255, 122, 217, .18); color: #FFD2F2; }
.tier li::before { content: '● '; color: var(--pink); }

.finale-nyx .nyx { filter: drop-shadow(0 0 40px rgba(255, 122, 217, .6)); }
footer { background: var(--space-deep); }

@media (prefers-reduced-motion: reduce) { .shot { animation: none; transform: none; } }

/* Held: Text oben mittig, Vorschau gross darunter */
.hero .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 44px; }
.hero .hero-grid > div:first-child { max-width: 820px; display: flex; flex-direction: column; align-items: center; }
.hero .hero-grid > div:first-child p { margin-left: auto; margin-right: auto; }
.hero .hero-grid .hero-cta { justify-content: center; }
.hero h1 br { display: none; }
.hero .shot {
  width: min(1180px, 100%);
  transform: perspective(1800px) rotateX(10deg);
  transform-origin: 50% 0;
}
.hero .shot:hover { transform: perspective(1800px) rotateX(0deg) scale(1.005); }
.hero .shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
@keyframes shotIn { from { opacity: 0; transform: perspective(1800px) rotateX(24deg) translateY(60px) scale(.94); } }
@media (max-width: 940px) { .hero .shot, .hero .shot:hover { transform: none; } }

/* Vorschau flach und unverzerrt */
.hero .shot, .hero .shot:hover {
  transform: none !important;
  width: min(1180px, 100%);
  padding: 8px;
  animation: shotUp .8s cubic-bezier(.34, 1.56, .64, 1) both .15s;
}
.hero .shot img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  max-height: none !important;
}
@keyframes shotUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
/* Nox, der NITE-Roboter */
.mascot { position: relative; display: inline-block; line-height: 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.mascot .mascot-svg { width: 100%; height: auto; overflow: visible; display: block; }
.mascot .mascot-svg g { transform-box: view-box; }
.mascot.bare { cursor: default; pointer-events: none; }
.mascot.bare .m-bubble, .mascot.bare .m-shadow, .mascot.nobubble .m-bubble { display: none; }

.mascot .m-float { animation: m-float 3.4s ease-in-out infinite; }
.mascot .m-shadow { transform-origin: 254px 533px; animation: m-shadow 3.4s ease-in-out infinite; }
.mascot .m-pose { transform-origin: 210px 470px; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.mascot .m-hand { transform-origin: 302px 342px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }

/* Schweifringe: Schub-Echo, Leuchtringe pulsieren */
.mascot .m-echo { transform-origin: 352px 452px; opacity: 0; animation: m-echo 1.8s cubic-bezier(.23, 1, .32, 1) infinite; }
.mascot .m-echo-b { animation-delay: .9s; }
.mascot .m-glow { opacity: .35; animation: m-led 2.4s ease-in-out infinite; }
.mascot .m-glow-tail { animation-duration: 1.8s; }
.mascot .m-glow-hand { animation-delay: .4s; }

/* Augen: echte Augen blinzeln und schauen, Gefühle blenden darüber */
.mascot .m-look { animation: m-look 9s ease-in-out infinite; }
.mascot .m-eye { transition: opacity .18s ease; animation: m-blink 4.6s ease-in-out infinite; }
.mascot .m-eye-l { transform-origin: 242px 154px; }
.mascot .m-eye-r { transform-origin: 322px 199px; }
.mascot .m-x { opacity: 0; transform-origin: 282px 176px; transform: scale(.86); transition: opacity .18s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.mascot.e-wave .m-eye, .mascot.e-happy .m-eye, .mascot.e-love .m-eye, .mascot.e-sleep .m-eye, .mascot.e-wink .m-eye-r { opacity: 0; }
.mascot.e-wave .m-x-happy, .mascot.e-happy .m-x-happy, .mascot.e-love .m-x-happy, .mascot.e-wink .m-x-wink, .mascot.e-sleep .m-x-sleep { opacity: 1; transform: none; }

/* Sprechblase */
.mascot .m-bubble { opacity: 0; transform-origin: 96px 72px; transform: scale(.4); transition: opacity .2s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.mascot .m-b { opacity: 0; }
.mascot.e-wave .m-bubble, .mascot.e-love .m-bubble, .mascot.e-sleep .m-bubble, .mascot.e-happy .m-bubble, .mascot.e-wink .m-bubble, .mascot.e-wait .m-bubble { opacity: 1; transform: none; }
.mascot.e-wave .m-b-wave, .mascot.e-love .m-b-love, .mascot.e-sleep .m-b-sleep, .mascot.e-happy .m-b-happy, .mascot.e-wink .m-b-wink, .mascot.e-wait .m-b-wait { opacity: 1; }
.mascot.e-love .m-b-love, .mascot.e-happy .m-b-happy { transform-box: view-box; transform-origin: 59px 30px; animation: m-heart .9s ease-in-out infinite; }
.mascot.e-wait .m-b-wait circle { animation: m-dot 1.2s ease-in-out infinite; }
.mascot.e-wait .m-b-wait circle:nth-child(2) { animation-delay: .15s; }
.mascot.e-wait .m-b-wait circle:nth-child(3) { animation-delay: .3s; }
.mascot.e-sleep .m-b-sleep { animation: m-zzz 1.6s ease-in-out infinite; }

/* Winken, Freude, Liebe, Zwinkern, Schlaf */
.mascot.e-wave .m-hand { animation: m-wave 1.5s ease-in-out 1 both; }
.mascot.e-happy .m-pose { animation: m-nod .9s ease-in-out 2; }
.mascot.e-happy .m-hand { transform: rotate(-12deg); }
.mascot.e-love .m-pose { transform: rotate(-4deg); }
.mascot.e-love .m-hand { transform: rotate(-8deg); }
.mascot.e-love .m-float { animation: m-hop .7s cubic-bezier(.34, 1.56, .64, 1) 2, m-float 3.4s ease-in-out 1.4s infinite; }
.mascot.e-wink .m-pose { transform: rotate(3deg); }
.mascot.e-sleep .m-pose { transform: rotate(5deg) translateY(5px); }
.mascot.e-sleep .m-hand { transform: rotate(10deg); }
.mascot.e-sleep .m-float { animation-duration: 5s; }
.mascot.e-sleep .m-echo { animation-duration: 3.2s; }
.mascot.e-sleep .m-glow { animation-duration: 4.4s; }

/* Geduldig warten: schaut sich um, wiegt sich, tippt mit der Hand */
.mascot.e-wait .m-look { animation: m-wait-look 6s ease-in-out infinite; }
.mascot.e-wait .m-pose { animation: m-sway 6s ease-in-out infinite; }
.mascot.e-wait .m-hand { animation: m-tap 3s ease-in-out infinite; }
.mascot.e-wait .m-float { animation-duration: 4.6s; }

@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes m-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.84); opacity: .6; } }
@keyframes m-echo { 0% { opacity: .55; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(26px, -3px) scale(1.14); } }
@keyframes m-led { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes m-look { 0%, 22%, 100% { transform: translate(0, 0); } 28%, 44% { transform: translate(5px, 1px); } 52%, 70% { transform: translate(-5px, -1px); } 76% { transform: translate(0, 0); } }
@keyframes m-blink { 0%, 90%, 100% { transform: rotate(15deg) scaleY(1) rotate(-15deg); } 94% { transform: rotate(15deg) scaleY(.08) rotate(-15deg); } }
@keyframes m-wave {
    0% { transform: rotate(0); }
    16% { transform: rotate(-18deg); }
    32% { transform: rotate(7deg); }
    48% { transform: rotate(-18deg); }
    64% { transform: rotate(7deg); }
    80% { transform: rotate(-12deg); }
    100% { transform: rotate(0); }
}
@keyframes m-nod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg) translateY(-4px); } 65% { transform: rotate(3deg); } }
@keyframes m-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-34px); } 70% { transform: translateY(3px); } }
@keyframes m-heart { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes m-dot { 0%, 100% { transform: translateY(0); opacity: .55; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes m-wait-look { 0%, 12%, 100% { transform: translate(0, 0); } 20%, 42% { transform: translate(-6px, 1px); } 52%, 78% { transform: translate(6px, -1px); } 88% { transform: translate(0, 0); } }
@keyframes m-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2deg); } 70% { transform: rotate(2deg); } }
@keyframes m-tap { 0%, 40%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } 60% { transform: rotate(0); } 70% { transform: rotate(-7deg); } 80% { transform: rotate(0); } }
@keyframes m-zzz { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(-4px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .mascot g, .mascot text, .mascot path, .mascot circle { animation: none !important; }
    .mascot .m-pose, .mascot .m-hand, .mascot .m-x, .mascot .m-bubble { transition: opacity .2s ease !important; }
    .mascot .m-echo { opacity: 0 !important; }
}

/* Variante A: Sternenstaub, keine schwebenden Kugeln */
body {
  background:
    radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.3px) 0 0 / 24px 24px,
    radial-gradient(120% 70% at 50% 0%, #1E1447, #0E0824 70%) !important;
  background-attachment: fixed !important;
}
.hero-orb, .stars { display: none !important; }
.nyx-wrap .mascot { width: min(240px, 42vw); }
.finale-nyx .mascot { width: 150px; }
.nyx-wrap, .finale-nyx { animation: none !important; }
.nyx-wrap .mascot:focus-visible, .finale-nyx .mascot:focus-visible { outline: 3px solid #FF9BE3; outline-offset: 6px; border-radius: 24px; }
.nyx-wrap { position: absolute !important; left: 7% !important; right: auto !important; top: 118px !important; bottom: auto !important; width: 210px !important; pointer-events: auto !important; z-index: 3 !important; opacity: 1 !important; }
.nyx-wrap .mascot { width: 100%; }
@media (max-width: 1180px) { .nyx-wrap { width: 150px !important; left: 2% !important; top: 96px !important; } }
@media (max-width: 940px) { .nyx-wrap { display: none !important; } }

/* Sprachwahl */
.langsw { position: relative; }
.langbtn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 8px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #FFF7FE; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background .2s, border-color .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.langbtn:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 155, 227, .45); }
.langbtn:active { transform: scale(.96); }
.langbtn:focus-visible, .langmenu button:focus-visible { outline: 3px solid #FF9BE3; outline-offset: 2px; }
.langcur { display: inline-flex; align-items: center; gap: 8px; }
.langcur[hidden] { display: none; }
.langcur b { font-family: Fredoka, Nunito, sans-serif; font-weight: 600; letter-spacing: .02em; }
.langchev { opacity: .7; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.langsw.open .langchev { transform: rotate(180deg); }
.flag { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .35); }
.flag svg { width: 100%; height: 100%; display: block; }
.langmenu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 210px; margin: 0; padding: 6px; list-style: none; border-radius: 20px; background: #1C1446; border: 1px solid rgba(255, 155, 227, .2); box-shadow: 0 22px 48px rgba(8, 4, 26, .65); transform-origin: top right; animation: langin .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.langmenu[hidden] { display: none; }
@keyframes langin { from { opacity: 0; transform: translateY(-6px) scale(.92); } to { opacity: 1; transform: none; } }
.langmenu button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; color: #FFF7FE; font: inherit; font-weight: 700; font-size: .95rem; text-align: left; cursor: pointer; transition: background .15s; }
.langmenu button:hover, .langmenu button:focus-visible { background: rgba(255, 255, 255, .07); }
.langmenu button span:not(.flag) { flex: 1; }
.langmenu button small { font-weight: 800; font-size: .72rem; color: #B9B0D9; letter-spacing: .06em; }
.langmenu button[aria-selected="true"] { background: rgba(255, 214, 107, .12); }
.langmenu button[aria-selected="true"] small { color: #FFD66B; }
@media (max-width: 940px) { .langbtn { height: 38px; padding: 0 10px 0 6px; } .langcur b { display: none; } }

/* Rechtliche Seiten */
.legal { padding: 130px 0 90px; }
.legal-wrap { max-width: 820px; }
.legal-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 22px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #EDE7FF; font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.legal-back:hover { background: rgba(255, 255, 255, .12); transform: translateX(-3px); }
.legal h1 { font-family: Fredoka, Nunito, sans-serif; font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0 0 6px; }
.legal-stand { color: #B9B0D9; font-weight: 700; margin: 0 0 28px; }
.legal section { margin-top: 16px; padding: 22px 26px; border-radius: 24px; background: #1C1446; border: 1px solid rgba(255, 255, 255, .06); }
.legal h2 { font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 1.25rem; margin: 0 0 8px; color: #FFF7FE; }
.legal p, .legal li { color: #D8D1F0; line-height: 1.65; font-size: 1rem; }
.legal p { margin: 0 0 8px; }
.legal ul { margin: 6px 0 0; padding-left: 20px; }
.legal li { margin: 6px 0; }
.legal li::marker { color: #FF9BE3; }
.legal a { color: #FF9BE3; }
.legal-card { display: flex; align-items: center; gap: 18px; }
.legal-card > div:last-child { display: grid; gap: 4px; }
.legal-card b { font-family: Fredoka, Nunito, sans-serif; font-size: 1.4rem; color: #fff; }
.legal-card span { color: #D8D1F0; font-weight: 700; line-height: 1.55; }
.legal-card.contact .btn { justify-self: start; margin-top: 10px; }
.legal-logo img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.legal-logo { width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #2E2066, #140D33); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 30px rgba(139, 122, 255, .3); }
[data-lang-block][hidden] { display: none !important; }

/* Cookie-Hinweis unten mittig */
.cookiebar {
  position: fixed; left: 50%; bottom: 22px; z-index: 80; width: min(760px, calc(100vw - 28px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 16px; padding: 16px 16px 16px 18px; border-radius: 26px;
  background: #1C1446; border: 1px solid rgba(255, 155, 227, .22); box-shadow: 0 24px 60px rgba(8, 4, 26, .65);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
}
.cookiebar[hidden] { display: none; }
.cookiebar.show { transform: translate(-50%, 0); opacity: 1; }
.cookiebar.hide { transform: translate(-50%, 140%); opacity: 0; }
.cookie-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FFD66B, #FF7AD9); color: #22114A; }
.cookiebar p { flex: 1; margin: 0; color: #D8D1F0; font-weight: 700; font-size: .92rem; line-height: 1.45; }
.cookiebar p b { display: block; color: #fff; font-family: Fredoka, Nunito, sans-serif; font-size: 1.02rem; }
.cookiebar p a { color: #FF9BE3; }
.cookie-btns { display: flex; gap: 8px; flex: none; }
.cookie-btns .btn { height: 42px; padding: 0 18px; font-size: .92rem; }
@media (max-width: 680px) { .cookiebar { flex-wrap: wrap; } .cookie-btns { width: 100%; } .cookie-btns .btn { flex: 1; } }

/* ==========================================================================
   Handy: Kopfleiste mit Menü-Knopf und aufklappendem Blatt
   ========================================================================== */
.navburger, .navsheet { display: none; }
@media (max-width: 760px) {
  .nav-inner { gap: 10px; }
  .nav-right { gap: 8px !important; }
  .nav-right > a.btn { display: none !important; }
  .navburger {
    display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; flex: none; padding: 0;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .05); cursor: pointer;
  }
  .navburger span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #FFF7FE; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
  .navburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .navburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .navburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .navsheet:not([hidden]) {
    display: flex; flex-direction: column; gap: 14px; position: fixed; left: 12px; right: 12px; top: 74px; z-index: 70;
    padding: 12px 12px 14px; border-radius: 26px; background: #1C1446; border: 1px solid rgba(255, 155, 227, .2);
    box-shadow: 0 26px 60px rgba(8, 4, 26, .7); animation: sheet-in .35s cubic-bezier(.34, 1.4, .64, 1) both;
    max-height: calc(100dvh - 90px); overflow-y: auto;
  }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
  .navsheet-links { display: flex; flex-direction: column; }
  .navsheet-links a { display: flex; align-items: center; min-height: 50px; padding: 0 14px; border-radius: 16px; color: #FFF7FE; font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 1.12rem; text-decoration: none; }
  .navsheet-links a:active, .navsheet-links a:hover { background: rgba(255, 255, 255, .07); }
  .navsheet-cta { display: grid; gap: 8px; }
  .navsheet-cta .btn { justify-content: center; width: 100%; height: 50px; }
  body.navsheet-open { overflow: hidden; }

  /* Allgemein: nichts ragt seitlich heraus, grössere Tippflächen */
  html, body { overflow-x: hidden; }
  .btn { min-height: 46px; }
  .langbtn { height: 44px; }
  .footer-grid, .fgrid { gap: 22px !important; }
}

/* ── Lobby-Vorschau mit Avataren ─────────── */
.tiles.lobby .tile{background:linear-gradient(150deg,#2A1E63,#171035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tiles.lobby .tile.shot{background-size:cover; background-position:center}
.tiles.lobby .shot-screen{background-image:url(lobby/screen.webp)}
.tiles.lobby .shot-cam{background-image:url(lobby/timo.webp)}
.tiles.lobby .tile.shot::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(8,6,22,.75))}
.tiles.lobby .tile.tile-person{display:grid; place-items:center}
.tile-av{width:52%; max-width:74px; aspect-ratio:1; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.35); margin-bottom:12px}
.tile.talking .tile-av{box-shadow:0 0 0 3px #4DF0A5, 0 0 0 7px rgba(77,240,165,.22), 0 10px 24px rgba(0,0,0,.35); animation:tile-talk 1.6s ease-in-out infinite}
@keyframes tile-talk{50%{box-shadow:0 0 0 3px #4DF0A5, 0 0 0 11px rgba(77,240,165,0), 0 10px 24px rgba(0,0,0,.35)}}
.tile-who{position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 16px); padding:3px 9px 3px 4px; border-radius:99px; background:rgba(8,6,22,.62); z-index:1}
.tile-who img{width:20px; height:20px; border-radius:50%; object-fit:cover}
.tile-who b{position:static; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile.tile-person .tile-who{padding-left:9px}
.tile-mute{color:#FF7A9C; flex:none}
@media (prefers-reduced-motion: reduce){.tile.talking .tile-av{animation:none}}

/* ── Kein Markieren auf der Webseite ─────── */
html{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
input, textarea, select, [contenteditable="true"]{-webkit-user-select:text; user-select:text}
/* Entwickler-Doku: Text rechts der Navigation lässt sich markieren und kopieren */
.docs-body{-webkit-user-select:text; user-select:text; -webkit-touch-callout:default}
.docs-body ::selection{background:rgba(255,155,227,.35); color:#fff}
.docs-body img, .docs-body .doc-copy{-webkit-user-select:none; user-select:none}
img, svg, a{-webkit-user-drag:none}

/* ── Entwickler-Dokumentation ────────────── */
.docs .docs-wrap{display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; max-width:1160px}
.docs-nav{position:sticky; top:110px; align-self:start; display:flex; flex-direction:column; gap:2px}
.docs-nav .legal-back{margin-bottom:18px; align-self:flex-start}
.docs-nav > b{font-family:Fredoka, Nunito, sans-serif; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#FF9BE3; margin:0 0 8px 12px}
.docs-nav > a:not(.legal-back){padding:8px 12px; border-radius:12px; color:#D8D1F0; text-decoration:none; font-weight:700; font-size:.94rem; transition:background .15s, color .15s}
.docs-nav > a:not(.legal-back):hover, .docs-nav > a.on{background:rgba(255,255,255,.07); color:#fff}
.docs-body{min-width:0}
.docs-hero{padding:6px 0 8px}
.docs-kicker{display:inline-block; padding:5px 12px; border-radius:999px; background:rgba(124,107,255,.18); color:#C9C0FF; font-weight:800; font-size:.78rem; letter-spacing:.06em; margin-bottom:12px}
.docs-hero p{max-width:720px; font-size:1.06rem}
.docs-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px}
.docs-card{display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:22px; background:#1C1446; border:1px solid rgba(255,255,255,.06); color:#fff !important; text-decoration:none; transition:transform .35s cubic-bezier(.34,1.56,.64,1), border-color .2s}
.docs-card:hover{transform:translateY(-4px); border-color:rgba(255,155,227,.4)}
.docs-card .f-ico{width:40px; height:40px}
.docs-card b{font-family:Fredoka, Nunito, sans-serif; font-size:1.15rem}
.docs-card span{color:#BDB4E0; font-weight:600; font-size:.92rem; line-height:1.45}
.docs h3{font-family:Fredoka, Nunito, sans-serif; font-weight:600; font-size:1.05rem; margin:22px 0 8px; color:#fff}
.docs section{scroll-margin-top:100px}
.docs code{font-family:'Cascadia Code', ui-monospace, Menlo, Consolas, monospace; font-size:.86em; padding:2px 6px; border-radius:7px; background:rgba(10,6,30,.6); color:#FFE3A3}
.docs-table{width:100%; border-collapse:separate; border-spacing:0; margin:10px 0 12px; border-radius:16px; overflow:hidden; background:rgba(10,6,30,.35)}
.docs-table th, .docs-table td{padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(255,255,255,.05); color:#D8D1F0; font-size:.94rem; line-height:1.5}
.docs-table tr:last-child th, .docs-table tr:last-child td{border-bottom:0}
.docs-table th{width:170px; color:#fff; font-weight:800; white-space:nowrap}
.docs-small th{width:90px}
.docs-verb{display:inline-block; padding:2px 8px; border-radius:7px; font-family:'Cascadia Code', ui-monospace, monospace; font-size:.74rem; font-weight:800; letter-spacing:.04em}
.docs-verb.post{background:rgba(77,240,165,.16); color:#8FF5C6}
.docs-verb.get{background:rgba(122,140,255,.2); color:#B9C3FF}
.docs-verb.put{background:rgba(255,197,92,.18); color:#FFDB9A}
.docs-verb.patch{background:rgba(232,121,249,.18); color:#F4B5FF}
.docs-note{margin-top:12px !important; padding:12px 16px; border-radius:14px; background:rgba(255,197,92,.1); border:1px solid rgba(255,197,92,.25); color:#FFE9C2 !important}
.docs-steps{counter-reset:step; list-style:none; padding:0 !important; margin:10px 0 14px !important}
.docs-steps li{counter-increment:step; position:relative; padding-left:40px; margin:10px 0}
.docs-steps li::before{content:counter(step); position:absolute; left:0; top:1px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--violet),var(--pink)); color:#fff; font-weight:800; font-size:.8rem}
.doc-code{margin:12px 0; border-radius:16px; overflow:hidden; background:#0B0820; border:1px solid rgba(255,255,255,.07)}
.doc-code-head{display:flex; align-items:center; justify-content:space-between; padding:8px 10px 8px 14px; background:rgba(255,255,255,.04); font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#A99BFF}
.doc-copy{border:0; padding:6px 12px; border-radius:9px; background:rgba(255,255,255,.08); color:#fff; font:inherit; font-size:.74rem; letter-spacing:0; text-transform:none; cursor:pointer; transition:background .15s}
.doc-copy:hover{background:rgba(255,255,255,.16)}
.doc-copy.done{background:rgba(77,240,165,.25); color:#BFFFE2}
.doc-code pre{margin:0; padding:14px 16px; overflow-x:auto}
.doc-code pre code{padding:0; background:none; color:#E6E1FF; font-size:.84rem; line-height:1.65; white-space:pre}
@media (max-width:900px){
  .docs .docs-wrap{grid-template-columns:1fr}
  .docs-nav{position:static; flex-direction:row; flex-wrap:wrap; gap:6px}
  .docs-nav > b{display:none}
  .docs-nav .legal-back{width:100%; margin-bottom:6px}
  .docs-cards{grid-template-columns:1fr}
  .docs-table th{width:auto; white-space:normal}
}

/* ── Lasche NITE Transfer am rechten Rand ── */
.nt-tab{position:fixed; right:0; top:50%; z-index:60; display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 10px 18px 12px; border-radius:18px 0 0 18px; background:linear-gradient(180deg,#FFD66B,#FF7AD9 55%,#B07AFF); color:#22114A; text-decoration:none; font-family:Fredoka, Nunito, sans-serif; font-weight:600; font-size:.95rem; letter-spacing:.02em; box-shadow:-10px 14px 34px rgba(255,122,217,.28), inset 2px 0 0 rgba(255,255,255,.35); transform:translate(6px,-50%); transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s}
.nt-tab:hover, .nt-tab:focus-visible{transform:translate(0,-50%); box-shadow:-14px 18px 40px rgba(255,122,217,.4), inset 2px 0 0 rgba(255,255,255,.35)}
.nt-tab span{writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap}
.nt-tab i{display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:rgba(34,17,74,.14)}
.nt-tab small{writing-mode:vertical-rl; transform:rotate(180deg); font-family:inherit; font-size:.68rem; opacity:.75}
@media (max-width:760px){.nt-tab{display:none}}
@media (prefers-reduced-motion: reduce){.nt-tab{transition:none}}

/* Laufband: zwei identische Gruppen, nahtlose Schleife ohne Lücke */
.marquee-track{display:flex; gap:0; width:max-content; animation:marquee 90s linear infinite; will-change:transform; backface-visibility:hidden}
.marquee-group{display:flex; align-items:center; flex:none; gap:44px; padding-right:44px}
.marquee .mq-word{display:block; font-size:clamp(24px,3.2vw,38px); font-weight:700; letter-spacing:-.01em; white-space:nowrap; line-height:1.15}
.marquee .marquee-group img{flex:none; width:26px; height:26px; opacity:.9}
@keyframes marquee{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}

/* Knöpfe in Rechtstexten/Kontakt: nicht vom pinken Link-Stil überschreiben lassen */
.legal a.btn{color:#fff; text-decoration:none}
.legal a.btn-primary{text-shadow:0 1px 3px rgba(34,17,74,.55)}
.legal a.btn-white{color:var(--sun-ink); text-shadow:none}

/* Cookie-Hinweis als schmale Leiste statt Karte über dem Inhalt */
.cookiebar { width: min(980px, calc(100vw - 24px)); bottom: 14px; gap: 14px; padding: 10px 10px 10px 16px; border-radius: 18px; }
.cookie-ic { width: 32px; height: 32px; }
.cookie-ic svg { width: 17px; height: 17px; }
.cookiebar p { font-size: .86rem; line-height: 1.4; }
.cookiebar p b { display: inline; font-size: .9rem; margin-right: 6px; }
.cookie-btns .btn { height: 38px; padding: 0 16px; font-size: .86rem; }
@media (max-width: 680px) {
  .cookiebar { bottom: 10px; gap: 10px; padding: 12px; border-radius: 16px; }
  .cookie-ic { display: none; }
  .cookiebar p { font-size: .8rem; }
  .cookiebar p b { display: block; margin: 0 0 2px; }
  .cookie-btns .btn { height: 36px; }
}

/* 5.25 3D-Icons im NITE-Stil */
img.ico3d{object-fit:contain; user-select:none; -webkit-user-drag:none}
.feature img.f-ico.ico3d{width:64px; height:64px; margin:-6px 0 12px -6px; filter:drop-shadow(0 12px 22px rgba(124,58,237,.35))}
.feature:hover img.f-ico.ico3d{transform:translateY(-5px) rotate(-6deg) scale(1.08)}
img.scene-ico.ico3d{width:72px; height:72px; margin:-8px 0 10px -8px; filter:drop-shadow(0 14px 26px rgba(6,7,20,.45))}
.docs-card img.f-ico.ico3d{width:56px; height:56px; margin:-4px 0 4px -4px; filter:drop-shadow(0 10px 18px rgba(124,58,237,.35)); transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.docs-card:hover img.f-ico.ico3d{transform:translateY(-3px) rotate(-6deg) scale(1.06)}

/* 5.25 Streaming-Szene: Bildschirm gross oben, drei Kameras darunter, alles echte Videokacheln */
.tiles.lobby2{grid-template-columns:repeat(3,1fr); gap:8px}
.tiles.lobby2 .tile{aspect-ratio:3/2; border-radius:14px; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 20px rgba(6,4,20,.35)}
.tiles.lobby2 .st-screen{grid-column:1/-1; aspect-ratio:16/8.4; background-image:url(lobby/screen2.webp)}
.tiles.lobby2 .st-timo{background-image:url(lobby/timo2.webp)}
.tiles.lobby2 .st-kayzn{background-image:url(lobby/kayzn2.webp)}
.tiles.lobby2 .st-lina{background-image:url(lobby/lina2.webp); background-position:center 30%}
.tiles.lobby2 .tile.shot::before{background:linear-gradient(180deg,transparent 60%,rgba(8,6,22,.7))}
.tiles.lobby2 .tile.talking{box-shadow:inset 0 0 0 2px #4DF0A5, 0 0 0 3px rgba(77,240,165,.22), 0 0 22px rgba(77,240,165,.35); animation:tile-ring 1.8s ease-in-out infinite}
@keyframes tile-ring{50%{box-shadow:inset 0 0 0 2px #4DF0A5, 0 0 0 5px rgba(77,240,165,.14), 0 0 30px rgba(77,240,165,.45)}}
.tiles.lobby2 .tile-who{left:7px; bottom:7px; padding:3px 8px 3px 3px; gap:5px; background:rgba(8,6,22,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.tiles.lobby2 .tile-who svg:not(.tile-mute){color:#4DF0A5; flex:none}
.tiles.lobby2 .tile-q{position:absolute; top:8px; left:8px; z-index:1; padding:3px 8px; border-radius:99px; background:rgba(8,6,22,.6); color:#fff; font-size:10px; font-weight:800; letter-spacing:.02em}
.lobbybar{display:flex; justify-content:center; gap:8px; margin-top:12px}
.lobbybar i{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.08); color:#E9E3FF; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lobbybar i.lb-on{background:rgba(255,255,255,.14); color:#fff}
.lobbybar i.lb-end{background:#F23F43; color:#fff; width:46px}
@media (prefers-reduced-motion: reduce){.tiles.lobby2 .tile.talking{animation:none}}
@media (max-width:560px){.tiles.lobby2{grid-template-columns:1fr 1fr}.tiles.lobby2 .st-lina{display:none}}
.docs-nav > a.docs-sub{padding:5px 12px 5px 26px !important; font-size:.86rem !important; font-weight:600 !important; color:#B9AFDB !important}
.docs-list{margin:8px 0 14px !important; padding-left:20px !important}
.docs-list li{margin:8px 0}
.docs-body h3[id]{scroll-margin-top:110px}
@media (max-width: 900px){ .docs-nav > a.docs-sub{display:none} }
.docs-steps[data-from="4"]{counter-reset:step 3}
.docs-steps[data-from="5"]{counter-reset:step 4}
.docs-steps[data-from="6"]{counter-reset:step 5}
.docs-steps[data-from="7"]{counter-reset:step 6}

/* Entwickler-Doku: Vorlage „Mit NITE anmelden“, gleiche Regeln wie im kopierbaren Code */
.doc-preview{display:flex; align-items:center; justify-content:center; padding:28px 16px; margin:12px 0; border-radius:16px; background:#0D0A16; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.nite-login{display:inline-flex; align-items:center; gap:12px; height:50px; padding:0 26px 0 10px; box-sizing:border-box; border-radius:999px; text-decoration:none; white-space:nowrap; font:600 16px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#fff; background:linear-gradient(180deg,#1B1529,#0F0B19); box-shadow:inset 0 0 0 1px rgba(167,139,250,.28),0 8px 24px -10px rgba(0,0,0,.7); transition:box-shadow .15s ease,transform .15s ease}
.nite-login img{width:32px; height:32px; border-radius:50%; box-shadow:0 0 0 2px rgba(139,92,246,.45)}
.nite-login:hover{transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(167,139,250,.6),0 10px 28px -10px rgba(139,92,246,.55)}
.nite-login:focus-visible{outline:2px solid #A78BFA; outline-offset:3px}
.doc-preview .nite-login,.doc-preview .nite-login:hover{color:#fff !important; text-decoration:none !important}