body.dash{background:radial-gradient(1200px 600px at 20% -10%,color-mix(in srgb,var(--akzent) 22%,transparent),transparent 60%),radial-gradient(900px 500px at 100% 20%,color-mix(in srgb,#5ec8ff 16%,transparent),transparent 60%),var(--grund)}
.himmel{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(color-mix(in srgb,var(--tinte) 9%,transparent) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 70%);z-index:-1}
.kopf{max-width:960px}
.logo{display:inline-block;width:30px;height:30px;border-radius:9px;background:conic-gradient(from 90deg,var(--akzent),#5ec8ff,#ffb454,var(--akzent));margin-right:10px;vertical-align:-8px;box-shadow:0 4px 14px color-mix(in srgb,var(--akzent) 45%,transparent)}
.kopfnav{display:flex;gap:4px}
.kopfnav a{padding:8px 12px;border-radius:999px;color:var(--tinte2);text-decoration:none}
.kopfnav a:hover{background:var(--flaeche2);color:var(--tinte)}
main{max-width:960px}
.held{padding:40px 0 20px;max-width:640px}
.vorzeile{color:var(--akzent);font-weight:600;letter-spacing:.03em;margin:0 0 10px;font-size:.95em}
.held h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;margin:0 0 16px;letter-spacing:-.02em}
.held .lead{font-size:1.15em;color:var(--tinte2);margin:0 0 20px}
.taten{display:flex;gap:10px;flex-wrap:wrap}
.knopf.gross{padding:14px 24px;font-size:1.05em}
.merkmale{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:8px;color:var(--tinte2)}
.merkmale li::before{content:"✓";color:var(--akzent);font-weight:800;margin-right:8px}
.abschnittstitel{font-size:1.1rem;color:var(--tinte2);letter-spacing:.08em;text-transform:uppercase;margin:36px 0 14px}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.spiel{display:flex;flex-direction:column;background:var(--flaeche);border:1px solid var(--rand);border-radius:20px;overflow:hidden;color:var(--tinte);text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}
a.spiel:hover{transform:translateY(-4px);border-color:var(--akzent);box-shadow:0 18px 40px -20px color-mix(in srgb,var(--akzent) 60%,transparent)}
.spiel .text{padding:16px 18px 18px}
.spiel .zeile{display:flex;align-items:center;justify-content:space-between;gap:10px}
.spiel h3{margin:0;font-size:1.3rem}
.spiel p{margin:8px 0 12px;color:var(--tinte2)}
.spiel.bald{opacity:.75}
.etikett{background:var(--flaeche2);border-radius:999px;padding:4px 10px;font-size:.82em;color:var(--tinte2);white-space:nowrap}
.fakten{display:flex;gap:14px;color:var(--tinte2);font-size:.9em}
.vorschau{height:170px;display:grid;place-items:center;background:var(--flaeche2);position:relative;overflow:hidden}
.vorschau.vg{background:linear-gradient(160deg,#2b3350,#1a1f33)}
.vg-brett{display:grid;grid-template-columns:repeat(7,26px);gap:6px;padding:10px;background:#3b4a8a;border-radius:12px;transform:rotate(-4deg)}
.vg-brett span{width:26px;height:26px;border-radius:50%;background:#0f1117}
.vg-brett .a{background:#ffb454} .vg-brett .b{background:#5ec8ff}
a.spiel:hover .vg-brett{transform:rotate(0) scale(1.03);transition:transform .25s}
.vorschau.emw{background:linear-gradient(160deg,#243a2a,#1a2a34)}
.emw-brett{position:relative;width:150px;height:150px;background:#f4f4f9;border-radius:12px;transform:rotate(4deg)}
.emw-brett .hof{position:absolute;width:40%;height:40%;border-radius:8px}
.emw-brett .hof.r{left:0;top:0;background:#e5533d} .emw-brett .hof.g{right:0;top:0;background:#3fb950} .emw-brett .hof.y{right:0;bottom:0;background:#f2c037} .emw-brett .hof.b{left:0;bottom:0;background:#3d8bfd}
.emw-brett .arm{position:absolute;background:#fff;border:1px solid #c9ccd8}
.emw-brett .arm.h{left:0;right:0;top:40%;height:20%} .emw-brett .arm.v{top:0;bottom:0;left:40%;width:20%}
.emw-brett .mitte{position:absolute;left:40%;top:40%;width:20%;height:20%;background:conic-gradient(#e5533d 0 25%,#3fb950 0 50%,#f2c037 0 75%,#3d8bfd 0)}
.emw-brett .fig{position:absolute;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.4)}
.emw-brett .fig.r{background:#e5533d} .emw-brett .fig.g{background:#3fb950} .emw-brett .fig.y{background:#f2c037} .emw-brett .fig.b{background:#3d8bfd}
a.spiel:hover .emw-brett{transform:rotate(0) scale(1.03);transition:transform .25s}
.vorschau.leer span{font-size:3rem;color:var(--tinte2)}
.so{margin-bottom:20px}
.schritte3{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;counter-reset:s}
.schritte3 li{background:var(--flaeche);border:1px solid var(--rand);border-radius:16px;padding:18px}
.schritte3 .nr{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--akzent);color:#fff;font-weight:800;margin-bottom:10px}
.schritte3 h3{margin:0 0 6px;font-size:1.1rem}
.schritte3 p{margin:0;color:var(--tinte2)}
.fuss{max-width:960px}
@media (max-width:600px){ .held{padding:22px 0 12px} .kopfnav a:nth-child(2){display:none} }