/* moonsling.de – Layout: ruhige Textspalte über einem bewegten Nachthimmel; die Bühne mit der spielbaren Demo
   läuft über die volle Breite, die Features hängen als Stationen an einer gestrichelten Umlaufbahn. */
@font-face{font-family:"Unbounded";src:url("fonts/Unbounded-Variable.ttf") format("truetype");font-weight:200 900;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-Variable.ttf") format("truetype");font-weight:200 800;font-display:swap}
:root{
  --bg:#100C26; --bg2:#1E1747; --ink:#EEEDFE; --ink2:#AFA9EC; --muted:#9C95D6; --acc:#E8A23A; --accInk:#1A1433;
  --line:rgba(175,169,236,.22); --face:#1B1640;
  --display:"Unbounded",system-ui,sans-serif; --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg) linear-gradient(180deg,var(--bg2) 0,var(--bg) 900px) no-repeat;color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
.sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px;margin-inline:auto}
a{color:var(--ink2);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}

header.top{display:flex;align-items:center;justify-content:space-between;padding-block:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 19px/1 var(--display)}
.brand img{width:34px;height:34px;border-radius:9px}
.lang{font-weight:700;font-size:14px;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px}

/* Hero */
.hero{padding-block:clamp(20px,5vw,56px) 0;text-align:center}
.hero h1{margin:0;font:600 clamp(52px,12vw,128px)/.95 var(--display);letter-spacing:-.02em;text-wrap:balance;animation:logoIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .b{color:var(--ink2)}
.tag{margin:18px 0 0;text-wrap:balance;font:500 clamp(15px,2vw,18px)/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);animation:fadeUp .8s .35s both}
.tag span{display:inline-block}
.lead{margin:16px auto 0;max-width:34em;font-size:clamp(17px,2.2vw,20px);color:var(--ink2);text-wrap:balance;animation:fadeUp .8s .5s both}
.cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px;animation:fadeUp .8s .65s both}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:11px 18px;font-weight:700;font-size:15px;border:1px solid var(--line);color:var(--ink);background:rgba(16,12,38,.5)}
.pill.acc{background:var(--acc);color:var(--accInk);border-color:transparent;position:relative}
.pill.acc::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--acc);opacity:0;animation:breathe 3.2s ease-in-out infinite}

