/* ------------------------------------------- Textverständnis (App-Optik)
   Wie TextverstaendnisScreen.tsx: Lesephase, dann Text und Fragen geteilt
   (ab 860 px Breite nebeneinander, sonst übereinander mit Ziehgriff), Reiter
   je Frage, Fehleranalyse je Text. Ohne JavaScript (.tvw ohne .aktiv) stehen
   alle Texte und Fragen untereinander, die Lösung im <details>.
   Grundlage ist der Trainer (.trainer, Variablen --t-*); Klassen hier: tvw-*. */

.trainer.tvw { --tvw-grund: #fbf8f3; --tvw-ok: #4f8a5b; --tvw-nein: #c0392b; overflow: clip; }
@media (prefers-color-scheme: dark) {
  .trainer.tvw { --tvw-grund: #211d1a; --tvw-ok: #8cc49a; --tvw-nein: #ec8a7f; }
}
.tvw button { -webkit-tap-highlight-color: transparent; }
.tvw button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Fokusziele ohne eigene Bedienung (Fragetext, Titel, Ergebniskarte): Ring nur bei Tastatur */
.tvw [tabindex="-1"]:focus { outline: none; }
.tvw [tabindex="-1"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; border-radius: 6px; }
.tvw .tvw-karte[tabindex="-1"]:focus-visible, .tvw .tvw-gesamt[tabindex="-1"]:focus-visible { border-radius: 20px; }

/* Kopf: Titel, Stand, Uhr — klebt mit der Textwahl oben (wie der Sitzungskopf der App) */
.tvw-oben { position: relative; background: var(--tvw-grund); }
.tvw.aktiv .tvw-oben { position: sticky; top: var(--tvw-seitenkopf, 113px); z-index: 4; box-shadow: 0 1px 0 var(--t-linie); }
.tvw-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 20px 8px; }
.tvw .tvw-stand { font: 400 13px/1.3 "Work Sans", sans-serif; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.tvw-uhr { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; font: 500 13px/1 "Work Sans", sans-serif; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.tvw-uhr[hidden] { display: none; }
.tvw-uhr .sym { flex: none; }
.tvw-uhr.countdown { padding: 6px 10px; border-radius: 9px; background: var(--t-flaeche2); color: var(--t-ink); font: 700 15px/1 "Work Sans", sans-serif; }
.tvw-uhr.countdown .sym { display: none; }
.tvw-uhr.knapp { background: #b58a3c; color: #fff; }

.tvw .t-hinweis { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; margin: 8px 14px 0 !important; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.35); }
.tvw .t-hinweis[hidden] { display: none; }

/* Gesamtauswertung (Test bzw. alle Texte geübt) */
.tvw-gesamt[hidden] { display: none; }
.tvw.zeigt-gesamt .tvw-bloecke { display: none; }
.tvw-gesamtliste { display: grid; gap: 10px; margin-top: 20px; text-align: left; }
.tvw-fa { padding: 14px; border-radius: 16px; background: var(--t-flaeche2); }
.tvw .tvw-fa-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px !important; font: 400 14px/1.35 "Work Sans", sans-serif !important; color: var(--t-soft) !important; }
.tvw .tvw-fa-titel b { display: block; font: 600 11.5px/1.2 "Work Sans", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent-tief); margin-bottom: 2px; }
.tvw .tvw-fa-stand { flex: none; font: 700 15px/1.2 "Work Sans", sans-serif; color: var(--t-ink); font-variant-numeric: tabular-nums; }
.tvw-fa .tvw-fa-zeilen { margin-top: 0; }
.tvw-fa .tvw-fa-zeile { background: var(--t-flaeche); }

/* Texte */
.tvw-bloecke { list-style: none; margin: 0; padding: 0; }
.tvw-block { padding: 10px 20px 20px; }
.tvw:not(.aktiv) .tvw-block + .tvw-block { border-top: 1px solid var(--t-linie); padding-top: 26px; }
.tvw.aktiv .tvw-block:not(.ist-aktuell) { display: none; }
.tvw.aktiv .tvw-block { padding-top: 14px; }
.tvw.aktiv .tvw-nr { display: none; }
.tvw .tvw-nr { margin: 0 0 6px !important; font: 600 11.5px/1.2 "Work Sans", sans-serif !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-muted) !important; }
.tvw .tvw-titel { margin: 0 !important; font: 700 22px/1.25 "Work Sans", sans-serif !important; letter-spacing: -0.01em; color: var(--t-ink) !important; }
.tvw-absaetze { margin-top: 14px; max-width: 70ch; }
.tvw .tvw-absaetze p { margin: 0 0 14px !important; font: 400 16.5px/1.7 "Work Sans", sans-serif !important; color: var(--t-soft) !important; }
.tvw .tvw-absaetze p:last-child { margin-bottom: 0 !important; }

