/* Ergänzungen der Spielwiese zu css/style.css (Design-System der Hauptseite, hier unverändert übernommen).
   Alles, was nur die Spielwiese braucht, steht hier, damit style.css vergleichbar mit der Hauptseite bleibt. */

/* Die Knoten der Route (css/style.css: .route-node startet bei opacity 0) brauchen die Animation, die sie einblendet. */
@keyframes node-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Eyebrow im Hero: Teal auf Navy hat zu wenig Kontrast, wie bei den Navy-Abschnitten das helle Gold nehmen. */
.hero .eyebrow { color: var(--gold-soft); }
.hero .eyebrow::before { background: var(--gold-soft); }

/* Zeilenumbruch der langen Eyebrow-Zeile der Startseite: nicht in die Linie hineinlaufen lassen. */
.eyebrow { flex-wrap: wrap; row-gap: 0.2rem; }

/* Mobil: erst der Text, dann das Brett (style.css stellt die Grafik nach vorn und schiebt die Überschrift aus dem Bild). */
@media (max-width: 900px) {
  .hero-graphic { order: 1; max-width: 24rem; margin: 0 auto; }
}

/* Geordnete und ungeordnete Listen in Fließtext-Abschnitten. */
.legal-content ol, .legal-content ul { padding-left: 1.4em; }
.legal-content li { margin-bottom: 0.45em; }

/* Lehrseiten (tools/build_site.py, Blocktyp "lesson"): Merksatz, Diagramme, Übungen mit aufklappbarer Lösung. */
.merksatz {
  border-left: 3px solid var(--gold);
  background: var(--card);
  padding: 0.8rem 1rem;
  margin: var(--space-sm) 0;
}
.lesson-figure {
  margin: var(--space-sm) 0;
  background: var(--navy);
  padding: 0.6rem 0.6rem 0.4rem;
  max-width: 26rem;
}
.lesson-figure svg { display: block; width: 100%; height: auto; }
.lesson-figure figcaption { color: #C4CBD8; font-size: 0.85rem; padding: 0.4rem 0.2rem 0.2rem; }
.exercise {
  border: 1px solid var(--paper-line);
  background: var(--card);
  padding: 0.2rem 1rem 0.8rem;
  margin: var(--space-sm) 0;
}
.exercise h3 { margin-top: 0.8rem; }
.exercise details { margin-top: 0.6rem; }
.exercise summary { cursor: pointer; font-family: var(--f-display); font-size: 0.85rem; color: var(--link); }
.exercise details[open] summary { margin-bottom: 0.4rem; }

/* Figuren-Definitionen für die Schachdiagramme (tools/boards.py sprite()): nur Vorlage, nie sichtbar */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }