/* FocusMon Landingpage — Stil der Feature-Banner-Serie (dark, neon, high-bit) */
:root{--ink:#0B1426;--ink-2:#142544;--ink-3:#1B2F52;--line:rgba(232,241,255,0.10);--line-strong:rgba(232,241,255,0.22);--text:#E8F1FF;--dim:#9DB3D4;--acc:#7CC4FF;--acc-soft:#BFE0FF;--acc-deep:#3E8FE0;--cream:#F4ECD8;--mint:#9EE7C8;--gold:#F2C66B;--gold-soft:#FFE9A8}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ink);color:var(--text);font-family:'Geist',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Kein Seitwärts-Scroll/-Zoom: clip statt hidden, damit position:sticky intakt bleibt.
   hidden bleibt als Fallback für ältere Safari-Versionen zuerst stehen. */
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Bilder/Medien dürfen ihren Container nie sprengen */
img,svg,video{max-width:100%}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--acc-soft)}
button{font-family:inherit;cursor:pointer}
img{display:block}
::selection{background:var(--acc);color:var(--ink)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.5;mix-blend-mode:overlay}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
@media (max-width:720px){.wrap{padding:0 20px}}

/* Typo */
.display{font-family:'Bricolage Grotesque','Geist',sans-serif;font-weight:700;letter-spacing:-0.035em;line-height:0.96}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.02em}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--acc);font-weight:500;display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--acc);box-shadow:0 0 12px var(--acc);flex:0 0 auto}
.eyebrow.gold{color:var(--gold)}
.eyebrow.gold::before{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.cap{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim);line-height:1.6}
.cap .hi{color:var(--acc)}
.cap .hig{color:var(--gold)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text);border:1px solid var(--line-strong);border-radius:999px;padding:9px 15px;background:rgba(124,196,255,0.07);white-space:nowrap}
.chip .d{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);flex:0 0 auto}
.chip.gold{border-color:rgba(242,198,107,0.35);background:rgba(242,198,107,0.08)}
.chip.gold .d{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.pill{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text);border:1px solid var(--line-strong);border-radius:999px;background:rgba(4,9,20,0.72);padding:7px 13px;white-space:nowrap;backdrop-filter:blur(6px)}
.pill .d{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);flex:0 0 auto}
.pill img{width:16px;height:16px;object-fit:contain;image-rendering:pixelated}
.pill.live{border-color:rgba(124,196,255,0.46)}
.pill.gold{border-color:rgba(242,198,107,0.42);color:var(--gold-soft)}
.pill.gold .d{background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* NAV */
nav.top{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(11,20,38,0.62);border-bottom:1px solid var(--line)}
nav.top .inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 32px}
@media (max-width:720px){nav.top .inner{padding:12px 20px}}
.brand{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;letter-spacing:-0.02em;color:var(--text)}
.brand:hover{color:var(--text)}
.brand .mark{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.navlinks{display:flex;gap:24px;align-items:center}
.navlinks a{font-size:13.5px;color:var(--dim);transition:color .2s}
.navlinks a:hover{color:var(--text)}
@media (max-width:1080px){.navlinks{display:none}}
.navright{display:flex;gap:12px;align-items:center}
.lang{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:3px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em}
.lang button{background:transparent;color:var(--dim);border:0;padding:5px 10px;border-radius:999px;letter-spacing:0.1em}
.lang button.on{background:var(--acc);color:var(--ink);font-weight:700}
.navcta{background:var(--cream);color:var(--ink);border:0;padding:10px 17px;border-radius:999px;font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:8px;transition:transform .15s}
.navcta:hover{transform:translateY(-1px);color:var(--ink)}

/* Buttons */
.btn-primary{background:var(--acc);color:var(--ink);border:0;padding:16px 24px;border-radius:14px;font-weight:600;font-size:15px;display:inline-flex;gap:10px;align-items:center;box-shadow:0 10px 24px -8px rgba(124,196,255,0.45), inset 0 1px 0 rgba(255,255,255,0.6);transition:transform .15s, box-shadow .2s}
.btn-primary:hover{transform:translateY(-2px);color:var(--ink);box-shadow:0 14px 30px -8px rgba(124,196,255,0.55), inset 0 1px 0 rgba(255,255,255,0.6)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong);padding:15px 22px;border-radius:14px;font-weight:500;font-size:14.5px;display:inline-flex;gap:10px;align-items:center;transition:border-color .2s, background .2s}
.btn-ghost:hover{border-color:var(--acc);background:rgba(124,196,255,0.06);color:var(--text)}

/* Sections */
section{position:relative;padding:112px 0}
@media (max-width:720px){section{padding:80px 0}}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:56px;max-width:820px}
.section-head h2{font-size:clamp(34px,4.6vw,60px);margin:0}
.section-head p{font-size:17.5px;color:var(--dim);line-height:1.6;margin:0;max-width:640px;text-wrap:pretty}
.lead{padding:104px 0 0}
@media (max-width:720px){.lead{padding:72px 0 0}}
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.halo{position:absolute;pointer-events:none;z-index:0;background:radial-gradient(50% 50% at 50% 50%, rgba(124,196,255,0.20), transparent 70%);filter:blur(10px)}
.halo.gold{background:radial-gradient(50% 50% at 50% 50%, rgba(242,198,107,0.18), transparent 70%)}
.sprite{image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,0.55))}
.sprite.glow{filter:drop-shadow(0 10px 18px rgba(0,0,0,0.55)) drop-shadow(0 0 20px rgba(124,196,255,0.30))}