/* Lesephase: Knopf „Zu den Fragen" klebt unten */
.tvw-leseleiste, .tvw-ergebnis, .tvw-zurueckleiste { display: none; }
.tvw.aktiv [data-phase="lesen"] .tvw-leseleiste { display: block; position: sticky; bottom: 0; z-index: 3; margin: 18px -20px -20px; padding: 12px 20px 16px; background: color-mix(in srgb, var(--tvw-grund) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--t-linie); }
.tvw.aktiv [data-phase="lesen"] .tvw-fragen, .tvw.aktiv [data-phase="lesen"] .tvw-griff { display: none; }
.tvw-knopf { width: 100%; gap: 8px; }
.tvw-knopf .sym { flex: none; }

/* Fragen */
.tvw-fragen { margin-top: 26px; }
.tvw.aktiv .tvw-fragen { margin-top: 0; }
.tvw:not(.aktiv) .tvw-fragenkopf, .tvw:not(.aktiv) .tvw-aktion, .tvw:not(.aktiv) .tvw-griff { display: none; }
.tvw-fragenkopf { padding: 12px 0 8px; background: var(--tvw-grund); }
.tvw-reiterzeile { display: flex; align-items: center; gap: 8px; }
.tvw-reiter { flex: 1; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--t-flaeche2); }
.tvw-reiter button { position: relative; flex: 1; padding: 8px 0; border: 0; border-radius: 10px; background: transparent; color: var(--t-muted); font: 600 12.5px/1.2 "Work Sans", sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; transition: background 0.15s, color 0.15s; }
.tvw-reiter button.aktuell { background: var(--t-flaeche); color: var(--akzent-tief); box-shadow: 0 1px 2px rgba(74, 60, 44, 0.08), 0 6px 14px -8px rgba(74, 60, 44, 0.3); }
.tvw-reiter i { display: none; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--t-muted); }
.tvw-reiter button.gewaehlt i { display: block; }
.tvw-reiter button.aktuell.gewaehlt i { background: var(--akzent); }
.tvw-uebersicht { flex: none; padding: 6px 2px; border: 0; background: none; color: var(--akzent-tief); font: 600 12.5px/1 "Work Sans", sans-serif; cursor: pointer; }
.tvw-block:not(.ausgewertet) .tvw-uebersicht { display: none; }
.tvw-textknopf { flex: none; padding: 6px 2px; border: 0; background: none; color: var(--t-muted); font: 600 12.5px/1 "Work Sans", sans-serif; text-underline-offset: 2px; cursor: pointer; }
.tvw-textknopf:hover { text-decoration: underline; }

