/* =====================================================================
   Prüfungssimulation – Auswahl, Lauf, Nachbewertung, Auswertung
   ---------------------------------------------------------------------
   Ausschließlich Token aus tokens.css: keine eigenen Farben, Abstände oder
   Schriftgrößen. Dadurch tragen alle drei Themes, `forced-colors` und
   `prefers-reduced-motion` ohne Zusatzarbeit.

   Grundsatz für Zustände: Bedeutung immer über Symbol UND Text UND Farbe
   (WCAG 1.4.1). Klickflächen nie unter --klickflaeche-min (WCAG 2.5.8).
   ===================================================================== */

/* =====================================================================
   Auswahlansicht
   ===================================================================== */

.pruefungswahl__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

/* ── Profilwahl ────────────────────────────────────────────────────── */

.profilwahl,
.zeitwahl,
.freiwerte {
  margin: 0;
  padding: 0;
  border: 0;
}

.profilwahl__titel,
.zeitwahl__titel,
.freiwerte__titel {
  padding: 0;
  margin-bottom: var(--abstand-s);
  font-family: var(--schrift-familie-ueberschrift);
  font-size: var(--schrift-h3);
  font-weight: var(--schriftstaerke-mittel);
  line-height: var(--zeilenhoehe-eng);
}

.profilwahl__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.profilwahl__option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--abstand-2xs) var(--abstand-s);
  align-items: center;
  padding: var(--abstand-xs) var(--abstand-s);
  background-color: var(--farbe-flaeche);
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
}

.profilwahl__option:hover:has(.profilwahl__feld:enabled) {
  border-color: var(--farbe-akzent);
}

.profilwahl__option:has(.profilwahl__feld:checked) {
  border-color: var(--farbe-akzent);
  background-color: var(--farbe-akzent-leise);
}

.profilwahl__feld,
.zeitwahl__feld,
.kapitelwahl-pruefung__feld,
.nachbewertung__feld {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  accent-color: var(--farbe-akzent);
}

.profilwahl__beschriftung {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
  min-height: var(--klickflaeche-min);
  padding: var(--abstand-2xs) 0;
  justify-content: center;
  cursor: pointer;
}

.profilwahl__name {
  font-size: var(--schrift-gross);
  font-weight: var(--schriftstaerke-fett);
}

.profilwahl__fakten {
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-mittel);
}

.profilwahl__erklaerung {
  grid-column: 2;
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* ── Frei einstellbare Werte ───────────────────────────────────────── */

/* `min(14rem, 100%)`: Bei 320 CSS-Pixeln (WCAG 1.4.10) ist die feste
   Mindestbreite breiter als der Kasten und schöbe das Raster hinaus. */
.freiwerte__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--abstand-m);
}

.freiwert {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
}

.freiwert__beschriftung {
  font-weight: var(--schriftstaerke-mittel);
}

.freiwert__feld {
  min-height: var(--klickflaeche-min);
  padding: var(--abstand-xs) var(--abstand-s);
  background-color: var(--farbe-flaeche);
  color: var(--farbe-text);
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
  font: inherit;
}