/* Bühne mit der Demo: läuft über die volle Fensterbreite, oben und unten weich ausgeblendet, damit nichts hart abgeschnitten wirkt */
.stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(10px,3vw,28px);height:clamp(360px,46vw,540px);cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  background:radial-gradient(ellipse 55% 60% at 50% 52%,rgba(122,114,224,.14),transparent 72%);animation:fadeUp 1s .2s both}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%)}
.stage .hud{position:absolute;top:8%;right:max(20px,calc(50vw - 540px));display:flex;gap:14px;font:600 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.stage .hud b{color:var(--ink);font-weight:600;margin-left:6px}
.stage .hint{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:600;color:var(--ink2);background:rgba(16,12,38,.6);border:1px solid var(--line);border-radius:999px;padding:7px 14px;pointer-events:none;transition:color .3s,border-color .3s}
.stage.is-playing .hint{color:var(--acc);border-color:rgba(232,162,58,.45)}

/* Was dich erwartet: Stationen einer Reiseroute, abwechselnd links und rechts, verbunden durch eine geschwungene Bahn mit Komet */
.section{padding-block:clamp(48px,8vw,96px) 24px}
.section h2{margin:0 0 8px;font:600 clamp(24px,3.6vw,34px)/1.2 var(--display);text-wrap:balance;text-align:center}
.section .sub{margin:0 auto 48px;color:var(--muted);text-align:center}
.orbit{list-style:none;margin:0 auto;padding:0 0 90px;position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,7vw,110px);row-gap:36px;max-width:980px}
.orbit .route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.route-line{fill:none;stroke:rgba(175,169,236,.32);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round}
.comet{fill:#fff}
.comet-glow{fill:rgba(232,162,58,.45);filter:blur(4px)}
.orbit li{position:relative;z-index:1;display:flex;align-items:center;gap:20px}
.orbit li:nth-of-type(odd){flex-direction:row-reverse;text-align:right}
.orbit li:nth-of-type(even){transform:translateY(90px)}
.orbit h3{margin:0 0 4px;font:600 clamp(17px,2.2vw,20px)/1.3 var(--display);text-wrap:balance}
.orbit p{margin:0;color:var(--muted);max-width:30ch;text-wrap:pretty}
.orbit li:nth-of-type(odd) p{margin-left:auto}
.orbit li:hover .ico{transform:scale(1.12) rotate(-6deg)}

.ico{position:relative;flex:none;width:var(--s,64px);height:var(--s,64px);transition:transform .35s cubic-bezier(.2,.7,.2,1);animation:bob 6s ease-in-out infinite}
.orbit li:nth-of-type(2) .ico{animation-delay:-1s}.orbit li:nth-of-type(3) .ico{animation-delay:-2s}
.orbit li:nth-of-type(4) .ico{animation-delay:-3s}.orbit li:nth-of-type(5) .ico{animation-delay:-4s}.orbit li:nth-of-type(6) .ico{animation-delay:-5s}
.ball{position:absolute;inset:10%;border-radius:50%}
/* Gesicht wie im Spiel */
.face::before{content:"";position:absolute;inset:0;border-radius:50%;transform-origin:50% 46%;animation:blink 5s infinite;
  background:radial-gradient(circle at 34% 46%,var(--face) 0 7%,transparent 7.6%),radial-gradient(circle at 66% 46%,var(--face) 0 7%,transparent 7.6%),
  radial-gradient(ellipse 12% 7% at 22% 60%,rgba(255,110,150,.35),transparent),radial-gradient(ellipse 12% 7% at 78% 60%,rgba(255,110,150,.35),transparent)}
.face::after{content:"";position:absolute;left:39%;top:56%;width:22%;height:11%;border:2.5px solid var(--face);border-top:0;border-radius:0 0 999px 999px}
.p-lav{background:radial-gradient(circle at 35% 30%,#B4AEF8,#7A72E0 62%,#4E46B4)}
.p-pink{background:radial-gradient(circle at 35% 30%,#FBC0DA,#DB76A3 62%,#A9497A)}
.p-sun{background:radial-gradient(circle at 40% 38%,#FFF1CF,#F3B65A 45%,#D0791F);animation:glow 3s ease-in-out infinite}
.p-ice{background:radial-gradient(circle at 35% 30%,#E7F7FF,#8EC5EE 60%,#4A80BC)}
.moon{position:absolute;inset:0;animation:spin 6s linear infinite}
.moon::after{content:"";position:absolute;left:50%;top:-1px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#B9B4E6)}
.hole{position:absolute;inset:14px;border-radius:50%;background:#07051A;box-shadow:0 0 0 2px rgba(255,214,150,.35),0 0 18px 4px rgba(232,162,58,.35)}
.disk{position:absolute;inset:4px 0;border-radius:50%;border:3px solid transparent;border-top-color:rgba(255,200,120,.9);border-bottom-color:rgba(232,162,58,.55);transform:rotate(-18deg) scaleY(.38);animation:disk 2.4s linear infinite}
.dust{position:absolute;inset:10px;background:linear-gradient(135deg,#FFE6B0,#E8A23A);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:twinkle 4s ease-in-out infinite}
.dust.s2{inset:auto 2px 6px auto;width:16px;height:16px;animation-delay:-2s}

/* Rechtstexte */
.legal{padding-block:8px 48px}
.legal h1{font:600 clamp(26px,5vw,40px)/1.15 var(--display);margin:16px 0 20px;text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
.legal h2{font:600 18px/1.3 var(--display);margin:34px 0 8px}
.legal h3{font:700 16px/1.4 var(--body);margin:20px 0 4px}
.legal p,.legal li{color:#DCD9F7;max-width:68ch;overflow-wrap:break-word}
.legal .panel{border-left:2px solid var(--acc);padding:4px 0 4px 18px;margin:18px 0}
.note{font-size:14px;color:var(--muted)}
.todo{background:rgba(232,162,58,.18);color:#FFD08A;border-radius:6px;padding:0 6px;font-weight:700}

footer{position:relative;z-index:1;border-top:1px solid var(--line);margin-top:48px;padding-block:24px 40px;font-size:14px;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:8px}

@keyframes logoIn{from{opacity:0;letter-spacing:.12em;filter:blur(8px)}to{opacity:1;letter-spacing:-.02em;filter:blur(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:0;transform:scale(1)}50%{opacity:.45;transform:scale(1.04)}}
@keyframes travel{from{top:28px}to{top:calc(100% - 40px)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes disk{from{transform:rotate(-18deg) scaleY(.38)}to{transform:rotate(342deg) scaleY(.38)}}
@keyframes glow{0%,100%{box-shadow:0 0 14px 2px rgba(232,162,58,.35)}50%{box-shadow:0 0 26px 8px rgba(232,162,58,.55)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.8) rotate(45deg)}}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}

@media (max-width:640px){
  .orbit{grid-template-columns:1fr;row-gap:30px;padding-bottom:10px}
  .orbit li:nth-of-type(even){transform:none;flex-direction:row-reverse;text-align:right}
  .orbit li:nth-of-type(odd){flex-direction:row;text-align:left}
  .orbit li:nth-of-type(even) p{margin-left:auto}
  .orbit li:nth-of-type(odd) p{margin-left:0}
  .ico{width:calc(var(--s,64px) * .8);height:calc(var(--s,64px) * .8)}
}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}