/* HERO */
.hero{padding:132px 0 72px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.06fr 1fr;gap:56px;align-items:center}
@media (max-width:980px){.hero .grid{grid-template-columns:1fr;gap:44px}}
.hero h1{font-size:clamp(44px,7.4vw,96px);margin:20px 0 22px}
.hero h1 .accent{color:var(--acc);position:relative;display:inline-block}
.hero h1 .accent::after{content:"";position:absolute;left:-2%;right:-2%;bottom:6%;height:14px;background:rgba(124,196,255,0.22);z-index:-1;transform:skewX(-6deg) rotate(-1deg);border-radius:4px}
.hero .lede{font-size:18.5px;line-height:1.58;color:var(--dim);max-width:540px;text-wrap:pretty}
.hero .ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;align-items:center}
.hero .factrow{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.ribbon{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(242,198,107,0.08);border:1px solid rgba(242,198,107,0.30);font-size:12.5px;color:var(--dim)}
.ribbon .b{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.18em;color:var(--ink);background:var(--gold);padding:3px 10px;border-radius:999px;font-weight:700;text-transform:uppercase}

/* Phone */
.phone-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:640px}
.phone{position:relative;width:300px;height:612px;border-radius:48px;background:linear-gradient(180deg,#0F1A30,#091122);box-shadow:0 0 0 1.5px rgba(232,241,255,0.12),0 0 0 11px #0a0f1c,0 0 0 12px rgba(124,196,255,0.18),0 40px 80px -20px rgba(0,0,0,0.7),0 80px 120px -40px rgba(124,196,255,0.25);overflow:hidden;transform:rotate(-3deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.phone:hover{transform:rotate(-1deg) translateY(-6px)}
.phone .notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:108px;height:30px;background:#000;border-radius:18px;z-index:3}
.phone .screen{position:absolute;inset:8px;border-radius:40px;background:radial-gradient(120% 60% at 50% 0%, #1c3b6e 0%, #0a1730 55%, #050b1a 100%);overflow:hidden}
.phone .status{position:absolute;top:18px;left:24px;right:24px;display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--acc-soft);font-weight:600;z-index:4;letter-spacing:0.05em}
.phone .label{position:absolute;top:58px;left:0;right:0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.28em;color:var(--acc);text-transform:uppercase;opacity:.9}
.timer-ring{position:absolute;top:86px;left:50%;transform:translateX(-50%);width:212px;height:212px}
.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer-ring .track{fill:none;stroke:rgba(124,196,255,0.12);stroke-width:5}
.timer-ring .prog{fill:none;stroke:url(#ringGrad);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(124,196,255,0.6))}
.timer-text{position:absolute;top:86px;left:50%;transform:translateX(-50%);width:212px;height:212px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timer-text .big{font-family:'Bricolage Grotesque',sans-serif;font-size:50px;font-weight:700;letter-spacing:-0.04em;color:#fff;line-height:1}
.timer-text .sub{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.22em;color:var(--acc-soft);text-transform:uppercase;margin-top:7px}
.room-strip{position:absolute;left:20px;right:20px;bottom:158px;padding:11px 13px;border-radius:16px;background:rgba(8,16,32,0.72);border:1px solid rgba(124,196,255,0.16);display:flex;align-items:center;gap:11px}
.room-strip .seatmini{width:26px;height:26px;border-radius:8px;background:rgba(124,196,255,0.10);border:1px solid rgba(124,196,255,0.20);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.room-strip .seatmini img{width:20px;height:20px}
.room-strip .txt{min-width:0}
.room-strip .n{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-strip .s{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.14em;color:var(--dim);text-transform:uppercase;margin-top:2px}
.egg-card{position:absolute;left:20px;right:20px;bottom:70px;padding:14px 13px;border-radius:18px;background:linear-gradient(180deg,rgba(124,196,255,0.12),rgba(124,196,255,0.04));border:1px solid rgba(124,196,255,0.18)}
.egg-card .row{display:flex;align-items:center;gap:12px}
.egg{width:46px;height:46px;display:flex;align-items:center;justify-content:center;position:relative;animation:wobble 2.4s ease-in-out infinite;flex-shrink:0}
.egg img{width:100%;height:100%}
@keyframes wobble{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-2px)}}
.egg-card .name{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:13.5px;color:#fff;line-height:1.25}
.egg-card .sub{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--dim);letter-spacing:0.14em;text-transform:uppercase;margin-top:3px}
.progress-bar{height:5px;border-radius:99px;background:rgba(255,255,255,0.08);overflow:hidden;margin-top:11px}
.progress-bar > div{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc-soft));border-radius:99px;box-shadow:0 0 8px var(--acc)}
.home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:4px;border-radius:99px;background:rgba(255,255,255,0.55)}
.orbit{position:absolute;display:flex;align-items:center;justify-content:center}
.orbit img{width:100%;height:100%;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(124,196,255,0.25))}
.orbit.b1{width:112px;height:112px;top:0;left:-4%;animation:float1 7s ease-in-out infinite}
.orbit.b2{width:94px;height:94px;top:14%;right:-6%;animation:float2 8s ease-in-out infinite}
.orbit.b3{width:86px;height:86px;bottom:9%;left:-8%;animation:float3 6s ease-in-out infinite}
.orbit.b4{width:74px;height:74px;bottom:22%;right:-4%;animation:float1 9s ease-in-out infinite reverse}
@media (max-width:520px){.orbit.b1,.orbit.b3{display:none}}
@keyframes float1{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes float2{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes float3{0%,100%{translate:0 0}50%{translate:0 -10px}}
.sparkle{position:absolute;color:var(--acc);opacity:.8;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(0.8)}50%{opacity:1;transform:scale(1.1)}}

/* FOKUSZEIT-ÖKONOMIE */
.econ{background:radial-gradient(70% 100% at 50% 0%, rgba(124,196,255,0.06), transparent 70%)}
.econ-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1080px){.econ-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.econ-grid{grid-template-columns:1fr}}
.ecard{border:1px solid var(--line);border-radius:20px;padding:22px 20px 20px;background:linear-gradient(180deg,rgba(124,196,255,0.05),transparent);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.ecard .ic{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:radial-gradient(70% 70% at 50% 40%, rgba(124,196,255,0.20), transparent 72%);border:1px solid var(--line)}
.ecard .ic img{width:42px;height:42px;image-rendering:pixelated;object-fit:contain}
.ecard .price{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--acc)}
.ecard h3{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:600;letter-spacing:-0.02em;margin:0;line-height:1.12}
.ecard p{margin:0;font-size:14px;line-height:1.5;color:var(--dim)}
.ecard.gold .price{color:var(--gold)}
.ecard.gold .ic{background:radial-gradient(70% 70% at 50% 40%, rgba(242,198,107,0.20), transparent 72%)}
.rule{display:flex;align-items:center;gap:16px;margin-top:34px;padding:18px 22px;border:1px dashed var(--line-strong);border-radius:16px;background:rgba(124,196,255,0.03);flex-wrap:wrap}
.rule .k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--acc);white-space:nowrap}
.rule .v{font-size:15px;color:var(--dim);line-height:1.5}
.rule .v b{color:var(--text);font-weight:600}

/* LOOP-FLOW (HTML/CSS statt Bilder) */
.loop{background:linear-gradient(180deg,transparent 0%, rgba(124,196,255,0.04) 50%, transparent 100%)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.flow::before{content:"";position:absolute;left:8%;right:8%;top:96px;height:2px;background:linear-gradient(90deg,rgba(124,196,255,0.10),rgba(124,196,255,0.45),rgba(124,196,255,0.10));z-index:0}
@media (max-width:980px){.flow{grid-template-columns:repeat(2,1fr)}.flow::before{display:none}}
@media (max-width:560px){.flow{grid-template-columns:1fr}}
.step{position:relative;z-index:1;border:1px solid var(--line);border-radius:22px;padding:24px 22px 22px;background:linear-gradient(180deg,rgba(20,37,68,0.72),rgba(11,20,38,0.5));display:flex;flex-direction:column;gap:14px}
.step .sk{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--acc)}
.step h3{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:600;letter-spacing:-0.02em;margin:0;line-height:1.1}
.step p{margin:0;font-size:14px;line-height:1.5;color:var(--dim)}
.step .sm{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);margin-top:auto;padding-top:4px}
.step .sm .hi{color:var(--acc)}
.viz{height:150px;border-radius:16px;border:1px solid var(--line);background:radial-gradient(120% 90% at 50% 0%, rgba(124,196,255,0.14), transparent 62%),rgba(5,10,22,0.55);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}

