/* Pruefungstrainer: Uebungspruefung Wirtschafts- und Sozialkunde (WiSo) */

/* Ausnahmen, die als Zahl bleiben: Rahmenbreiten (1px, 2px) sind kein
   Abstand, sondern eine Linienstaerke. Tippziele nehmen --tippziel (44 px).
   max-width: 100% ist relativ, kein festes Mass.
   820px bei .pruefung-page passt an keinen der beiden Breiten-Tokens: enger
   als --breite-inhalt (Tabellen, Raster), aber breiter als --breite-text
   (42rem, reiner Lesetext) - ein Pruefungsbogen mit Auswahllisten und
   Kaestchen braucht mehr Platz als Fliesstext, aber kein Rastermass. */

.pruefung-page {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-7);
}

/* Oben derselbe Abstand wie seitlich: Ohne Innenabstand oben sass die erste
   Aufgabe 1 px unter dem Rand des Bogens, die beiden runden Ecken lagen
   fast aufeinander (Christoph, 03.10.2026). Ein Titel als erstes Element
   (Themenrunde, eigene Pruefung) bekommt deshalb oben keinen Aussenabstand
   mehr dazu. */
.pruefung-page .page-title {
  text-align: center;
  margin: var(--space-4) 0 var(--space-2);
}

.pruefung-page > .page-title:first-child {
  margin-top: 0;
}

.pruefung-intro {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.pruefung-intro p {
  margin: 0 0 var(--space-2);
}

.pruefung-intro p:last-child {
  margin-bottom: 0;
}

.pruefung-q {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.pruefung-q.is-correct {
  border-color: var(--color-ok);
  background: var(--color-ok-flaeche);
}

.pruefung-q.is-wrong {
  border-color: var(--color-fehler);
  background: var(--color-fehler-flaeche);
}

.pruefung-q.is-teilweise {
  border-color: var(--color-warn);
  background: var(--color-warn-flaeche);
}

.pruefung-q-text {
  margin: 0 0 var(--space-3);
  font-weight: 600;
  line-height: 1.45;
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
}

.pruefung-q-body {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

/* Absatz im Fragetext: aus einer Leerzeile der Quelldatei, etwa vor dem
   Aufforderungssatz (sanitizeHtml.js, zeilenumbruecheZuAbsaetzen). */
.pruefung-absatz {
  display: block;
  height: var(--space-3);
}

.pruefung-q-body table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: 400;
}

.pruefung-q-body th,
.pruefung-q-body td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}

.pruefung-q-body thead th {
  background: var(--color-accent-15);
  font-weight: 700;
}

.pruefung-q-body svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-3) 0;
}

.pruefung-q-body p {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.pruefung-q-body p:last-child {
  margin-bottom: 0;
}

.pruefung-q-num {
  color: var(--color-accent-text);
  margin-right: var(--space-1);
}

.pruefung-opts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Jede Antwortzeile ist ein Tippziel von mindestens 44 px (vorher 32 bis
   35 px; Audit Pruefungstrainer 03.10.2026). */
.pruefung-opt {
  display: flex;
  align-items: center;
  min-height: var(--tippziel);
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.4;
}

.pruefung-opt:hover {
  background: var(--color-accent-8);
}

/* Unbeantwortete Wahlaufgabe: Nach dem Pruefen ist die richtige Antwort
   umrandet (markiereLoesung in js/pruefung.js); die Loesung steht dazu im
   Kommentar, die Farbe ist also nicht der einzige Hinweis. */
.pruefung-opt.pruefung-opt--loesung {
  border-color: var(--color-ok);
  background: var(--color-ok-flaeche);
}

.pruefung-opt input {
  flex-shrink: 0;
  margin-right: var(--space-2);
}

/* Antworttext und Kaestchentitel sind Flex-Kinder neben Optionsfeld bzw.
   Auswahlfeld: Ohne min-width: 0 haelt ein langes Wort
   ("Rechtsschutzversicherungen") seine Breite, und die Karte scrollt bei
   320 px seitlich; mit overflow-wrap darf es im Notfall brechen. */
.pruefung-opt span,
.pruefung-kasten span {
  min-width: 0;
  overflow-wrap: break-word;
}

.pruefung-comment {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.45;
  display: none;
}

.pruefung-q.evaluated .pruefung-comment {
  display: block;
}

.pruefung-comment.ok {
  background: var(--color-ok-flaeche);
  border-left: 4px solid var(--color-ok);
}

.pruefung-comment.bad {
  background: var(--color-fehler-flaeche);
  border-left: 4px solid var(--color-fehler);
}

.pruefung-comment.teils {
  background: var(--color-warn-flaeche);
  border-left: 4px solid var(--color-warn-linie);
}

/* Teilbewertung (Zuordnung, Reihenfolge): applyEvaluation schreibt je
   Kaestchen/Position ein <li class="ok"> oder <li class="bad"> in die Liste
   des Kommentars. Ohne eigene Regel sahen beide gleich aus - auf dem
   Bildschirm war nicht ablesbar, welches Kaestchen sass (Fund E). */
.pruefung-comment ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  list-style: none;
}