.tvw-fragenliste { list-style: none; margin: 0; padding: 0; }
.tvw:not(.aktiv) .tvw-frage + .tvw-frage { margin-top: 28px; }
.tvw.aktiv .tvw-frage:not(.ist-aktuell) { display: none; }
.tvw.aktiv .tvw-fnr { display: none; }
.tvw .tvw-fnr { margin: 0 0 6px !important; font: 600 12px/1.2 "Work Sans", sans-serif !important; color: var(--t-muted) !important; }
.tvw .tvw-stamm { margin: 6px 0 0; font: 600 17px/1.4 "Work Sans", sans-serif; letter-spacing: 0; color: var(--t-ink); }
.tvw .tvw-stamm strong { font-weight: 700; color: var(--t-ink); }
.tvw .tvw-optionen { margin-top: 14px; gap: 8px; }
.tvw .tvw-optionen .a-option { padding: 12px; border-radius: 16px; font-size: 15.5px; line-height: 1.45; }
.tvw .tvw-optionen .a-text { padding-top: 2px; }
.tvw .tvw-aufloesung { margin-top: 14px; }
.tvw.aktiv .tvw-block:not(.ausgewertet) .tvw-aufloesung { display: none; }
.tvw .tvw-urteil:empty { display: none; }
.tvw.aktiv .tvw-loesung, .tvw.aktiv .tvw-ohne-js, .tvw:not(.aktiv) .tvw-mit-js { display: none; }
.tvw:not(.aktiv) .tvw-weg summary { margin-top: 0; }
.tvw .tvw-loesung { margin: 0 !important; font: 400 15px/1.55 "Work Sans", sans-serif !important; color: var(--t-ink) !important; }
.tvw .tvw-loesung strong { color: var(--t-ink); }
.tvw-aktion { margin-top: auto; padding: 16px 0 2px; }
.tvw.aktiv .tvw-block.ausgewertet .tvw-aktion { display: none; }

/* Arbeitsphase: feste Höhe, Text und Fragen scrollen getrennt */
.tvw.aktiv [data-phase="arbeiten"] .tvw-flaeche { height: 640px; height: clamp(420px, calc(100vh - var(--tvw-oben, 210px) - 14px), 820px); height: clamp(420px, calc(100svh - var(--tvw-oben, 210px) - 14px), 820px); container-type: inline-size; }
.tvw.aktiv [data-phase="arbeiten"] .tvw-split { display: flex; flex-direction: column; height: 100%; }
.tvw.aktiv [data-phase="arbeiten"] .tvw-text { flex: none; height: var(--split, 55%); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 12px 0; }
.tvw.aktiv [data-phase="arbeiten"] .tvw-titel { font-size: 19px !important; }
.tvw.aktiv [data-phase="arbeiten"] .tvw-absaetze { margin-top: 12px; }
.tvw.aktiv [data-phase="arbeiten"] .tvw-absaetze p { font-size: 15.5px !important; margin-bottom: 12px !important; }
.tvw.aktiv [data-phase="arbeiten"] .tvw-griff { display: flex; flex: none; align-items: center; justify-content: center; padding: 12px 0; margin: 0 -4px; cursor: row-resize; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 10px; }
.tvw-griff span { width: 48px; height: 6px; border-radius: 99px; background: var(--t-linie); transition: background 0.15s; }
.tvw-griff:hover span, .tvw-griff.zieht span { background: var(--t-muted); }
.tvw-griff:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.tvw.aktiv [data-phase="arbeiten"] .tvw-fragen { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.tvw.aktiv [data-phase="arbeiten"] .tvw-fragenkopf { position: sticky; top: 0; z-index: 2; padding-top: 2px; }
.tvw.aktiv [data-phase="arbeiten"] .tvw-aktion { position: sticky; bottom: 0; z-index: 2; background: var(--tvw-grund); padding-bottom: 4px; }
.tvw.aktiv [data-phase="arbeiten"] .tvw-aktion::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; background: linear-gradient(color-mix(in srgb, var(--tvw-grund) 0%, transparent), var(--tvw-grund)); pointer-events: none; }

/* „Text" legt den Text über die Fragen (nur übereinander) */
.tvw.aktiv [data-phase="arbeiten"].ueberlagert .tvw-text { flex: 1; height: auto; }
.tvw.aktiv [data-phase="arbeiten"].ueberlagert .tvw-griff, .tvw.aktiv [data-phase="arbeiten"].ueberlagert .tvw-fragen { display: none; }
.tvw.aktiv [data-phase="arbeiten"].ueberlagert .tvw-zurueckleiste { display: block; flex: none; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--t-linie); background: none; text-align: left; color: var(--akzent-tief); font: 600 13.5px/1.2 "Work Sans", sans-serif; cursor: pointer; }