/* 01 Timer */
.vring{width:104px;height:104px;position:relative}
.vring svg{width:100%;height:100%;transform:rotate(-90deg)}
.vring .tk{fill:none;stroke:rgba(124,196,255,0.14);stroke-width:5}
.vring .pg{fill:none;stroke:var(--acc);stroke-width:5;stroke-linecap:round;stroke-dasharray:283;filter:drop-shadow(0 0 7px rgba(124,196,255,0.65));animation:ringrun 7s linear infinite}
@keyframes ringrun{from{stroke-dashoffset:283}to{stroke-dashoffset:0}}
.vring .vt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.vring .vt b{font-family:'Bricolage Grotesque',sans-serif;font-size:23px;font-weight:700;letter-spacing:-0.03em;color:#fff}
.vring .vt span{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--acc-soft)}
.durs{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.durs span{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:0.1em;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 8px}
.durs span.on{color:var(--ink);background:var(--acc);border-color:var(--acc);font-weight:700}

/* 02 Handy weg */
.vphone{width:66px;height:104px;border-radius:14px;background:linear-gradient(150deg,#22385f,#0d1730);border:1px solid rgba(232,241,255,0.24);box-shadow:0 14px 26px -10px rgba(0,0,0,0.8);transform:rotate(-12deg);position:relative}
.vphone::before{content:"";position:absolute;top:9px;left:9px;width:13px;height:13px;border-radius:50%;background:rgba(124,196,255,0.22);box-shadow:inset 0 0 0 1px rgba(232,241,255,0.16)}
.vphone::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:14px;border-radius:50%;background:radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 70%);filter:blur(3px)}
.vbreak{position:absolute;bottom:14px;left:14px;right:14px;display:flex;flex-direction:column;gap:7px;align-items:center}
.vbreak .bar{width:100%;height:5px;border-radius:99px;background:rgba(255,255,255,0.10);overflow:hidden;position:relative}
.vbreak .bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--acc),var(--acc-soft));border-radius:99px;animation:runbar 7s linear infinite}
@keyframes runbar{0%{width:6%}92%{width:100%}100%{width:100%}}
.vbreak .t{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim)}

/* 03 Belohnung */
.vrift{width:118px;height:118px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(50% 50% at 50% 50%, rgba(124,196,255,0.34), transparent 72%)}
.vrift .rg{position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(124,196,255,0.42);box-shadow:0 0 26px -4px rgba(124,196,255,0.45), inset 0 0 22px -6px rgba(124,196,255,0.5);animation:spin 18s linear infinite}
.vrift img{width:80px;height:80px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,0.6)) drop-shadow(0 0 18px rgba(124,196,255,0.4));animation:pop 4.5s ease-in-out infinite}
@keyframes pop{0%,100%{transform:scale(0.94) translateY(2px)}50%{transform:scale(1.04) translateY(-4px)}}
.vstars{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.22em;color:var(--gold)}

