@charset "UTF-8";
/* ==========================================================================
   Fallblatt — Seitenbereiche

   Dritte und letzte Stilebene. Sie setzt fort, was basis.css (Token, Kopf,
   Fuss, Knoepfe, Formularfelder, Karten, Hinweise) und brett.css (Brett und
   Tastatur) offen lassen: die eigentlichen Seiten.

   Aufbau wie in basis.css:
     1. Kein einziger Farbwert steht hier als Literal. Alles kommt aus den
        Token auf :root. Wo ein Zwischenton fehlt, wird er mit color-mix()
        aus einem vorhandenen Token abgeleitet — damit gilt er in hell,
        dunkel und im Farbenblind-Modus automatisch mit, ohne dass hier ein
        zweiter Zuordnungsblock noetig waere.
     2. Keine style-Attribute, keine externen Dateien, kein @import auf
        fremde Hosts. Die Content-Security-Policy der Seite laesst nichts
        davon durch. Deshalb steht selbst die Balkenbreite der
        Rateverteilung hier als Attributselektor (siehe [data-anteil]).
     3. Mobil zuerst. Jede Regel gilt ab 320 Pixeln; die Medienabfragen am
        Ende geben nur mehr Platz, sie reparieren nichts.

   Gestaltung: ruhig und etwas technisch, wie die Anzeigetafel, nach der das
   Spiel heisst. Wiederkehrende Mittel sind die Fallblattnaht
   (--blatt-glanz), Ziffern mit fester Laufweite, duenne Linien statt
   Flaechen und genau eine Akzentfarbe.

   Bewusst kein text-transform: uppercase, auch nicht auf Beschriftungen.
   Grossschreibung macht aus dem scharfen s ein doppeltes S — brett.css
   begruendet das fuer Kacheln und Tasten, und der Grund gilt hier genauso,
   sobald in einer Beschriftung einmal ein ß steht. Der technische Klang
   kommt stattdessen aus Laufweite und Schriftgroesse.
   ========================================================================== */

/* ------------------------------------------------------------- Ergaenzt --
   Nur Masse und ein Schriftstapel, keine Farben. Die Farbtoken stehen
   vollstaendig in basis.css und werden hier ausschliesslich benutzt. */
:root {
  --breite-mittel: 46rem;   /* .konto--breit: Profil und Regeln */
  --breite-lesen:  44rem;   /* .fliesstext: bequeme Zeilenlaenge */

  /* Feste Laufweite fuer Ergebnisraster und Zahlenblocks. Alles aus dem
     System — die Seite laedt keine Schrift nach. */
  --schrift-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", "Courier New", monospace;
}


/* ==========================================================================
   1. Kontospalte — das gemeinsame Geruest
   Anmelden, Registrieren, Passwort vergessen, Passwort neu, Profil und
   Regeln benutzen dieselbe Vorlage: <section class="konto"> mit einem
   Kopfblock, beliebig vielen Karten und einer Fussnavigation.
   ========================================================================== */

.konto {
  max-width: var(--breite-schmal);
  margin-inline: auto;
}

/* Breite Aufstellung fuer Seiten mit Tabellen und Zahlenbaendern.
   Nicht die volle --breite: darin wuerde Fliesstext zu lang laufen. */
.konto--breit { max-width: var(--breite-mittel); }

/* Abstand liegt bewusst an den Kindern statt an einem Gitterabstand —
   so lassen sich einzelne Paare weiter unten enger stellen. */
.konto > * { margin-block: 0; }
.konto > * + * { margin-block-start: var(--raum-5); }

/* Eine Abschnittsueberschrift bekommt Luft davor und ruecken den Text
   darunter dicht an sich heran. */
.konto > .abschnitt-titel { margin-block-start: var(--raum-6); }
.konto > .abschnitt-titel + * { margin-block-start: var(--raum-3); }
.konto > .abschnitt-unter + * { margin-block-start: var(--raum-4); }

/* ------------------------------------------------------------ Kopfblock -- */
.konto-kopf {
  display: grid;
  justify-items: center;
  text-align: center;
}
.konto-kopf h1 { margin-bottom: var(--raum-2); }

/* Der Profilkopf traegt die Seite an — eine Haarlinie trennt ihn von den
   Zahlen darunter. */
.konto-kopf--profil {
  padding-bottom: var(--raum-5);
  border-bottom: 1px solid var(--linie);
}

.konto-unter {
  max-width: 44ch;
  margin: 0;
  color: var(--text-leise);
  font-size: var(--text-s);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ Klappband --
   Das Seitenwort auf Fallblaettern, wie die Zielanzeige am Bahnsteig.
   Rein schmueckend: im Markup steht aria-hidden, die Ueberschrift darunter
   traegt denselben Inhalt noch einmal als Text. */
.klappband {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-1);
  margin: 0 0 var(--raum-4);
  padding: 0;
  perspective: 500px;
}

