/* Farben aus dem Spiel, damit Uebersicht und Tisch zusammengehoeren. */
:root{
  --paper:#F5F2F5; --surface:#FFFFFF; --ink:#241C26; --ink-soft:#6C5E70;
  --line:#DCD2DC; --plum:#6E2A5C; --plum-wash:#F2E4EE;
  --shadow:0 1px 2px rgba(36,28,38,.10), 0 8px 24px rgba(36,28,38,.06);
}

*{box-sizing:border-box}
body{
  margin:0; padding:32px 20px 64px;
  background:var(--paper); color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
}
.huelle{max-width:720px;margin:0 auto}

header{margin-bottom:32px}
h1{
  font-family:Fraunces,Georgia,serif; font-weight:700;
  font-size:clamp(28px,6vw,40px); margin:0 0 6px; letter-spacing:-.01em;
}
header p{margin:0;color:var(--ink-soft);font-size:15px}

.spiele{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:560px){.spiele{grid-template-columns:1fr 1fr}}

.spiel{
  display:block; padding:20px; border-radius:14px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .12s ease, border-color .12s ease;
}
.spiel:hover,.spiel:focus-visible{transform:translateY(-2px);border-color:var(--plum)}
.spiel:focus-visible{outline:2px solid var(--plum);outline-offset:2px}
.spiel h2{font-family:Fraunces,Georgia,serif;font-size:20px;margin:0 0 4px;font-weight:700}
.spiel p{margin:0;color:var(--ink-soft);font-size:14px}
.marke{
  display:inline-block;margin-top:12px;padding:3px 10px;border-radius:999px;
  background:var(--plum-wash);color:var(--plum);font-size:12px;font-weight:600;
}

footer{margin-top:48px;color:var(--ink-soft);font-size:13px}
footer a{color:var(--plum)}