/* SquadPlay Web – Designsystem "Ozean" (abgeleitet aus app/lib/theme/app_theme.dart + app/lib/ui/ds.dart) */
@font-face{font-family:"Lilita One";src:url(/assets/fonts/LilitaOne-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Baloo 2";src:url(/assets/fonts/Baloo2-500.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Baloo 2";src:url(/assets/fonts/Baloo2-800.ttf) format("truetype");font-weight:800;font-display:swap}

:root{
  --ink:#0D2350;--ink-2:#26346B;--night:#0A1440;--night-2:#13246B;
  --sky1:#7FE3FF;--sky2:#1C4FD8;--sky-pale:#E6F3FF;
  --accent:#FF9F1C;--accent-hi:#FFBE55;--accent-deep:#C96D00;
  --teal:#00C2A8;--teal-deep:#00806F;--violet:#9775FA;--violet-deep:#6741D9;
  --sun:#FFD43B;--sand:#FFF6DE;--sand-2:#FFEBB8;--muted:#5B6B8C;
  --card:#FDFEFF;--line:#B9C9E6;
  --r-sm:12px;--r-md:18px;--r-lg:24px;--r-xl:32px;
  --display:"Lilita One","Baloo 2",system-ui,sans-serif;
  --body:"Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-weight:500;font-size:1.0625rem;line-height:1.55;color:var(--ink);background:var(--sky-pale);overflow-x:hidden}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.05;margin:0}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:1.3rem}
p{margin:0}
a{color:inherit}
.wrap{width:min(1200px,100%);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;padding:10px 16px;border-radius:12px;font-weight:800}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:8px}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--sky2);margin-bottom:.8rem}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:34em}
.lead-dark{font-size:1.15rem;color:var(--ink-2);max-width:38em;margin-top:1rem}
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{max-width:18em}