.klappe {
  position: relative;
  display: grid;
  place-items: center;
  /* Acht Blaetter ("ANMELDEN") muessen bei 320 Pixeln nebeneinander passen. */
  width: clamp(1.5rem, 6.4vw, 2rem);
  height: clamp(1.9rem, 8vw, 2.5rem);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  background: var(--grund-tief);
  color: var(--text-leise);
  font-size: clamp(.8rem, 3.4vw, 1.05rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  overflow: hidden;
  animation: klappe-fallen 260ms var(--kurve) both;
  animation-delay: calc(var(--klappe-nr, 0) * 55ms);
}

/* Naht und Woelbung — dasselbe Mittel wie bei Kachel, Taste und Wortmarke. */
.klappe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blatt-glanz);
}

/* Gestaffelter Einlauf. Laengstes Klappband im Bestand hat acht Blaetter. */
.klappe:nth-child(1) { --klappe-nr: 0; }
.klappe:nth-child(2) { --klappe-nr: 1; }
.klappe:nth-child(3) { --klappe-nr: 2; }
.klappe:nth-child(4) { --klappe-nr: 3; }
.klappe:nth-child(5) { --klappe-nr: 4; }
.klappe:nth-child(6) { --klappe-nr: 5; }
.klappe:nth-child(7) { --klappe-nr: 6; }
.klappe:nth-child(8) { --klappe-nr: 7; }

@keyframes klappe-fallen {
  from { transform: rotateX(-88deg); opacity: 0; }
  to   { transform: rotateX(0);      opacity: 1; }
}

/* -------------------------------------------------------- Fussbereiche -- */
.konto-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-2) var(--raum-4);
  font-size: var(--text-s);
}
.konto-links a {
  color: var(--text-leise);
  text-decoration-color: color-mix(in srgb, var(--text-leise) 40%, transparent);
}
.konto-links a:hover { color: var(--text); }

.konto-fussnote {
  margin: 0;
  color: var(--text-leise);
  font-size: var(--text-xs);
  text-wrap: pretty;
}
/* Nur die Fussnote der Seite selbst steht mittig. Die gleichnamigen
   Fussnoten in Karten erben die Ausrichtung ihrer Karte. */
.konto > .konto-fussnote { text-align: center; }

/* --------------------------------------------------------- Kontoaktion -- */
.konto-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
}
.konto-aktionen > p { margin: 0; font-size: var(--text-s); }

/* --------------------------------------------------------- Kontowerbung --
   Die Karte auf der Startseite, die erklaert, dass das Tagesraetsel ohne
   Konto geht. Sie soll auffallen, ohne zu schreien: eine Kante in der
   Akzentfarbe und ein Hauch davon in der Flaeche. */
.konto-hinweis {
  border-left: 4px solid var(--akzent);
  background: color-mix(in srgb, var(--akzent-zart) 55%, var(--flaeche));
}
.konto-hinweis__titel {
  margin-bottom: var(--raum-3);
  font-size: var(--text-l);
}
.konto-hinweis__text {
  max-width: 52ch;
  margin: 0;
  font-size: var(--text-s);
  text-wrap: pretty;
}
/* Erbt .tafel__aktionen (Flex, umbruchfaehig) und rueckt es nur nach links. */
.konto-hinweis__knoepfe {
  justify-content: flex-start;
  margin: var(--raum-4) 0 0;
}


/* ==========================================================================
   2. Formulare
   Die Felder selbst stehen in basis.css. Hier nur die Klammer darum und
   die Zustaende, die konten.js setzt.
   ========================================================================== */

.formular { margin: 0; }
.formular > .formular-fehler { margin: 0 0 var(--raum-4); }
.formular > button[type="submit"],
.formular > .knopf { margin-top: var(--raum-2); }

/* konten.js sperrt das Formular waehrend der Anfrage ueber aria-busy und
   markiert fehlerhafte Felder ueber aria-invalid — nicht ueber die Klasse
   .feld--fehler, die basis.css kennt. Beide Schreibweisen sollen wirken. */
.formular[aria-busy="true"] { opacity: .72; cursor: progress; }
.formular[aria-busy="true"] .knopf { pointer-events: none; }
.formular [aria-invalid="true"] { border-color: var(--fehler); }

/* Der Ankreuzblock (Datenschutzhinweise) bekommt eine eigene Flaeche,
   damit er nicht wie ein weiteres Eingabefeld aussieht. */
.ankreuz {
  padding: var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--grund-tief) 55%, transparent);
}
.ankreuz .ankreuz-zeile { margin-bottom: 0; }
.ankreuz .feld-fehler { margin-top: var(--raum-2); }


/* ==========================================================================
   3. Tabellen
   basis.css bringt keine mit. Drei Stueck gibt es: die Uebersicht auf der
   Startseite (zwei Spalten), die Regeltabelle (drei) und die Datentabelle
   der Datenschutzerklaerung (vier).
   ========================================================================== */

.uebersicht__tabelle,
.regel-tabelle,
.daten {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
  text-align: left;
}

.uebersicht__tabelle th,
.uebersicht__tabelle td,
.regel-tabelle th,
.regel-tabelle td,
.daten th,
.daten td {
  padding: var(--raum-2) var(--raum-3);
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  overflow-wrap: break-word;
}

/* Kopfzeile: kleiner, leiser, mit etwas mehr Laufweite — der technische
   Ton der Anzeigetafel, ohne Grossschreibung. */
.uebersicht__tabelle thead th,
.regel-tabelle thead th,
.daten thead th {
  color: var(--text-leise);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--linie-stark);
  white-space: nowrap;
}

/* Zeilenkoepfe (scope="row") tragen die Kennzahl der Zeile. */
.uebersicht__tabelle tbody th,
.regel-tabelle tbody th {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.uebersicht__tabelle tbody tr:last-child th,
.uebersicht__tabelle tbody tr:last-child td,
.regel-tabelle tbody tr:last-child th,
.regel-tabelle tbody tr:last-child td,
.daten tbody tr:last-child td { border-bottom: 0; }

.uebersicht__tabelle td { font-variant-numeric: tabular-nums; }

.uebersicht__tabelle { margin: 0 0 var(--raum-4); }
.uebersicht__beschriftung {
  caption-side: top;
  text-align: left;
  margin-bottom: var(--raum-3);
  color: var(--text-leise);
  font-size: var(--text-s);
}

/* ----------------------------------------------- Waagerechter Schacht --
   Vier Spalten passen bei 320 Pixeln nicht. Die Seite darf aber nie
   waagerecht laufen — also wird die Tabelle selbst zum Schacht: sie wird
   ein Block mit eigenem Bildlauf, ihre Zeilengruppen bleiben Tabellen.
   Ein umschliessendes <div> gibt es im Markup nicht, und Inline-Stile
   sind wegen der CSP ohnehin ausgeschlossen.

   table-layout: fixed und gleiche Spaltenbreiten in thead und tbody sind
   noetig, weil beide Gruppen nun eigenstaendige Tabellen sind und ihre
   Spalten sonst nicht mehr untereinander stehen. */
.daten,
.regel-tabelle {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.daten > thead,
.daten > tbody,
.regel-tabelle > thead,
.regel-tabelle > tbody {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.daten > thead,
.daten > tbody { min-width: 42rem; }
.regel-tabelle > thead,
.regel-tabelle > tbody { min-width: 22rem; }

/* Die Beschriftung gehoert nicht in den Bildlauf, sondern darueber. */
.regel-tabelle > caption {
  display: block;
  margin-bottom: var(--raum-3);
  color: var(--text-leise);
  font-size: var(--text-s);
  text-align: left;
}

/* Feste Spaltenanteile, in beiden Zeilengruppen gleich. */
.daten th:nth-child(1), .daten td:nth-child(1) { width: 30%; }
.daten th:nth-child(2), .daten td:nth-child(2) { width: 26%; }
.daten th:nth-child(3), .daten td:nth-child(3) { width: 24%; }
.daten th:nth-child(4), .daten td:nth-child(4) { width: 20%; }

.regel-tabelle th:nth-child(1), .regel-tabelle td:nth-child(1) { width: 40%; }
.regel-tabelle th:nth-child(2), .regel-tabelle td:nth-child(2) { width: 26%; }
.regel-tabelle th:nth-child(3), .regel-tabelle td:nth-child(3) { width: 34%; }

.regel-tabelle td { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   4. Fliesstext — Impressum, Datenschutz, Regelkarten
   ========================================================================== */

.fliesstext {
  max-width: var(--breite-lesen);
  margin-inline: auto;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.fliesstext > h1 { margin-bottom: var(--raum-5); }
.fliesstext > h2 { margin-top: var(--raum-6); }
.fliesstext > h3 { margin-top: var(--raum-5); }

/* Das erste Kind steht schon am oberen Rand. Die Ausnahme muss die beiden
   Ueberschriftregeln darueber ausdruecklich schlagen — ein blosses
   :first-child waere weniger spezifisch als "> h2" und bliebe wirkungslos. */
.fliesstext > :first-child,
.fliesstext > h2:first-child,
.fliesstext > h3:first-child { margin-top: 0; }
.fliesstext li { margin-bottom: var(--raum-2); }
.fliesstext strong { font-weight: 650; }

.fliesstext code {
  padding: .1em .38em;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  background: var(--grund-tief);
  font-family: var(--schrift-fest);
  font-size: .9em;
}


/* ==========================================================================
   5. Startseite
   ========================================================================== */

.start {
  display: grid;
  gap: var(--raum-7);
}
.start > * { margin-block: 0; }

.start__kopf { margin-block: 0; }

/* Neun Blaetter ("FALLBLATT") in einer Zeile — das Mass aus basis.css
   waere bei 320 Pixeln fast doppelt so breit wie der Bildschirm. Hier
   kleinere Blaetter, engerer Abstand, und Umbruch als letzte Reserve. */
.start__kopf .tafel__code {
  flex-wrap: wrap;
  gap: var(--raum-1);
}
.start__kopf .tafel__blatt {
  width: clamp(1.7rem, 7.8vw, 3.25rem);
  height: clamp(2.1rem, 9.6vw, 3.9rem);
  font-size: clamp(.95rem, 4.4vw, 2rem);
}

.start__titel {
  margin-bottom: var(--raum-4);
  text-wrap: balance;
}
.start__erklaerung {
  max-width: 56ch;
  margin-inline: auto;
}

/* ----------------------------------------------------------- Moduswahl -- */
.modi { margin: 0; }
.modi__titel {
  margin-bottom: var(--raum-4);
  font-size: var(--text-l);
}
.modi__liste {
  display: grid;
  gap: var(--raum-4);
}

/* Die beiden grossen Einstiegskacheln. Ein <a>, das eine .karte ist —
   deshalb hier vor allem: Textfluss, Farbe zuruecksetzen, Zustaende. */
.moduskachel {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--raum-2);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  transition: background var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}

/* Die Kante links ist im Ruhezustand nur angedeutet und faehrt beim
   Zeigen aus — die einzige Bewegung auf der Startseite. */
.moduskachel::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--kachel-kante, var(--akzent));
  transform: scaleY(.3);
  transition: transform var(--tempo) var(--kurve);
}
.moduskachel:hover,
.moduskachel:focus-visible {
  background: var(--flaeche-hoch);
  border-color: var(--linie-stark);
  transform: translateY(-2px);
}
.moduskachel:hover::before,
.moduskachel:focus-visible::before { transform: scaleY(1); }

.moduskachel--taeglich { --kachel-kante: var(--akzent); }
.moduskachel--endlos {
  --kachel-kante: color-mix(in srgb, var(--akzent) 45%, var(--text-leise));
}

.moduskachel__name {
  font-size: var(--text-l);
  font-weight: 700;
  letter-spacing: .01em;
}
.moduskachel__nummer {
  color: var(--text-leise);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.moduskachel__text {
  color: var(--text-leise);
  font-size: var(--text-s);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ Uebersicht - */
.uebersicht { margin: 0; }
.uebersicht__titel {
  margin-bottom: var(--raum-4);
  font-size: var(--text-l);
}
.uebersicht__text {
  max-width: 62ch;
  margin: 0;
  color: var(--text-leise);
  font-size: var(--text-s);
  text-wrap: pretty;
}


/* ==========================================================================
   6. Spielseite
   ========================================================================== */

.spiel {
  display: grid;
  gap: var(--raum-5);
}
.spiel > * { margin-block: 0; }

/* spiel.js setzt data-wartet, solange eine Anfrage laeuft. */
.spiel[data-wartet="1"] { cursor: progress; }
.spiel[data-wartet="1"] .laengenknopf {
  opacity: .7;
  pointer-events: none;
}

/* ----------------------------------------------------------- Laengenwahl - */
.laengenwahl { margin: 0; }
.laengenwahl__titel {
  margin-bottom: var(--raum-2);
  font-size: var(--text-xl);
  text-wrap: balance;
}
.laengenwahl__text {
  max-width: 60ch;
  margin-bottom: var(--raum-5);
  color: var(--text-leise);
  font-size: var(--text-s);
  text-wrap: pretty;
}

/* Erbt .tafel__aktionen und ersetzt dessen Flexzeile durch ein Raster:
   bei 320 Pixeln zwei Spalten, danach so viele, wie hineinpassen. Die
   Obergrenze verhindert, dass drei Knoepfe auf einem breiten Bildschirm
   zu Tafeln aufgeblasen werden. */
.laengenwahl__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 9rem));
  justify-content: center;
  gap: var(--raum-2);
  margin: 0;
}

.laengenwahl__konto {
  max-width: 60ch;
  margin: var(--raum-5) 0 0;
  color: var(--text-leise);
  font-size: var(--text-s);
  text-wrap: pretty;
}

/* --------------------------------------------------------- Laengenknopf --
   Ein .knopf, aber hochkant und mit vier Zeilen. Alle Angaben stehen
   nach basis.css in der Datei und gewinnen deshalb bei gleicher
   Spezifitaet. */
.laengenknopf {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--raum-1);
  min-height: 6rem;
  padding: var(--raum-3) var(--raum-2);
  background: var(--flaeche);
  text-align: center;
  line-height: 1.25;
}
.laengenknopf:hover {
  background: var(--akzent-zart);
  border-color: var(--akzent);
}