.pruefung-comment li {
  padding: var(--space-1) var(--space-2);
  margin: var(--space-1) 0;
  border-radius: var(--radius-sm);
}

.pruefung-comment li.ok {
  background: var(--color-ok-flaeche);
  border-left: 3px solid var(--color-ok);
}

.pruefung-comment ol.pruefung-loesung {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.pruefung-comment li.bad {
  background: var(--color-fehler-flaeche);
  border-left: 3px solid var(--color-fehler);
}

/* Marke ✅/🚨 vor jedem Teil (applyEvaluation in js/pruefung.js): dieselben
   Zeichen wie in der Aufgaben-Engine, damit nicht nur die Farbe sagt,
   welcher Teil sass. */
.pruefung-teil-marke {
  margin-right: var(--space-1);
}

.pruefung-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
}

.pruefung-actions button,
.pruefung-actions .pruefung-knopf {
  margin-top: 0;
  min-height: var(--tippziel);
}

/* Link im Gewand eines Knopfs (knopfLink in js/pruefung.js): Werte wie
   button in css/style.css, damit "Zur Startseite", "Ganze Pruefung" und
   "Zurueck zum Lernfeld" neben "Pruefen" nicht abfallen - als Link gehen
   Mittelklick und "in neuem Tab oeffnen". */
.pruefung-actions .pruefung-knopf {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  background-color: var(--color-accent);
  color: var(--color-auf-dunkel);
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pruefung-actions .pruefung-knopf:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-auf-dunkel);
  text-decoration: none;
}

