/* Rahmen des Tagesspiels: Grundlagen für `tagesspiel.css`.
 *
 * `tagesspiel.css` ist aus The Crew und aus der Familien-App **wortgleich**
 * übernommen. Das heißt: es bringt seine eigenen Stile mit und erwartet die
 * Grundlagen aus einer anderen Datei - 21 CSS-Variablen und gut zwanzig
 * Basisklassen (`.rangliste`, `.knopf`, `.chip`, `.feldgruppe`, `.mono`, …).
 * Diese Datei liefert genau die, nichts sonst. Wer eine Klasse hier sucht und
 * sie nicht findet, hat sie entweder erfunden oder sie gehört nach
 * `tagesspiel.css`.
 *
 * **Zwei Regeln für beide Hälften.** Erstens: hell und dunkel sind hier
 * gleichwertig - die Variablen stehen zweimal, in `@media (prefers-color-scheme)`
 * und in `:root`, und die dunkle Fassung gewinnt in einem Browser mit
 * dunkler Einstellung. Zweitens: der Akzent kommt aus `--akzent` und hat
 * genau einen Wert. In der Familien-App sind es neun, weil dort neun
 * Menschen ihre Lieblingsfarbe wählen; hier spielt niemand eine Farbe ein.
 *
 * Der Name ist "Rahmen", weil `tagesspiel.css` das Wort im Kopfkommentar
 * selbst benutzt und es dort die Datei meint, aus der die Grundlagen kommen.
 */

/* ============================ Farben und Maße ============================ */

:root {
  color-scheme: light dark;

  /* Grundflächen. `--papier` ist die Seite, `--papier-2` die Karte darauf. */
  --papier: #EDF0F5;
  --papier-2: #FFFFFF;

  /* Text. `--tinte` voll, `--tinte-2` die zweite Stufe (Hinweise, Labels). */
  --tinte: #14171C;
  --tinte-2: #5A6472;

  /* Der Akzent und seine weiche Form. `--auf-akzent` ist die Schriftfarbe
     *auf* dem Akzent - ohne sie wäre ein Knopf bei hellem Akzent unlesbar. */
  --akzent: #0E5A55;
  --akzent-weich: #E2EFED;
  --auf-akzent: #FFFFFF;

  /* Linien und Flächen mit Durchsicht. `--glas` ist die Kartenfläche, die
     auf dem Papier liegt; auf dunklem Grund sieht dieselbe Fläche aus, weil
     sie sich an `--papier` statt an eine feste Farbe hält. */
  --linie: rgba(20, 23, 28, .10);
  --glas: rgba(255, 255, 255, .72);
  --glas-linie: rgba(255, 255, 255, .60);

  /* Die drei Bedeutungstöne, je mit weicher Form. Vier von sechs Spielen
     benutzen keine, aber `tagesspiel.css` setzt sie in den Marken "richtig",
     "falsch" und im Fehlerfall. */
  --gut: #0E7A4F;
  --gut-weich: #E2F3EB;
  --krit: #B3261E;
  --krit-weich: #FBE6E4;
  --warn: #8A5A00;
  --warn-weich: #FDF0D9;

  /* Maße. `--tastenmass` ist die Höhe eines Knopfes - einmal gesetzt, damit
     ein zweiter Knopf daneben nicht zwei Millimeter niedriger sitzt. */
  --radius: 14px;
  --radius-klein: 9px;
  --radius-voll: 999px;
  --tastenmass: 44px;

  /* Schriften. `--display` ist die Anzeige, `--mono` für Zahlen: Uhrzeiten
     und Punktestände stehen in Tabellenspalten und dürfen nicht springen. */
  --schrift: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0B0D12;
    --papier-2: #14181F;

    --tinte: #ECEEF2;
    --tinte-2: #99A3B2;

    --akzent: #4FB3A9;
    --akzent-weich: #16302E;
    --auf-akzent: #06100F;

    --linie: rgba(236, 238, 242, .14);
    --glas: rgba(28, 33, 42, .72);
    --glas-linie: rgba(236, 238, 242, .10);

    --gut: #5CC79A;
    --gut-weich: #123028;
    --krit: #F2887F;
    --krit-weich: #3A1D1B;
    --warn: #E3B25C;
    --warn-weich: #362A13;
  }
}

/* ============================== Grundlagen ============================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papier);
  color: var(--tinte);
  font: 400 16px/1.5 var(--schrift);
  /* Der Akzent bleibt auch dann derselbe, wenn ein Element statt der
     Variablen eine eigene Farbe setzt - deshalb die kurze Liste hier. */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 0;
}

h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); }
h2 { font-size: clamp(1.2rem, 3.5vw, 1.5rem); }