.freiwert__hinweis,
.freiwerte__hinweis,
.zeitwahl__erklaerung,
.zeitwahl__folge,
.kapitelwahl-pruefung__hinweis {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* Fehlerhafte Eingabe: Farbe allein genügt nicht (WCAG 1.4.1), deshalb
   zusätzlich fetter Text und ein Rahmen am Feld selbst. */
.freiwert__hinweis--fehler {
  color: var(--farbe-fehler);
  font-weight: var(--schriftstaerke-mittel);
}

.freiwert__feld[aria-invalid='true'] {
  border-color: var(--farbe-fehler);
  border-width: var(--rahmenbreite-stark);
}

.freiwerte__hinweis,
.zeitwahl__folge {
  margin-top: var(--abstand-s);
}

/* ── Zeitwahl ──────────────────────────────────────────────────────── */

.zeitwahl__erklaerung {
  margin-bottom: var(--abstand-s);
}

.zeitwahl__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.zeitwahl__option {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  padding: var(--abstand-2xs) var(--abstand-s);
  background-color: var(--farbe-flaeche);
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
}

.zeitwahl__option:has(.zeitwahl__feld:checked) {
  border-color: var(--farbe-akzent);
  background-color: var(--farbe-akzent-leise);
}

.zeitwahl__beschriftung,
.kapitelwahl-pruefung__beschriftung {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: var(--klickflaeche-min);
  padding: var(--abstand-2xs) 0;
  font-weight: var(--schriftstaerke-mittel);
  cursor: pointer;
}

/* ── Kapitel abwählen ──────────────────────────────────────────────── */

.kapitelwahl-pruefung {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
}

.kapitelwahl-pruefung__schalter {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
}

/* =====================================================================
   Prüfungslauf
   ===================================================================== */

.pruefung__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m) var(--abstand-l);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--abstand-m);
  background-color: var(--farbe-flaeche);
  border: var(--rahmenbreite) solid var(--farbe-rahmen);
  border-radius: var(--radius-m);
}

/* `min(16rem, 100%)` als Basis: Ein fester Wunsch von 16rem lässt den
   Kasten bei 320 CSS-Pixeln nicht mehr schrumpfen (WCAG 1.4.10). */
.pruefung__kopf .fortschritt {
  flex: 1 1 min(16rem, 100%);
  min-inline-size: 0;
}

.pruefung__regel {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.pruefung__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  padding-top: var(--abstand-s);
  border-top: var(--rahmenbreite) solid var(--farbe-rahmen);
}

/* Warum „Vorherige“ bzw. „Nächste Frage“ am Rand des Bogens nicht
   weiterführt. Steht unter der Knopfreihe, damit beim Blättern nichts
   nachrückt, was gerade gelesen wird. */
.pruefung__blaetterhinweis {
  margin-block-start: var(--abstand-2xs);
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* Abweichungen des Bogens von den Vorgaben, aufgelistet im Hinweiskasten.
   Dieselben Maße wie `.sicherung__verlust` – es ist dieselbe Sache: eine
   Liste im Textträger eines Hinweises. */
.pruefung__abweichungen {
  margin-block: var(--abstand-2xs);
  padding-inline-start: var(--abstand-m);
}

/* ── Restzeit ──────────────────────────────────────────────────────── */

.restzeit {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
}

.restzeit__zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
  margin: 0;
}

.restzeit__marke {
  color: var(--farbe-text-leise);
  font-weight: var(--schriftstaerke-mittel);
}

.restzeit__wert {
  font-size: var(--schrift-gross);
  font-weight: var(--schriftstaerke-fett);
  font-variant-numeric: tabular-nums;
}

.restzeit__hinweis {
  margin: 0;
  max-width: 32ch;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* Knappe Restzeit: Symbol, Wortlaut („Nur noch …“) und Farbe zugleich. */
.restzeit--knapp {
  color: var(--farbe-warnung);
}

.restzeit--knapp .restzeit__marke,
.restzeit--knapp .restzeit__wert {
  color: inherit;
}

.restzeit__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5em;
  block-size: 1.5em;
  border: var(--rahmenbreite-stark) solid currentcolor;
  border-radius: 50%;
  font-weight: var(--schriftstaerke-fett);
  line-height: 1;
}

/* ── Fragenübersicht ───────────────────────────────────────────────── */

.fragenuebersicht {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  padding-top: var(--abstand-s);
  border-top: var(--rahmenbreite) solid var(--farbe-rahmen);
}

.fragenuebersicht__bilanz {
  margin: 0;
  font-weight: var(--schriftstaerke-mittel);
}

