/* Aussehen der App „Fucabeln“ in zwei Fassungen: „Klar“ (hell) und „Nacht“ (dunkel). Beide haben denselben Aufbau.
   Ruhig und flach: einfarbiger Grund, feine Linien statt Schatten, eine Akzentfarbe nur für das Wichtigste.
   Zuerst fürs Handy (390 px) gebaut, am großen Bildschirm eine schmale Spalte in der Mitte.
   Alle Farben stehen oben als Variablen: einmal für „Klar“ und einmal für „Nacht“.
   Welches Design gilt, steht als data-design am <html> (zuerst vom Skript im Kopf von index.html gesetzt, später von design.js). */

/* ---------- Farben: „Klar“ (hell) ---------- */

:root {
  /* Der Grund der Seite, die Schrift und die feinen Linien. „-aussen“ ist die Fläche neben der Spalte am großen Bildschirm. */
  --grund: #ffffff;
  --grund-aussen: #f4f5f8;
  --text: #14161f;
  --leise: #6b7080;
  --linie: #e7e9ef;
  --linie-stark: #d0d4de;

  /* Die Akzentfarbe (Indigo): nur am wichtigsten Knopf, an Balken und an Verweisen wie „Ändern“. */
  --akzent: #4347e0;
  --akzent-text: #4347e0;
  --auf-akzent: #ffffff;

  /* Grün für richtig, Rot für falsch, Gelb für „fast richtig“.
     Die erste Farbe ist der Rand, „-hell“ die zarte Fläche und „-text“ die Schrift darauf. */
  --gut: #1c9a5b;
  --gut-hell: #e7f6ee;
  --gut-text: #136b40;
  --schlecht: #d03a3a;
  --schlecht-hell: #fdecec;
  --schlecht-text: #a12828;
  --fast: #c98200;
  --fast-hell: #fff5df;
  --fast-text: #8a5200;

  /* Die Rundung der Ecken und der Abstand des Inhalts zum linken und rechten Rand. */
  --ecke: 12px;
  --seite: 20px;

  /* Sagt dem Browser, ob die Seite hell oder dunkel ist: Danach richten sich Rollbalken und Tastatur. */
  color-scheme: light;
}

/* ---------- Farben: „Nacht“ (dunkel) ---------- */

/* Ganz dunkler, leicht bläulicher Grund und helle Schrift. Sonst gilt alles wie in „Klar“. */
html[data-design="dunkel"] {
  --grund: #101225;
  --grund-aussen: #0a0b18;
  --text: #eef0ff;
  --leise: #9ba1c6;
  --linie: #2a2e52;
  --linie-stark: #3d4273;

  --akzent: #5b5fee;
  --akzent-text: #9296ff;

  --gut: #2bb673;
  --gut-hell: #14301f;
  --gut-text: #9be8c0;
  --schlecht: #f06a6a;
  --schlecht-hell: #371a20;
  --schlecht-text: #ffc4c4;
  --fast: #e0a030;
  --fast-hell: #33270f;
  --fast-text: #ffd591;

  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.app {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--seite) var(--seite);
}

/* Am großen Bildschirm steht der Inhalt als Spalte in der Mitte, links und rechts von einer feinen Linie begrenzt. */
@media (min-width: 700px) {
  :root {
    --seite: 32px;
  }

  body {
    background: var(--grund-aussen);
  }

  .app {
    min-height: 100vh;
    min-height: 100dvh;
    border-right: 1px solid var(--linie);
    border-left: 1px solid var(--linie);
    background: var(--grund);
  }
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 16px;
}