/* 04 Wachsen */
.vgrow{display:flex;align-items:flex-end;gap:12px}
.vgrow .g{display:flex;flex-direction:column;align-items:center;gap:7px}
.vgrow .g img{image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 7px 11px rgba(0,0,0,0.55))}
.vgrow .g.a img{width:56px;height:56px}
.vgrow .g.b img{width:78px;height:78px}
.vgrow .g .lv{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:0.1em;color:var(--dim)}
.vgrow .ar{color:var(--acc);opacity:.75;padding-bottom:26px}
.vxp{position:absolute;bottom:12px;left:16px;right:16px;display:flex;align-items:center;gap:9px}
.vxp .bar{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,0.10);overflow:hidden}
.vxp .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc-soft));box-shadow:0 0 8px var(--acc);animation:xpfill 5s ease-in-out infinite}
@keyframes xpfill{0%{width:18%}70%{width:96%}100%{width:18%}}
.vxp .t{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:0.12em;color:var(--acc)}
.flowback{margin-top:26px;border-top:1px dashed var(--line-strong);padding-top:22px;display:flex;justify-content:center}

/* FOKUSRÄUME */
.split{display:grid;grid-template-columns:0.92fr 1.08fr;gap:56px;align-items:center}
@media (max-width:1080px){.split{grid-template-columns:1fr;gap:40px}}
.split h2{font-size:clamp(34px,4.4vw,58px);margin:18px 0 20px}
.split .lede{font-size:17px;line-height:1.6;color:var(--dim);margin:0 0 28px;max-width:520px;text-wrap:pretty}
.split .lede b{color:var(--text);font-weight:600}
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.rooms{grid-template-columns:1fr}}
.rcard{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;border:1px solid var(--line-strong);background:#0A1322;box-shadow:0 22px 48px -22px rgba(0,0,0,0.8)}
.rcard img.bg{width:100%;height:100%;object-fit:cover}
.rcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,22,0) 46%,rgba(5,10,22,0.76) 100%)}
.rcard .rname{position:absolute;left:11px;bottom:10px;z-index:2;font-size:10.5px;padding:6px 11px}
.rcard .rlive{position:absolute;right:11px;top:10px;z-index:2;font-size:10px;padding:5px 10px}
.rcard .rmon{position:absolute;right:8px;bottom:6px;width:52px;height:52px;z-index:2;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,0.6))}
.seatband{margin-top:44px;border:1px solid var(--line);border-radius:22px;padding:24px;background:linear-gradient(180deg,rgba(124,196,255,0.05),transparent)}
.seatband .head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;margin-bottom:18px}
.seatband .head .t{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:600;letter-spacing:-0.01em}
.seats{display:grid;grid-template-columns:repeat(9,1fr);gap:10px}
@media (max-width:900px){.seats{grid-template-columns:repeat(5,1fr)}}
@media (max-width:560px){.seats{grid-template-columns:repeat(3,1fr)}}
.seat{border:1px solid var(--line);border-radius:14px;background:rgba(8,16,32,0.6);padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:104px;justify-content:center}
.seat img{width:44px;height:44px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,0.55))}
.seat img.av{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid rgba(124,196,255,0.35);box-shadow:0 5px 10px rgba(0,0,0,0.55)}
.seat .t{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;color:var(--acc)}
.seat.free{border-style:dashed;border-color:var(--line-strong)}
.seat.free .t{color:var(--dim)}
.seat.free .ph{width:44px;height:44px;border-radius:50%;border:1px dashed var(--line-strong)}