.fragenuebersicht__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--klickflaeche-min), 1fr));
  gap: var(--abstand-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fragenuebersicht__knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-inline-size: var(--klickflaeche-min);
  min-block-size: var(--klickflaeche-min);
  padding: var(--abstand-2xs);
  background-color: var(--farbe-flaeche);
  color: var(--farbe-text);
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: var(--schrift-klein);
  line-height: 1.1;
  cursor: pointer;
}

.fragenuebersicht__knopf:hover {
  border-color: var(--farbe-akzent);
  background-color: var(--farbe-akzent-leise);
}

/* Offen: gestrichelter Rahmen und Kreis. Beantwortet: fester Rahmen und
   Haken. Der Unterschied trägt auch ohne Farbwahrnehmung (WCAG 1.4.1). */
.fragenuebersicht__knopf--offen {
  border-style: dashed;
  color: var(--farbe-text-leise);
}

.fragenuebersicht__knopf--beantwortet {
  border-color: var(--farbe-erfolg);
  color: var(--farbe-erfolg);
}

.fragenuebersicht__knopf--aktuell {
  border-width: var(--abstand-2xs);
  border-color: var(--farbe-akzent);
  font-weight: var(--schriftstaerke-fett);
}

.fragenuebersicht__marke {
  font-weight: var(--schriftstaerke-fett);
}

.fragenuebersicht__nummer {
  color: var(--farbe-text);
  font-variant-numeric: tabular-nums;
}

.fragenuebersicht__legende {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* ── Abgabe ────────────────────────────────────────────────────────── */

.abgabe {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  padding: var(--abstand-m);
  background-color: var(--farbe-flaeche-erhoben);
  border: var(--rahmenbreite-stark) solid var(--farbe-akzent);
  border-inline-start-width: var(--abstand-xs);
  border-radius: var(--radius-m);
}

.abgabe__titel {
  margin: 0;
}

.abgabe__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

/* ── Nachbewertung ─────────────────────────────────────────────────── */

.nachbewertung {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.nachbewertung__titel {
  margin: 0;
}

.nachbewertung__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
  margin: 0;
  padding-inline-start: var(--abstand-m);
}

.nachbewertung__eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.nachbewertung__frage {
  font-size: var(--schrift-gross);
  font-weight: var(--schriftstaerke-mittel);
}

.nachbewertung__nummer,
.nachbewertung__marke {
  font-weight: var(--schriftstaerke-fett);
}

.nachbewertung__wertung {
  margin: 0;
  padding: 0;
  border: 0;
}

.nachbewertung__wertungtitel {
  padding: 0;
  margin-bottom: var(--abstand-xs);
  font-weight: var(--schriftstaerke-mittel);
}

.nachbewertung__stufen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

.nachbewertung__stufe {
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
  padding: var(--abstand-2xs) var(--abstand-s);
  background-color: var(--farbe-flaeche);
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
}

.nachbewertung__stufe:has(.nachbewertung__feld:checked) {
  border-color: var(--farbe-akzent);
  background-color: var(--farbe-akzent-leise);
}

.nachbewertung__beschriftung {
  display: flex;
  align-items: center;
  min-height: var(--klickflaeche-min);
  font-weight: var(--schriftstaerke-mittel);
  cursor: pointer;
}

.nachbewertung__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

/* =====================================================================
   Auswertung
   ===================================================================== */

.pruefungsauswertung__profil {
  color: var(--farbe-text-leise);
  font-weight: var(--schriftstaerke-mittel);
}

.urteil {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  padding: var(--abstand-l);
  background-color: var(--farbe-flaeche-erhoben);
  border: var(--rahmenbreite-stark) solid currentcolor;
  border-inline-start-width: var(--abstand-s);
  border-radius: var(--radius-l);
}

.urteil--bestanden {
  color: var(--farbe-erfolg);
}

.urteil--nachpruefung {
  color: var(--farbe-warnung);
}

.urteil--nicht_bestanden {
  color: var(--farbe-fehler);
}

.urteil__zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  margin: 0;
}

