/* Layout-Ergaenzungen fuer die Inhaltsseiten (Spielmodi, Anleitung, FAQ).
   Baut auf legal.css auf – dort stehen Farben, Typografie, .wrap, .card,
   .topbar, table und footer. Hier kommt nur dazu, was die Rechtstexte
   nicht brauchen: Modus-Kacheln, Fakten-Leisten und Regel-Listen.

   Diese Dateien sind bewusst vom Spiel getrennt: sie laden weder game.js
   noch das Spiel-CSS. Aenderungen hier koennen das Spiel nicht beruehren. */

.wrap.wide { max-width: 900px; }

/* ─── Einleitung unter der H1 ─────────────────────────────────────── */
.lead {
  font-size: 1.08rem;
  color: #c9c9dd;
  margin: 0 0 28px;
}

/* ─── Kachelraster der Modus-Uebersicht ───────────────────────────── */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 14px;
  margin: 18px 0 34px;
}
.mode-tile {
  display: block;
  background: var(--bg2);
  border: 1px solid #25253c;
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
a.mode-tile:hover {
  border-color: var(--gold);
  color: var(--text);
  transform: translateY(-2px);
}
.mode-tile .icon { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 8px; }
.mode-tile h3 { margin: 0 0 4px; font-size: 1.05rem; color: #fff; }
.mode-tile .players { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 8px; }
.mode-tile p { margin: 0; font-size: 0.9rem; color: #b9b9cd; line-height: 1.5; }

/* ─── Faktenleiste am Kopf einer Modus-Seite ──────────────────────── */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.facts li {
  background: var(--bg2);
  border: 1px solid #25253c;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.85rem;
  color: #c9c9dd;
  margin: 0;
}
.facts li strong { color: #fff; font-weight: 600; }

/* ─── Nummerierter Spielablauf ────────────────────────────────────── */
ol.steps { padding-left: 0; list-style: none; counter-reset: step; margin: 16px 0 26px; }
ol.steps li {
  position: relative;
  padding-left: 44px;
  margin: 0 0 16px;
  color: #d7d7e6;
}
ol.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
ol.steps li strong { color: #fff; }

/* ─── Handlungsaufforderung zum Spiel ─────────────────────────────── */
.cta {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: var(--radius);
  margin: 8px 0 12px;
}
.cta:hover { background: #ff5a76; color: #fff; }

/* ─── Weiterfuehrende Links am Seitenende ─────────────────────────── */
.more-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
  font-size: 0.92rem;
}
.more-modes li { margin: 0; }

/* Frage-Antwort-Bloecke (FAQ und "Haeufige Fragen" auf Modus-Seiten) */
.qa { margin: 0 0 22px; }
.qa h3 { margin: 0 0 6px; font-size: 1rem; color: #fff; }
.qa p { margin: 0; }