/* RAIDS */
.raid{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.raid .bgart{position:absolute;inset:0;z-index:0}
.raid .bgart img{width:100%;height:100%;object-fit:cover;opacity:.5}
.raid .bgart .shade{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 40%, rgba(11,20,38,0.28), rgba(11,20,38,0.86) 78%),linear-gradient(180deg,var(--ink) 0%, rgba(11,20,38,0.55) 26%, rgba(11,20,38,0.72) 74%, var(--ink) 100%)}
.raid .inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.raid h2{font-size:clamp(38px,6vw,80px);margin:6px 0 0}
.raid .lede{font-size:18px;line-height:1.6;color:var(--dim);max-width:660px;margin:0;text-wrap:pretty}
.raid .lede b{color:var(--text);font-weight:600}
.boss{position:relative;width:min(340px,74vw);margin:6px 0 0;display:flex;align-items:center;justify-content:center}
.boss img{width:100%;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 22px 34px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(124,196,255,0.28));animation:bob 5s ease-in-out infinite}
.boss .bosspill{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);font-size:11px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.party{display:flex;align-items:flex-end;justify-content:center;gap:22px;margin-top:8px}
.party .p{display:flex;flex-direction:column;align-items:center;gap:8px}
.party .p img{width:74px;height:74px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,0.6))}
.party .p .hp{width:62px;height:4px;border-radius:99px;background:rgba(255,255,255,0.12);overflow:hidden}
.party .p .hp > div{height:100%;background:linear-gradient(90deg,var(--mint),var(--acc));border-radius:99px}
.tiers{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.tier{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:10px;padding:9px 14px;color:var(--dim);background:rgba(4,9,20,0.6)}
.tier.on{color:var(--ink);background:var(--acc);border-color:var(--acc);font-weight:700}

/* KAMPF */
.battle{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(70% 60% at 50% 0%, rgba(124,196,255,0.06), transparent 70%)}
.bshell{border:1px solid var(--line-strong);border-radius:26px;overflow:hidden;background:rgba(5,10,22,0.7);box-shadow:0 34px 70px -30px rgba(0,0,0,0.85)}
.arena{position:relative;aspect-ratio:16/7;min-height:300px;overflow:hidden}
@media (max-width:720px){.arena{aspect-ratio:4/5;min-height:0}}
.arena .abg{position:absolute;inset:0}
.arena .abg img{width:100%;height:100%;object-fit:cover;opacity:.62}
.arena .abg .sh{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 45%, rgba(11,20,38,0.18), rgba(11,20,38,0.78) 82%)}
.fighter{position:absolute;display:flex;align-items:flex-end;gap:16px;z-index:3}
.fighter.foe{top:9%;right:5%;flex-direction:row-reverse}
.fighter.own{bottom:9%;left:5%}
.fighter .fmon{width:132px;height:132px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,0.65)) drop-shadow(0 0 24px rgba(124,196,255,0.24));animation:bob 4.5s ease-in-out infinite}
.fighter.own .fmon{width:154px;height:154px;animation-delay:.6s}
@media (max-width:720px){.fighter .fmon{width:104px;height:104px}.fighter.own .fmon{width:116px;height:116px}}
.hpcard{min-width:216px;border:1px solid var(--line-strong);border-radius:14px;background:rgba(4,9,20,0.82);backdrop-filter:blur(6px);padding:11px 13px}
@media (max-width:720px){.hpcard{min-width:168px}}
.hpcard .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hpcard .nm{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:600;letter-spacing:-0.01em}
.hpcard .lv{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;color:var(--dim)}
.hpcard .hp{height:6px;border-radius:99px;background:rgba(255,255,255,0.10);overflow:hidden;margin-top:9px}
.hpcard .hp i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mint),var(--acc));box-shadow:0 0 8px rgba(124,196,255,0.6)}
.hpcard .hp.low i{background:linear-gradient(90deg,#FFC08A,#E07A7A);box-shadow:0 0 8px rgba(224,122,122,0.6)}
.hpcard .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.hpcard .sts{display:flex;gap:6px}
.hpcard .st{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:999px;padding:3px 8px;color:var(--dim)}
.hpcard .st.burn{color:#FFC08A;border-color:rgba(255,192,138,0.4)}
.hpcard .st.up{color:var(--mint);border-color:rgba(158,231,200,0.4)}
.dots{display:flex;gap:5px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.dots i.out{background:rgba(232,241,255,0.16);box-shadow:none}
.ticker{position:absolute;left:5%;right:5%;top:50%;transform:translateY(-50%);z-index:4;display:flex;justify-content:center}
.ticker .t{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;color:var(--text);background:rgba(4,9,20,0.8);border:1px solid var(--line-strong);border-radius:999px;padding:8px 16px;text-align:center;backdrop-filter:blur(6px)}
.ticker .t .hi{color:var(--acc)}
.turnpill{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:4;font-size:10px}
.moves{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px;border-top:1px solid var(--line);background:rgba(11,20,38,0.72)}
@media (max-width:980px){.moves{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.moves{grid-template-columns:1fr}}
.move{border:1px solid var(--line);border-radius:16px;padding:14px;background:linear-gradient(180deg,rgba(124,196,255,0.06),transparent);display:flex;flex-direction:column;gap:8px;position:relative}
.move .cat{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--acc)}
.move .mn{font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px;font-weight:600;letter-spacing:-0.01em;line-height:1.1}
.move .meta{display:flex;gap:6px;flex-wrap:wrap}
.move .meta span{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 7px}
.move .ds{font-size:12.5px;line-height:1.45;color:var(--dim);margin:0}
.move.sig{border-color:rgba(242,198,107,0.34);background:linear-gradient(180deg,rgba(242,198,107,0.08),transparent)}
.move.sig .cat{color:var(--gold)}
.move .eff{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--mint);margin-top:auto}
.move.swap{border-style:dashed;justify-content:center;align-items:center;text-align:center;gap:10px}
.move.swap .sw{display:flex;gap:7px}
.move.swap .sw img{width:34px;height:34px;image-rendering:pixelated;object-fit:contain}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
@media (max-width:720px){.modes{grid-template-columns:1fr}}
.mode{position:relative;border:1px solid var(--line);border-radius:20px;padding:26px;overflow:hidden;background:linear-gradient(180deg,var(--ink-2),rgba(11,20,38,0.45))}
.mode .mbg{position:absolute;inset:0;z-index:0}
.mode .mbg img{width:100%;height:100%;object-fit:cover;opacity:.26}
.mode .mbg .sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,38,0.95) 20%, rgba(11,20,38,0.6) 100%)}
.mode .min{position:relative;z-index:2}
.mode h3{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:600;letter-spacing:-0.02em;margin:12px 0 10px}
.mode p{margin:0;font-size:14.5px;line-height:1.55;color:var(--dim);max-width:420px}
.mode .frames{display:flex;gap:8px;margin-top:18px}
.mode .frames img{width:44px;height:44px;object-fit:contain}

