/* =====================================================================
   ORBJT · Kern-Design-System
   Dunkles Weltraum-Design, Glas, Neon, 3D. Keine externen Abhängigkeiten.
   ===================================================================== */

:root {
  --bg: #04050c;
  --bg2: #080a18;
  --bg3: #0d1024;
  --panel: rgba(255, 255, 255, .035);
  --panel2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .15);
  --text: #eceeff;
  --muted: #9097bf;
  --dim: #5b618a;
  --a1: #38f0ff;
  --a2: #8b5cff;
  --a3: #ff3fd8;
  --a4: #b8ff3c;
  --warn: #ffb13c;
  --bad: #ff4f6d;
  --good: #3dffa2;
  --grad: linear-gradient(115deg, var(--a1), var(--a2) 50%, var(--a3));
  --font-d: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --r: 20px;
  --ease: cubic-bezier(.65, 0, .35, 1);
  --ease-o: cubic-bezier(.16, 1, .3, 1);
  --ease-b: cubic-bezier(.34, 1.56, .64, 1);
  --nav-h: 76px;
  color-scheme: dark;
}
html[data-theme="aurora"] { --a1: #3dffb0; --a2: #2fb8ff; --a3: #b36bff; --a4: #e6ff5c; }
html[data-theme="solar"]  { --a1: #ffd23d; --a2: #ff7a2f; --a3: #ff2f6b; --a4: #fff27a; }
html[data-theme="synth"]  { --a1: #ff5fd8; --a2: #7b3fff; --a3: #2fe6ff; --a4: #ffe45c; }

/* ---------- Reset ---------- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased; overflow-x: clip; text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: var(--a3); color: #000; }
:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-d); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
p { margin: 0 0 1em; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--a1), var(--a2), var(--a3)); border-radius: 10px; border: 2px solid var(--bg); }

/* ---------- Hintergrund: Nebel + Körnung ---------- */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 30% at 15% 20%, color-mix(in srgb, var(--a2) 22%, transparent), transparent 70%),
    radial-gradient(30% 28% at 85% 30%, color-mix(in srgb, var(--a3) 14%, transparent), transparent 70%),
    radial-gradient(40% 35% at 60% 90%, color-mix(in srgb, var(--a1) 12%, transparent), transparent 70%);
  animation: nebula 40s ease-in-out infinite alternate;
}
@keyframes nebula { to { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); } }
body::after {
  content: ""; position: fixed; inset: -100px; z-index: 9990; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-40px, 20px); } 40% { transform: translate(30px, -30px); }
  60% { transform: translate(-20px, 40px); } 80% { transform: translate(40px, 10px); } 100% { transform: translate(0, 0); }
}
.bg-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Layout ---------- */
.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
.wrap-wide { width: min(1480px, 100% - 48px); margin-inline: auto; }
.sec { position: relative; padding: clamp(80px, 12vw, 160px) 0; }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); max-width: 780px; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
main { position: relative; }

/* ---------- Typografie ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--a1);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }
.display { font-family: var(--font-d); font-weight: 700; font-stretch: condensed; font-size: clamp(3.2rem, 10vw, 9.5rem); line-height: .86; letter-spacing: -.035em; text-transform: uppercase; }
.h1 { font-size: clamp(2.6rem, 6.5vw, 6rem); line-height: .92; letter-spacing: -.035em; }
.h2 { font-size: clamp(2.1rem, 4.8vw, 4.2rem); line-height: .95; letter-spacing: -.03em; }
.h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--muted); line-height: 1.6; max-width: 640px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.grad-text {
  background: linear-gradient(100deg, var(--a1), var(--a2), var(--a3), var(--a1)); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradmove 8s linear infinite;
}
@keyframes gradmove { to { background-position: 300% 0; } }
.outline-text { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 55%, transparent); }
.kbd { display: inline-block; padding: 2px 8px; border: 1px solid var(--line2); border-bottom-width: 3px; border-radius: 7px; font: 500 12px/1.5 var(--mono); color: var(--text); background: var(--panel); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; font: 600 15px/1 var(--font); letter-spacing: .01em; white-space: nowrap;
  color: var(--text); background: rgba(255, 255, 255, .05); border: 1px solid var(--line2);
  overflow: hidden; isolation: isolate; user-select: none;
  transition: transform .35s var(--ease-o), background .3s, box-shadow .4s, border-color .3s, color .3s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .35) 50%, transparent 75%);
  transform: translateX(-130%); transition: transform .9s var(--ease-o);
}
.btn:hover::before { transform: translateX(130%); }
.btn:hover { border-color: var(--a1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 12%, transparent); }
.btn:active { transform: scale(.96) !important; }
.btn-p { color: #06071a; border: 0; background: var(--grad); background-size: 180% 100%; box-shadow: 0 12px 40px -12px var(--a2), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-p:hover { background-position: 100% 0; box-shadow: 0 16px 50px -10px var(--a3), 0 0 0 4px color-mix(in srgb, var(--a3) 20%, transparent); }
.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn-lg { padding: 20px 34px; font-size: 17px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .arr { transition: transform .35s var(--ease-o); }
.btn:hover .arr { transform: translateX(4px); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--panel); font: 500 13px/1 var(--font); color: var(--muted);
  transition: all .3s var(--ease-o);
}
.chip:hover { color: var(--text); border-color: var(--a1); }
.chip.on { color: #06071a; background: var(--a1); border-color: var(--a1); box-shadow: 0 0 24px -4px var(--a1); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }

/* ---------- Karten ---------- */
.card {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  border: 1px solid var(--line); isolation: isolate;
}
.glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--a1), transparent 65%);
  -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);
  opacity: 0; transition: opacity .4s;
}
.glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--a1) 13%, transparent), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.glow:hover::before, .glow:hover::after { opacity: 1; }
[data-tilt] { transform-style: preserve-3d; transition: transform .6s var(--ease-o); will-change: transform; }
[data-tilt].tilting { transition: transform .12s linear; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 14px; left: 50%; z-index: 900; transform: translateX(-50%);
  width: min(1280px, calc(100% - 28px)); display: flex; align-items: center; gap: 14px;
  padding: 9px 10px 9px 16px; border-radius: 20px;
  background: rgba(8, 10, 22, .55); border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8);
  transition: transform .6s var(--ease-o), background .4s, top .4s;
  animation: navIn 1s .2s var(--ease-o) both;
}
@keyframes navIn { from { transform: translate(-50%, -140%); } }
.nav.hide { transform: translate(-50%, -140%); }
.logo { display: flex; align-items: center; gap: 11px; font: 700 18px/1 var(--font-d); letter-spacing: .14em; flex-shrink: 0; }
.logo-orb { position: relative; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--a1) 25%, var(--a2) 60%, #1a0b3d 100%); box-shadow: 0 0 20px -2px var(--a2); transition: transform .8s var(--ease-o); }
.logo-orb i { position: absolute; inset: -5px -9px; border: 1.5px solid color-mix(in srgb, var(--a3) 80%, transparent); border-radius: 50%; transform: rotate(-25deg) scaleY(.35); }
.logo-orb i + i { inset: -2px; border: 0; transform: none; animation: orbit 3s linear infinite; }
.logo-orb i + i::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--a4); box-shadow: 0 0 8px var(--a4); }
@keyframes orbit { to { transform: rotate(360deg); } }
.logo:hover .logo-orb { transform: rotate(-30deg) scale(1.1); }
.logo.spin .logo-orb { animation: logospin 1s var(--ease-o); }
@keyframes logospin { to { transform: rotate(720deg) scale(1.1); } }
.logo-txt b { color: var(--a1); }