/* Die Zahl sitzt auf einem eigenen Blatt — das Wiedererkennungszeichen
   des Spiels, hier in klein. */
.laengenknopf__zahl {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 1.9em;
  padding: .1em .2em;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-s);
  background: var(--grund-tief);
  color: var(--text);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow: hidden;
}
.laengenknopf__zahl::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blatt-glanz);
}

.laengenknopf__einheit {
  color: var(--text-leise);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
}
.laengenknopf__versuche {
  color: var(--text-leise);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* Steht erst da, wenn die Tagesuebersicht geladen ist. Leer soll er
   keinen Abstand erzeugen. */
.laengenknopf__status {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
}
.laengenknopf__status:empty { display: none; }

/* Die vier Zustaende, die spiel.js als data-status schreibt. Die Farbe ist
   hier nie die einzige Information — im Knopf steht das Wort daneben
   ("offen", "laeuft", "geschafft", "gespielt"). */
.laengenknopf[data-status="offen"] .laengenknopf__status { color: var(--akzent); }
.laengenknopf[data-status="laeuft"] .laengenknopf__status { color: var(--warnung); }
.laengenknopf[data-status="gewonnen"] .laengenknopf__status { color: var(--erfolg); }
.laengenknopf[data-status="erledigt"] .laengenknopf__status { color: var(--text-leise); }

.laengenknopf[data-status="laeuft"] {
  border-color: color-mix(in srgb, var(--warnung) 55%, var(--linie));
}
.laengenknopf[data-status="gewonnen"] {
  border-color: color-mix(in srgb, var(--erfolg) 55%, var(--linie));
}
.laengenknopf[data-status="erledigt"] { opacity: .78; }

/* ---------------------------------------------------------------- Partie -- */
.partie {
  display: grid;
  gap: var(--raum-5);
}
.partie__kopf {
  display: grid;
  justify-items: center;
  gap: var(--raum-1);
  text-align: center;
}
.partie__titel {
  margin: 0;
  font-size: var(--text-xl);
  text-wrap: balance;
}
.partie__fortschritt {
  margin: 0;
  color: var(--text-leise);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
/* Erbt .tafel__aktionen; nur der Abstand nach oben faellt kleiner aus. */
.partie__werkzeuge { margin-top: var(--raum-2); }

/* Der Spielstand in Worten. Im Markup steht immer auch .nur-fuer-leser —
   diese Regel darf das Verstecken auf keinen Fall aufheben, deshalb die
   ausdrueckliche Ausnahme. Sie greift nur, falls die Ansage einmal
   sichtbar gebraucht wird. */
.ansage:not(.nur-fuer-leser) {
  margin: 0;
  color: var(--text-leise);
  font-size: var(--text-s);
  text-align: center;
}

/* -------------------------------------------------------------- Ergebnis -- */
.ergebnis { margin-block: 0; }
.ergebnis__titel {
  margin-bottom: var(--raum-4);
  font-size: var(--text-xl);
  text-wrap: balance;
}

/* Das Loesungswort auf Blaettern. Bis zu acht Zeichen muessen bei 320
   Pixeln nebeneinander stehen — das Standardmass aus basis.css waere zu
   breit. Umbruch bleibt als Reserve. */
.ergebnis .tafel__code {
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin-bottom: var(--raum-4);
}
.ergebnis .tafel__blatt {
  width: clamp(1.85rem, 8.4vw, 3.25rem);
  height: clamp(2.25rem, 10vw, 3.9rem);
  font-size: clamp(1rem, 4.8vw, 2rem);
}

.ergebnis__xp {
  margin-bottom: var(--raum-2);
  color: var(--akzent);
  font-size: var(--text-l);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ergebnis__serie {
  color: var(--text-leise);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
}

/* Der Teilen-Block ist eine Karte innerhalb der Ergebnistafel. */
.ergebnis__raster {
  margin-top: var(--raum-5);
  text-align: center;
}
.ergebnis__untertitel {
  margin-bottom: var(--raum-3);
  color: var(--text-leise);
  font-size: var(--text-s);
  font-weight: 650;
  letter-spacing: .05em;
}

/* Das Raster zum Teilen. Passt es, steht es mittig; passt es nicht,
   bekommt es einen eigenen waagerechten Bildlauf — die Seite selbst
   bleibt unberuehrt. width: fit-content statt text-align: center, weil
   zentrierter Text in einem Bildlauf links abgeschnitten wuerde. */
.raster {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--raum-4);
  padding: var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  background: var(--grund-tief);
  color: var(--text);
  font-family: var(--schrift-fest);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: left;
  white-space: pre;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.ergebnis__konto {
  max-width: 46ch;
  margin: var(--raum-5) auto 0;
  color: var(--text-leise);
  font-size: var(--text-s);
  text-wrap: pretty;
}


/* ==========================================================================
   7. Dialoge
   Ein einziger im Bestand: die Wortmeldung auf der Spielseite.
   ========================================================================== */

/* Lage ausdruecklich gesetzt: spiel.js faellt auf setAttribute("open")
   zurueck, wenn showModal fehlt — dann gaebe der Browser dem Dialog seine
   Stellung im Textfluss statt der Mitte. */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: min(100% - var(--raum-6), 30rem);
  max-height: min(88dvh, 44rem);
  margin: auto;
  padding: var(--raum-5);
  overflow-y: auto;
}

/* Der Schleier muss in beiden Schemata dunkel sein — also aus der
   Nachtpalette abgeleitet und nicht aus --text, das im dunklen Schema
   hell waere. */
.dialog::backdrop {
  background: color-mix(in srgb, var(--d-grund-tief) 64%, transparent);
}

.dialog__form { margin: 0; }
.dialog__titel {
  margin-bottom: var(--raum-2);
  font-size: var(--text-l);
}
.dialog__text {
  margin-bottom: var(--raum-5);
  color: var(--text-leise);
  font-size: var(--text-s);
  text-wrap: pretty;
}

/* Erbt .tafel__aktionen. Schmal stehen die Knoepfe nebeneinander und
   teilen sich die Zeile; ab 30rem ruecken sie nach rechts. */
.dialog__knoepfe {
  justify-content: stretch;
  margin-top: var(--raum-5);
}
.dialog__knoepfe .knopf { flex: 1 1 8rem; }


/* ==========================================================================
   8. Profil
   ========================================================================== */

/* Abschnittsueberschrift mit ausfahrender Linie — die ruhigste Art,
   Hierarchie zu zeigen, ohne eine Flaeche einzufaerben. */
.abschnitt-titel {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  margin: 0;
  font-size: var(--text-l);
}
.abschnitt-titel::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--linie);
}