/* SAISON */
.season{background:radial-gradient(70% 60% at 50% 0%, rgba(242,198,107,0.05), transparent 70%)}
.panel{position:relative;border:1px solid var(--line);border-radius:26px;padding:36px;overflow:hidden;background:linear-gradient(180deg,var(--ink-2),rgba(11,20,38,0.4))}
.panel + .panel{margin-top:24px}
@media (max-width:720px){.panel{padding:26px 22px;border-radius:20px}}
.panel .pbg{position:absolute;inset:0;z-index:0}
.panel .pbg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.panel .pbg .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,38,0.96) 8%, rgba(11,20,38,0.72) 52%, rgba(11,20,38,0.9) 100%)}
.panel .pin{position:relative;z-index:2}
.panel h3{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-0.03em;margin:14px 0 12px;line-height:1.02}
.panel .ptxt{font-size:16px;line-height:1.6;color:var(--dim);margin:0;max-width:560px;text-wrap:pretty}
.panel .ptxt b{color:var(--text);font-weight:600}
.pgrid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:center}
@media (max-width:1080px){.pgrid{grid-template-columns:1fr;gap:32px}}
.ladder{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.lrank{display:flex;flex-direction:column;align-items:center;gap:9px;flex:1}
.lrank .fav{position:relative;width:100%;max-width:104px;aspect-ratio:1}
.lrank .fav .av{position:absolute;inset:15%;border-radius:50%;overflow:hidden;background:#0A1322}
.lrank .fav .av img{width:100%;height:100%;object-fit:cover}
.lrank .fav .bd{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lrank .nm{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);text-align:center}
.lrank.top .nm{color:var(--gold)}
.lrank:nth-child(1){padding-bottom:34px}.lrank:nth-child(2){padding-bottom:27px}.lrank:nth-child(3){padding-bottom:20px}.lrank:nth-child(4){padding-bottom:13px}.lrank:nth-child(5){padding-bottom:6px}
.stars-row{display:flex;gap:6px;align-items:center;margin-top:22px}
.stars-row .st{width:15px;height:15px;color:var(--gold)}
.stars-row .st.off{color:rgba(232,241,255,0.18)}
.skinrow{display:flex;gap:16px;align-items:center;margin-top:26px;flex-wrap:wrap}
.skincard{display:flex;align-items:center;gap:12px;border:1px solid rgba(242,198,107,0.28);border-radius:16px;padding:10px 16px 10px 10px;background:rgba(242,198,107,0.06)}
.skincard img{width:56px;height:56px;image-rendering:pixelated;object-fit:contain}
.skincard .t{font-family:'Bricolage Grotesque',sans-serif;font-size:14.5px;font-weight:600;color:var(--gold-soft)}
.skincard .s{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.track{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:relative;margin-top:8px}
.track::before{content:"";position:absolute;left:6%;right:6%;top:38px;height:2px;background:linear-gradient(90deg,rgba(124,196,255,0.35),var(--gold));z-index:0}
@media (max-width:560px){.track{grid-template-columns:repeat(3,1fr);row-gap:18px}.track::before{display:none}}
.node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.node .box{width:76px;height:76px;border-radius:18px;border:1px solid var(--line-strong);background:rgba(8,16,32,0.86);display:flex;align-items:center;justify-content:center}
.node .box img{width:58px;height:58px;image-rendering:pixelated;object-fit:contain}
.node.hot .box{border-color:rgba(242,198,107,0.55);box-shadow:0 0 24px -4px rgba(242,198,107,0.4)}
.node .lv{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;color:var(--dim)}
.node.hot .lv{color:var(--gold)}
.lanes{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.lane{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:rgba(8,16,32,0.5);flex:1;min-width:220px}
.lane .lb{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--acc)}
.lane.prem .lb{color:var(--gold)}
.lane .lt{font-size:13.5px;color:var(--dim);line-height:1.45}
.mythic{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.mythcard{position:relative;border:1px solid var(--line-strong);border-radius:20px;padding:18px;background:radial-gradient(80% 70% at 50% 30%, rgba(242,198,107,0.14), transparent 70%),rgba(8,16,32,0.7);display:flex;flex-direction:column;align-items:center;gap:10px;width:150px}
.mythcard img{width:100px;height:100px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,0.6))}
.mythcard .t{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);text-align:center;line-height:1.5}
.mythcard.hi{border-color:rgba(242,198,107,0.45)}
.mythcard.hi .t{color:var(--gold-soft)}

/* CHRONIK */
.chron .aurastage{position:relative;display:flex;align-items:center;justify-content:center;min-height:400px}
.aura-disc{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%, rgba(242,198,107,0.28), transparent 70%);filter:blur(6px)}
.aura-ring{position:absolute;width:250px;height:250px;border-radius:50%;border:1px solid rgba(242,198,107,0.45);box-shadow:0 0 40px -6px rgba(242,198,107,0.35), inset 0 0 40px -10px rgba(242,198,107,0.35);animation:spin 26s linear infinite}
.aura-ring::after{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 14px var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}
.aura-mon{position:relative;width:212px;height:212px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(0,0,0,0.6)) drop-shadow(0 0 34px rgba(242,198,107,0.45));animation:bob 6s ease-in-out infinite}
.aura-stat{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);text-align:center}
.aura-stat .h{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:700;letter-spacing:-0.03em;color:var(--gold-soft);line-height:1}
.aura-badge{position:absolute;top:22px;right:8%;width:78px;height:78px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,0.6))}
.mrail{display:flex;flex-direction:column;gap:0;border-left:2px solid rgba(232,241,255,0.12);margin-top:26px}
.mstep{display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:center;padding:13px 0 13px 22px;position:relative}
.mstep::before{content:"";position:absolute;left:-6px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--ink);border:2px solid rgba(124,196,255,0.55)}
.mstep.last::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 14px var(--gold)}
.mstep .hh{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--acc)}
.mstep.last .hh{color:var(--gold)}
.mstep .rw{font-size:14.5px;color:var(--dim);line-height:1.45}
.mstep.last .rw{color:var(--text)}