p { margin: 0; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Zahlen in Spalten: gleiche Ziffernbreite, sonst zappelt die Spalte. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Kein Fokusrahmen-Sprung - nur für Tastaturbedienung sichtbar. */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--akzent);
  color: var(--auf-akzent);
  border-radius: 0 0 var(--radius-klein) 0;
}
.skip-link:focus { left: 0; }

/* ================================= Kopf ================================= */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--glas);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--linie);
  /* Der sichere Bereich für die Kerbe, sonst klebt die Kopfzeile unter dem
     Notch am oberen Rand des Geräts. */
  padding-top: env(safe-area-inset-top, 0px);
}

.kopf-innen {
  max-width: 780px;
  margin: 0 auto;
  min-height: calc(var(--tastenmass) + 14px);
  padding: 7px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--tinte);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
}

.marke-zeichen { display: inline-flex; color: var(--akzent); }
.zeichen-svg { width: 22px; height: 22px; display: block; }

.kopf-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kopf-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

/* Der Kreis steht in der Kopfzeile - die Herkunftstrennung an ihrer
 * deutlichsten Stelle: hier steht nie ein Name des anderen Kreises. */
.kreis-chip {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius-voll);
  padding: 3px 9px;
}

.textlink {
  color: var(--tinte-2);
  font-size: .86rem;
  text-decoration: underline;
  white-space: nowrap;
  /* Am 06.10.2026 bei 390px gemessen: 21px hoch. Die beiden Schwestern
   * geben ihren Kopfzeilen-Knoepfen `var(--tastenmass)`, diese App hat
   * dieselbe Variable gesetzt und fuer den einen Link in der Leiste
   * trotzdem nicht benutzt - der Abmelden-Link war der einzige `.textlink`,
   * also gibt es hier nichts, das die Aenderung nebenher mittrifft.
   *
   * Die Optik bleibt ein Textlink: kein Rahmen, keine Flaeche. Nur die
   * Fingerflaeche waechst auf dieselben 44px wie jeder andere Knopf. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tastenmass);
  padding-inline: 8px;
}

/* =============================== Inhalt =============================== */

.inhalt {
  max-width: 780px;
  margin: 0 auto;
  padding: 26px 18px calc(48px + env(safe-area-inset-bottom, 0px));
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
}

.seite-kopf { margin-bottom: 22px; }
.seite-lead { margin-top: 6px; color: var(--tinte-2); max-width: 56ch; }

.abschnitt { margin-bottom: 28px; }
.abschnitt:last-child { margin-bottom: 0; }

.abschnitt-titel { margin-bottom: 12px; }

.brief-abschnitt-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.brief-abschnitt-kopf .abschnitt-titel { margin-bottom: 0; }
.brief-mehr { color: var(--tinte-2); font-size: .84rem; }

.hinweistext {
  color: var(--tinte-2);
  font-size: .9rem;
  margin-top: 10px;
}

.leerhinweis {
  color: var(--tinte-2);
  background: var(--glas);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 18px;
}

/* ============================== Knöpfe =============================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tastenmass);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-voll);
  background: var(--akzent);
  color: var(--auf-akzent);
  font: 600 1rem/1 var(--schrift);
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease;
}
.knopf:hover { filter: brightness(1.06); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: .5; cursor: default; transform: none; }

.knopf-zweit {
  background: transparent;
  color: var(--tinte);
  border-color: var(--linie);
}

/* =============================== Chips =============================== */

.chip {
  display: inline-flex;
  align-items: center;
  font-size: .78rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--radius-voll);
  background: var(--papier-2);
  border: 1px solid var(--linie);
  color: var(--tinte-2);
}

.chip-hinweis { background: var(--akzent-weich); color: var(--akzent); border-color: transparent; }
.chip-gut { background: var(--gut-weich); color: var(--gut); border-color: transparent; }
.chip-krit { background: var(--krit-weich); color: var(--krit); border-color: transparent; }

/* ============================ Formularfelder ============================= */

.feldgruppe { display: flex; flex-direction: column; gap: 6px; }
.feldgruppe-weit { grid-column: 1 / -1; }

.feld-label {
  font-size: .82rem;
  color: var(--tinte-2);
  letter-spacing: .01em;
}

.feld, .feld input, input.feld, textarea.feld, select.feld {
  width: 100%;
  min-height: var(--tastenmass);
  padding: 10px 13px;
  border-radius: var(--radius-klein);
  border: 1px solid var(--linie);
  background: var(--papier-2);
  color: var(--tinte);
  font: 400 1rem/1.3 var(--schrift);
}

textarea.feld { min-height: 88px; resize: vertical; }

/* ============================== Toast ================================= */

.toast-bereich {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.toast {
  max-width: 34em;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--papier-2);
  border: 1px solid var(--linie);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  color: var(--tinte);
  font-size: .92rem;
  animation: ts-ein .18s ease;
}

.toast-fehler {
  background: var(--krit-weich);
  border-color: transparent;
  color: var(--krit);
}

@keyframes ts-ein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}