.nav-links { position: relative; display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.nav-links a { position: relative; z-index: 1; padding: 9px 16px; border-radius: 10px; font: 500 14px/1 var(--font); color: var(--muted); transition: color .3s; }
.nav-links a:hover, .nav-links a.on { color: var(--text); }
.nav-links a.on::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--a1); box-shadow: 0 0 8px var(--a1); }
.nav-ind { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line2); transition: transform .5s var(--ease-o), width .5s var(--ease-o), opacity .3s; opacity: 0; pointer-events: none; }
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.orbs-pill {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 12px;
  background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad) border-box; border: 1px solid transparent;
  font: 700 14px/1 var(--mono); transition: transform .3s var(--ease-b);
}
.orbs-pill:hover { transform: translateY(-2px); }
.orbs-pill.bump { animation: bump .6s var(--ease-b); }
@keyframes bump { 30% { transform: scale(1.18); } }
.orb-ico { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 35% 30%, #fff 0, var(--a1) 30%, var(--a2) 75%); box-shadow: 0 0 12px -2px var(--a1), inset 0 -3px 6px rgba(0, 0, 0, .35); position: relative; }
.orb-ico::after { content: ""; position: absolute; inset: 7px -4px; border: 1.5px solid var(--a3); border-radius: 50%; transform: rotate(-20deg); opacity: .8; }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--muted); transition: all .3s var(--ease-o); }
.icon-btn:hover { color: var(--text); border-color: var(--line2); background: rgba(255, 255, 255, .08); }
.icon-btn svg { width: 18px; height: 18px; }
.cart-n { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--a3); color: #000; font: 700 11px/19px var(--mono); text-align: center; transform: scale(0); transition: transform .4s var(--ease-b); }
.cart-n.has { transform: scale(1); }
.chat-n { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--a1); color: #000; font: 700 11px/19px var(--mono); text-align: center; transform: scale(0); transition: transform .4s var(--ease-b); box-shadow: 0 0 12px -2px var(--a1); }
.chat-n.has { transform: scale(1); }
.chat-btn.bump { animation: bump .6s var(--ease-b); }
.cart-btn.bump { animation: bump .6s var(--ease-b); }
.burger { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); position: relative; }
.burger i { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .4s var(--ease-o), top .4s var(--ease-o); }
.burger i:first-child { top: 15px; } .burger i:last-child { top: 23px; }
.menu-open .burger i:first-child { top: 19px; transform: rotate(45deg); }
.menu-open .burger i:last-child { top: 19px; transform: rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 890; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 100px 28px 40px; background: rgba(4, 5, 12, .96); backdrop-filter: blur(20px);
  clip-path: circle(0 at calc(100% - 44px) 44px); transition: clip-path .8s var(--ease-o); pointer-events: none;
}
.menu-open .mnav { clip-path: circle(150% at calc(100% - 44px) 44px); pointer-events: auto; }
.mnav a { display: flex; align-items: baseline; gap: 16px; font: 700 clamp(2.4rem, 11vw, 4rem)/1.1 var(--font-d); text-transform: uppercase; letter-spacing: -.02em; opacity: 0; transform: translateY(40px); transition: opacity .6s, transform .8s var(--ease-o), color .3s; }
.mnav a small { font: 500 12px var(--mono); color: var(--a1); }
.mnav a:hover { color: var(--a1); }
.menu-open .mnav a { opacity: 1; transform: none; }
.menu-open .mnav a:nth-child(2) { transition-delay: .05s; } .menu-open .mnav a:nth-child(3) { transition-delay: .1s; }
.menu-open .mnav a:nth-child(4) { transition-delay: .15s; } .menu-open .mnav a:nth-child(5) { transition-delay: .2s; }
.menu-open .mnav a:nth-child(6) { transition-delay: .25s; }

/* ---------- Scroll-Fortschritt ---------- */
.sprog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 950; transform-origin: 0 50%; transform: scaleX(var(--scroll, 0)); background: var(--grad); box-shadow: 0 0 10px var(--a1); pointer-events: none; }

