:root { --bg:#f5f7fa; --fg:#1f2933; --card:#fff; --accent:#2563eb; --muted:#6b7280; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111827; --fg:#e5e7eb; --card:#1f2937; --accent:#60a5fa; --muted:#9ca3af; }
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); line-height:1.5; }
a { color:var(--accent); }
.kopf { padding:2.5rem 1rem 1rem; text-align:center; }
.kopf h1 { margin:0 0 .25rem; }
.kopf p { margin:0; color:var(--muted); }
main { max-width:960px; margin:0 auto; padding:1rem; }
.kacheln { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.kachel { --c:var(--accent); display:block; padding:1.5rem 1.25rem; background:var(--card); color:inherit; text-decoration:none;
  border-radius:12px; border:1px solid rgba(128,128,128,.25); border-top:5px solid var(--c);
  transition:transform .15s, border-color .15s; }
.kachel:hover, .kachel:focus-visible { transform:translateY(-2px); border-color:var(--c); outline:none; }
.kachel .icon { font-size:2rem; display:block; margin-bottom:.25rem; }
.kachel h2 { margin:0 0 .3rem; font-size:1.25rem; color:var(--c); }
.kachel p { margin:0; color:var(--muted); font-size:.95rem; }
.kachel-poli  { --c:#dc2626; }
.kachel-geo   { --c:#16a34a; }
.kachel-code  { --c:#7c3aed; }
.kachel-rugby { --c:#d97706; }