/*
 * tafl.world - Basis-Stylesheet
 * -----------------------------
 * Grundsatz (Web_CLAUDE.md): Primaerfunktion vor SEO vor Barrierefreiheit.
 * Ziele: W3C-konform, responsiv, ausreichende Kontraste, sichtbarer Fokus,
 * Beruecksichtigung von prefers-color-scheme und prefers-reduced-motion.
 */

:root {
  --farbe-bg: #f7f4ee;
  --farbe-flaeche: #ffffff;
  --farbe-text: #1e1b16;
  --farbe-text-leise: #514a40;
  --farbe-akzent: #7a4a1e;
  --farbe-akzent-kontrast: #ffffff;
  --farbe-rand: #d8cfc0;
  --farbe-fokus: #1a5fb4;
  --breite-max: 72rem;
  --radius: 8px;
  --abstand: 1rem;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --farbe-bg: #14120f;
    --farbe-flaeche: #201d18;
    --farbe-text: #f2ede4;
    --farbe-text-leise: #c3bcaf;
    --farbe-akzent: #e0a86a;
    --farbe-akzent-kontrast: #14120f;
    --farbe-rand: #3a352d;
    --farbe-fokus: #78aeed;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift);
  line-height: 1.6;
  color: var(--farbe-text);
  background: var(--farbe-bg);
}

/* Sichtbarer Sprunglink fuer Tastatur-/Screenreader-Nutzung. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-kontrast);
  padding: 0.5rem 1rem;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--breite-max);
  margin-inline: auto;
  padding-inline: var(--abstand);
}

/* Kopf & Navigation */
.site-header {
  border-bottom: 1px solid var(--farbe-rand);
  background: var(--farbe-flaeche);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.75rem;
}
.site-header a.brand {
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--farbe-text);
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  text-decoration: none;
  color: var(--farbe-text-leise);
  padding: 0.25rem 0;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--farbe-akzent);
  border-bottom: 2px solid var(--farbe-akzent);
}

main { padding-block: 2rem; }

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 2.5rem; }
h3 { font-size: 1.2rem; }

a { color: var(--farbe-akzent); }

.lead { font-size: 1.15rem; color: var(--farbe-text-leise); max-width: 60ch; }

.hero {
  display: grid;
  gap: 1.5rem;
  padding: 2rem 0;
}

.btn {
  display: inline-block;
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-kontrast);
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--farbe-akzent);
}
.btn:hover { filter: brightness(1.08); }
.btn.sekundaer {
  background: transparent;
  color: var(--farbe-akzent);
}
.btn-reihe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Karten-Raster */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  padding: 0;
  margin: 1.5rem 0;
  list-style: none;
}
.karte {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  padding: 1.1rem 1.2rem;
}
.karte h3 { margin-top: 0; }
.karte p { color: var(--farbe-text-leise); margin-bottom: 0; }
.karte .meta { font-size: 0.85rem; color: var(--farbe-text-leise); }

/* Variantenlexikon: Liste je Familie */
.variantenliste { padding-left: 1.2rem; }
.variantenliste li { margin-bottom: 0.5rem; }
.spiel-link {
  white-space: nowrap;
  font-size: 0.85rem;
  text-decoration: none;
  margin-left: 0.35rem;
}
.spiel-link::before { content: "\25B8\00A0"; } /* ▸ */

/* Widget-Einbettung (Spielseite)
   Development gibt eine Mindestgroesse von 900x700 px vor: darunter ueberlappen
   Elemente. Der Container haelt daher diese Mindestmasse; auf schmaleren Viewports
   sorgt der Scroll-Wrapper fuer horizontales Scrollen statt eines kaputten Bretts.
   900-1000 px Breite funktioniert (rechtes Dock klappt eingeklappt ein), >1000 px
   zeigt das volle Dock. */
.widget-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.widget-rahmen {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative; /* Bezugsrahmen fuer die absolut positionierte eframe-Canvas */
}
/* Mindestmasse (laut Development) gelten NUR, wenn das Widget tatsaechlich geladen wird.
   widget-embed.js setzt .widget-aktiv erst, wenn die Mindestbreite erfuellt ist und das
   WASM-Bundle geladen wird. Auf schmalen Bildschirmen bleibt der Container klein und zeigt
   nur den Hinweis, ohne das schwere Bundle zu laden. */