/* Fufu: Die Bilder behalten immer ihre Form. Die Größe steht bei der jeweiligen Stelle. */
.fufu {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Ein gezeichnetes Symbol (Flamme, Knochen, Schloss …): nur Linien, in der Farbe der Schrift und etwa so groß wie die Schrift.
   Gezeichnet sind die Symbole am Anfang von index.html. */
.symbol {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Der Vorrat an Symbolen in index.html ist selbst nicht zu sehen. */
.symbol-vorrat {
  display: none;
}

/* ---------- Knöpfe ---------- */

/* Ein Knopf ist flach: einfarbig, mit feinem Rand rundum und kleinen Rundungen. Groß genug für den Daumen (mindestens 44 px). */
button {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
  background: var(--grund);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

button:focus-visible {
  outline: 2px solid var(--akzent-text);
  outline-offset: 2px;
}

/* Der wichtigste Knopf eines Bildschirms trägt die Akzentfarbe. Davon gibt es immer nur einen. */
.knopf-haupt {
  border-color: var(--akzent);
  background: var(--akzent);
  color: var(--auf-akzent);
}

.knopf-haupt:disabled {
  border-color: var(--linie);
  background: var(--linie);
  color: var(--leise);
}

/* Ein Verweis ist ein Knopf, der wie ein Stück Text in der Akzentfarbe aussieht: „Ändern“, „Fertig“, „Trotzdem öffnen“. */
.verweis {
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--akzent-text);
  font-size: 15px;
}

/* Ein Knopf, der nur ein Symbol zeigt: der Pfeil zurück ins Menü und das Kreuz zum Abbrechen. */
.knopf-symbol {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.knopf-symbol .symbol {
  width: 22px;
  height: 22px;
}

/* ---------- Der Kopf eines Bildschirms ---------- */

/* Links der Pfeil zurück ins Menü, daneben die Überschrift. Darunter läuft eine feine Linie über die ganze Breite.
   Beim Rollen bleibt der Kopf oben stehen: So ist der Weg zurück immer erreichbar. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 2px;
  align-items: center;
  min-height: 64px;
  margin: 0 calc(-1 * var(--seite));
  /* Links etwas weniger Abstand: Der Pfeil sitzt in der Mitte seines Knopfs und steht so bündig mit dem Inhalt. */
  padding: 8px var(--seite) 8px calc(var(--seite) - 12px);
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}

.kopf h1 {
  flex: 1;
  min-width: 0;
}

/* Auf dem Lektionen-Bildschirm schaut rechts im Kopf Fufu zu. */
.fufu-kopf {
  width: 68px;
  height: 68px;
}

/* ---------- Bildschirme mit Knöpfen unten ---------- */

/* Diese Bildschirme füllen die Höhe des Handys: der Inhalt oben, die Knöpfe unten in Daumennähe. */
.bildschirm-willkommen,
.bildschirm-laden,
.bildschirm-runde,
.bildschirm-auswertung {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--seite));
  min-height: calc(100dvh - var(--seite));
}

/* An einem sehr hohen Bildschirm wäre die volle Höhe zu viel: Die Knöpfe blieben zu weit vom Inhalt weg. */
@media (min-width: 700px) {
  .bildschirm-willkommen,
  .bildschirm-laden,
  .bildschirm-runde,
  .bildschirm-auswertung {
    min-height: min(100dvh - var(--seite), 880px);
  }
}

/* Der untere Bereich mit den großen Knöpfen. Freier Platz liegt darüber. */
.aufgabe-unten {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

.aufgabe-unten button {
  min-height: 52px;
}

/* ---------- Kennzahlen und Balken ---------- */

/* Kennzahlen: Kacheln in einer Reihe, alle gleich breit und gleich hoch, zusammen in einem feinen Rahmen.
   In jeder steht oben ein Symbol mit einer Zahl und darunter, was sie zählt. */
.kennzahlen {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin-top: 20px;
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
}

.kennzahl {
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: center;
  margin: 0;
  padding: 14px 2px;
  text-align: center;
}

/* Zwischen zwei Kacheln steht eine feine Linie. */
.kennzahl + .kennzahl {
  border-left: 1px solid var(--linie);
}

.kennzahl-wert {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.kennzahl .symbol {
  width: 18px;
  height: 18px;
  color: var(--akzent-text);
}

.kennzahl-text {
  color: var(--leise);
  font-size: 13px;
  line-height: 1.3;
}

/* Am sehr schmalen Handy ist die Schrift etwas kleiner, damit „von 157 gelernt“ in eine Zeile passt. */
@media (max-width: 359px) {
  .kennzahl-text {
    font-size: 12px;
  }
}

/* Grün ist, was geschafft ist: das erreichte Tagesziel und die Zahl, wenn alle Vokabeln gelernt sind. */
.geschafft {
  color: var(--gut-text);
}

/* Ein feiner Balken zeigt, wie viel schon geschafft ist: von einer Lektion oder vom Tagesziel. */
.balken {
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--linie);
}

.balken-wert {
  height: 100%;
  border-radius: 999px;
  background: var(--akzent);
}

.fehlermeldung {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--schlecht);
  border-radius: var(--ecke);
  background: var(--schlecht-hell);
  color: var(--schlecht-text);
  font-size: 15px;
}