/* ---------- Seitenübergang ---------- */
.pt { position: fixed; inset: 0; z-index: 10000; display: flex; pointer-events: none; }
.pt i { flex: 1; background: linear-gradient(180deg, #0a0c1c, #070814); transform-origin: 50% 0; transform: scaleY(0); animation: ptOut .9s var(--ease-o) both; }
.pt i:nth-child(1) { --k: 0; } .pt i:nth-child(2) { --k: 1; } .pt i:nth-child(3) { --k: 2; } .pt i:nth-child(4) { --k: 3; } .pt i:nth-child(5) { --k: 4; }
.pt i { animation-delay: calc(var(--k) * 55ms + 60ms); }
.pt i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); box-shadow: 0 0 18px var(--a1); }
@keyframes ptOut { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.pt.leave i { transform-origin: 50% 100%; animation: ptIn .55s var(--ease) both; animation-delay: calc(var(--k) * 45ms); }
@keyframes ptIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Eigener Cursor ---------- */
html.has-cur, html.has-cur * { cursor: none !important; }
html.has-cur input[type="text"], html.has-cur input[type="search"], html.has-cur textarea { cursor: text !important; }
html.has-cur [data-native-cursor], html.has-cur [data-native-cursor] * { cursor: crosshair !important; }
.cur, .cur-r { position: fixed; left: 0; top: 0; z-index: 10001; pointer-events: none; border-radius: 50%; transition: opacity .3s; }
.cur { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--a1); box-shadow: 0 0 10px var(--a1); }
.cur-r {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid color-mix(in srgb, var(--text) 45%, transparent);
  display: grid; place-items: center; transition: width .35s var(--ease-o), height .35s var(--ease-o), margin .35s var(--ease-o), background .3s, border-color .3s, opacity .3s;
}
.cur-r span { font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #05060f; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cur-hover .cur-r { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: var(--a1); background: color-mix(in srgb, var(--a1) 10%, transparent); }
.cur-r.lab { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--a1); border-color: var(--a1); }
.cur-r.lab span { opacity: 1; }
.cur-down .cur-r { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cur-out .cur, .cur-out .cur-r, .cur-native .cur, .cur-native .cur-r { opacity: 0; }

/* ---------- Reveal & Split ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 50px, 0); filter: blur(8px); transition: opacity 1s var(--ease-o), transform 1.2s var(--ease-o), filter 1s var(--ease-o); transition-delay: var(--d, 0s); }
.js [data-reveal="left"] { transform: translate3d(-70px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(70px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.85); }
.js [data-reveal="flip"] { transform: perspective(1000px) rotateX(40deg) translateY(60px); transform-origin: 50% 100%; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
[data-split] .w { display: inline-block; white-space: nowrap; perspective: 600px; }
.js [data-split] .ch { display: inline-block; opacity: 0; transform: translate3d(0, .75em, 0) rotateX(-85deg); transform-origin: 50% 100%; transition: transform 1s var(--ease-o), opacity .7s var(--ease-o); transition-delay: calc(var(--i) * 24ms + var(--d, 0s)); }
.js [data-split].in .ch { opacity: 1; transform: none; }

/* ---------- Marquee ---------- */
.marquee { position: relative; overflow: hidden; white-space: nowrap; user-select: none; }
.marquee-in { display: inline-flex; animation: mq var(--dur, 40s) linear infinite; }
.marquee.rev .marquee-in { animation-direction: reverse; }
.marquee:hover .marquee-in { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- Toasts ---------- */
.toasts { position: fixed; left: 20px; bottom: 20px; z-index: 9500; display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 14px; min-width: 260px; max-width: 360px; padding: 12px 16px 12px 12px;
  border-radius: 16px; background: rgba(12, 14, 30, .88); border: 1px solid var(--line2); backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px #000, 0 0 0 1px rgba(0, 0, 0, .3);
  transform: translateX(-120%) scale(.9); opacity: 0; transition: transform .7s var(--ease-b), opacity .4s; pointer-events: auto;
}
.toast.show { transform: none; opacity: 1; }
.toast.hide { transform: translateX(-30px) scale(.95); opacity: 0; transition: transform .4s, opacity .4s; }
.toast .t-ico { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 22px; background: var(--panel2); border: 1px solid var(--line); }
.toast b { display: block; font: 700 14px/1.3 var(--font); }
.toast span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }
.toast.gold .t-ico { background: linear-gradient(135deg, #ffe38a, #ff9f2f); border: 0; }
.toast.crystal .t-ico { background: linear-gradient(135deg, var(--a1), var(--a3)); border: 0; }
.toast.orb .t-ico { background: radial-gradient(circle at 35% 30%, #fff, var(--a1) 35%, var(--a2)); border: 0; }

/* ---------- Effekt-Canvas ---------- */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9800; pointer-events: none; }
.fly-orb { position: fixed; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; z-index: 9900; pointer-events: none; background: radial-gradient(circle at 35% 30%, #fff, var(--a1) 35%, var(--a2)); box-shadow: 0 0 14px var(--a1); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center; padding: 20px; background: rgba(2, 3, 8, .72); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .4s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-box { position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 32px; border-radius: 26px; background: linear-gradient(180deg, #11142a, #0a0c1b); border: 1px solid var(--line2); box-shadow: 0 40px 120px -30px #000; transform: translateY(40px) scale(.95) rotateX(8deg); transition: transform .7s var(--ease-o); }
.modal.open .modal-box { transform: none; }
.modal-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); transition: all .3s; z-index: 5; }
.modal-x:hover { color: var(--text); transform: rotate(90deg); border-color: var(--line2); }

/* ---------- Befehlspalette ---------- */
.cmdk { position: fixed; inset: 0; z-index: 9700; display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px; background: rgba(2, 3, 8, .6); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.cmdk.open { opacity: 1; pointer-events: auto; }
.cmdk-box { width: min(620px, 100%); border-radius: 20px; overflow: hidden; background: rgba(13, 15, 32, .96); border: 1px solid var(--line2); box-shadow: 0 40px 100px -20px #000, 0 0 0 1px rgba(0, 0, 0, .5); transform: scale(.96) translateY(-10px); transition: transform .5s var(--ease-o); }
.cmdk.open .cmdk-box { transform: none; }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.cmdk-in input { flex: 1; background: none; border: 0; outline: 0; font-size: 17px; }
.cmdk-in input::placeholder { color: var(--dim); }
.cmdk-list { max-height: 50vh; overflow: auto; padding: 8px; }
.cmdk-list button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 12px; border-radius: 12px; text-align: left; color: var(--muted); }
.cmdk-list button .ci { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--panel2); font-size: 16px; flex-shrink: 0; }
.cmdk-list button b { color: var(--text); font-weight: 600; display: block; font-size: 14px; }
.cmdk-list button small { font-size: 12px; }
.cmdk-list button.sel { background: rgba(255, 255, 255, .07); }
.cmdk-list button.sel .ci { background: var(--a1); }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--dim); }
.cmdk-empty { padding: 30px; text-align: center; color: var(--dim); }

/* ---------- Footer ---------- */
.foot { position: relative; margin-top: 60px; padding: 90px 0 30px; border-top: 1px solid var(--line); overflow: hidden; background: linear-gradient(180deg, transparent, rgba(139, 92, 255, .05)); }
.foot-big { font: 800 clamp(4rem, 19vw, 17rem)/.8 var(--font-d); font-stretch: condensed; letter-spacing: -.04em; text-align: center; margin: 0 0 60px; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .14); position: relative; user-select: none; }
.foot-big span { position: absolute; inset: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; clip-path: inset(0 calc(100% - var(--fx, 0%)) 0 0); transition: clip-path .15s linear; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.foot h4 { font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot li a { color: var(--muted); transition: color .3s, padding .3s var(--ease-o); }
.foot li a:hover { color: var(--text); padding-left: 6px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 70px; padding-top: 24px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--dim); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); margin-right: 8px; animation: pulse 2s infinite; }
.no-click { color: var(--bad) !important; font-family: var(--mono); font-size: 13px; }
.foot-bottom { position: relative; }
.cat { position: absolute; right: 4%; top: -41px; width: 64px; height: 40px; cursor: pointer; }
.cat svg { width: 100%; height: 100%; overflow: visible; }
.cat .zz { position: absolute; right: -8px; top: -20px; font: 700 13px var(--mono); color: var(--a1); animation: zz 2.4s infinite; }
.cat .zz:nth-of-type(2) { animation-delay: 1.2s; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 10px) scale(.6); } 50% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -20px) scale(1.2); } }
.cat.awake .zz { display: none; }
.cat.awake svg { animation: catjump .6s var(--ease-b); }
@keyframes catjump { 40% { transform: translateY(-18px) rotate(-8deg); } }

/* ---------- UFO, Haustier, Astronaut, Nach-oben-Rakete ---------- */
.ufo { position: fixed; left: 0; top: 0; z-index: 940; width: 78px; cursor: pointer; filter: drop-shadow(0 0 14px var(--a1)); }
.ufo svg { width: 100%; animation: bob 1.6s ease-in-out infinite; }
.ufo:hover svg { animation-duration: .4s; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(4deg); } }
.ufo.hit svg { animation: ufohit .8s var(--ease-o) forwards; }
@keyframes ufohit { to { transform: translateY(-80px) rotate(720deg) scale(0); opacity: 0; } }

