:root{
--bg:#0b0d10; --fg:#e7e9ee; --muted:#94a3b8;
--card:#12151a; --border:#1c2129; --accent:#8bff6b;
--shadow:0 12px 24px rgba(0,0,0,.25); --radius:16px; --maxw:72rem;
}
@media (prefers-color-scheme: light){
:root{ --bg:#fff; --fg:#0b0d10; --muted:#475569; --card:#f7f8fa; --border:#e5e7eb; --accent:#0ea5e9; --shadow:0 8px 18px rgba(2,6,23,.06); }
}
html{font-size:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:1rem}


h1{font-size:clamp(1.6rem,1.2rem+2vw,2.3rem);line-height:1.2;margin:0}
h2{font-size:clamp(1.25rem,1rem+1vw,1.6rem);line-height:1.25;margin:0}
h3{font-size:clamp(1.05rem,.95rem+.6vw,1.25rem);line-height:1.3;margin:0}
.muted{color:var(--muted)}


.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:color-mix(in oklab, var(--bg) 85%, transparent);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:.6rem;padding:.9rem 0;color:inherit;text-decoration:none}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent)}
.nav{display:flex;gap:.6rem;flex-wrap:wrap}
.nav a{display:inline-block;padding:.5rem .75rem;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:inherit}
.nav a[aria-current="page"],.nav a:hover{background:var(--card)}


.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:100%}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}
.card .pad{padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.badges{display:flex;gap:.5rem;flex-wrap:wrap}
.badge{font-size:.78rem;padding:.28rem .55rem;border-radius:999px;border:1px solid var(--border)}
.badge.hot{background:color-mix(in oklab, var(--accent) 15%, transparent)}
.meta{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.meta .sep{opacity:.4}


.site-footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--muted);font-size:.95rem;margin-top:2rem}


/* Lite/E‑Ink */
:root[data-lite="true"]{--shadow:none}
:root[data-lite="true"] img{filter:grayscale(100%)}
:root[data-lite="true"] .badge.hot{background:transparent;border-style:solid}
@media print{.site-header,.badge,.site-footer{display:none!important}.wrap{max-width:none}.card{border:none;box-shadow:none}}
@media print{.site-header,.badge,.site-footer{display:none!important}.wrap{max-width:none}.card{border:none;box-shadow:none}}

.compare-grid{display:grid;gap:1rem;grid-template-columns:1fr}
.compare-grid figure{margin:0}
.compare-grid img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border)}
@media(min-width:700px){.compare-grid{grid-template-columns:1fr 1fr}}

.spec-compare{display:grid;grid-template-columns:minmax(140px,1fr) 1fr 1fr;gap:.5rem .75rem;align-items:start;margin-top:1rem}
.spec-compare .head{font-weight:700}
.spec-compare .k{color:var(--muted)}
.spec-compare .cell{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.5rem .75rem}
.spec-compare .row{display:contents}

.hero{max-width:70ch;margin:.75rem auto 1rem}
.hero img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--border)}
@media (max-width:480px){ .hero{max-width:92vw} }

/* Release Radar – Zeitstrahl */
.timeline{
  position: sticky; top: 0; z-index: 40;
  display:flex; gap:.5rem; overflow:auto; padding:.5rem 1rem;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom:1px solid var(--border);
}
.month-chip{
  display:inline-block; white-space:nowrap;
  padding:.4rem .7rem; border:1px solid var(--border);
  border-radius:999px; text-decoration:none; color:inherit;
}
.month-chip.has-items{ background:var(--card); }
.month-section{ scroll-margin-top:4.5rem; margin-top:1rem; }
.month-section h2{ font-size:1.1rem; margin:1rem 0 .5rem; }