.abschnitt-unter {
  max-width: 60ch;
  margin: 0;
  color: var(--text-leise);
  font-size: var(--text-s);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ Zahlenband -- */
.zahlen-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
  gap: var(--raum-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.zahl-kachel {
  display: grid;
  justify-items: center;
  gap: var(--raum-1);
  margin: 0;
  padding: var(--raum-3) var(--raum-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  text-align: center;
}
.zahl {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.zahl-titel {
  color: var(--text-leise);
  font-size: var(--text-xs);
  letter-spacing: .03em;
  text-wrap: balance;
}

/* ---------------------------------------------------------- Rateverteilung --
   profil.html schreibt den Anteil als data-anteil an den Balken: eine Zahl
   in Fuenferschritten von 0 bis 100, also der Prozentwert selbst. Ein
   style-Attribut waere hier von der Content-Security-Policy verboten,
   deshalb steht jede der einundzwanzig Stufen als Attributselektor da.
   Ein Wert ausserhalb der Liste laesst den Balken auf Breite null — dann
   fehlt lieber ein Balken, als dass eine falsche Laenge behauptet wird. */
.verteilung {
  display: grid;
  gap: var(--raum-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.verteilung-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--raum-2);
  margin: 0;
}

.verteilung-nr {
  min-width: 1.35em;
  color: var(--text-leise);
  font-size: var(--text-s);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.verteilung-spur {
  display: block;
  height: 1.5rem;
  border-radius: var(--radius-s);
  background: var(--grund-tief);
  box-shadow: inset 0 0 0 1px var(--linie);
  overflow: hidden;
}

.verteilung-balken {
  display: block;
  inline-size: var(--anteil, 0%);
  block-size: 100%;
  border-radius: inherit;
  background: var(--akzent);
  transform-origin: left center;
  animation: balken-auf 480ms var(--kurve) both;
}

@keyframes balken-auf {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.verteilung-wert {
  min-width: 2ch;
  color: var(--text-leise);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Ein Versuch, in dem noch nie ein Wort gefallen ist. */
.verteilung-zeile.ist-leer .verteilung-nr,
.verteilung-zeile.ist-leer .verteilung-wert { opacity: .55; }

/* Die einundzwanzig Stufen. */
.verteilung-balken[data-anteil="0"]   { --anteil: 0%; }
.verteilung-balken[data-anteil="5"]   { --anteil: 5%; }
.verteilung-balken[data-anteil="10"]  { --anteil: 10%; }
.verteilung-balken[data-anteil="15"]  { --anteil: 15%; }
.verteilung-balken[data-anteil="20"]  { --anteil: 20%; }
.verteilung-balken[data-anteil="25"]  { --anteil: 25%; }
.verteilung-balken[data-anteil="30"]  { --anteil: 30%; }
.verteilung-balken[data-anteil="35"]  { --anteil: 35%; }
.verteilung-balken[data-anteil="40"]  { --anteil: 40%; }
.verteilung-balken[data-anteil="45"]  { --anteil: 45%; }
.verteilung-balken[data-anteil="50"]  { --anteil: 50%; }
.verteilung-balken[data-anteil="55"]  { --anteil: 55%; }
.verteilung-balken[data-anteil="60"]  { --anteil: 60%; }
.verteilung-balken[data-anteil="65"]  { --anteil: 65%; }
.verteilung-balken[data-anteil="70"]  { --anteil: 70%; }
.verteilung-balken[data-anteil="75"]  { --anteil: 75%; }
.verteilung-balken[data-anteil="80"]  { --anteil: 80%; }
.verteilung-balken[data-anteil="85"]  { --anteil: 85%; }
.verteilung-balken[data-anteil="90"]  { --anteil: 90%; }
.verteilung-balken[data-anteil="95"]  { --anteil: 95%; }
.verteilung-balken[data-anteil="100"] { --anteil: 100%; }

/* ------------------------------------------------------------ Leerstand -- */
.leerzustand { text-align: center; }
.leerzustand > h2 { font-size: var(--text-l); }
.leerzustand > p { max-width: 52ch; margin-inline: auto; text-wrap: pretty; }

.leerzustand-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-2);
  margin-block: var(--raum-5) var(--raum-4);
}

.leerzustand-klein {
  margin: 0;
  padding: var(--raum-4);
  color: var(--text-leise);
  font-size: var(--text-s);
  text-align: center;
  text-wrap: pretty;
}


/* ==========================================================================
   9. Regelseite
   ========================================================================== */

/* Der Kartenstapel steht etwas enger als der Standardabstand der
   Kontospalte — die Karten gehoeren als Reihe zusammen. */
.regeln > .regel-block + .regel-block { margin-block-start: var(--raum-4); }

.regel-block > :first-child { margin-top: 0; }
/* In der Karte braucht der Fliesstext keine eigene Lesebreite mehr —
   die steckt bereits in .konto--breit. */
.regel-block.fliesstext { max-width: none; }

/* ---------------------------------------------------------- Farblegende -- */
.farb-liste {
  display: grid;
  gap: var(--raum-3);
  margin: 0 0 var(--raum-5);
  padding: 0;
  list-style: none;
}
.farb-zeile {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  margin: 0;
}
.farb-zeile .regel-kachel { flex: none; }
.farb-text {
  min-width: 0;
  font-size: var(--text-s);
  text-wrap: pretty;
}

/* Die Beispielreihe ist eine Liste aus Kacheln — ohne Aufzaehlungszeichen
   und ohne den Standardeinzug einer Liste. */
.beispiel-reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-2);
  margin: 0 0 var(--raum-4);
  padding: 0;
  list-style: none;
}
.beispiel-reihe .regel-kachel { margin: 0; }


/* ==========================================================================
   10. Mitteilungsseiten
   ========================================================================== */

.tafel__titel {
  margin-bottom: var(--raum-3);
  text-wrap: balance;
}


/* ==========================================================================
   11. Mehr Platz
   Alles darueber gilt ab 320 Pixeln. Ab hier wird nur verteilt.
   ========================================================================== */

@media (min-width: 30rem) {
  /* Genug Breite, damit die Dialogknoepfe nicht mehr die Zeile fuellen. */
  .dialog__knoepfe { justify-content: flex-end; }
  .dialog__knoepfe .knopf { flex: 0 0 auto; }
}

@media (min-width: 46rem) {
  .modi__liste { grid-template-columns: 1fr 1fr; }

  .laengenwahl__liste {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 9.5rem));
    gap: var(--raum-3);
  }

  .zahlen-band { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }

  .verteilung-spur { height: 1.75rem; }

  .konto-hinweis__text,
  .uebersicht__text { font-size: var(--text-m); }
}


/* ==========================================================================
   12. Weniger Bewegung
   basis.css kuerzt bereits jede Animation auf .01ms. Fuer die beiden
   Animationen dieser Datei ist das Abschalten sauberer: auf sie wartet
   kein Java-Script (anders als auf das Klappen in brett.css), und ein
   Aufblitzen von einer hundertstel Millisekunde bringt niemandem etwas.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .klappe,
  .verteilung-balken { animation: none; }
  .moduskachel:hover,
  .moduskachel:focus-visible { transform: none; }
}

/* ------------------------------------------------------------------ 13
   Nachtrag: waagerechtes Scrollen der Ergebnisseite

   Ohne definite Breite in der Ahnenkette ignoriert die intrinsische
   Groessenberechnung die Prozent-max-width des Teilen-Rasters, und dessen
   min-content-Breite wandert nach oben durch - bei 320px Viewport wurde das
   Dokument 367px breit und riss die Kopfzeile ab. Gemessen mit dem echten
   Teilen-Text bei acht Buchstaben. */
.ergebnis {
  width: 100%;
  min-width: 0;
}
.ergebnis__raster {
  display: grid;
  justify-items: center;
}
.raster {
  min-width: 0;
}

/* Die drei waagerechten Bildlaufschaechte muessen mit der Tastatur
   erreichbar sein (WCAG 2.1.1) - wer nicht wischen kann, kommt sonst an den
   verdeckten Inhalt nicht heran. Das tabindex setzen die Vorlagen, hier der
   dazugehoerige sichtbare Fokusring. */
.daten:focus-visible,
.regel-tabelle:focus-visible,
.raster:focus-visible {
  outline: var(--fokus-breite, 2px) solid var(--farbe-fokus, currentColor);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ 14
   Nachtrag: Spiel muss ohne Scrollen in den Bildschirm passen

   brett.css bemisst Kacheln und Tasten ausschliesslich nach der BREITE
   (vw und --kachel-max). Auf einem hohen, schmalen Handy geht das schief:
   gemessen bei 360x760 war das Dokument 989px hoch, die Enter-Taste lag
   55px unter dem sichtbaren Rand. Wer ein Wort abschicken will, muss erst
   scrollen - und das mitten im Spiel.

   Deshalb hier eine zweite Schranke ueber die Viewport-HOEHE. Die Werte
   sind an sieben Brettreihen gerechnet, dem ungünstigsten Fall (Laenge 7
   und 8). */
@media (max-height: 900px) {
  :root { --kachel-max: 3.5rem; }
  .taste { height: clamp(2.4rem, 7.4vw, 3rem); }
  .brettbereich { gap: var(--raum-3, .75rem); }
}
@media (max-height: 780px) {
  :root { --kachel-max: 3rem; }
  .taste { height: clamp(2.15rem, 6.8vw, 2.6rem); }
}
@media (max-height: 680px) {
  :root { --kachel-max: 2.5rem; }
  .taste { height: clamp(1.95rem, 6.2vw, 2.3rem); }
}

/* "Löschen" passte nicht in seine Taste: gemessen 44px breit bei 68px
   Textbedarf, der Rest war abgeschnitten. Mehr Anteil an der Reihe und
   eine etwas kleinere Schrift. */
.taste--breit,
.taste--weit,
.taste[data-taste="enter"],
.taste[data-taste="loeschen"] {
  flex-grow: 2.5;
  font-size: clamp(.62rem, 2.1vw, .85rem);
}


/* ------------------------------------------------------------------ 15
   Nachtrag: Spiel soll auf niedrigen Bildschirmen ohne Scrollen bedienbar
   sein.

   Gemessen (scrollunabhaengig, 8 Buchstaben = 7 Reihen, der schwerste Fall):
   320x568 musste 76px gescrollt werden, 360x640 noch 14px, 375x667 zwei.
   Die Enter-Taste lag dabei unter dem Rand - man konnte kein Wort
   abschicken, ohne vorher zu scrollen.

   Der Platz geht nicht ans Brett, sondern ans Beiwerk: Kopfzeile 105px,
   Partiekopf bis 121px. Beides wird hier zusammengezogen. Die Polsterung
   sitzt auf .kopf__innen, nicht auf .kopf selbst. */
@media (max-height: 700px) {
  .kopf__innen { padding-block: var(--raum-1); }
  .partie__kopf { gap: var(--raum-1); }
  .partie__titel { font-size: clamp(1rem, 4.2vw, 1.2rem); }
  .partie__fortschritt { font-size: .8rem; margin-block: 0; }
  .tafel__aktionen .knopf { padding-block: .3rem; font-size: .78rem; }
  .brettbereich { gap: var(--raum-2); }
}
@media (max-height: 620px) {
  :root { --kachel-max: 2.3rem; }
  .taste { height: clamp(1.85rem, 5.8vw, 2.15rem); }
  .kopf__innen { padding-block: 2px; }
  .marke__wort { font-size: 1rem; }
}

/* Der engste Fall ueberhaupt: 320x568 (iPhone SE von 2016) mit acht
   Buchstaben. Dort ist die Kachelgroesse ohnehin von der BREITE begrenzt
   (320px / 8 Spalten), an ihr laesst sich nichts mehr sparen - also wird
   die Tastatur flacher und der Partiekopf auf das Noetigste gekuerzt. */
@media (max-height: 580px) {
  .taste { height: clamp(1.7rem, 5.4vw, 1.95rem); }
  .partie__kopf { gap: 2px; }
  .partie__titel { font-size: 1rem; }
  .partie__fortschritt { font-size: .74rem; }
  .tafel__aktionen .knopf { padding-block: .22rem; font-size: .72rem; }
  .brettbereich { gap: var(--raum-1); }
}