.pet { position: fixed; left: 0; top: 0; z-index: 960; width: 46px; height: 46px; pointer-events: auto; cursor: pointer; will-change: transform; }
.pet svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); }
.pet .eye { transform-origin: center; transform-box: fill-box; animation: blink 4s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.pet-bub { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%) scale(.6); opacity: 0; padding: 8px 12px; border-radius: 12px; background: #fff; color: #07081a; font: 600 12px/1.3 var(--font); white-space: nowrap; transition: all .4s var(--ease-b); pointer-events: none; }
.pet-bub::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
.pet-bub.on { opacity: 1; transform: translateX(-50%) scale(1); }

.idle-astro { position: fixed; z-index: 930; left: 0; top: 0; width: 70px; pointer-events: none; opacity: 0; transition: opacity 1.5s; }
.idle-astro.on { opacity: 1; }
.idle-astro span { position: absolute; top: -18px; right: -10px; font: 700 14px var(--mono); color: var(--a1); animation: zz 2s infinite; }

.totop { position: fixed; right: 20px; bottom: 20px; z-index: 880; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(12, 14, 30, .8); border: 1px solid var(--line2); backdrop-filter: blur(10px); transform: translateY(120px); transition: transform .6s var(--ease-b), border-color .3s; }
.totop.show { transform: none; }
.totop:hover { border-color: var(--a1); }
.totop svg { width: 26px; height: 26px; transition: transform .4s var(--ease-o); }
.totop:hover svg { transform: translateY(-4px); }
.totop.launch svg { animation: launch 1s var(--ease) forwards; }
@keyframes launch { 30% { transform: translateY(6px); } 100% { transform: translateY(-120vh); } }

/* ---------- Hyper-Modus (Konami) ---------- */
html.hyper .h1, html.hyper .h2, html.hyper .display { animation: wobble 2.2s ease-in-out infinite; }
@keyframes wobble { 25% { transform: rotate(-1.2deg) scale(1.01); } 75% { transform: rotate(1.2deg) scale(.99); } }

/* ---------- Formularelemente ---------- */
.input { width: 100%; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); outline: 0; transition: border-color .3s, box-shadow .3s, background .3s; }
.input:focus { border-color: var(--a1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 15%, transparent); background: rgba(255, 255, 255, .06); }
.input::placeholder { color: var(--dim); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); outline: 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--a1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 25%, transparent), 0 0 14px var(--a1); border: 0; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--a1); border: 0; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
select.input option { background: var(--bg2); }
.switch { position: relative; width: 48px; height: 28px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid var(--line2); transition: background .3s; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .4s var(--ease-b); }
.switch.on { background: var(--a1); border-color: var(--a1); }
.switch.on::after { transform: translateX(20px); background: #05060f; }

/* ---------- Sonstiges ---------- */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line2), transparent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes lbin { from { opacity: 0; transform: translateX(-20px); } }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-16px); } }
.spin-slow { animation: orbit 30s linear infinite; }
.scroll-hint { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font: 500 11px var(--mono); letter-spacing: .25em; color: var(--dim); text-transform: uppercase; }
.scroll-hint i { width: 22px; height: 36px; border: 1.5px solid var(--dim); border-radius: 12px; position: relative; }
.scroll-hint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 3px; background: var(--a1); animation: wheel 1.8s infinite; }
@keyframes wheel { 60% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.stars-row { display: inline-flex; gap: 3px; }
.stars-row i { width: 9px; height: 9px; background: var(--dim); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars-row i.on { background: var(--warn); }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Sprachknopf ---------- */
.lang-btn { width: auto; padding: 0 10px; gap: 6px; display: flex; align-items: center; }
.lang-btn b { font: 700 11px var(--mono); letter-spacing: .08em; }
.mnav-lang { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; border: 1px solid var(--line2); font: 600 16px var(--font); color: var(--text); width: max-content; opacity: 0; transition: opacity .6s .3s; }
.mnav-lang svg { width: 20px; height: 20px; }
.menu-open .mnav-lang { opacity: 1; }
.chip svg { flex-shrink: 0; }

/* ---------- Sprachauswahl (Globus) ---------- */
.langx { position: fixed; inset: 0; z-index: 9650; display: flex; flex-direction: column; align-items: center; background: radial-gradient(70% 70% at 50% 55%, rgba(20, 14, 50, .92), rgba(2, 3, 8, .97)); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .45s; overflow: auto; }
.langx.open { opacity: 1; pointer-events: auto; }
.langx-x { position: fixed; top: 20px; right: 20px; z-index: 5; }
.langx-head { text-align: center; padding: 70px 20px 0; display: grid; justify-items: center; gap: 12px; }
.langx-cycle { min-height: 24px; font: 500 15px var(--mono); color: var(--a1); margin: 0; }
.langx-cycle.in { animation: cyc .5s var(--ease-o); }
@keyframes cyc { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.langx-stage { position: relative; width: 100%; flex: 1; min-height: 480px; }
.langx-globe { position: absolute; inset: 0; width: 100%; height: 100%; }
.langx-sats { position: absolute; inset: 0; }
.lsat { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; min-width: 132px; padding: 14px 18px; border-radius: 20px; background: rgba(12, 14, 32, .82); border: 1px solid var(--line2); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -20px #000; transition: border-color .3s, box-shadow .3s, background .3s; will-change: transform; }
.lsat b { font: 700 19px var(--font); letter-spacing: 0; }
.lsat span { font-size: 13px; color: var(--muted); }
.lsat i { position: absolute; top: -9px; right: -6px; padding: 2px 7px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line2); font: 700 10px var(--mono); font-style: normal; color: var(--dim); }
.lsat:hover { border-color: var(--a1); box-shadow: 0 0 40px -8px var(--a1); background: rgba(20, 24, 50, .92); }
.lsat.on { border-color: var(--a3); box-shadow: 0 0 36px -8px var(--a3); }
.lsat.on i { background: var(--a3); color: #000; border-color: var(--a3); }
.lsat.pick { animation: lpick .5s var(--ease-o) forwards; }
@keyframes lpick { to { box-shadow: 0 0 120px 20px var(--a1); border-color: #fff; } }
@media (max-width: 640px) {
  .langx-stage { min-height: 0; flex: none; }
  .langx-globe { position: relative; height: 220px; }
  .langx-sats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px 40px; }
  .lsat { position: relative; min-width: 0; }
}

/* ---------- Willkommen / Konto ---------- */
.acc-box { width: min(480px, 100%); text-align: center; display: grid; gap: 14px; justify-items: center; padding: 34px 30px 26px; }
.acc-orb .logo-orb { width: 58px; height: 58px; }
.acc-orb .logo-orb i { inset: -8px -16px; }
.acc-orb .logo-orb i + i { inset: -4px; }
.acc-orb .logo-orb i + i::after { width: 10px; height: 10px; margin-left: -5px; top: -5px; }
.acc-sub { margin: 0; font-size: 15px; }
.acc-lang { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line2); font-size: 13px; color: var(--text); transition: border-color .3s; }
.acc-lang:hover { border-color: var(--a1); }
.acc-lang svg { width: 16px; height: 16px; }
.acc-lang small { color: var(--dim); }
.acc-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); width: 100%; }
.acc-tabs button { flex: 1; padding: 10px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--muted); transition: all .3s; }
.acc-tabs button.on { background: var(--a1); color: #04050c; }
.acc-form { display: grid; gap: 12px; width: 100%; text-align: start; }
.acc-form label { display: grid; gap: 6px; }
.acc-form label span { font: 600 12px var(--mono); color: var(--muted); letter-spacing: .06em; }
.acc-form .btn { width: 100%; margin-top: 4px; }
.acc-err { min-height: 18px; font-size: 13px; color: var(--bad); text-align: center; }
.acc-guest { font-size: 13px; color: var(--muted); text-decoration: underline; }
.acc-guest:hover { color: var(--text); }
.acc-note { margin: 0; font-size: 13px; color: var(--a4); }
.acc-fine { margin: 0; font-size: 11.5px; color: var(--dim); line-height: 1.45; }

/* ---------- Sprachen & Schriften ---------- */
html[lang="zh"] { --font-d: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif; --font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif; }
html[lang="hi"] { --font-d: "Nirmala UI", "Noto Sans Devanagari", "Mangal", system-ui, sans-serif; --font: "Nirmala UI", "Noto Sans Devanagari", "Mangal", system-ui, sans-serif; }
html[lang="ar"] { --font-d: "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif; --font: "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif; }
html[lang="ar"] body *, html[lang="hi"] body * { letter-spacing: 0 !important; }
html[lang="zh"] .display, html[lang="hi"] .display, html[lang="ar"] .display { line-height: 1.12; }
html[lang="zh"] .h1, html[lang="zh"] .h2, html[lang="hi"] .h1, html[lang="hi"] .h2, html[lang="ar"] .h1, html[lang="ar"] .h2 { line-height: 1.2; }
[dir="rtl"] .marquee, [dir="rtl"] .nav-links, [dir="rtl"] canvas { direction: ltr; }
[dir="rtl"] .btn .arr { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arr { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .eyebrow::before { order: 2; }
[dir="rtl"] .hud-tl, [dir="rtl"] .hud-br { right: auto; left: 32px; text-align: left; }
[dir="rtl"] .hud-side { left: auto; right: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .nav-links a { padding: 9px 11px; font-size: 13.5px; }
  .cmd-btn { display: none !important; }
}
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .nav { justify-content: space-between; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap, .wrap-wide { width: calc(100% - 32px); }
  .nav { top: 8px; width: calc(100% - 16px); padding: 7px 8px 7px 12px; gap: 6px; }
  .logo-txt { display: none; }
  .cmd-btn, .snd-btn { display: none !important; }
  .foot-grid { grid-template-columns: 1fr; }
  .toasts { left: 10px; right: 10px; bottom: 10px; }
  .toast { min-width: 0; max-width: none; }
  .btn-lg { padding: 17px 26px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .pt { display: none; }
}

/* ---------- Mauszeiger aus dem Shop ---------- */
html.cur-skin .cur { opacity: 0; }
.cur-sk { position: fixed; left: 0; top: 0; z-index: 10002; width: 36px; height: 36px; margin: -18px 0 0 -18px; pointer-events: none; display: grid; place-items: center; }
.cur-out .cur-sk, .cur-native .cur-sk { opacity: 0; }
.cur-sk svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.cur-down .cur-sk { scale: .82; }
.sk-rocket .ck-fl { transform-box: fill-box; transform-origin: 50% 0; animation: avFlame .1s infinite alternate; }
.sk-rocket:not(.mv) .ck-fl { opacity: .45; }
.sk-ufo { width: 44px; margin-left: -22px; }
.sk-ufo svg { animation: avHover 1.4s ease-in-out infinite; }
.sk-ufo .ck-beam { position: absolute; left: 50%; top: 62%; width: 40px; height: 0; transform: translateX(-50%); background: linear-gradient(rgba(184, 255, 60, .6), transparent); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); transition: height .25s; }
.cur-down .sk-ufo .ck-beam { height: 44px; }
.ck-planet { display: block; width: 26px; height: 26px; border-radius: 50%; }
.ck-planet.earth { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 45%), radial-gradient(9px 6px at 30% 45%, #3dcc7a 60%, transparent 64%), radial-gradient(7px 9px at 70% 60%, #3dcc7a 60%, transparent 64%), radial-gradient(circle, #2c7be5 60%, #0b2a6b); background-size: 100% 100%, 200% 100%, 200% 100%, 100% 100%; animation: ckSpin 4s linear infinite; box-shadow: 0 0 14px rgba(56, 160, 255, .6), inset -5px -4px 8px rgba(0, 0, 0, .45); }
@keyframes ckSpin { to { background-position: 0 0, -200% 0, -200% 0, 0 0; } }
.ck-planet.moon { background: radial-gradient(4px 4px at 35% 40%, rgba(60, 64, 88, .5) 60%, transparent 70%), radial-gradient(6px 6px at 65% 62%, rgba(60, 64, 88, .45) 60%, transparent 70%), radial-gradient(3px 3px at 60% 28%, rgba(60, 64, 88, .5) 60%, transparent 70%), radial-gradient(circle at 35% 30%, #f1f2f8, #9ea3bd 70%); box-shadow: 0 0 14px rgba(220, 225, 255, .5), inset -5px -4px 8px rgba(0, 0, 0, .35); animation: avHover 2.4s ease-in-out infinite; }
.ck-planet.saturn { width: 22px; height: 22px; background: linear-gradient(170deg, #ffe7a8 30%, #d9a95a 50%, #ffe7a8 70%); box-shadow: 0 0 12px rgba(255, 210, 120, .5), inset -4px -3px 6px rgba(0, 0, 0, .35); }
.sk-saturn .ck-ring { position: absolute; left: 50%; top: 50%; width: 40px; height: 12px; margin: -6px 0 0 -20px; border: 2.5px solid rgba(255, 220, 140, .9); border-radius: 50%; transform: rotate(-18deg); animation: ckWob 2.6s ease-in-out infinite; }
@keyframes ckWob { 50% { transform: rotate(-4deg) scaleY(.7); } }
.ck-planet.sun { background: radial-gradient(circle at 40% 35%, #fffbd0, #ffd23d 40%, #ff8a1f); box-shadow: 0 0 22px #ffb13c, 0 0 40px rgba(255, 150, 40, .5); }
.sk-sun .ck-rays { position: absolute; inset: -6px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 210, 61, .75) 0 8deg, transparent 8deg 30deg); -webkit-mask: radial-gradient(circle, transparent 42%, #000 44%, transparent 70%); mask: radial-gradient(circle, transparent 42%, #000 44%, transparent 70%); animation: hgRot2 6s linear infinite; }
@keyframes hgRot2 { to { transform: rotate(360deg); } }
.ck-planet.hole { width: 18px; height: 18px; background: #000; box-shadow: 0 0 0 2px rgba(255, 170, 80, .8), 0 0 16px 4px rgba(255, 120, 60, .6); }
.sk-hole .ck-disk { position: absolute; left: 50%; top: 50%; width: 42px; height: 14px; margin: -7px 0 0 -21px; border-radius: 50%; border: 3px solid rgba(255, 170, 80, .75); box-shadow: 0 0 10px rgba(255, 120, 60, .6); animation: ckDisk 1.8s linear infinite; }
@keyframes ckDisk { 50% { transform: rotate(8deg) scaleX(.9); } }
.sk-comet .ck-head { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #ffd23d, 0 0 24px #ff8a3d; }
.sk-comet .ck-tail { position: absolute; left: 50%; top: 50%; width: 10px; height: 46px; margin-left: -5px; border-radius: 50% 50% 40% 40%; background: linear-gradient(#ffd23d, rgba(255, 63, 216, .5) 50%, transparent); filter: blur(1px); transform-origin: 50% 0; opacity: .5; transition: opacity .2s, height .2s; }
.sk-comet.mv .ck-tail { opacity: 1; height: 64px; }
.sk-star .ck-star { transform-box: fill-box; transform-origin: center; animation: ckTw 1.2s ease-in-out infinite; filter: drop-shadow(0 0 6px #ffd23d); }
@keyframes ckTw { 50% { transform: scale(.7) rotate(20deg); } }
.cur-down .sk-alien .ck-eyes { transform-box: fill-box; transform-origin: center; transform: scaleY(.15); }
.sk-astro { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.sk-astro svg { animation: avHover 2s ease-in-out infinite; }

/* ---------- Gast-Warnung: Speicher-Leiste & Verlassen ---------- */
.savebar { position: fixed; left: 50%; bottom: 18px; z-index: 9400; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(40, 22, 10, .94), rgba(28, 10, 30, .94)); border: 1px solid rgba(255, 177, 60, .55); box-shadow: 0 20px 60px -20px #000, 0 0 40px -14px #ffb13c; backdrop-filter: blur(12px); transform: translate(-50%, 140%); transition: transform .6s var(--ease-b); max-width: calc(100% - 24px); }
.savebar.on { transform: translate(-50%, 0); }
.savebar .sb-ic { font-size: 24px; animation: avBlink 1.2s infinite; }
.savebar b { display: block; font-size: 14px; color: #ffd08a; }
.savebar small { font-size: 12.5px; color: var(--muted); }
.savebar .btn { white-space: nowrap; }
.sb-x { width: 30px; height: 30px; border-radius: 10px; color: var(--dim); }
.sb-x:hover { color: var(--text); }
@media (max-width: 640px) { .savebar { left: 12px; right: 12px; transform: translateY(140%); } .savebar.on { transform: none; } .savebar .sb-ic { display: none; } }
.ew-box { text-align: center; display: grid; gap: 10px; justify-items: center; width: min(480px, 100%); }
.ew-astro { width: 120px; height: 110px; animation: goWobble 1.6s ease-in-out infinite; }
.ew-astro svg { width: 100%; height: 100%; }
@keyframes goWobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.ew-box .h3 { margin: 0; }
.ew-box p { margin: 0; }
.ew-loss { font: 700 17px var(--mono); color: #ffd08a; padding: 10px 16px; border-radius: 14px; background: rgba(255, 177, 60, .1); border: 1px dashed rgba(255, 177, 60, .4); }
.ew-easy { font-size: 13px; color: var(--good); }

/* ---------- Ladebildschirm beim ersten Besuch ---------- */
.preload { position: fixed; inset: 0; z-index: 9700; display: grid; place-items: center; padding: 20px; background: radial-gradient(70% 70% at 50% 40%, #15123a, #03040b 75%); opacity: 0; transition: opacity .5s; }
.preload.on { opacity: 1; }
.preload.out { opacity: 0; transition: opacity .7s; pointer-events: none; }
.preload::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.2px 1.2px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 85% 65%, #fff, transparent), radial-gradient(1.3px 1.3px at 12% 70%, #fff, transparent), radial-gradient(1px 1px at 55% 45%, #fff, transparent); opacity: .6; animation: plStars 3s linear infinite; }
@keyframes plStars { to { transform: translateY(40px); opacity: .3; } }
.pl-box { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; max-width: 460px; }
.pl-ring { position: relative; width: 170px; height: 170px; }
.pl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pl-ring circle { fill: none; stroke-width: 7; }
.pl-ring .bg { stroke: rgba(255, 255, 255, .08); }
.pl-ring .fg { stroke: var(--a1); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .3s var(--ease-o); filter: drop-shadow(0 0 8px var(--a1)); }
.pl-rocket { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -36px 0 0 -32px; color: #fff; animation: plShake .12s infinite alternate; }
.pl-rocket svg { width: 100%; height: 100%; transform: rotate(0deg); }
.pl-rocket i { position: absolute; left: 50%; top: 88%; width: 14px; height: 26px; margin-left: -7px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: radial-gradient(circle at 50% 20%, #fff, #ffd23d 40%, #ff3fd8 80%, transparent); animation: plFlame .1s infinite alternate; }
@keyframes plShake { to { transform: translate(1px, -1px); } }
@keyframes plFlame { to { transform: scaleY(.7); opacity: .8; } }
.preload.done .pl-rocket { animation: plLaunch 1s cubic-bezier(.6, 0, .8, .3) forwards; }
@keyframes plLaunch { to { transform: translateY(-80vh) scale(.6); } }
.pl-pct { font: 800 36px var(--font-d); font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-box h2 { margin: 0; font: 800 clamp(1.6rem, 4vw, 2.3rem) var(--font-d); }
.pl-msg { margin: 0; color: var(--muted); min-height: 22px; }
.pl-msg.in { animation: stInF .5s var(--ease-o); }
.pl-file { font: 500 11px var(--mono); color: var(--dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 14px; }
.preload.done .pl-file { color: var(--good); }
.pl-note { margin: 6px 0 0; font-size: 12.5px; color: var(--dim); }
.pl-skip { margin-top: 6px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pl-skip:hover { color: var(--a1); }

/* ---------- Eigene Dropdowns ---------- */
.dd-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; }
.dd { position: relative; display: inline-block; min-width: 150px; font-size: 14px; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 12px 9px 14px; border-radius: 12px; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); color: var(--text); font-weight: 600; transition: border-color .3s, box-shadow .3s, transform .2s; }
.dd-btn:hover, .dd.open .dd-btn { border-color: var(--a1); box-shadow: 0 0 22px -8px var(--a1); }
.dd-btn:active { transform: scale(.98); }
.dd-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-car { width: 18px; height: 18px; border-radius: 6px; flex: none; position: relative; background: rgba(56, 240, 255, .12); transition: transform .4s var(--ease-b), background .3s; }
.dd-car::before { content: ""; position: absolute; left: 5px; top: 4px; width: 6px; height: 6px; border-right: 2px solid var(--a1); border-bottom: 2px solid var(--a1); transform: rotate(45deg); }
.dd.open .dd-car { transform: rotate(180deg); background: rgba(56, 240, 255, .25); }
.dd-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 100%; max-height: 320px; overflow: auto; padding: 6px; border-radius: 16px; background: linear-gradient(180deg, rgba(22, 26, 56, .98), rgba(10, 12, 28, .98)); border: 1px solid rgba(56, 240, 255, .3); box-shadow: 0 30px 70px -20px #000, 0 0 40px -18px var(--a1); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transform: translateY(-8px) scale(.96); transform-origin: top center; transition: opacity .25s, transform .35s var(--ease-o); }
.dd.up .dd-menu { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; transform: translateY(8px) scale(.96); }
.dd.open .dd-menu { opacity: 1; pointer-events: auto; transform: none; }
.dd-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; color: var(--muted); text-align: start; white-space: nowrap; font-weight: 600; transition: background .2s, color .2s, transform .25s var(--ease-o); }
.dd.open .dd-opt { animation: ddIn .35s var(--ease-o) backwards; animation-delay: var(--d); }
@keyframes ddIn { from { opacity: 0; transform: translateX(-8px); } }
.dd-opt:hover, .dd-opt.kb, .dd-opt:focus-visible { background: rgba(255, 255, 255, .07); color: var(--text); transform: translateX(3px); outline: none; }
.dd-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--dim); flex: none; transition: all .3s; }
.dd-opt.on { color: var(--text); background: rgba(56, 240, 255, .1); }
.dd-opt.on .dd-dot { border-color: var(--a1); background: var(--a1); box-shadow: 0 0 8px var(--a1); }
.dd.picked .dd-btn { animation: ddPick .45s var(--ease-b); }
@keyframes ddPick { 40% { transform: scale(1.05); } }

/* ---------- Klick ins Universum ---------- */
.sfx-layer { position: fixed; inset: 0; z-index: 9450; pointer-events: none; overflow: hidden; }
.sfx { position: absolute; pointer-events: none; }
.sfx.star { width: 34px; height: 34px; margin: -17px 0 0 -17px; color: #fff; filter: drop-shadow(0 0 10px currentColor); animation: sfxStar 1.8s var(--ease-o) forwards; }
.sfx.star svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes sfxStar { 0% { transform: scale(0) rotate(-90deg); } 25% { transform: scale(var(--s, 1)) rotate(0); } 60% { opacity: 1; transform: scale(calc(var(--s, 1) * .7)) rotate(20deg); } 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
.sfx.shoot { width: 0; height: 0; transform: rotate(var(--a)); }
.sfx.shoot i { position: absolute; left: 0; top: -1.5px; width: 150px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff, rgba(56, 240, 255, .6) 30%, transparent); box-shadow: 0 0 10px #38f0ff; transform-origin: 0 50%; animation: sfxShoot 1.1s var(--ease-o) forwards; }
@keyframes sfxShoot { 0% { transform: translateX(0) scaleX(.1); opacity: 1; } 40% { transform: translateX(120px) scaleX(1); opacity: 1; } 100% { transform: translateX(420px) scaleX(.3); opacity: 0; } }
.sfx.nova b { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--c) 30%, transparent 70%); animation: sfxFlash .7s ease-out forwards; }
.sfx.nova i { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; box-shadow: 0 0 8px currentColor; animation: sfxRay 1.1s var(--ease-o) forwards; }
@keyframes sfxFlash { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes sfxRay { 0% { transform: rotate(var(--r)) translateX(0); opacity: 1; } 100% { transform: rotate(var(--r)) translateX(var(--d)); opacity: 0; } }
.sfx.planet span { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, hsl(var(--h) 90% 80%), hsl(var(--h) 70% 45%) 55%, hsl(var(--h) 60% 18%)); box-shadow: 0 0 20px hsl(var(--h) 90% 60% / .6); animation: sfxPlanet 2.2s var(--ease-o) forwards; }
.sfx.planet em { position: absolute; left: -12px; right: -12px; top: 11px; height: 8px; border: 2px solid hsl(calc(var(--h) + 40) 90% 75% / .85); border-radius: 50%; transform: rotate(-18deg); }
@keyframes sfxPlanet { 0% { transform: scale(0) translateY(0); } 20% { transform: scale(1.15); } 30% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-80px) scale(.8); opacity: 0; } }
.sfx.mini-ufo { width: 42px; margin: -14px 0 0 -21px; filter: drop-shadow(0 0 8px #b8ff3c); animation: sfxUfo 1.5s cubic-bezier(.5, 0, .7, .4) forwards; }
.sfx.mini-ufo svg { width: 100%; display: block; }
@keyframes sfxUfo { 0% { transform: scale(0); } 25% { transform: scale(1) translate(0, -10px); } 100% { transform: translate(var(--dx), -140px) scale(.6) rotate(20deg); opacity: 0; } }
.sfx.ring i { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--a1); animation: sfxRing 1.2s var(--ease-o) forwards; }
.sfx.ring i:nth-child(2) { border-color: var(--a3); animation-delay: .12s; } .sfx.ring i:nth-child(3) { border-color: var(--a4); animation-delay: .24s; }
@keyframes sfxRing { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(6); opacity: 0; } }
.sfx.emo { font-size: 28px; line-height: 1; transform: translate(-50%, -50%); animation: sfxEmo 1.8s var(--ease-o) forwards; }
@keyframes sfxEmo { 0% { transform: translate(-50%, -50%) scale(0) rotate(-30deg); } 25% { transform: translate(-50%, -70%) scale(1.3) rotate(8deg); } 100% { transform: translate(calc(-50% + var(--dx)), -260%) scale(.9) rotate(-10deg); opacity: 0; } }
.sfx.hole b { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: radial-gradient(circle, #000 45%, rgba(255, 150, 60, .8) 55%, rgba(139, 92, 255, .4) 70%, transparent 72%); animation: sfxHole 1.5s var(--ease-o) forwards; }
.sfx.hole i { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #ffd9a8; animation: sfxSuck 1.2s cubic-bezier(.6, 0, .9, .5) forwards; }
@keyframes sfxHole { 0% { transform: scale(0) rotate(0); } 20% { transform: scale(1.1) rotate(90deg); } 80% { transform: scale(1) rotate(420deg); opacity: 1; } 100% { transform: scale(0) rotate(600deg); opacity: 0; } }
@keyframes sfxSuck { 0% { transform: rotate(var(--r)) translateX(var(--d)); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(calc(var(--r) + 240deg)) translateX(0); opacity: 0; } }
.sfx.alien-peek { transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; animation: sfxAlien 1.9s var(--ease-b) forwards; }
.sfx.alien-peek span { font-size: 32px; }
.sfx.alien-peek b { font: 700 12px var(--font); padding: 5px 9px; border-radius: 10px; background: #b8ff3c; color: #0b1400; white-space: nowrap; }
@keyframes sfxAlien { 0% { transform: translate(-50%, -20%) scale(0); } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, 40%) scale(.5); } }
.sfx.mini-comet { width: 0; height: 0; transform: rotate(var(--a)); }
.sfx.mini-comet i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #ffd23d, -14px 0 18px -2px #ff8a3d, -30px 0 22px -6px #ff3fd8; animation: sfxComet 1.3s cubic-bezier(.3, 0, .8, .6) forwards; }
@keyframes sfxComet { 0% { transform: translateX(0) scale(0); } 15% { transform: translateX(10px) scale(1); } 100% { transform: translateX(260px) scale(.4); opacity: 0; } }
.sfx.constel { width: 100%; height: 100%; animation: sfxFade 2.2s ease-in forwards; }
.sfx.constel svg { position: absolute; left: 0; top: 0; }
.sfx.constel polyline { fill: none; stroke: rgba(56, 240, 255, .55); stroke-width: 1.4; stroke-dasharray: 4 5; }
.sfx.constel circle { fill: #fff; filter: drop-shadow(0 0 4px #38f0ff); }
@keyframes sfxFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.sfx-wobble { animation: sfxWobble .75s var(--ease-b); }
@keyframes sfxWobble { 15% { transform: rotate(-2deg) scale(1.03); } 35% { transform: rotate(1.6deg) scale(.99); } 55% { transform: rotate(-1deg); } 75% { transform: rotate(.5deg); } }
.sfx-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 5; }
.sfx-wave { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(56, 240, 255, .45), rgba(56, 240, 255, 0) 70%); animation: sfxWave .9s var(--ease-o) forwards; z-index: 5; }
@keyframes sfxWave { to { transform: scale(40); opacity: 0; } }

/* ---------- Sternsplitter (versteckt) ---------- */
.shard { position: absolute; z-index: 40; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; color: #cfe9ff; opacity: .16; transition: opacity .4s, transform .4s var(--ease-b), filter .4s; animation: shardTw var(--tw, 2s) ease-in-out infinite; }
.shard svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.shard:hover { opacity: 1; transform: scale(1.8) rotate(20deg); filter: drop-shadow(0 0 6px #38f0ff) drop-shadow(0 0 14px #ff3fd8); animation: none; }
.shard.got { opacity: 1; transform: scale(4) rotate(180deg); filter: drop-shadow(0 0 12px #ffd23d); transition: transform .8s var(--ease-o), opacity .8s .1s; opacity: 0; pointer-events: none; }
@keyframes shardTw { 50% { opacity: .3; transform: scale(1.15); } }
@media (pointer: coarse) { .shard { width: 18px; height: 18px; margin: -9px 0 0 -9px; opacity: .24; } }
html.quake body { animation: quake .8s; }
@keyframes quake { 10%, 50%, 90% { transform: translate(-6px, 3px) rotate(-.4deg); } 30%, 70% { transform: translate(6px, -3px) rotate(.4deg); } }
body:has(.savebar.on) .toasts { bottom: 96px; }

/* ---------- Sternenkarte (Taste M) ---------- */
html.map-lock { overflow: hidden; }
.umap { position: fixed; inset: 0; z-index: 9620; display: flex; flex-direction: column; gap: 10px; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px calc(16px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(1200px 700px at 50% 55%, rgba(139, 92, 255, .16), transparent 60%), radial-gradient(900px 500px at 20% 10%, rgba(56, 240, 255, .08), transparent 60%), rgba(3, 4, 11, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s; }
.umap::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 33% 76%, #cfe9ff, transparent), radial-gradient(1px 1px at 88% 64%, #fff, transparent), radial-gradient(1px 1px at 52% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 6% 58%, #ffd9f5, transparent), radial-gradient(1px 1px at 93% 88%, #fff, transparent), radial-gradient(1px 1px at 45% 92%, #fff, transparent);
  background-size: 420px 420px; }
.umap.open { opacity: 1; }
.um-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.um-title { text-align: center; }
.um-title .h3 { margin-top: 4px; }
.um-back { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font: 700 15px var(--font); color: #06071a; background: var(--grad); background-size: 180% 100%; box-shadow: 0 10px 30px -10px var(--a2); transition: transform .3s var(--ease-o), background-position .4s; }
.um-back:hover { background-position: 100% 0; transform: translateX(-3px); }
.um-x { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(8, 10, 24, .8); color: var(--text); font-size: 16px; transition: transform .3s, border-color .3s; }
.um-x:hover { transform: rotate(90deg); border-color: var(--a1); }
.um-stats { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.um-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); font-size: 13px; }
.um-chip small { color: var(--muted); font-size: 12px; }
.um-chip b { font: 700 13px var(--mono); }
.um-space { position: relative; flex: 1; min-height: 0; }
.um-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .13); box-shadow: 0 0 40px -20px var(--a2) inset; pointer-events: none; }
.um-sun { position: absolute; left: 50%; top: 50%; z-index: 25; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; text-align: center; }
.um-sun .logo-orb { width: 74px; height: 74px; box-shadow: 0 0 60px 6px color-mix(in srgb, var(--a2) 60%, transparent), 0 0 120px 20px color-mix(in srgb, var(--a1) 18%, transparent); transition: transform .4s var(--ease-b); }
.um-sun .logo-orb i { inset: -12px -22px; }
.um-sun:hover .logo-orb, .um-sun:focus-visible .logo-orb { transform: scale(1.12) rotate(-20deg); }
.um-sun b { font: 700 15px var(--font-d); letter-spacing: .14em; }
.um-sun b span { color: var(--a1); }
.um-p { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 6px; text-align: center; will-change: transform; outline-offset: 6px; }
.um-ball { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font-style: normal;
  background: radial-gradient(circle at 32% 28%, #fff 0, hsl(var(--h) 95% 70%) 18%, hsl(var(--h) 80% 45%) 55%, hsl(var(--h) 70% 16%) 100%);
  box-shadow: 0 0 34px -6px hsl(var(--h) 95% 60%), inset -8px -10px 18px rgba(0, 0, 0, .45); transition: transform .35s var(--ease-b), box-shadow .35s; }
.um-ball span { font-size: 25px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.um-p b { font: 600 13.5px var(--font); text-shadow: 0 2px 10px #000; white-space: nowrap; }
.um-p em, .um-sun em { font: 700 10px var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #06071a; background: var(--a1); padding: 3px 7px; border-radius: 6px; }
.um-p:hover .um-ball, .um-p:focus-visible .um-ball { transform: scale(1.18); box-shadow: 0 0 50px -2px hsl(var(--h) 95% 65%), inset -8px -10px 18px rgba(0, 0, 0, .45); }
.um-new .um-ball { filter: saturate(.55) brightness(.8); }
.um-new .um-ball::after { content: "✨"; position: absolute; right: -6px; top: -6px; font-size: 14px; }
.um-here .um-ball::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--a1); animation: umPulse 1.8s ease-out infinite; }
@keyframes umPulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.um-arcade .um-ball { width: 70px; height: 70px; }
.um-moons { position: absolute; inset: 0; pointer-events: none; }
.um-m { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; pointer-events: auto; will-change: transform; }
.um-m i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, var(--c) 45%, color-mix(in srgb, var(--c) 40%, #000)); box-shadow: 0 0 14px -2px var(--c); transition: transform .3s var(--ease-b); }
.um-m:hover i, .um-m:focus-visible i { transform: scale(1.5); }
.um-q { position: absolute; right: 4%; bottom: 6%; z-index: 5; width: 30px; height: 30px; border-radius: 40% 55% 45% 60%; display: grid; place-items: center; font: 700 14px var(--mono); color: var(--muted); background: #2a2d45; box-shadow: inset -4px -5px 8px rgba(0, 0, 0, .5); animation: float 6s ease-in-out infinite; }
.um-q:hover { color: var(--a3); }
.um-info { position: relative; z-index: 2; align-self: center; display: grid; gap: 2px; min-height: 52px; max-width: min(620px, 100%); padding: 10px 18px; border-radius: 16px; border: 1px solid var(--line2); background: rgba(8, 10, 24, .75); text-align: center; }
.um-info b { font-size: 15px; }
.um-info span { color: var(--muted); font-size: 13px; }
/* Kleine Bildschirme: Kacheln statt Umlaufbahnen */
.um-small .um-space { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); align-content: start; gap: 14px 8px; padding: 8px 2px 16px; }
.um-small .um-sun, .um-small .um-p { position: static; transform: none !important; }
.um-small .um-sun { grid-column: 1 / -1; }
.um-small .um-sun .logo-orb { width: 54px; height: 54px; }
.um-small .um-moons { position: static; grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; pointer-events: auto; }
.um-small .um-m { position: relative; width: 26px; height: 26px; transform: none !important; }
.um-small .um-q { position: static; justify-self: center; grid-column: 1 / -1; }
.um-small .um-ball { width: 52px; height: 52px; }
.um-small .um-arcade .um-ball { width: 52px; height: 52px; }
@media (max-width: 560px) { .um-back { height: 40px; padding: 0 14px; font-size: 14px; } .um-title .eyebrow { display: none; } .um-chip small { display: none; } }
@media (prefers-reduced-motion: reduce) { .um-here .um-ball::before, .um-q { animation: none; } }

/* ---------- Handy-Hinweis (Alien entführt das Handy) ---------- */
.phonehint .ph-box { width: min(400px, 100%); text-align: center; padding: 26px 24px 22px; }
.ph-scene { position: relative; height: 130px; margin: -6px auto 6px; width: 160px; }
.ph-ufo { position: absolute; left: 50%; top: 0; width: 96px; transform: translateX(-50%); animation: phUfo 3s ease-in-out infinite; filter: drop-shadow(0 0 14px var(--a1)); }
.ph-beam { position: absolute; left: 50%; top: 50px; width: 74px; height: 80px; transform: translateX(-50%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(125, 255, 138, .55), rgba(125, 255, 138, .05)); animation: phBeam 1.6s ease-in-out infinite; }
.ph-phone { position: absolute; left: 50%; bottom: 4px; font-size: 34px; transform: translateX(-50%); animation: phLift 3s ease-in-out infinite; }
@keyframes phUfo { 50% { transform: translateX(-50%) translateY(-5px) rotate(-3deg); } }
@keyframes phBeam { 50% { opacity: .55; } }
@keyframes phLift { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-8deg); } 50% { transform: translateX(-50%) translateY(-38px) rotate(10deg); } }
.phonehint .h3 { margin-bottom: 10px; }
.ph-tip { margin: 0 0 18px; padding: 10px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--a1) 40%, transparent); background: color-mix(in srgb, var(--a1) 8%, transparent); font-weight: 600; }
.ph-btns { display: grid; gap: 10px; justify-items: center; }
.ph-btns .btn { width: 100%; justify-content: center; }
.ph-never { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
@media (prefers-reduced-motion: reduce) { .ph-ufo, .ph-beam, .ph-phone { animation: none; } }