.widget-rahmen.widget-aktiv {
  min-width: 900px;
  min-height: 700px;
}
/* eframe positioniert seine Canvas absolut. Ohne positionierten Vorfahren bricht sie
   beim Relayout (z. B. nach Schliessen des Willkommensdialogs) aus dem Container aus
   und ueberdeckt die Seite. Diese Regel spannt sie fest in den Container ein. */
.widget-rahmen canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
.widget-fallback {
  max-width: 40ch;
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--farbe-text-leise);
}
/* Hinweis fuer schmale Bildschirme: Spiel braucht >= 900 px Breite. */
.widget-klein-hinweis { display: none; }
@media (max-width: 940px) {
  .widget-klein-hinweis { display: block; }
}

/* Hinweis-/Platzhalterbox */
.hinweis {
  border-left: 4px solid var(--farbe-akzent);
  background: var(--farbe-flaeche);
  padding: 0.9rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
}
.hinweis p { margin: 0.3rem 0; }

/* Fussbereich */
.site-footer {
  border-top: 1px solid var(--farbe-rand);
  background: var(--farbe-flaeche);
  margin-top: 3rem;
  padding-block: 1.5rem;
  color: var(--farbe-text-leise);
  font-size: 0.9rem;
}
.site-footer a { color: var(--farbe-text-leise); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---- Variantenseiten (Spielanleitungen) ---- */
.breadcrumb { font-size: 0.9rem; color: var(--farbe-text-leise); margin-bottom: 0.5rem; }
.breadcrumb a { color: var(--farbe-text-leise); }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.95rem;
}
th, td {
  border: 1px solid var(--farbe-rand);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
th { background: rgba(122, 74, 30, 0.08); }

/* Grunddaten: erste Spalte (Feldnamen) linksbündig */
.grunddaten th { text-align: left; white-space: nowrap; width: 34%; }

/* Figuren-Tabelle: klare Rahmenlinien, Kopf + erste drei Spalten zentriert,
   Besonderheit linksbündig */
.figuren th, .figuren td { border: 1px solid #b58a5a; text-align: center; }
.figuren th:last-child, .figuren td:last-child { text-align: left; }
.figuren tbody tr:nth-child(even) { background: rgba(122, 74, 30, 0.05); }

/* Startaufstellungs-Grafik: einheitliche Zellgroesse (intrinsische SVG-Masse),
   nicht auf Containerbreite gestreckt; groesstes Brett = Referenz. */
.board-figur { margin: 1.5rem 0; }
.board-figur img {
  width: auto;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}
.board-figur figcaption { font-size: 0.9rem; color: var(--farbe-text-leise); margin-top: 0.5rem; }

/* Legende: Symbol exakt wie auf dem Brett (Inline-SVG) + Beschreibung */
.board-legende {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.92rem;
}
.board-legende li { display: flex; align-items: center; gap: 0.5rem; }
.board-legende svg { flex: none; vertical-align: middle; }

/* Originalregeltext (Abschnitt 8 der Anleitungen) */
.original-regeln {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 0.8rem 1.1rem;
}
.original-regeln pre { white-space: pre-wrap; overflow-x: auto; margin: 0.5rem 0; }

.quellen { font-size: 0.92rem; }
.quellen li { margin-bottom: 0.4rem; word-break: break-word; }

/* Startseiten-Hero mit GUI-Screenshot (neben der Erklaerung; Klick -> Spiel) */
@media (min-width: 820px) {
  .hero { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
.hero-bild { display: block; position: relative; text-decoration: none; border-radius: var(--radius); overflow: hidden; }
.hero-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.hero-bild-hinweis {
  position: absolute; right: 0.6rem; bottom: 0.6rem;
  background: var(--farbe-akzent); color: var(--farbe-akzent-kontrast);
  padding: 0.35rem 0.7rem; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600;
}
.hero-bild:focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: 2px; }

/* Diagnose-Modus (nur bei ?diagnose=1 aktiv; von widget-diag.js erzeugt). Temporaer. */
.widget-rahmen.widget-diag-aktiv {
  min-width: 0;
  width: 100%;
  height: 70vh;
  min-height: 360px;
}
.diag-panel {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 2px solid #b23a2f;
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}
.diag-panel h2 { margin-top: 0; }
.diag-warn { color: #b23a2f; font-weight: 600; }
.diag-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.diag-log {
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: 0.75rem;
  background: #14120f;
  color: #e8e2d6;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}