.urteil__symbol {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 1.6em;
  block-size: 1.6em;
  border: var(--rahmenbreite-stark) solid currentcolor;
  border-radius: 50%;
  font-size: var(--schrift-h2);
  font-weight: var(--schriftstaerke-fett);
  line-height: 1;
}

.urteil__text {
  font-family: var(--schrift-familie-ueberschrift);
  font-size: var(--schrift-h1);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-eng);
}

.urteil__begruendung {
  color: var(--farbe-text);
  font-size: var(--schrift-gross);
}

.pruefungsauswertung__quote {
  font-size: var(--schrift-gross);
  font-weight: var(--schriftstaerke-mittel);
}

.pruefungsauswertung__zahlen {
  display: grid;
  grid-template-columns: minmax(12rem, auto) 1fr;
  gap: var(--abstand-2xs) var(--abstand-m);
  margin: 0;
}

.pruefungsauswertung__zahlen dt {
  color: var(--farbe-text-leise);
  font-weight: var(--schriftstaerke-mittel);
}

.pruefungsauswertung__zahlen dd {
  margin: 0;
}

.pruefungsauswertung__kriterien ul,
.pruefungsauswertung__fehlerliste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  margin: var(--abstand-s) 0 0;
  padding-inline-start: var(--abstand-m);
}

.pruefungsauswertung__nummer {
  font-weight: var(--schriftstaerke-fett);
}

.pruefungsauswertung__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