/* ---------- Buttons (Toy: Tinten-Kontur + Lippe + Glanz) ---------- */
.btn{--lip:var(--ink);position:relative;display:inline-flex;align-items:center;gap:.55em;min-height:56px;padding:.7em 1.4em;
  font-family:var(--display);font-size:1.2rem;letter-spacing:.02em;text-decoration:none;color:#fff;border:3px solid var(--ink);
  border-radius:var(--r-md);box-shadow:0 6px 0 var(--lip),0 16px 26px -8px #0a144088;transition:transform .15s ease,box-shadow .15s ease,filter .15s;
  text-shadow:0 2px 0 #0003;isolation:isolate}
.btn::before{content:"";position:absolute;left:8px;right:8px;top:5px;height:36%;border-radius:12px;background:linear-gradient(#ffffff70,#ffffff10);z-index:-1}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--lip),0 20px 30px -8px #0a144099;filter:saturate(1.08)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--lip),0 8px 14px -6px #0a144077}
.btn img{width:40px;height:40px;margin:-8px 0 -8px -6px;filter:drop-shadow(0 3px 2px #0004)}
.btn-play{background:linear-gradient(180deg,var(--accent-hi),var(--accent) 55%,#F08C00)}
.btn-glass{background:#ffffff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:#ffffffcc;--lip:#ffffff66;box-shadow:0 5px 0 #ffffff55}
.btn-ghost{background:#fff;color:var(--ink);text-shadow:none;--lip:var(--line)}
.btn-sm{min-height:42px;font-size:1rem;padding:.4em 1em;box-shadow:0 4px 0 var(--lip)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 18px;margin-top:28px}
.cta-row.center{justify-content:center}

/* ---------- Header ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:50;transition:background .25s,box-shadow .25s,backdrop-filter .25s}
.site-head.scrolled,.site-head.solid{background:#0A1440e6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 24px #0a144040}
.site-head.solid{position:sticky}
.head-row{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-family:var(--display);font-size:1.45rem;text-shadow:0 2px 0 #0a144066}
.brand img{border-radius:10px;border:2px solid #ffffffb3}
.site-nav{display:flex;align-items:center;gap:6px}
.site-nav a{color:#fff;text-decoration:none;font-weight:800;padding:10px 14px;border-radius:999px;transition:background .2s}
.site-nav a:hover{background:#ffffff22}
.soon-pill{display:inline-flex;align-items:center;gap:8px;margin-left:8px;padding:8px 14px;border-radius:999px;background:#ffffff1f;border:2px solid #ffffff55;color:#fff;font-weight:800;font-size:.9rem}
.dot{width:9px;height:9px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px #ffd43b33}
.menu-btn{display:none;width:48px;height:48px;border-radius:14px;border:2px solid #ffffffaa;background:#ffffff1a;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-btn i{display:block;width:20px;height:2.5px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] i:nth-child(2){transform:translateY(7.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(3){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(4){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Spielfigur (Ebenen wie CharacterBody in der App) ---------- */
.char{position:relative;width:var(--size,160px);aspect-ratio:1;isolation:isolate;flex:none}
.char>.tint,.char>img:not(.hat),.char>.face{position:absolute;inset:0;width:100%;height:100%}
.char .tint{background:var(--paint);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.char .d{mix-blend-mode:multiply}
.char .hat{position:absolute;left:50%;width:calc(49% * var(--hs,1));top:calc(-30% + (var(--hs,1) - 1) * 25%);transform:translateX(-50%);z-index:2;filter:drop-shadow(0 4px 3px #0a144033)}
.char[data-shape="cat"] .hat,.char[data-shape="bear"] .hat{top:calc(-39% + (var(--hs,1) - 1) * 25%)}
.char::after{content:"";position:absolute;left:18%;right:18%;bottom:-7%;height:10%;border-radius:50%;background:radial-gradient(#0a144055,transparent 70%);z-index:-1}

@keyframes bob{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-5%) scale(.98,1.02)}55%{transform:translateY(-5%) scale(.98,1.02)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--rot,0deg) * -1))}}
@keyframes letter{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-6%) rotate(calc(var(--r,0deg) * -1))}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.bob{animation:bob 2.4s ease-in-out infinite}
.d2{animation-delay:-.6s}.d3{animation-delay:-1.2s}.d4{animation-delay:-1.8s}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;min-height:min(880px,100svh);display:flex;align-items:center;padding:110px 0 120px;overflow:hidden;background:var(--night)}
.hero-sky{position:absolute;inset:0;z-index:0}
.hero-sky img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero-sky::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,#0A1440b3 0%,#0A144000 28%),
  linear-gradient(90deg,#0A1440d9 0%,#0A144080 42%,#0A144000 70%),
  linear-gradient(0deg,#0A1440 0%,#0A144000 30%)}
.spark{position:absolute;width:14px;height:14px;z-index:1;background:radial-gradient(circle,#fff 0 18%,transparent 20%),linear-gradient(#fff,#fff) center/2px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 2px no-repeat;animation:twinkle 3.2s ease-in-out infinite}
.s1{top:18%;left:58%}.s2{top:30%;right:8%;animation-delay:-1s}.s3{top:12%;right:28%;animation-delay:-2s}.s4{bottom:34%;left:47%;animation-delay:-.5s}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px}
.wordmark{display:flex;align-items:flex-end;margin:0 0 18px -4px}
.wordmark img{height:clamp(46px,6.2vw,82px);width:auto;margin-right:-.6%;filter:drop-shadow(0 6px 0 #0a144055);animation:letter 3s ease-in-out infinite}
.wordmark img:nth-child(odd){--r:-3deg}.wordmark img:nth-child(even){--r:3deg;margin-bottom:-.4%}
.wordmark img:nth-child(2){animation-delay:-.3s}.wordmark img:nth-child(3){animation-delay:-.6s}.wordmark img:nth-child(4){animation-delay:-.9s}
.wordmark img:nth-child(5){animation-delay:-1.2s}.wordmark img:nth-child(6){animation-delay:-1.5s}.wordmark img:nth-child(7){animation-delay:-1.8s}
.wordmark img:nth-child(8){animation-delay:-2.1s}.wordmark img:nth-child(9){animation-delay:-2.4s}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.6rem);text-shadow:0 4px 0 #0a144088;max-width:12em;margin-bottom:18px}
.hl{color:var(--sun);display:inline-block}
.hero .lead{color:#E9EEFF;text-shadow:0 1px 8px #0a144088}
.store-row{list-style:none;display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:26px 0 0}
.store-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:14px;background:#0A1440aa;border:2px solid #ffffff40;color:#fff;font-family:var(--display);font-size:1.05rem;line-height:1.05}
.store-badge svg{width:26px;height:26px;fill:#fff;opacity:.9}
.store-badge small{display:block;font-family:var(--body);font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.hero-stage{position:relative;height:clamp(380px,44vw,560px)}
.spot{position:absolute;left:50%;top:-30%;width:70%;height:130%;transform:translateX(-50%);background:linear-gradient(180deg,#ffffff00,#ffffff1f 60%,#ffffff00);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);filter:blur(6px)}
.squad{position:absolute;inset:0}
.mate{position:absolute;display:flex;flex-direction:column;align-items:center}
.mate-c{--size:clamp(170px,19vw,250px);left:50%;bottom:10%;transform:translateX(-50%);z-index:2}
.mate-c .char{margin-bottom:calc(var(--size) * -.4);z-index:2}
.mate-c .podium{order:2;width:150%;max-width:none;filter:drop-shadow(0 18px 24px #0008)}
.mate-l,.mate-r{--size:clamp(96px,10vw,140px);bottom:2%;z-index:3}
.mate-l{left:2%}.mate-r{right:2%}
.float{position:absolute;width:clamp(56px,6.4vw,92px);filter:drop-shadow(0 10px 12px #0006);animation:floaty 5s ease-in-out infinite}
.f1{top:6%;left:4%;--rot:-8deg}.f2{top:0;right:10%;--rot:8deg;animation-delay:-1.4s}.f3{top:34%;right:-2%;--rot:-6deg;animation-delay:-2.6s}
.f4{top:38%;left:-4%;--rot:10deg;animation-delay:-3.4s}.f5{top:16%;left:42%;width:clamp(36px,3.6vw,54px);animation-delay:-.8s}
.hero-wave{display:none}

/* ---------- Geräte-Rahmen (Querformat, wie die App) ---------- */
.device{position:relative;margin:0;padding:clamp(7px,1vw,12px);border-radius:clamp(20px,2.6vw,34px);background:linear-gradient(145deg,#2A3970,#0B1230 40%);
  box-shadow:inset 0 0 0 2px #3B4C8C,0 36px 60px -24px #0a1440aa,0 12px 24px -12px #0a144066}
.device::before{content:"";position:absolute;left:clamp(12px,1.6vw,20px);top:50%;width:6px;height:16%;transform:translateY(-50%);border-radius:6px;background:#000;z-index:2;opacity:.85}
.device img{display:block;width:100%;height:auto;border-radius:clamp(14px,1.9vw,24px)}

/* ---------- Prinzip ---------- */
.principle{position:relative;z-index:4;margin-top:-48px;border-radius:48px 48px 0 0;box-shadow:0 -12px 40px #0a144055;padding:clamp(70px,9vw,130px) 0;background:
  radial-gradient(1200px 400px at 85% 0,#ffffff 0,#ffffff00 70%),linear-gradient(180deg,var(--sky-pale),#D3E9FF)}
.principle-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.principle-visual{position:relative}
.principle-visual .device{transform:rotate(-3deg)}
.code-chip{position:absolute;right:-4%;bottom:-8%;display:flex;align-items:center;gap:10px;padding:12px 20px 12px 12px;background:#fff;border:3px solid var(--ink);border-radius:var(--r-md);
  box-shadow:0 6px 0 var(--ink),0 20px 30px -10px #0a144066;font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.7rem);letter-spacing:.12em;transform:rotate(3deg)}
.code-chip img{width:44px;height:44px}
.beats{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:22px}
.beats li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start}
.beats img{width:64px;height:64px;filter:drop-shadow(0 6px 6px #0a144026)}
.beats h3{margin-bottom:4px}
.beats p{color:var(--ink-2)}

/* ---------- Spiele ---------- */
.games-sec{position:relative;padding:clamp(70px,9vw,130px) 0;color:#fff;background:
  radial-gradient(900px 500px at 10% 0,#7FE3FF55,#7FE3FF00 70%),linear-gradient(180deg,#2E7BEA 0%,var(--sky2) 55%,#1438A8 100%)}
.games-sec::before{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background:radial-gradient(circle at 20% 30%,#fff 0 1.5px,transparent 2px) 0 0/90px 90px,radial-gradient(circle at 70% 60%,#fff 0 1px,transparent 1.5px) 0 0/60px 60px}
.games-sec .eyebrow{color:var(--sky1)}
.games-sec .lead-dark{color:#DCE8FF}
.big-num{color:var(--sun);font-size:1.15em;text-shadow:0 4px 0 #0a144066}
.isle-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:28px}
.isle-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 12px;border-radius:var(--r-lg);border:3px solid var(--ink);background:#fff;color:var(--ink);
  font:inherit;font-weight:800;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .2s;position:relative}
.isle-tab img{width:52px;height:52px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.isle-tab span{font-family:var(--display);font-weight:400;font-size:1.02rem;line-height:1.1;text-align:center}
.isle-tab small{position:absolute;top:-10px;right:-8px;min-width:28px;height:28px;display:grid;place-items:center;border-radius:99px;background:var(--ink);color:#fff;font-size:.8rem;border:2px solid #fff}
.isle-tab:hover img{transform:scale(1.12) rotate(-6deg)}
.isle-tab[aria-selected="true"]{background:var(--cc);color:#fff;transform:translateY(-4px);box-shadow:0 9px 0 var(--ink)}
.isle-tab[aria-selected="true"] span{text-shadow:0 2px 0 #0a144055}
.isle{border-radius:var(--r-xl);background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink),0 40px 60px -30px #0a1440aa;padding:clamp(20px,3vw,36px);position:relative;overflow:hidden}
.isle::before{content:"";position:absolute;inset:0 0 auto;height:8px;background:var(--cc)}
.isles .isle+.isle{margin-top:24px}
.js .isle[data-hidden]{display:none}
.js .isles .isle+.isle{margin-top:0}
.isle-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:22px}
.isle-head h3{font-size:clamp(1.6rem,3vw,2.3rem)}
.isle-head p{color:var(--muted);font-weight:800}
.isle-body{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,3vw,40px);align-items:start}
.isle-visual{position:sticky;top:96px}
.device-tilt{transform:rotate(-2deg)}
.isle-collage{position:relative;aspect-ratio:1200/552;border-radius:var(--r-lg);background:radial-gradient(circle at 50% 60%,#fff6cf,#ffe066 70%,#f59f00);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:6%;border:3px solid var(--ink)}
.isle-collage img{width:100%;filter:drop-shadow(0 8px 8px #0a144044)}
.isle-collage img:nth-child(odd){transform:translateY(-14%) rotate(-6deg)}.isle-collage img:nth-child(even){transform:translateY(12%) rotate(6deg)}
.games{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.game{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:10px;border-radius:var(--r-md);background:#F4F8FF;border:2px solid #DCE6F7;transition:transform .2s,box-shadow .2s,border-color .2s}
.game:hover{transform:translateY(-3px);border-color:var(--g2);box-shadow:0 10px 18px -10px var(--g2)}
.game-art{width:64px;height:64px;border-radius:16px;background:linear-gradient(150deg,var(--g1),var(--g2));display:grid;place-items:center;box-shadow:inset 0 -4px 0 #0002,inset 0 3px 0 #fff6}
.game-art img{width:56px;height:56px;filter:drop-shadow(0 3px 3px #0a144033);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.game:hover .game-art img{transform:scale(1.12) rotate(-5deg)}
.game-txt{display:flex;flex-direction:column;min-width:0}
.game-txt strong{font-family:var(--display);font-weight:400;font-size:1.12rem;line-height:1.15}
.game-txt>span{font-size:.92rem;color:var(--muted);line-height:1.3}
.game-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-size:.74rem;font-weight:800;padding:2px 9px;border-radius:99px;background:#fff;border:1.5px solid #C9D6EE;color:var(--ink-2)}
.tag-priv{background:#FFF0F5;border-color:#F7A8C4;color:#A61E4D}

/* ---------- Figur ---------- */
.figure-sec{position:relative;padding:clamp(70px,9vw,130px) 0;background:
  radial-gradient(circle at 1px 1px,#e8c98a55 1.2px,transparent 1.6px) 0 0/22px 22px,linear-gradient(180deg,var(--sand),#FFF0C9)}
.figure-sec .eyebrow{color:var(--accent-deep)}
.figure-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.builder{margin-top:28px;display:grid;gap:18px}
.builder fieldset{border:0;margin:0;padding:0}
.builder legend{font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--accent-deep);margin-bottom:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{width:54px;height:54px;border-radius:16px;border:2.5px solid #E2CFA0;background:#fff;cursor:pointer;display:grid;place-items:center;padding:4px;box-shadow:0 3px 0 #E2CFA0;transition:transform .15s,border-color .15s,box-shadow .15s}
.opt:hover{transform:translateY(-2px)}
.opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 4px 0 var(--ink);background:#FFF9E8}
.opt .char{--size:38px}
.opt .char::after{display:none}
.opt img{width:38px;height:38px}
.opt-none{font-family:var(--display);font-size:.85rem;color:var(--muted)}
.swatches .opt{border-radius:50%;width:44px;height:44px;padding:0;background:var(--sw)}
.swatches .opt[aria-pressed="true"]{outline:3px solid #fff;outline-offset:-6px}
.figure-stage{display:flex;flex-direction:column;align-items:center;gap:32px}
.figure-pedestal{position:relative;width:min(440px,100%);aspect-ratio:1/.95;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.figure-bg{position:absolute;inset:4% 4% 14%;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,#ffe8a8 55%,#ffd36b00 72%)}
.figure-char{position:relative;z-index:2;--size:min(260px,58vw);margin-bottom:-17%}
.figure-char .char{transition:filter .3s}
.figure-char.pop .char{animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(.9,1.08)}60%{transform:scale(1.06,.95)}100%{transform:scale(1)}}
.figure-pedestal .podium{position:relative;width:88%;filter:drop-shadow(0 18px 20px #c96d0044)}
.progress-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.progress-list li{display:flex;gap:12px;align-items:flex-start;background:#ffffffb3;border-radius:var(--r-md);padding:12px 14px;border:2px solid #F1DDA8}
.progress-list img{width:44px;height:44px;flex:none}
.progress-list strong{display:block;font-family:var(--display);font-weight:400;font-size:1.08rem}
.progress-list span{font-size:.92rem;color:var(--ink-2);line-height:1.3;display:block}
.shots-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);margin-top:clamp(48px,7vw,90px)}
.shots-duo .device:first-child{transform:rotate(-1.5deg)}.shots-duo .device:last-child{transform:rotate(1.5deg) translateY(24px)}

/* ---------- Zusammen ---------- */
.together{position:relative;padding:clamp(80px,10vw,140px) 0;color:#fff;background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);overflow:hidden}
.together-sky{position:absolute;inset:0;opacity:.7;background:
  radial-gradient(circle at 12% 18%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 78% 12%,#fff 0 1px,transparent 1.6px),
  radial-gradient(circle at 42% 8%,#fff 0 1.4px,transparent 2px),radial-gradient(circle at 90% 46%,#fff 0 1px,transparent 1.6px),
  radial-gradient(circle at 6% 70%,#fff 0 1px,transparent 1.6px),radial-gradient(900px 400px at 80% 110%,#7c3aed44,transparent 70%)}
.together .wrap{position:relative}
.sec-head.light .eyebrow{color:var(--sky1)}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,32px);position:relative;margin-bottom:clamp(48px,7vw,80px)}
.flow::before{content:"";position:absolute;top:34px;left:12%;right:12%;border-top:3px dashed #ffffff40}
.flow-step{position:relative;text-align:center;padding:0 8px}
.flow-no{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 18px;border-radius:50%;font-family:var(--display);font-size:2rem;color:var(--ink);
  background:radial-gradient(circle at 35% 30%,#fff3bf,var(--sun) 60%,#F59F00);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink),0 0 0 8px #ffd43b22;position:relative}
.flow-step h3{font-size:1.6rem;margin-bottom:8px}
.flow-step p{color:#C9D4F5;max-width:22em;margin-inline:auto}
.together-shots{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.together-notes{display:grid;gap:16px}
.note-card{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:var(--r-lg);background:#ffffff0f;border:2px solid #ffffff22;backdrop-filter:blur(4px)}
.note-card img{width:56px;height:56px;flex:none}
.note-card h3{margin-bottom:4px}
.note-card p{color:#C9D4F5}

/* ---------- Einstieg ---------- */
.start{padding:clamp(70px,9vw,130px) 0;background:linear-gradient(180deg,#D3E9FF,var(--sky-pale))}
.path{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,32px);counter-reset:step}
.path li{position:relative;background:#fff;border:3px solid var(--ink);border-radius:var(--r-xl);padding:28px 24px 26px;box-shadow:0 7px 0 var(--ink);counter-increment:step}
.path li::before{content:counter(step);position:absolute;top:18px;right:22px;font-family:var(--display);font-size:3.4rem;line-height:1;color:#E6F0FF;-webkit-text-stroke:2px #C9DBF7}
.path li:nth-child(2){transform:translateY(22px)}.path li:nth-child(3){transform:translateY(44px)}
.path img{width:88px;height:88px;margin:-10px 0 8px -6px;filter:drop-shadow(0 8px 8px #0a144026)}
.path h3{font-size:1.6rem;margin-bottom:6px}
.path p{color:var(--ink-2)}

/* ---------- Finale ---------- */
.finale{position:relative;padding:clamp(110px,12vw,170px) 0 clamp(80px,9vw,120px);margin-top:clamp(20px,4vw,50px);color:#fff;text-align:center;overflow:hidden;
  background:radial-gradient(800px 300px at 50% 100%,#FFB38766,transparent 70%),linear-gradient(180deg,#1E2A78 0%,#4B3A93 45%,#9A5BA6 80%,#E8957E 100%)}
.finale-inner{display:flex;flex-direction:column;align-items:center}
.finale-squad{display:flex;gap:clamp(4px,2vw,24px);align-items:flex-end;margin-bottom:28px;--size:clamp(76px,10vw,124px)}
.finale-squad .char:nth-child(2),.finale-squad .char:nth-child(3){--size:clamp(92px,12vw,148px)}
.finale h2{text-shadow:0 4px 0 #0a144066;max-width:16em}
.finale p{margin-top:16px;color:#F3EAFF;font-size:1.15rem;max-width:32em}

/* ---------- Footer ---------- */
.site-foot{background:var(--night);color:#C9D4F5;padding:56px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px 40px}
.foot-brand p{margin-top:12px;max-width:28em}
.foot-links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.foot-links a{display:inline-block;padding:6px 0;text-decoration:none;font-weight:800;color:#fff}
.foot-links a:hover{color:var(--sun)}
.foot-copy{grid-column:1/-1;border-top:1px solid #ffffff1f;padding-top:22px;font-size:.92rem}

/* ---------- Rechtstexte ---------- */
body.legal{background:linear-gradient(180deg,#7FE3FF,#1C4FD8 70%) fixed}
.legal-main{padding-block:32px 64px}
.paper{max-width:780px;margin:0 auto;background:#fff;border:3px solid var(--ink);border-radius:var(--r-xl);box-shadow:0 8px 0 var(--ink);padding:clamp(22px,4vw,44px)}
.paper h1{font-size:clamp(2rem,5vw,2.8rem);margin-bottom:16px}
.paper h2{font-size:1.4rem;margin:28px 0 8px}
.paper p,.paper li{margin-bottom:10px}
.paper a{color:var(--sky2);font-weight:800}

/* ---------- Scroll-Einblendung ---------- */
.js .reveal{opacity:0;translate:0 26px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;translate:0 0}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .isle-tabs{grid-template-columns:repeat(3,1fr)}
  .isle-body{grid-template-columns:1fr}
  .isle-visual{position:relative;top:0;max-width:640px}
  .games{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .menu-btn{display:flex}
  .site-nav{position:absolute;top:72px;left:var(--gutter);right:var(--gutter);flex-direction:column;align-items:stretch;gap:4px;padding:12px;border-radius:var(--r-lg);
    background:var(--night);border:2px solid #ffffff2a;box-shadow:0 24px 60px #0a1440cc;display:none}
  .site-nav.open{display:flex}
  .site-nav a{padding:14px 16px;font-size:1.1rem}
  .soon-pill{margin:6px 0 0;justify-content:center}
  .site-head:has(.site-nav.open){background:#0A1440f2}
  .hero{padding:96px 0 64px;min-height:0}
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .hero-sky img{object-position:30% 70%}
  .hero-sky::after{background:linear-gradient(180deg,#0A1440cc 0%,#0A144066 45%,#0A1440 100%)}
  .hero-stage{height:clamp(290px,70vw,440px);order:2;margin-top:clamp(36px,6vw,56px)}
  .mate-c{--size:clamp(132px,30vw,200px);bottom:18%}
  .mate-l,.mate-r{--size:clamp(78px,18vw,120px);bottom:4%}
  .f4{left:2%}.f3{right:2%}
  .principle-grid,.figure-grid,.together-shots{grid-template-columns:1fr}
  .principle-visual{max-width:620px}
  .figure-grid{display:flex;flex-direction:column;gap:24px}
  .figure-copy,.figure-stage{display:contents}
  .figure-copy>*{order:1;width:100%}
  .figure-pedestal{order:2;width:min(300px,80%);align-self:center}
  .figure-char{--size:min(190px,46vw)}
  .builder{order:3;margin-top:0}
  .progress-list{order:4}
  .flow,.path{grid-template-columns:1fr}
  .flow::before{display:none}
  .flow-step{text-align:left;display:grid;grid-template-columns:68px 1fr;column-gap:18px;padding:0}
  .flow-no{margin:0;grid-row:span 2}
  .flow-step p{margin:0}
  .path li:nth-child(n){transform:none}
  .shots-duo{grid-template-columns:1fr}
  .shots-duo .device:last-child{transform:rotate(1.5deg)}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:1rem}
  .head-row{height:64px}
  .site-nav{top:64px}
  .brand{font-size:1.25rem}
  .hero h1{font-size:clamp(2.1rem,9vw,2.6rem)}
  .btn:not(.btn-sm){font-size:1.1rem;width:100%;justify-content:center}
  .cta-row{gap:14px}
  .store-badge{flex:1 1 140px}
  .isle-tabs{gap:10px}
  .isle-tab{padding:10px 4px 8px}
  .isle-tab img{width:40px;height:40px}
  .isle-tab span{font-size:.86rem;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;max-width:100%}
  .isle{padding:18px 14px;border-radius:var(--r-lg)}
  .games{grid-template-columns:1fr}
  .code-chip{right:2%;bottom:-14%}
  .progress-list{grid-template-columns:1fr}
  .foot-links{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal{opacity:1;translate:none}
}