/* SAMMELN */
.factgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:40px}
@media (max-width:720px){.factgrid{grid-template-columns:repeat(2,1fr)}}
.fact{border:1px solid var(--line);border-radius:18px;padding:20px;background:linear-gradient(180deg,rgba(124,196,255,0.04),transparent)}
.fact .n{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--acc)}
.fact .l{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim);margin-top:10px}
.dexgrid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;margin-bottom:40px}
@media (max-width:900px){.dexgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:560px){.dexgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dex{aspect-ratio:1;border:1px solid var(--line);border-radius:16px;background:radial-gradient(70% 70% at 50% 35%, rgba(124,196,255,0.14), rgba(8,16,32,0.6) 78%);display:flex;align-items:center;justify-content:center;padding:12px;transition:transform .2s, border-color .2s}
.dex:hover{transform:translateY(-4px);border-color:rgba(124,196,255,0.4)}
.dex img{width:100%;height:100%;min-width:0;min-height:0;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,0.5))}
.duo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:20px}
@media (max-width:1080px){.duo{grid-template-columns:minmax(0,1fr)}}
.sub-card{border:1px solid var(--line);border-radius:22px;padding:28px;background:linear-gradient(180deg,var(--ink-2),rgba(11,20,38,0.35))}
.sub-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:23px;font-weight:600;letter-spacing:-0.02em;margin:12px 0 10px}
.sub-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--dim)}
.evorow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:26px}
.evo{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.evo img{image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,0.55))}
/* Stufengrößen fluid: schrumpfen auf schmalen Screens, Designgröße bleibt der Deckel */
.evo.s1 img{width:clamp(38px,12vw,66px);height:auto;aspect-ratio:1}
.evo.s2 img{width:clamp(48px,16vw,86px);height:auto;aspect-ratio:1}
.evo.s3 img{width:clamp(60px,21vw,112px);height:auto;aspect-ratio:1}
.evo .lv{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.1em;color:var(--dim);text-align:center}
.evoarrow{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--acc);opacity:.7;padding-bottom:22px;flex:0 0 auto}
.evoarrow .t{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.1em;color:var(--acc);white-space:nowrap}
/* Die nowrap-Labels sind der Hauptgrund für Querüberlauf — auf Handys nur der Pfeil */
@media (max-width:640px){.evorow{gap:6px}.evoarrow{padding-bottom:16px}.evoarrow .t{display:none}}
.varrow{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.vcard{flex:1 1 0;min-width:76px;border:1px solid var(--line);border-radius:16px;padding:14px 10px;background:rgba(8,16,32,0.55);display:flex;flex-direction:column;align-items:center;gap:9px}
.vcard img{width:clamp(46px,16vw,64px);height:auto;aspect-ratio:1;image-rendering:pixelated;object-fit:contain}
.vcard .t{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);text-align:center}

/* MEHR IM SPIEL */
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.quad{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.quad{grid-template-columns:1fr}}
.qcard{border:1px solid var(--line);border-radius:20px;padding:26px 22px;background:linear-gradient(180deg,rgba(124,196,255,0.04),transparent);display:flex;flex-direction:column;gap:10px}
.qcard .no{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.2em;color:var(--acc)}
.qcard h3{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:600;letter-spacing:-0.02em;margin:0}
.qcard p{margin:0;font-size:14px;line-height:1.5;color:var(--dim)}

/* WARUM */
.why{background:radial-gradient(80% 60% at 50% 0%, rgba(124,196,255,0.06), transparent)}
.why-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:center}
@media (max-width:980px){.why-grid{grid-template-columns:1fr;gap:44px}}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat{padding:26px 22px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(124,196,255,0.04),transparent)}
.stat .num{font-family:'Bricolage Grotesque',sans-serif;font-size:50px;font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--acc);margin-bottom:8px}
.stat .num .small{font-size:22px;vertical-align:top;color:var(--acc-soft);margin-left:2px}
.stat .lbl{font-size:13.5px;color:var(--dim);line-height:1.45}
.fairrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
@media (max-width:720px){.fairrow{grid-template-columns:1fr}}
.fair{border:1px solid var(--line);border-radius:18px;padding:22px;background:rgba(8,16,32,0.45)}
.fair .t{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px}
.fair p{margin:0;font-size:14.5px;line-height:1.55;color:var(--dim)}

/* CTA */
.cta-wrap{position:relative;padding:88px 56px;border-radius:32px;background:linear-gradient(135deg,#142544 0%, #0B1426 60%, #1A3F70 100%);border:1px solid var(--line-strong);overflow:hidden;text-align:center}
@media (max-width:720px){.cta-wrap{padding:56px 24px;border-radius:24px}}
.cta-wrap::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 20%, rgba(124,196,255,0.18), transparent 60%);pointer-events:none}
.cta-wrap h2{font-size:clamp(36px,5.4vw,68px);margin:14px 0 16px;position:relative}
.cta-wrap p{color:var(--dim);font-size:17px;max-width:540px;margin:0 auto 30px;position:relative;line-height:1.55}
.stores{display:inline-flex;gap:12px;position:relative;flex-wrap:wrap;justify-content:center}
.store{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;background:var(--cream);color:var(--ink);border-radius:14px;font-weight:600;transition:transform .15s;border:0}
.store:hover{transform:translateY(-2px);color:var(--ink)}
.store .small{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.15em;color:var(--ink-2);display:block;text-transform:uppercase;font-weight:500}
.store .big{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;letter-spacing:-0.01em;font-weight:700;line-height:1.1}
.cta-note{position:relative;margin-top:22px;display:flex;justify-content:center}
.cta-orbit{position:absolute;display:flex;align-items:center;justify-content:center}
.cta-orbit img{width:100%;height:100%;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,0.6))}
.cta-orbit.a{width:104px;height:104px;top:8%;left:4%;animation:float1 6s ease-in-out infinite}
.cta-orbit.b{width:86px;height:86px;bottom:12%;left:10%;animation:float2 7s ease-in-out infinite}
.cta-orbit.c{width:112px;height:112px;top:6%;right:6%;animation:float3 8s ease-in-out infinite}
.cta-orbit.d{width:80px;height:80px;bottom:14%;right:10%;animation:float1 9s ease-in-out infinite reverse}
@media (max-width:980px){.cta-orbit{display:none}}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:44px 0 40px;color:var(--dim);font-size:13.5px}
footer .inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer .flinks{display:flex;gap:26px;flex-wrap:wrap}
footer .flinks a{color:var(--dim)}
footer .flinks a:hover{color:var(--text)}
footer .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--acc);margin-top:6px;display:block}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation-duration:0.001s !important;animation-iteration-count:1 !important}}