/* ---------- Willkommensmenü ---------- */

/* Die Begrüßung: oben links der Name der App, in der Mitte Fufu und darunter ihr Gruß als Text.
   Eine feine Linie über die ganze Breite trennt sie vom Rest. */
.willkommen-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 calc(-1 * var(--seite));
  padding: 0 var(--seite) 24px;
  border-bottom: 1px solid var(--linie);
  text-align: center;
}

.app-name {
  align-self: flex-start;
  padding: 20px 0 8px;
  letter-spacing: -0.2px;
}

/* Fufu im Menü: so groß, wie das Handy hoch ist, aber nie winzig und nie riesig. */
.fufu-gross {
  height: clamp(110px, 20vh, 176px);
}

/* Der Gruß unter Fufu: ein fettes Wort in einer eigenen Zeile, darunter ein kurzer Satz.
   Genauso sieht die Meldung aus, die nach verpassten Tagen an seiner Stelle steht. */
.gruss {
  max-width: 100%;
  margin: 14px 0 0;
  color: var(--leise);
}

.gruss strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.25;
}

/* Das Tagesziel: links die Überschrift, rechts die Zahl, darunter der Balken. */
.ziel {
  margin-top: 24px;
}

.ziel-kopf {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.ziel-kopf h2 {
  font-size: 15px;
}

.ziel-zahl {
  color: var(--leise);
  font-size: 15px;
}

.balken-tagesziel {
  height: 4px;
  margin-top: 10px;
}

/* Ist das Tagesziel erreicht, wird sein Balken grün. */
.balken-tagesziel[data-erreicht="ja"] .balken-wert {
  background: var(--gut);
}

/* Die drei kleineren Knöpfe des Menüs stehen in einer Reihe. In jedem steht oben ein Symbol und darunter ein kurzes Wort. */
.menue-neben {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.menue-neben button {
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  min-height: 64px;
  padding: 8px 2px;
  font-size: 13px;
  line-height: 1.2;
}

.menue-neben .symbol {
  width: 20px;
  height: 20px;
  color: var(--leise);
}

/* Am sehr schmalen Handy ist die Schrift etwas kleiner, damit „Einstellungen“ in seinen Knopf passt. */
@media (max-width: 359px) {
  .menue-neben {
    gap: 6px;
  }

  .menue-neben button {
    font-size: 12px;
  }
}

/* ---------- Eine Wahl: Gruppe von Knöpfen, von denen einer gewählt ist ---------- */

.wahl {
  display: grid;
  gap: 8px;
}

.wahl-modus {
  grid-template-columns: repeat(4, 1fr);
}

.wahl-richtung,
.wahl-drei {
  grid-template-columns: repeat(3, 1fr);
}

.wahl-zwei {
  grid-template-columns: repeat(2, 1fr);
}

/* „Automatisch“ ist ein langes Wort: Sein Knopf ist etwas breiter als die beiden anderen. */
.wahl-design {
  grid-template-columns: 4fr 3fr 3fr;
}

.wahl button {
  padding: 4px 2px;
  color: var(--leise);
  font-size: 14px;
  line-height: 1.25;
}

/* „Spanisch“ und „→ Deutsch“ bleiben je ein Stück: Umgebrochen wird nur dazwischen. */
.wahl button span {
  white-space: nowrap;
}

/* Der gewählte Knopf hat Rand und Schrift in der Akzentfarbe.
   Die Linie nach innen macht den Rand doppelt so stark, ohne dass der Knopf größer wird. */
.wahl button[aria-pressed="true"] {
  border-color: var(--akzent-text);
  box-shadow: inset 0 0 0 1px var(--akzent-text);
  color: var(--akzent-text);
}

/* Am sehr schmalen Handy passen weniger Knöpfe nebeneinander. */
@media (max-width: 359px) {
  .wahl-modus {
    grid-template-columns: 1fr 1fr;
  }

  .wahl-richtung,
  .wahl-design {
    grid-template-columns: 1fr;
  }
}

/* ---------- Lernart und Richtung auf dem Lektionen-Bildschirm ---------- */

/* Ein Kasten mit einer Zeile: links steht, wie gerade gelernt wird, rechts „Ändern“.
   Aufgeklappt stehen darunter die beiden Gruppen von Knöpfen. */
.wahl-kasten {
  margin-top: 16px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
}

.wahl-zeile {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.wahl-zeile-text {
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

/* Die kleine Überschrift „So lernst du“ steht in einer eigenen Zeile über der Wahl. */
.wahl-zeile-titel {
  display: block;
  color: var(--leise);
  font-size: 13px;
  font-weight: 400;
}

.wahl-auswahl {
  padding: 4px 4px 8px 0;
}

.wahl-titel {
  margin: 12px 0 8px;
  color: var(--leise);
  font-size: 13px;
}

/* ---------- Lektionen ---------- */

/* Die Lektionen stehen untereinander wie Stationen eines Wegs, getrennt durch feine Linien.
   Jede Zeile: links eine runde Marke, in der Mitte Titel, Zahlen und Balken, rechts der Knopf. */
.lektionen {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.lektion {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  padding: 16px 0;
}

.lektion + .lektion {
  border-top: 1px solid var(--linie);
}

/* Die Marke: die Nummer der Lektion (frei), ein Haken (fertig) oder ein Schloss (gesperrt). */
.lektion-marke {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--akzent-text);
  border-radius: 999px;
  color: var(--akzent-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.lektion-marke .symbol {
  width: 16px;
  height: 16px;
}

.lektion[data-status="fertig"] .lektion-marke {
  border-color: var(--gut);
  background: var(--gut);
  color: var(--auf-akzent);
}

.lektion[data-status="gesperrt"] .lektion-marke {
  border: 1px solid var(--linie-stark);
  color: var(--leise);
}

.lektion-titel {
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Eine gesperrte Lektion ist blasser als die anderen. Sie bleibt aber gut lesbar. */
.lektion[data-status="gesperrt"] .lektion-titel {
  color: var(--leise);
}

/* Die Zahlen einer Lektion als eine Zeile Text: „12 Vokabeln · 7 dran · 5 gelernt“. */
.lektion-zahlen {
  margin: 2px 0 0;
  color: var(--leise);
  font-size: 13px;
}

/* „Lernen“ und „Üben“: kleiner als die großen Knöpfe unten, aber groß genug für den Daumen. */
.lektion-knopf {
  min-height: 44px;
  font-size: 15px;
}

/* „Trotzdem öffnen“ ist etwas kleiner geschrieben. So bleibt daneben mehr Platz für den Titel der Lektion. */
.lektion .verweis {
  padding: 0;
  font-size: 14px;
}

/* Am schmalen Handy passen die Zahlen neben dem Knopf nicht mehr in eine Zeile: Der Knopf rutscht unter den Text. */
@media (max-width: 379px) {
  .lektion {
    grid-template-columns: 32px minmax(0, 1fr);
    row-gap: 8px;
  }

  .lektion button {
    grid-column: 2;
    justify-self: start;
  }
}

/* ---------- Einstellungen ---------- */

/* Jede Einstellung ist ein Abschnitt: Überschrift, ein kurzer Satz und die Knöpfe zur Wahl. Dazwischen feine Linien. */
.einstellung {
  display: grid;
  gap: 4px;
  padding: 20px 0;
}

.einstellung + .einstellung {
  border-top: 1px solid var(--linie);
}

.einstellung p {
  margin: 0;
  color: var(--leise);
  font-size: 14px;
}

.einstellung .wahl {
  margin-top: 10px;
}

/* ---------- Fufus Laden ---------- */

/* Die Ware: oben schläft Fufu auf ihrem Eis, darunter stehen die Überschrift, die Erklärung und der Preis. */
.ware {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding-top: 28px;
  text-align: center;
}

.fufu-ware {
  height: 132px;
  margin-bottom: 8px;
}

.ware h2 {
  font-size: 20px;
}

.ware p {
  max-width: 34em;
  margin: 0;
  color: var(--leise);
}

/* Der Preis: ein Knochen und die Zahl. */
.ware .ware-preis {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  color: var(--text);
  font-size: 17px;
}

.ware-preis .symbol {
  color: var(--akzent-text);
}

/* Warum der Kauf gerade nicht geht, steht über dem Knopf. */
.ware-hinweis {
  margin: 0;
  color: var(--leise);
  font-size: 14px;
  text-align: center;
}

/* ---------- Anleitung ---------- */

/* Die Überschrift über jeder der beiden Listen. */
.abschnitt {
  margin: 24px 0 4px;
  color: var(--leise);
  font-size: 14px;
  font-weight: 600;
}

/* Die Punkte der Anleitung untereinander, getrennt durch feine Linien. Vor jedem Punkt steht ein runder Kreis. */
.schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.schritte li {
  position: relative;
  padding: 14px 0 14px 46px;
  counter-increment: schritt;
}

.schritte li + li {
  border-top: 1px solid var(--linie);
}

/* Der Kreis vor einem Punkt. In der ersten Liste steht darin die Nummer des Schritts, in der zweiten ein gezeichnetes Symbol. */
.schritte-nummern li::before,
.schritt-symbol {
  position: absolute;
  top: 14px;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
}

.schritte-nummern li::before {
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  content: counter(schritt);
}

.schritt-symbol {
  padding: 6px;
  color: var(--akzent-text);
}

.schritte h3 {
  font-size: 16px;
  font-weight: 600;
}

.schritte p {
  margin: 2px 0 0;
  color: var(--leise);
  font-size: 15px;
}

/* ---------- Runde ---------- */

/* Oben: links das Kreuz zum Abbrechen, daneben der schmale Balken für den Fortschritt der Runde. */
.runde-kopf {
  display: flex;
  gap: 4px;
  align-items: center;
  min-height: 56px;
  /* Das Kreuz sitzt in der Mitte seines Knopfs. So steht es bündig mit dem Inhalt darunter. */
  margin-left: -12px;
}

.fortschritt {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--linie);
}

.fortschritt-balken {
  width: 0;
  /* Ein kleiner Anfang ist immer zu sehen. So erkennt man den Balken auch bei der ersten Aufgabe. */
  min-width: 8px;
  height: 100%;
  border-radius: 999px;
  background: var(--akzent);
  transition: width 0.25s ease;
}

/* Die Aufgabe füllt den Bildschirm: oben die Frage, darunter die Antworten, ganz unten Rückmeldung und Knöpfe. */
.aufgabe-platz,
.aufgabe,
.aufgabe-rumpf {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* Die Frage steht groß und allein auf dem Grund der Seite, mit viel Luft darum. */
.aufgabe-kopf {
  padding: 40px 0 36px;
  text-align: center;
}

.anweisung {
  margin: 0 0 8px;
  color: var(--leise);
  font-size: 15px;
}

.frage {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}

/* Rückseite der Karteikarte: die Lösung, durch eine feine Linie von der Frage getrennt. */
.antwort {
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid var(--linie);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

/* „Nicht gewusst“ und „Gewusst“ stehen nebeneinander: zarte Fläche mit farbigem Rand. */
.knopf-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.knopf-paar button {
  padding: 0 4px;
}

.knopf-richtig {
  border-color: var(--gut);
  background: var(--gut-hell);
  color: var(--gut-text);
}

.knopf-falsch {
  border-color: var(--schlecht);
  background: var(--schlecht-hell);
  color: var(--schlecht-text);
}

/* Auswahl: die Antworten untereinander. Der Text steht links, nach der Antwort rechts ein Haken oder ein Kreuz. */
.optionen {
  display: grid;
  gap: 10px;
}

.option {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 10px 16px;
  text-align: left;
  overflow-wrap: anywhere;
}

.option[data-status="richtig"] {
  border-color: var(--gut);
  background: var(--gut-hell);
  color: var(--gut-text);
}

.option[data-status="falsch"] {
  border-color: var(--schlecht);
  background: var(--schlecht-hell);
  color: var(--schlecht-text);
}

/* Rückmeldung nach einer Antwort: links Fufus Kopf, daneben ein Wort und die Lösung. Zarte Fläche mit farbigem Rand. */
.meldung {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 10px 14px 10px 10px;
  border: 1px solid transparent;
  border-radius: var(--ecke);
  overflow-wrap: anywhere;
}

.meldung[data-status="richtig"] {
  border-color: var(--gut);
  background: var(--gut-hell);
  color: var(--gut-text);
}

.meldung[data-status="fast"] {
  border-color: var(--fast);
  background: var(--fast-hell);
  color: var(--fast-text);
}

.meldung[data-status="falsch"] {
  border-color: var(--schlecht);
  background: var(--schlecht-hell);
  color: var(--schlecht-text);
}

/* Fufus Kopf in der Rückmeldung: klein, am linken Rand. Die Größe ist fest, damit nichts springt. */
.fufu-klein {
  flex: none;
  width: 60px;
  height: 60px;
}

.meldung-worte {
  min-width: 0;
}

.meldung-text {
  display: block;
  font-size: 14px;
}

/* Steht das Wort allein da („Richtig!“), ist es so groß wie sonst die Lösung. */
.meldung-text:only-child,
.meldung-loesung {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

/* Eintippen. */
.eingabe-bereich {
  display: grid;
  gap: 12px;
}

.eingabe {
  width: 100%;
  min-height: 54px;
  padding: 8px 16px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--ecke);
  background: var(--grund);
  color: var(--text);
  font: inherit;
  font-size: 18px;
}

.eingabe::placeholder {
  color: var(--leise);
}

/* Im Feld mit der Schreibmarke ist der Rand in der Akzentfarbe und doppelt so stark. */
.eingabe:focus {
  border-color: var(--akzent-text);
  outline: 1px solid var(--akzent-text);
}

/* Nach dem Prüfen ist das Feld gesperrt und tritt zurück. */
.eingabe:read-only {
  border-color: var(--linie);
  outline: none;
  color: var(--leise);
}

/* Der Tipp nach drei Fehlversuchen: die Anfangsbuchstaben der Lösung in einem gestrichelten Rahmen. */
.hilfe {
  margin: 0;
  padding: 12px 16px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--ecke);
  color: var(--leise);
  letter-spacing: 3px;
  text-align: center;
}

.sonderzeichen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Fünf Tasten passen in eine Reihe, auch am schmalen Handy. */
.zeichen {
  flex: 0 0 calc(20% - 7px);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
}

/* ---------- Auswertung ---------- */

/* Die Feier: Fufu in der Mitte, darunter die Überschrift und ein kurzer Satz.
   Eine feine Linie über die ganze Breite trennt sie vom Ergebnis. */
.feier {
  position: relative;
  display: grid;
  justify-items: center;
  margin: 0 calc(-1 * var(--seite));
  padding: 24px var(--seite);
  overflow: hidden;
  border-bottom: 1px solid var(--linie);
  text-align: center;
}

/* Der Platz für Fufu ist fest. So springt nichts, wenn das Bild wechselt. */
.feier-bild {
  position: relative;
  height: clamp(104px, 16vh, 140px);
}

.fufu-feier {
  height: 100%;
}

.feier h1 {
  margin-top: 12px;
  font-size: 22px;
}

.feier-text {
  margin: 2px 0 0;
  color: var(--leise);
}

/* Das Konfetti liegt im oberen Teil der Feier, links und rechts neben Fufu. Hinter der Überschrift liegt keines. */
.konfetti {
  position: absolute;
  top: 16px;
  right: 0;
  left: 0;
  height: clamp(104px, 16vh, 140px);
  pointer-events: none;
}

/* Ein Schnipsel ist klein. Er fällt kurz von oben auf seinen Platz und bleibt dort liegen. Platz und Drehung setzt konfetti.js. */
.schnipsel {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  transform: rotate(var(--drehung));
  animation: falle 0.6s ease-out backwards;
}

.schnipsel-farbe-0 {
  background: #f2bd3b;
}

.schnipsel-farbe-1 {
  background: var(--akzent);
}

.schnipsel-farbe-2 {
  background: #ee7fa0;
}

@keyframes falle {
  from {
    opacity: 0;
    transform: translateY(-60px) rotate(0deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--drehung));
  }
}

/* Wer am Gerät „Bewegung reduzieren“ eingestellt hat, sieht kein Konfetti. Fufu freut sich trotzdem. */
@media (prefers-reduced-motion: reduce) {
  .konfetti {
    display: none;
  }
}

/* Das Ergebnis: groß als Text, darunter eine leise Zeile. */
.ergebnis {
  display: grid;
  margin: 24px 0 0;
  text-align: center;
}

.ergebnis-zahl {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
}

.ergebnis-text {
  margin-top: 4px;
  color: var(--leise);
  font-size: 15px;
}

.bildschirm-auswertung h2 {
  margin-top: 24px;
  font-size: 15px;
}

.fehlerliste {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

/* Ein Fehler: das spanische Wort und daneben das deutsche, darunter eine feine Linie.
   Ist die Zeile zu kurz, rutscht das deutsche Wort darunter. */
.fehler {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.fehler-es {
  font-weight: 600;
}

.fehler-de {
  color: var(--leise);
}