/* Mobile-first; am Desktop eine zentrierte Spalte. Helles und dunkles
   Erscheinungsbild folgen der Systemeinstellung, es gibt keinen Umschalter. */

/* Reserviert die Scrollbar-Spalte immer, statt sie nur bei Bedarf einzublenden:
   Sonst springt der Inhalt beim Wechsel zu einer laengeren Ansicht (etwa
   Lernfortschritt) seitlich, weil der verfuegbare Platz schrumpft. */
html {
  scrollbar-gutter: stable;
}

:root {
  --grund: #f7f7f8;
  --flaeche: #ffffff;
  --schrift: #1b1c1f;
  --schrift-leise: #5c6069;
  --rand: #d6d8dd;
  --akzent: #1f5fa8;
  --akzent-schrift: #ffffff;
  --richtig: #1b6b3a;
  --richtig-grund: #e3f3e9;
  --falsch: #a32020;
  --falsch-grund: #fbe6e6;
  --beruehrziel: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #15161a;
    --flaeche: #1f2126;
    --schrift: #eceef2;
    --schrift-leise: #a2a7b2;
    --rand: #383b43;
    --akzent: #6ea8f0;
    --akzent-schrift: #10131a;
    --richtig: #7bd39c;
    --richtig-grund: #17301f;
    --falsch: #f08a8a;
    --falsch-grund: #331919;
  }
}

* {
  box-sizing: border-box;
}

/* Author-Regeln wie .schaltflaeche setzen display selbst und wuerden sonst
   das hidden-Attribut bei gleicher Spezifitaet ausser Kraft setzen. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.huelle {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom));
}

/* Ueberschrift und Lernfortschritt teilen sich eine Zeile: Die Ueberschrift
   ist reines Branding (in der installierten PWA ohnehin doppelt vorhanden)
   und soll der Aufgabe keine eigene Zeile mehr wegnehmen (Issue #33). */
.kopf-zeile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.kopf h1 {
  flex: none;
  font-size: 1.125rem;
  margin: 0;
}

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

/* Der ganze Streifen ist ein Verweis zur Lernfortschritt-Ansicht. Rahmen und
   Pfeil signalisieren das (statt einer nackten Balkenzeile), die auf
   Mobilbreite zudem als Ganzes bequem antippbar ist, nicht nur die Prozentzahl. */
.kopf-lernfortschritt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: var(--beruehrziel);
  margin: 0;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  background: var(--flaeche);
  text-decoration: none;
  color: inherit;
}

.kopf-lernfortschritt-titel {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--schrift-leise);
}

.kopf-lernfortschritt-reihe {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.kopf-lernfortschritt .lernfortschritt-balken {
  flex: 1;
  margin: 0;
}

.kopf-lernfortschritt-zahl {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--schrift-leise);
}

.kopf-lernfortschritt-pfeil {
  flex: none;
  color: var(--schrift-leise);
  font-size: 1.125rem;
  line-height: 1;
}

.kopf-lernfortschritt.navigation-verweis--aktiv {
  border-color: var(--akzent);
}

.kopf-lernfortschritt.navigation-verweis--aktiv .kopf-lernfortschritt-titel,
.kopf-lernfortschritt.navigation-verweis--aktiv .kopf-lernfortschritt-zahl,
.kopf-lernfortschritt.navigation-verweis--aktiv .kopf-lernfortschritt-pfeil {
  color: var(--akzent);
}

/* Meistert eine Antwort eine Frage oder verliert sie ihre Meisterung, waechst
   bzw. schrumpft der Balken sichtbar und die Zeile leuchtet kurz auf (Issue
   #26). Die Farbe steht unabhaengig von reduzierter Bewegung immer statisch,
   die Animation kommt erst per @media hinzu, damit "weniger Bewegung" nicht
   "weniger Information" bedeutet. */
.kopf-lernfortschritt--aufleuchten-gewonnen {
  border-color: var(--richtig);
  background: var(--richtig-grund);
}

.kopf-lernfortschritt--aufleuchten-verloren {
  border-color: var(--falsch);
  background: var(--falsch-grund);
}