/* ============================================================
   MOBILE & POLISH
   ============================================================ */

/* --- 1. Überlauf-Schutz -------------------------------------
   Grid-Spuren mit `1fr` sind `minmax(auto,1fr)`: die auto-Untergrenze
   ist die Mindest-Inhaltsbreite des Kindes. Enthält ein Kind etwas
   Unschrumpfbares (feste Bildbreite, nowrap-Text), wird die Spur
   breiter als der Container — genau daher kam der Querüberlauf.
   `min-width:0` setzt diese Untergrenze auf 0. Gleiches gilt für
   Flex-Kinder (`min-width:auto` ist deren Default). */
.hero .grid > *, .econ-grid > *, .flow > *, .split > *, .rooms > *,
.seats > *, .moves > *, .modes > *, .pgrid > *, .track > *,
.factgrid > *, .dexgrid > *, .duo > *, .quad > *, .why-grid > *,
.stat-grid > *, .fairrow > *, .mstep > *, .ladder > *, .evorow > *,
.varrow > *, .lanes > *, .mythic > *, .party > *, .tiers > *,
.chips > *, .stores > *, footer .inner > *{min-width:0}

/* Dekorative Glows/Sprites dürfen den Viewport nie aufspannen */
.halo{max-width:100vw;max-height:100vw}
.aura-disc,.aura-ring{max-width:92vw;max-height:92vw}

/* --- 2. Safe Areas (Notch, Dynamic Island, Home-Indicator) --- */
nav.top{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.wrap{padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}
@media (max-width:720px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}
footer{padding-bottom:max(40px,env(safe-area-inset-bottom))}

/* --- 3. Touch: Trefferflächen, kein 300ms-Delay, kein Grau-Blitz --- */
a,button,.chip,.tier,.store,.navcta,.btn-primary,.btn-ghost{touch-action:manipulation;-webkit-tap-highlight-color:rgba(124,196,255,0.18)}
@media (pointer:coarse){
  .navcta,.btn-primary,.btn-ghost,.store{min-height:44px}
  .lang button{min-height:38px;min-width:46px;justify-content:center}
  .navlinks a,footer .flinks a{display:inline-flex;align-items:center;min-height:44px}
  .tier{min-height:44px;display:inline-flex;align-items:center}
  /* Hover-Transforms auf Touch abschalten — sie bleiben dort „kleben" */
  .dex:hover,.store:hover,.navcta:hover,.btn-primary:hover{transform:none}
  .phone:hover{transform:rotate(-3deg)}
}

/* --- 4. Sichtbarer Fokus (Tastatur & Screenreader) ----------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.btn-primary:focus-visible,.store:focus-visible,.navcta:focus-visible{outline-color:var(--cream)}
.lang button:focus-visible{outline-offset:1px}

/* --- 5. Lesbarkeit auf kleinen Screens ----------------------- */
@media (max-width:720px){
  .section-head{margin-bottom:40px;gap:14px}
  .section-head p,.hero .lede,.split .lede,.raid .lede{font-size:16.5px;line-height:1.62}
  .step p,.ecard p,.qcard p,.mode p,.fair p,.sub-card p,.panel .ptxt{font-size:15.5px;line-height:1.6}
  .move .ds,.lane .lt,.mstep .rw,.stat .lbl,.rule .v{font-size:14.5px;line-height:1.55}
  footer{font-size:14.5px}
  .cta-wrap p{font-size:16px}
  /* Überschriften umbrechen lassen statt kappen */
  .display,.section-head h2,.panel h3,.mode h3,.step h3{text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
}

/* --- 6. Sehr schmale Geräte (SE, ~320–375px) ----------------- */
@media (max-width:400px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .sub-card{padding:22px 18px}
  .panel{padding:22px 18px}
  .seatband{padding:20px 16px}
  .cta-wrap{padding:48px 18px}
  /* Eine Pille, die breiter als der Screen ist, sieht schlechter aus als eine
     zweizeilige — deshalb hier nowrap aufheben. */
  .chip,.pill{font-size:11px;padding:8px 12px;white-space:normal;text-wrap:balance}
  .brand{font-size:17px;min-width:0}
  .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand .mark{width:32px;height:32px}
  nav.top .inner{gap:10px}
  .navcta{padding:9px 13px;font-size:12.5px}
  .lang button{padding:5px 8px}
  .fact{padding:16px 14px}
  .fact .n{font-size:34px}
  .stat{padding:20px 16px}
  .stat .num{font-size:42px}
  .mstep{grid-template-columns:66px 1fr;gap:12px;padding-left:18px}
  .mstep .hh{font-size:19px}
}