/* Gemeinsame Stile aller Seiten (David Leiß) */
:root{--bg:#1b1b1e;--card:#26262a;--ink:#f5f5f7;--mut:#a1a1a6;--line:rgba(255,255,255,.08);--gold:#ffb400;--acc:#2997ff;--glass:rgba(27,27,30,.8);--sh:0 4px 20px rgba(0,0,0,.35);--grid:rgba(255,255,255,.34);--fill:rgba(120,120,128,.16);--bar:rgba(120,120,128,.2);--err:#ff453a;--ok:#30d158;--pp:#c9cbd0;--pi:#1c1c1e;--pl:rgba(0,0,0,.22);--pg:#2a2a2d;--pu:#1d4fbf;--perr:#d2281e;--pn:#66666b;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:light){:root:not([data-theme]){--bg:#f5f5f7;--card:#fff;--ink:#1d1d1f;--mut:#6e6e73;--line:rgba(0,0,0,.08);--acc:#0071e3;--glass:rgba(245,245,247,.8);--sh:0 4px 20px rgba(0,0,0,.08);--grid:rgba(0,0,0,.4);--err:#d70015;--ok:#1f9d44;--pp:#fafafb;color-scheme:light}}
:root[data-theme="light"]{--bg:#f5f5f7;--card:#fff;--ink:#1d1d1f;--mut:#6e6e73;--line:rgba(0,0,0,.08);--acc:#0071e3;--glass:rgba(245,245,247,.8);--sh:0 4px 20px rgba(0,0,0,.08);--grid:rgba(0,0,0,.4);--err:#d70015;--ok:#1f9d44;--pp:#fafafb;--pp:#fafafb;color-scheme:light}
html{background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.sitebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px}
.back{width:34px;height:34px;border-radius:50%;background:rgba(120,120,128,.16);display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;flex:none}.back svg{width:18px;height:18px}.back:focus-visible,.tg:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tg{position:relative;flex:none;width:54px;height:30px;border-radius:99px;border:0;padding:0;background:rgba(120,120,128,.32);cursor:pointer}
.tg .k{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:transform .22s cubic-bezier(.3,.8,.3,1)}
.tg[aria-checked="true"] .k{transform:translateX(24px)}
.tg svg{width:14px;height:14px;display:block}
.tg .moon{color:#3a3a40}.tg .sun{color:#f59e0b;display:none}
.tg[aria-checked="false"] .sun{display:block}.tg[aria-checked="false"] .moon{display:none}

/* ---- Kacheln (Startseite, Spiele) ---- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tile{display:flex;flex-direction:column;background:var(--card);border-radius:28px;padding:14px 14px 22px;box-shadow:var(--sh);text-decoration:none;color:var(--ink);transition:transform .2s}
a.tile:hover{transform:translateY(-3px)}
a.tile:active{transform:scale(.985)}
a.tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.media{aspect-ratio:4/3;border-radius:18px;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:18px}
.tile .tt{padding:0 8px;display:flex;flex-direction:column;gap:3px}
.tile h2{margin:0;font-size:1.55rem;letter-spacing:-.02em;display:flex;align-items:center;justify-content:space-between}
.tile h2 svg{width:20px;height:20px;color:var(--mut);transition:transform .2s}
a.tile:hover h2 svg{transform:translateX(3px);color:var(--acc)}
.tile p{margin:0;color:var(--mut);font-size:.92rem;line-height:1.4}
.tile.off{background:transparent;box-shadow:none;border:1.5px dashed var(--line);opacity:.75}
.tile.off .media{background:transparent}
.tag{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.art{height:86%;aspect-ratio:1;max-width:100%}
@media(max-width:700px){
.tiles{grid-template-columns:1fr;gap:14px}
.tile{border-radius:22px;flex-direction:row;align-items:center;gap:14px;padding:12px}
.media{width:108px;flex:none;margin:0;aspect-ratio:1;border-radius:14px}
.tile .tt{padding:0;min-width:0}
.tile h2{font-size:1.25rem}
.tile p{font-size:.84rem}
}

/* ---- Kachel-Grafiken ---- */
.col{height:86%;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:12px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.col img{width:100%;height:100%;object-fit:cover;display:block}
.mg{height:86%;aspect-ratio:1;background:var(--card);border-radius:12px;border:1.5px solid var(--grid);box-shadow:0 6px 22px rgba(0,0,0,.25)}
.mg .l1 path{stroke:var(--line);stroke-width:.5;fill:none}
.mg .l2 path{stroke:var(--grid);stroke-width:1;fill:none}
.mg text{font-size:6.6px;font-weight:600;fill:var(--ink)}
.mg text.u{fill:var(--acc);font-weight:500}
.soon{border:1.5px dashed var(--grid);border-radius:12px;height:86%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:var(--mut)}
.soon svg{width:44px;height:44px}
.art2{width:84%;height:auto;max-width:100%}
.px{image-rendering:pixelated;border-radius:12px;box-shadow:0 6px 22px rgba(0,0,0,.3);object-fit:cover}
@media(max-width:700px){.col,.mg,.art,.soon,.px{height:90%}.soon svg{width:30px;height:30px}.art2{width:92%}}
/* Waldgrün (Album der Woche) */
:root{--wald:#3a9468}
@media (prefers-color-scheme:light){:root:not([data-theme]){--wald:#2e7d57}}
:root[data-theme="light"]{--wald:#2e7d57}