/* Gemeinsames Stylesheet der statischen Seiten (Ticket #198).
 *
 * Hier steht, was auf mindestens drei Seiten gleich ist: Schrift,
 * Marken-Tokens, Grundtypografie, Seitenkopf, Abschnitte, Tabellen, Footer und
 * die Embed-Weiche. Eingebunden wird die Datei mit
 *
 *     <link rel="stylesheet" href="/seiten.css">
 *
 * — ein Schrägstrich, absolut. Eingebunden von impressum.html,
 * datenschutz.html, agb.html, koenigrufen.html, tarockieren-lernen.html und
 * den generierten Seiten regelwerk.html / glossar.html (aus
 * tool/regelwerk_seite.dart, das seit diesem Ticket selbst kein CSS mehr
 * führt).
 *
 * WAS HIER NICHT HINGEHÖRT: alles, was nur eine oder zwei Seiten brauchen. Das
 * bleibt als kleiner <style>-Block auf seiner Seite — so sieht man dort auf
 * einen Blick, was die Seite vom gemeinsamen Bild abweichen lässt (heute: die
 * goldenen Überschriften der Rechtsseiten, die breitere Lesespalte der
 * Inhaltsseiten, Merkbox/FAQ von tarockieren-lernen.html).
 *
 * JEDE ÄNDERUNG HIER BETRIFFT ALLE SEITEN. Genau das ist der Zweck: vor
 * diesem Ticket stand der Block siebenmal im Repo und war an drei Stellen
 * auseinandergelaufen (u. a. goldene statt weißer Trennlinien auf den
 * Rechtsseiten). test/web/geteiltes_css_test.dart hält den Zustand fest.
 *
 * web/index.html ist bewusst NICHT eingebunden: die Landing ist die
 * Flutter-App-Shell mit SEO-Fallback und hat ein eigenes, vollständig
 * klassenbasiertes Stylesystem (kein .wrap, kein header.hero, keine
 * Element-Regeln). Sie übernimmt aus dieser Datei nur den unten markierten
 * Abschnitt „geteilte Basis" als Inline-Kopie — der Test hält beide Fassungen
 * zeichengleich. Begründung siehe Kommentar in index.html.
 */

/* Der folgende Abschnitt steht ein zweites Mal wörtlich inline in
 * web/index.html — die Sentinel-Kommentare grenzen ihn ab, und
 * test/web/geteiltes_css_test.dart hält beide Fassungen zeichengleich. Er ist
 * bewusst schmal: nur Schrift und Marken-Tokens, keine Selektoren, damit die
 * Landing nichts erbt, was sie nicht bestellt hat. */

/* >>> geteilte Basis (seiten.css ⇄ index.html): Anfang <<< */

/* EB Garamond – dieselbe Familie wie in der Flutter-App (pubspec.yaml).
   Aus den von Flutter gebündelten Asset-Schriften geladen
   (assets/assets/fonts/), damit Landing, Seiten und App exakt dieselbe,
   subgesetzte Datei nutzen und sie nur einmal geladen/gecacht wird;
   web/fonts/ existiert nicht mehr.

   Bewusst nur 400 und 700: Jeder weitere Schnitt ist ein eigener
   ~73-KB-Download. Alle Stile nutzen daher ausschließlich diese zwei
   Gewichte — kein Wert dazwischen, sonst synthetisiert der Browser
   (Faux-Bold/-Medium, Ticket #179).

   TTF statt WOFF2 (Advisory Ticket #179): WOFF2 wäre deutlich kleiner,
   ist hier aber nicht sauber möglich, weil Landing und App dieselbe
   Datei teilen — die Schnitte kommen aus dem Flutter-Asset-Bundle
   (pubspec.yaml `fonts:`), das die Engine als TTF/OTF erwartet. Eine
   WOFF2-Variante nur für die Landing wäre eine ZWEITE Datei und würde
   den Download in Summe verdoppeln statt verkleinern. Sinnvoll erst,
   wenn das Flutter-Bundle selbst auf WOFF2 umgestellt werden kann.

   Die Pfade sind absolut: url() löst relativ zur CSS-Datei auf, nicht
   zur HTML-Seite. Beides wäre hier gleichwertig, weil seiten.css im
   Web-Root liegt — absolut bleibt es auch, wenn die Datei je in einen
   Unterordner wandert. */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/assets/fonts/EBGaramond-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/assets/fonts/EBGaramond-Bold.ttf") format("truetype");
}

/* Marken-Tokens, abgeleitet aus lib/ui/theme/app_tokens.dart:
   darkGreen #1B5E20, Gold-Akzent #FFD54F, Textweiß mit den Abstufungen
   white72/white62. */
:root {
  --green: #1B5E20;
  --gold: #FFD54F;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.72);
  --text-faint: rgba(255, 255, 255, 0.62);
  /* Trennlinien tragen kein Gold — Gold ist die Auszeichnung der einen
     Hauptaktion, nicht die Grundfarbe der Seite (designsystem.md). */
  --line: rgba(255, 255, 255, 0.12);
}

/* >>> geteilte Basis (seiten.css ⇄ index.html): Ende <<< */

/* Breite der Lesespalte. 680 = AppTokens.maxWidthText (Ticket #179); die
   Inhaltsseiten mit den breiten Varianten-/Katalogtabellen heben den Wert in
   ihrem eigenen Block auf 720 an. */