@media (prefers-reduced-motion: no-preference) {
  .kopf-lernfortschritt .lernfortschritt-balken::-webkit-progress-value {
    transition: width 0.4s ease;
  }

  .kopf-lernfortschritt .lernfortschritt-balken::-moz-progress-bar {
    transition: width 0.4s ease;
  }

  .kopf-lernfortschritt--aufleuchten-gewonnen {
    animation: kopf-lernfortschritt-aufleuchten-gewonnen 0.9s ease-out forwards;
  }

  .kopf-lernfortschritt--aufleuchten-verloren {
    animation: kopf-lernfortschritt-aufleuchten-verloren 0.9s ease-out forwards;
  }

  @keyframes kopf-lernfortschritt-aufleuchten-gewonnen {
    from {
      border-color: var(--richtig);
      background: var(--richtig-grund);
    }
    to {
      border-color: var(--rand);
      background: var(--flaeche);
    }
  }

  @keyframes kopf-lernfortschritt-aufleuchten-verloren {
    from {
      border-color: var(--falsch);
      background: var(--falsch-grund);
    }
    to {
      border-color: var(--rand);
      background: var(--flaeche);
    }
  }
}

.ist-nur-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Dezente Markierung am Navigationseintrag "Prüfung", solange ein
   Prüfungsstand gehalten wird. */
.pruefung-offen-markierung {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: 0.375rem;
  border-radius: 50%;
  background: var(--akzent);
  vertical-align: middle;
}

.herkunft {
  margin: 0;
  color: var(--schrift-leise);
  font-size: 0.8125rem;
}

.frage-kennung {
  margin: 0;
  color: var(--schrift-leise);
  font-size: 0.8125rem;
}

.frage-text {
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 0.25rem 0 1.25rem;
}

.optionen {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: var(--beruehrziel);
  padding: 0.75rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  cursor: pointer;
}

.option input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  flex: none;
  accent-color: var(--akzent);
}

.option-taste {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--rand);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: var(--schrift-leise);
}

/* Nur am Desktop sichtbar: An Beruehrgeraeten gibt es keine Zifferntasten.
   Der zugehoerige Tastaturhinweis (.hinweis-tastatur) verwendet dieselbe
   Media Query, entfernt sich dabei aber per JavaScript ganz aus dem Dokument
   statt sich nur per CSS zu verstecken (Issue #31, siehe app.js): Sonst
   bliebe der Desktop-Text auf dem Handy weiterhin im textContent lesbar. */
@media (hover: hover) and (pointer: fine) {
  .option-taste {
    display: flex;
  }
}

.option--korrekt {
  border-color: var(--richtig);
  background: var(--richtig-grund);
}

.option--falsch-gewaehlt {
  border-color: var(--falsch);
  background: var(--falsch-grund);
}

.option-vermerk {
  display: block;
  font-size: 0.8125rem;
  color: var(--schrift-leise);
}

.hinweis {
  margin: 0 0 1rem;
  color: var(--schrift-leise);
  font-size: 0.8125rem;
}

.schaltflaeche {
  /* Auch Verweise treten als Schaltflaeche auf; deshalb Flexbox statt
     text-align, damit die Beschriftung in beiden Faellen mittig sitzt. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--beruehrziel);
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--flaeche);
  color: inherit;
  border-color: var(--rand);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.schaltflaeche--haupt {
  background: var(--akzent);
  color: var(--akzent-schrift);
  border-color: transparent;
}

.schaltflaeche[disabled] {
  opacity: 0.5;
  cursor: default;
}

.rueckmeldung {
  margin-top: 1.5rem;
}

.rueckmeldung-urteil {
  margin: 0 0 1rem;
  font-weight: 600;
}

.rueckmeldung--richtig .rueckmeldung-urteil {
  color: var(--richtig);
}

.rueckmeldung--falsch .rueckmeldung-urteil {
  color: var(--falsch);
}

.meldung {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--rand);
  background: var(--flaeche);
}

.meldung--fehler {
  border-color: var(--falsch);
  background: var(--falsch-grund);
  color: var(--falsch);
}

.navigation {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}

.navigation a {
  flex: 1;
  min-height: var(--beruehrziel);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  background: var(--flaeche);
  color: var(--schrift-leise);
  text-decoration: none;
  font-size: 0.9375rem;
}

/* Als ".navigation a.navigation-verweis--aktiv" statt nur
   ".navigation-verweis--aktiv": Die hoehere Spezifitaet ist noetig, damit die
   Regel die Randfarbe von ".navigation a" tatsaechlich uebersteuert. */
.navigation a.navigation-verweis--aktiv {
  border-color: var(--akzent);
  color: var(--akzent);
  font-weight: 600;
}

.ansicht h2 {
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
}

.ansicht h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
}

.lernfortschritt-balken {
  width: 100%;
  height: 0.5rem;
  margin: 0.5rem 0;
  border: none;
  border-radius: 0.25rem;
  background: var(--rand);
  accent-color: var(--akzent);
}

.lernfortschritt-balken::-webkit-progress-bar {
  background: var(--rand);
  border-radius: 0.25rem;
}