.pruefung-actions .pruefung-knopf:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pruefung-result {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.pruefung-result h3 {
  margin: 0 0 var(--space-2);
}

.pruefung-result .score {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}

.pruefung-result .pruefung-note {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
}

.pruefung-result .pruefung-note strong {
  font-size: var(--text-xl);
  color: var(--color-accent-text);
}

.pruefung-skala {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
}

.pruefung-skala ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.pruefung-skala li {
  margin: var(--space-1) 0;
}

.pruefung-skala p {
  margin: var(--space-2) 0 0;
}

.pruefung-page.evaluated .pruefung-opt input {
  pointer-events: none;
}

.pruefung-loading,
.pruefung-error {
  padding: var(--space-5);
  text-align: center;
}

.pruefung-error {
  color: var(--color-fehler);
}

/* Die Deckungsmeldung (Fund I) ist eine Liste, eine Zeile je fehlendem
   Themengebiet - links ausgerichtet, sonst stuende jede Zeile mittig unter
   der vorigen und liesse sich schlecht lesen. */
.pruefung-error ul {
  display: inline-block;
  margin: var(--space-2) auto 0;
  text-align: left;
}

/* Bausteine der Aufgabentypen mit Eingabe, Auswahlliste und Zuordnung */

.pruefung-rahmen {
  margin-bottom: var(--space-5);
}

/* Der Seitentitel trug den Aussenabstand des Browsers fuer h1 (0,67 em,
   17 bis 23 px) zusaetzlich zum Innenabstand der Karte und stand damit
   doppelt so tief wie auf den Lernfeldseiten (Christoph, 03.10.2026). */
.pruefung-rahmen > .page-title {
  margin-top: 0;
}

.pruefung-eingabe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Feldrand --color-feldrand (3,6:1, WCAG 1.4.11) statt --color-border-strong
   (1,8:1), wie bei allen Eingabefeldern seit dem Gesamt-Audit O.7. */
.pruefung-eingabe input {
  width: 12ch;
  padding: var(--space-2);
  border: 1px solid var(--color-feldrand);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  min-height: var(--tippziel);
  box-sizing: border-box;
}

.pruefung-einheit {
  color: var(--color-text-muted);
}

.pruefung-auswahlliste {
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
  /* Die <ol> zaehlte bisher selbst mit, zusaetzlich zur Kennziffer davor -
     zwei konkurrierende Nummern, obwohl "die passende Kennziffer" gefragt
     ist. Die Kennziffer bleibt die einzige Zahl (Fund D). */
  list-style: none;
}

.pruefung-kennziffer {
  font-weight: 600;
  color: var(--color-accent-text);
}

.pruefung-kaesten {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pruefung-kasten {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Auswahlfelder wie :where(#aufgabe) select in css/style.css: Ohne
   Schriftgroesse und Padding zeigte WebKit sie mit 11 px Schrift und 18 px
   Hoehe (Safari ignoriert min-height bei nativen select; iOS zoomt unter
   16 px ins Feld). Die Hoehe kommt hier aus Padding plus Zeile. */
.pruefung-kasten select {
  flex-shrink: 0;
  min-width: 8ch;
  min-height: var(--tippziel);
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 18px;
  padding: 12px 14px;
  border: 1px solid var(--color-feldrand);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pruefung-kasten select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.pruefung-themen {
  width: 100%;
  margin: var(--space-3) 0;
  border-collapse: collapse;
}

.pruefung-themen td {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

/* Auswertung mit Kopfzeile Themengebiet, Punkte, Fragen (Christoph,
   03.10.2026). Die allgemeinen Tabellenregeln in style.css setzen die erste
   Zeilenueberschrift anders als die folgenden (tbody tr:not(:first-child)
   th) und polstern 12 px je Seite - bei 390 px lief die dritte Spalte so aus
   der Karte. Gleiche Spezifitaet wie dort, spaeter geladen, also gilt dies:
   alle Themengebiete gleich, engere Polster, kleinere Schrift, die
   Zahlenspalten rechtsbuendig unter ihrer Ueberschrift. */
.pruefung-auswertung {
  font-size: var(--text-sm);
}

.rechenweg table.pruefung-themen th,
.rechenweg table.pruefung-themen td {
  padding: var(--space-2);
}

.rechenweg table.pruefung-themen tbody tr th {
  text-align: left;
  font-weight: 600;
  background: var(--color-surface-muted);
}

/* Auf dem Handy kleiner, und "3,33 von 6,67" darf nach "von" umbrechen;
   lange Themennamen trennen an den weichen Trennstellen, die
   themenTitelTrennbar in js/pruefung.js setzt (Individual-arbeits-recht).
   Sonst passt die Tabelle bei 320 px nicht in die Karte. */
@media (max-width: 560px) {
  /* an der Huelle, weil style.css Tabelle und Zellen font-size: 1em
     !important gibt - 1em erbt dann von hier */
  .pruefung-auswertung {
    font-size: var(--text-xs);
  }
  .rechenweg table.pruefung-themen .pruefung-quote {
    white-space: normal;
  }
  .rechenweg table.pruefung-themen th,
  .rechenweg table.pruefung-themen td {
    padding: var(--space-2) var(--space-1);
  }
  .pruefung-result {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* Titelzeile zentriert, Punkte und Fragen rechtsbuendig (Christoph,
   03.10.2026); die allgemeine Regel fuer td setzt sonst links. */
.rechenweg table.pruefung-themen thead th {
  text-align: center;
}

.rechenweg table.pruefung-themen td.pruefung-quote {
  text-align: right;
}

/* Gesetzesauszug im Fragetext: Rahmen, Fundstelle direkt darueber im
   Rahmen (Christoph, 03.10.2026). Der Gesetzestext steht in normaler
   Schrift, damit er sich vom fett gesetzten Fall abhebt. */
.pruefung-q-body .gesetzesauszug {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-weight: 400;
}

.pruefung-q-body .gesetzesauszug p {
  margin: 0 0 var(--space-2);
  font-weight: 400;
}

.pruefung-q-body .gesetzesauszug p:last-child {
  margin-bottom: 0;
}

.pruefung-q-body .gesetzesauszug .gesetzesauszug-titel {
  font-weight: 650;
}

.pruefung-q-body .gesetzesauszug table {
  margin-bottom: 0;
}

.pruefung-quote {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .pruefung-q {
    padding: var(--space-4);
  }
}

/* Unternehmensbeschreibung (table.tg in pruefung.html) auf dem Handy: Die
   Tabelle war 387 px breit, die Karte bei 320/390 px nur 298/368 px - die
   rechte Spalte stand abgeschnitten im seitlich scrollenden Kasten ("1055"
   statt "10557 Berlin"). Unter 560 px stehen Bezeichnung und Wert
   untereinander; die Linien bleiben einfach (th ohne Unterkante, Folgezeilen
   ohne Oberkante), lange Woerter wie die IBAN duerfen brechen. */
@media (max-width: 560px) {
  .pruefung-rahmen .tg,
  .pruefung-rahmen .tg tbody,
  .pruefung-rahmen .tg tr,
  .pruefung-rahmen .tg th,
  .pruefung-rahmen .tg td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .pruefung-rahmen .tg th {
    border-bottom: 0;
  }
  .pruefung-rahmen .tg tr + tr th {
    border-top: 0;
  }
  .pruefung-rahmen .tg td {
    word-break: break-word;
  }
}

/* Der dunkle Modus läuft vollständig über die Tokens aus css/style.css.
   Hier steht nur, was dort keine Entsprechung hat. */

/* Countdown (pruefung.html?countdown=60): schwebt unten links, gegenueber
   dem Knopf "Nach oben" unten rechts. In den letzten fuenf Minuten in der
   Warnfarbe; der Text "Restzeit" sagt dazu, was die Zahl ist. */
.pruefung-countdown {
  position: fixed;
  left: max(var(--space-4), env(safe-area-inset-left, 0px));
  bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  z-index: 998;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: var(--tippziel);
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.pruefung-actions [hidden],
.pruefung-countdown[hidden] {
  display: none;
}

.pruefung-countdown__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pruefung-countdown__zeit {
  font-size: var(--text-lg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.pruefung-countdown--knapp {
  background: var(--color-warn-flaeche);
  border-color: var(--color-warn-linie);
}

.pruefung-zeit {
  margin: var(--space-2) 0;
}

/* Aufgedeckte Loesung nach einer falschen Antwort (?einzeln=1), durch eine
   Linie vom Kommentar zur eigenen Wahl getrennt. */
.pruefung-loesung-block {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* Knopf "Pruefen" unter jeder Aufgabe (?einzeln=1); verschwindet, sobald
   die Aufgabe geprueft ist. */
.pruefung-einzeln {
  margin-top: var(--space-3);
  min-height: var(--tippziel);
}

/* Punkte einer Aufgabe unter ihrem Kommentar (nur im Bogen) */
.pruefung-comment .pruefung-aufgabenpunkte {
  margin: var(--space-2) 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media print {
  .pruefung-actions,
  .pruefung-skala,
  .pruefung-themenwahl,
  .pruefung-countdown,
  .pruefung-einzeln {
    display: none;
  }
  .pruefung-q {
    break-inside: avoid;
  }
}

/* Themenwahl: jedes Themengebiet einzeln ueben (5 Zufallsfragen). */
.pruefung-themenwahl {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* min(280px, 100%): Bei 320 px ist die Karte schmaler als 280 px, ein
   festes Spaltenminimum liess die Liste ueber den Rand laufen. */
.pruefung-themenwahl ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-2);
}

.pruefung-themenwahl a {
  font-weight: 600;
}

.pruefung-thema-leer {
  color: var(--color-text-muted);
}

.pruefung-thema-anzahl {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}