:root {
  --wrap-max: 680px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--green);
  color: var(--text);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero */
header.hero {
  text-align: center;
  padding: 56px 24px 40px;
}
/* Dieselbe Wortmarke wie die Landing (Line-Art-Logo, logo.svg) statt des
   App-Icons mit runden Ecken — es gab bis Ticket #179 zwei verschiedene Logos
   auf derselben Domain. Das Icon bleibt Favicon und PWA-Symbol. */
header.hero img.logo {
  height: 64px;
  width: auto;
  /* Derselbe Abstand zur Wortmarke wie auf der Startseite (dort über
     `.wordmark { margin-top: 12px }`). */
  margin-bottom: 12px;
}
.wordmark {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 24px;
}
/* „.app" wie auf der Landing (index.html): weiß und leichter statt gold — eine
   Schreibweise der Wortmarke auf allen Seiten (Ticket #179). */
.wordmark .app {
  font-weight: 400;
  font-size: 0.65em; /* Landing: 22 px zu 34 px */
}
h1 {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--text);
}
.teaser {
  color: var(--text-muted);
  max-width: 34rem;
  margin: 0 auto 28px;
}

/* Buttons / CTA */
.cta {
  display: inline-block;
  background-color: var(--gold);
  color: rgba(0, 0, 0, 0.87);
  font-weight: 700;
  text-decoration: none;
  padding: 12px 28px;
  /* Derselbe Button wie auf der Landing: Radius 8 aus der Radienskala,
     Schrift black87 (onGold). Als Pille mit grüner Schrift war er ein
     zweiter Primärbutton auf derselben Domain. */
  border-radius: 8px;
  font-size: 1.05rem;
}
.cta:hover { background-color: #ffe082; }

/* Abschnitte */
section { padding: 28px 0; border-top: 1px solid var(--line); }
h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}
h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 22px 0 6px;
}
p { margin: 0 0 14px; }
a { color: var(--gold); }
/* Tastatur-Fokus färbt gold — dieselbe Regel wie in der App und auf der
   Landing (designsystem.md: Fokus-Rahmen goldAccent, borderWidthFocus 3).
   Vorher hatten die statischen Seiten gar keine Fokus-Markierung
   (Ticket #179). */
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
ul, ol { margin: 0 0 14px; padding-left: 1.3em; }
li { margin-bottom: 6px; }
strong { color: var(--text); }
.source {
  display: block;
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-top: 8px;
}
.hint {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Definitionslisten (Glossar, Ticket #197) */
dl { margin: 0 0 14px; }
dt { font-weight: 700; margin-top: 14px; }
dd { margin: 4px 0 0; color: var(--text-muted); }
/* Nebenname im dt (Ticket #203): dieselbe gedämpfte Kleinschrift wie .source,
   nur ohne das Fettgewicht des dt. */
dt .nebenname {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* Sprungnavigation: das Web-Pendant zur Kapitel-Chip-Leiste der App —
   goldumrandete Pills, umbrechend statt horizontal scrollend. */
nav.kapitelnav { padding: 24px 0 4px; }
nav.kapitelnav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
nav.kapitelnav li { margin: 0; }
nav.kapitelnav a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 0.95rem;
  text-decoration: none;
}
nav.kapitelnav a:hover { background-color: rgba(255, 213, 79, 0.14); }

/* Absätze, die nur in einigen Varianten gelten */
ul.variantenzusatz { list-style: none; padding-left: 0; }
ul.variantenzusatz li { margin-bottom: 12px; }
.variantenmarke {
  display: block;
  font-size: 0.85rem;
  color: var(--gold);
}

/* Tabelle */
.table-scroll { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 1rem;
}
caption {
  caption-side: bottom;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-faint);
  padding-top: 8px;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  vertical-align: top;
}
th {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
th[scope="row"] { white-space: normal; }
/* Wertspalten in Tabellenziffern — das Web-Pendant zu AppText.numeric. */
td.zahl, th.zahl {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
td.leer { color: var(--text-faint); }
.abweichung {
  display: block;
  font-size: 0.85rem;
  font-variant-numeric: normal;
  color: var(--text-faint);
  white-space: normal;
}

/* Verbände-Links */
ul.links { list-style: none; padding-left: 0; }
ul.links li { margin-bottom: 10px; }

/* Footer */
footer {
  text-align: center;
  padding: 36px 24px 48px;
  border-top: 1px solid var(--line);
}
footer a { color: var(--text-muted); }
footer .rechtslinks { color: var(--text-muted); }

/* Embed-Modus (Ticket #136): nur der Inhalt, ohne Seitenkopf, Footer und
   CTAs. */
html.embed header.hero,
html.embed footer { display: none; }
/* Ist der erste Abschnitt das erste Element der Lesespalte, klebt seine obere
   Trennlinie in der App-AppBar als Linie ohne Bezug am Rahmenrand — die fällt
   weg. Bewusst `:first-child` und nicht `:first-of-type`: auf den generierten
   Seiten steht die Sprungnavigation vor dem ersten Abschnitt, dort trennt die
   Linie tatsächlich etwas und bleibt deshalb stehen. */
html.embed .wrap > section:first-child { border-top: none; }
html.embed .wrap > nav.kapitelnav { padding-top: 8px; }

@media (max-width: 480px) {
  h1 { font-size: 1.9rem; }
  body { font-size: 1.05rem; }
}