.lernfortschritt-balken::-webkit-progress-value {
  background: var(--akzent);
  border-radius: 0.25rem;
}

.lernfortschritt-erlaeuterung {
  margin: 0 0 1.5rem;
  color: var(--schrift-leise);
  font-size: 0.9375rem;
}

.schaltflaechen {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.schaltflaeche--gefahr {
  border-color: var(--falsch);
  color: var(--falsch);
}

/* Zurueckhaltender Textknopf statt vollbreiter Flaeche, fuer Aktionen, die
   nicht neben einer haeufigeren, bestaetigenden Aktion um Aufmerksamkeit
   konkurrieren sollen (Issue #28: "Prüfung abbrechen" unter "Antwort
   abgeben"). Behaelt die Berührziel-Mindesthoehe von .schaltflaeche. */
.schaltflaeche--text {
  width: auto;
  margin: 0 auto;
  background: transparent;
  border-color: transparent;
  font-weight: 500;
  font-size: 0.875rem;
}

/* Deutlicher Abstand plus optische Trennlinie zur laufenden Prüfung darüber,
   damit ein zu tiefer Daumen nicht von "Antwort abgeben" auf die
   unwiderrufliche Abbruch-Aktion rutscht (Issue #28). */
#pruefung-abbrechen-abschnitt {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
  text-align: center;
}

.aufschluesselung {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.aufschluesselung li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 0.75rem;
}

.aufschluesselung .lernfortschritt-balken {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0;
}

.aufschluesselung-name {
  font-size: 0.9375rem;
}

.aufschluesselung-zahl {
  color: var(--schrift-leise);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.problemfragen {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.problemfragen li {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
}

.problemfrage-eintrag {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: none;
  border: none;
  border-radius: inherit;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.problemfrage-kennung {
  display: block;
  color: var(--schrift-leise);
  font-size: 0.8125rem;
}

.problemfrage-text {
  display: block;
  font-size: 0.9375rem;
}

.meldung--hinweis {
  margin-bottom: 1.5rem;
}

.eingrenzung-auswahl {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
}

.eingrenzung-auswahl summary {
  cursor: pointer;
  font-weight: 600;
}

.eingrenzung-auswahl[open] summary {
  margin-bottom: 0.75rem;
}

/* Eine Einstellung, die man einmal pro Lerneinheit anfasst, braucht keinen
   vollbreiten Kartenblock ueber der Aufgabe: Geschlossen tritt sie nur als
   schmale Zeile auf und faellt erst beim Aufklappen auf Kartenmasse zurueck
   (Issue #33). */
.eingrenzung-auswahl--schmal {
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.eingrenzung-auswahl--schmal summary {
  min-height: var(--beruehrziel);
  display: flex;
  align-items: center;
}

.eingrenzung-auswahl--schmal[open] {
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

.eingrenzung-auswahl--schmal[open] summary {
  min-height: 0;
}

.eingrenzung-problemfragen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  font-size: 0.9375rem;
  color: var(--schrift);
}

.eingrenzung-alle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding-bottom: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--schrift);
  border-bottom: 1px solid var(--rand);
}

.eingrenzung-feld {
  margin: 0.75rem 0;
}

/* Nur die direkten Kinder: Der Baum unter #eingrenzung-baum traegt dieselbe
   Klasse, aber seine verschachtelten Kaestchen-Label sollen unberuehrt
   bleiben (Issue #29 betrifft nur die beiden <select>-Felder der
   Pruefungseinrichtung). */
.eingrenzung-feld > label {
  display: block;
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--schrift);
}

.eingrenzung-feld > select {
  display: block;
  width: 100%;
  min-height: var(--beruehrziel);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  background: var(--flaeche);
  color: inherit;
  font: inherit;
}

.eingrenzung-stufe {
  margin-bottom: 0.75rem;
}

.eingrenzung-stufe-kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.eingrenzung-stufe-kopf label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--schrift);
}

.eingrenzung-stufe-umschalten {
  width: auto;
  min-height: var(--beruehrziel);
  padding: 0 0.5rem;
  background: none;
  border: none;
  color: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.eingrenzung-lektionen {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.eingrenzung-stufe .eingrenzung-lektionen {
  padding-left: 1.75rem;
}

.eingrenzung-lektionen label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--schrift);
}

.pruefung-falsche {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pruefung-falsche li {
  padding: 0.75rem;
  background: var(--flaeche);
  border: 1px solid var(--falsch);
  border-radius: 0.5rem;
}

.pruefung-falsche .optionen {
  margin: 0.5rem 0 0;
}

.fuss {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
}