.pruefungsauswertung__fehler,
.pruefungsauswertung__kriterien,
.themenanalyse,
.wiederkehrend,
.verlauf {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

/* ── Vergleich mit früheren Läufen ─────────────────────────────────── */

/*
  Abgesetzt, aber nicht laut: Der Vergleich ordnet ein, er urteilt nicht.
  Deshalb ein ruhiger Streifen an der Startkante statt eines Kastens in
  Signalfarbe – das Urteil steht oben und soll die Aufmerksamkeit behalten.
*/
.laufvergleich {
  margin-block: var(--abstand-s);
  padding-inline-start: var(--abstand-s);
  border-inline-start: var(--rahmenbreite-stark) solid var(--farbe-rahmen);
}

.laufvergleich__satz {
  margin: 0;
}

.laufvergleich__vorbehalte {
  margin: var(--abstand-2xs) 0 0;
  padding-inline-start: var(--abstand-m);
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.wiederkehrend__grundlage,
.wiederkehrend__hinweis {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.wiederkehrend__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
  margin: 0;
  padding-inline-start: var(--abstand-m);
}

.wiederkehrend__bereich {
  font-weight: var(--schriftstaerke-mittel);
}

.themenanalyse__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.themenanalyse__bereich {
  margin: 0 0 var(--abstand-2xs);
  font-weight: var(--schriftstaerke-mittel);
}

/* ── Verlauf ───────────────────────────────────────────────────────── */

.verlauf__rahmen {
  /* Breite Tabellen scrollen in sich – die Seite selbst nie seitlich. */
  overflow-x: auto;
}

.verlauf__tabelle {
  inline-size: 100%;
  border-collapse: collapse;
}

.verlauf__beschriftung {
  margin-bottom: var(--abstand-xs);
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  text-align: start;
}

.verlauf__tabelle th,
.verlauf__tabelle td {
  padding: var(--abstand-xs) var(--abstand-s);
  border-bottom: var(--rahmenbreite) solid var(--farbe-rahmen);
  text-align: start;
  vertical-align: top;
}

.verlauf__tabelle th {
  font-weight: var(--schriftstaerke-fett);
  white-space: nowrap;
}

.verlauf__offen {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.verlauf__urteil--bestanden {
  color: var(--farbe-erfolg);
}

.verlauf__urteil--nachpruefung {
  color: var(--farbe-warnung);
}

.verlauf__urteil--nicht_bestanden {
  color: var(--farbe-fehler);
}

/* =====================================================================
   Erzwungene Farben
   ---------------------------------------------------------------------
   Im Windows-Kontrastdesign bestimmt das System die Palette. Die
   Zustände bleiben trotzdem unterscheidbar, weil sie an Symbol, Text und
   Rahmenart hängen – hier wird nur die Auswahlmarkierung nachgeführt.
   ===================================================================== */

@media (forced-colors: active) {
  .profilwahl__option:has(.profilwahl__feld:checked),
  .zeitwahl__option:has(.zeitwahl__feld:checked),
  .nachbewertung__stufe:has(.nachbewertung__feld:checked),
  .fragenuebersicht__knopf--aktuell {
    border-color: Highlight;
    forced-color-adjust: none;
  }
}

/* =====================================================================
   Schmale Fenster
   ===================================================================== */

@media (max-width: 40rem) {
  .pruefungsauswertung__zahlen {
    grid-template-columns: 1fr;
  }

  .pruefungsauswertung__zahlen dd {
    margin-bottom: var(--abstand-s);
  }

  .profilwahl__option {
    grid-template-columns: 1fr;
  }

  .profilwahl__erklaerung {
    grid-column: 1;
  }

  .pruefung__aktionen .knopf,
  .pruefungswahl__aktionen .knopf,
  .abgabe__aktionen .knopf,
  .pruefungsauswertung__aktionen .knopf {
    flex: 1 1 100%;
  }

  .urteil__text {
    font-size: var(--schrift-h2);
  }
}

/*
  Aufklappbare Begründung zu einer falsch beantworteten Frage.

  Zugeklappt, weil nach einem Durchgang bis zu 80 Fragen in der Liste stehen
  können. `<details>`/`<summary>` bringt Tastaturbedienung und `aria-expanded`
  von Haus aus mit – verlässlicher als eine nachgebaute Schaltfläche.
*/
.pruefungsauswertung__erklaerung {
  margin-block-start: var(--abstand-xs);
}

.pruefungsauswertung__erklaerung > summary {
  cursor: pointer;
  color: var(--farbe-akzent);
  font-weight: var(--schriftstaerke-mittel);
}

.pruefungsauswertung__erklaerung > summary:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: 2px;
}

/*
  Wartehinweis der Auswertungsphase. Er nimmt den Fokus auf, wenn die
  auslösende Schaltfläche verschwindet – sichtbar bleibt er dabei ein
  gewöhnlicher Absatz.
*/
.pruefung__warten:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: 4px;
}

/* ── Unterbrochene Simulation ────────────────────────────────────────── */

/* Kräftigerer Rahmen als die übrigen Karten: Sie steht ungefragt zwischen
   den täglichen Schaltflächen und soll als etwas anderes erkennbar sein –
   erkennbar am Rahmen UND an der Überschrift, nie an der Farbe allein. */
.unterbrochen {
  border-color: var(--farbe-rahmen-kraeftig);
}

.unterbrochen__daten {
  display: grid;
  gap: var(--abstand-xs);
  margin-block: var(--abstand-m);
}

.unterbrochen__daten > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

.unterbrochen__daten dt {
  min-inline-size: 12rem;
  color: var(--farbe-text-leise);
}

.unterbrochen__daten dd {
  margin: 0;
  font-weight: 600;
}

.unterbrochen__uhr {
  color: var(--farbe-text-leise);
  margin-block: 0 var(--abstand-m);
}

.unterbrochen__aktionen,
.unterbrochen__rueckfrage-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

.unterbrochen__rueckfrage {
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  padding: var(--abstand-m);
  margin-block: var(--abstand-m) 0;
}

.unterbrochen__rueckfrage-titel {
  margin-block: 0 var(--abstand-s);
}

.unterbrochen__rueckfrage-aktionen {
  margin-block-start: var(--abstand-m);
}