@container (min-width: 860px) {
  .tvw.aktiv [data-phase="arbeiten"] .tvw-split { flex-direction: row; }
  .tvw.aktiv [data-phase="arbeiten"] .tvw-text, .tvw.aktiv [data-phase="arbeiten"].ueberlagert .tvw-text { flex: none; width: 58%; height: 100%; padding: 6px 28px 16px 0; }
  .tvw.aktiv [data-phase="arbeiten"] .tvw-griff, .tvw.aktiv [data-phase="arbeiten"].ueberlagert .tvw-griff { display: none; }
  .tvw.aktiv [data-phase="arbeiten"] .tvw-fragen, .tvw.aktiv [data-phase="arbeiten"].ueberlagert .tvw-fragen { display: flex; flex: 1; height: 100%; padding-left: 24px; border-left: 1px solid var(--t-linie); }
  .tvw.aktiv [data-phase="arbeiten"] .tvw-textknopf, .tvw.aktiv [data-phase="arbeiten"].ueberlagert .tvw-zurueckleiste { display: none; }
}

/* Fehleranalyse je Text (wie die App: „2 von 3", Zeile je Frage) */
.tvw.aktiv [data-phase="ergebnis"] .tvw-flaeche { display: none; }
.tvw.aktiv [data-phase="ergebnis"] .tvw-ergebnis { display: block; }
.tvw-karte { padding: 20px; border-radius: 20px; background: var(--t-flaeche); box-shadow: 0 1px 2px rgba(74, 60, 44, 0.05), 0 10px 26px -16px rgba(74, 60, 44, 0.18); }
.tvw .tvw-fa-ueber { margin: 0 !important; font: 600 12.5px/1.2 "Work Sans", sans-serif !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-muted) !important; }
.tvw .tvw-fa-wert { margin: 4px 0 0 !important; font: 700 26px/1.25 "Work Sans", sans-serif !important; letter-spacing: -0.02em; color: var(--t-ink) !important; }
.tvw .tvw-fa-zeit { margin: 4px 0 0 !important; font: 400 13px/1.45 "Work Sans", sans-serif !important; color: var(--t-muted) !important; font-variant-numeric: tabular-nums; }
.tvw-fa-zeilen { display: grid; gap: 8px; margin-top: 16px; }
.tvw-fa-zeile { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 0; border-radius: 14px; background: var(--t-flaeche2); text-align: left; cursor: pointer; transition: transform 0.15s; }
.tvw-fa-zeile:active { transform: scale(0.98); }
.tvw-fa-frage { font: 500 14px/1.2 "Work Sans", sans-serif; color: var(--t-ink); }
.tvw-fa-antwort { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.2 "Work Sans", sans-serif; font-variant-numeric: tabular-nums; }
.tvw-fa-antwort.ok { color: var(--tvw-ok); }
.tvw-fa-antwort.nein { color: var(--tvw-nein); }
.tvw-fa-richtig { color: var(--t-muted); font-weight: 600; }
.tvw-fa-marke::after { content: "✓"; font-size: 14px; font-weight: 800; }
.tvw-fa-antwort.nein .tvw-fa-marke::after { content: "✕"; font-size: 13px; }
.tvw-ergebnis .tvw-knopf { margin-top: 16px; }

@media (max-width: 760px) {
  .tvw-kopf { padding: 14px 14px 8px; }
  
  .tvw-block { padding: 8px 14px 16px; }
  .tvw.aktiv [data-phase="lesen"] .tvw-leseleiste { margin: 16px -14px -16px; padding: 12px 14px 14px; }
  .tvw .tvw-titel { font-size: 20px !important; }
  .tvw .tvw-absaetze p { font-size: 16px !important; }
  .tvw .tvw-stamm { font-size: 16px; }
  .tvw .tvw-optionen .a-option { font-size: 15px; padding: 11px; }
  .tvw-karte { padding: 18px 16px; }
  .tvw .tvw-gesamt { margin: 10px 10px 6px; padding: 22px 12px 18px; }
  .tvw-fa { padding: 12px 10px; }
}