/* ------------------------------------------- Emotionen erkennen (SEK, Trainer) */
/* Gegenstück zu landing/aufgaben/emotionen-erkennen.mjs und landing/emotionen-erkennen.js.
   Baut auf dem Trainer (stil.css, „Trainer (App-Optik)") auf; eigene Klassen mit ee-. */

.trainer.ee-trainer {
  --ee-grund: #fbf8f3;
  --ee-ok: #4f8a5b;
  --ee-fehler: #c0392b;
  --ee-oben: 113px; /* Kopfleiste der Seite (61 px) + Leiste „Teste dein Wissen" (52 px) */
  /* clip statt hidden: die Ecken bleiben rund, aber Kopfzeile und Knopfleiste können kleben. */
  overflow: hidden;
  overflow: clip;
  scroll-margin-top: calc(var(--ee-oben) + 10px);
}
@media (prefers-color-scheme: dark) {
  .trainer.ee-trainer { --ee-grund: #211d1a; --ee-ok: #5f9d6b; --ee-fehler: #d1584b; }
}
.ee-trainer .ee-aufgabe, .ee-trainer .t-ergebnis { scroll-margin-top: calc(var(--ee-oben) + 10px); }
/* Nach der Auswertung bekommt die Karte den Fokus (der Prüfknopf ist dann weg). */
.ee-trainer .t-ergebnis:focus { outline: none; }
.ee-trainer .t-ergebnis:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.ee-trainer .a-aufloesung { scroll-margin-bottom: 150px; }
/* Der alte Quiz-Kasten (.aufgabe in stil.css) passt nicht zur App-Optik: die Aufgabe liegt frei auf dem Grund. */
.ee-trainer .ee-aufgabe { margin: 0; border: 0; border-radius: 0; background: none; }

/* Situation groß, Frage bewusst unscheinbar — wie in der App */
.ee-trainer .ee-situation { margin: 2px 0 0; font: 400 18px/1.65 "Work Sans", sans-serif; color: var(--t-ink); }

/* Frage + Spaltenköpfe kleben oben, solange die Aufgabe im Bild ist */
.ee-trainer .ee-kopfzeile { position: sticky; top: var(--ee-oben); z-index: 3; margin: 14px -20px 0; padding: 10px 20px 10px; background: var(--ee-grund); }
.ee-trainer .ee-frage { margin: 0; font: 400 14px/1.4 "Work Sans", sans-serif; color: var(--t-muted); }
.ee-trainer .ee-spalten { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ee-trainer .ee-spalten span { width: 80px; text-align: center; font: 600 10px/1.2 "Work Sans", sans-serif; color: var(--t-muted); }
/* „unwahrscheinlich" ist breiter; die Mitte bleibt über der rechten Hälfte des Schalters */
.ee-trainer .ee-spalten span + span { width: 88px; margin-right: -2px; }

/* Die Karte mit den fünf Zeilen */
.ee-trainer .ee-zeilen { list-style: none; margin: 2px 0 0; padding: 0; 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); overflow: hidden; }
.ee-trainer .ee-zeile { display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 0; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--t-linie) 70%, transparent); font: 400 16px/1.45 "Work Sans", sans-serif; color: var(--t-ink); }
.ee-trainer .ee-zeile:last-child { border-bottom: 0; }
.ee-trainer .ee-text { flex: 1; min-width: 0; }
.ee-trainer .ee-option { margin: 0; font: 400 16px/1.45 "Work Sans", sans-serif; color: var(--t-ink); }

/* Schalter aus zwei Hälften: links „eher wahrscheinlich", rechts „eher unwahrscheinlich" */
.ee-trainer .ee-schalter { flex: none; display: flex; width: 90px; height: 48px; border: 2px solid var(--t-linie); border-radius: 12px; overflow: hidden; background: var(--t-flaeche); }
.ee-trainer .ee-haelfte { position: relative; flex: 1; display: block; cursor: pointer; }
.ee-trainer .ee-haelfte + .ee-haelfte { border-left: 1px solid var(--t-linie); }
.ee-trainer .ee-radio { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ee-trainer .ee-radio:disabled { cursor: default; }
.ee-trainer .ee-flaeche { position: absolute; inset: 0; transition: background 0.15s; }
.ee-trainer .ee-haelfte:hover .ee-radio:not(:disabled):not(:checked) + .ee-flaeche { background: var(--akzent-hauch); }
.ee-trainer .ee-radio:checked + .ee-flaeche { background: var(--akzent); }
.ee-trainer .ee-radio:focus-visible + .ee-flaeche { box-shadow: inset 0 0 0 2px var(--akzent-tief), inset 0 0 0 4px var(--t-flaeche); }
.ee-trainer .ee-radio:checked:focus-visible + .ee-flaeche { box-shadow: inset 0 0 0 3px var(--t-flaeche); }
@media (forced-colors: active) {
  .ee-trainer .ee-radio:checked + .ee-flaeche { forced-color-adjust: none; background: Highlight; }
  .ee-trainer .ee-haelfte.korrektur .ee-flaeche { forced-color-adjust: none; box-shadow: inset 0 0 0 3px CanvasText; }
}

/* Auflösung: nur falsche Zeilen werden markiert */
.ee-trainer .ee-x { display: none; flex: none; width: 20px; height: 20px; border-radius: 50%; place-items: center; background: var(--ee-fehler); color: #fff; font: 700 11px/1 "Work Sans", sans-serif; }
.ee-trainer .ee-x::after { content: "✕"; }
.ee-trainer .ee-zeile.falsch { box-shadow: inset 3px 0 0 var(--ee-fehler); }
.ee-trainer .ee-zeile.falsch .ee-x { display: grid; }
.ee-trainer .ee-haelfte.korrektur .ee-flaeche { box-shadow: inset 0 0 0 2px var(--ee-ok); }
.ee-trainer .ee-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Begründung je Zeile (erst nach dem Prüfen; ohne JavaScript immer aufklappbar) */
.ee-trainer.aktiv .ee-aufgabe:not(.aufgeloest) .ee-begruendung { display: none; }
.ee-trainer .ee-begruendung summary { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; cursor: pointer; list-style: none; font: 600 12.5px/1.4 "Work Sans", sans-serif; color: var(--t-muted); }
.ee-trainer .ee-begruendung summary::-webkit-details-marker { display: none; }
.ee-trainer .ee-begruendung summary::after { content: "⌄"; font-size: 14px; transform: translateY(-3px); }
.ee-trainer .ee-begruendung[open] summary::after { transform: rotate(180deg) translateY(-2px); }
.ee-trainer .ee-begruendung p { margin: 4px 0 2px; font: 400 13.5px/1.5 "Work Sans", sans-serif; color: var(--t-soft); }
.ee-trainer .ee-begruendung b { font-weight: 600; color: var(--t-ink); }

/* Ergebnis-Karte: „Richtig" nur bei 5 von 5, darunter die Zahl richtiger Bewertungen */
.ee-trainer .a-urteil:empty, .ee-trainer .ee-anzahl:empty { display: none; }
.ee-trainer .ee-anzahl { margin: 6px 0 0; font: 400 13.5px/1.4 "Work Sans", sans-serif; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.ee-trainer .ee-anzahl + .a-zeit { margin-top: 2px !important; }
.ee-trainer.aktiv .ee-loesung { display: none; }
.ee-trainer:not(.aktiv) .ee-loesung summary { margin-top: 0; }
.ee-trainer .ee-schluessel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ee-trainer .ee-schluessel li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 10px; border-radius: 12px; background: var(--t-flaeche2); font: 400 14.5px/1.4 "Work Sans", sans-serif; color: var(--t-ink); }
.ee-trainer .ee-schluessel b { margin-left: auto; flex: none; font: 600 12.5px/1.2 "Work Sans", sans-serif; color: var(--t-soft); text-align: right; }
.ee-trainer .ee-schluessel b.ee-w { color: var(--akzent-tief); }

/* Knopfleiste: klebt unten, sobald der Trainer im Bild ist (JS setzt sonst .ee-ruhig) */
.ee-trainer.ee-ruhig .t-leiste { position: static; }
.ee-trainer.aktiv:not(.ee-ruhig) .t-leiste { animation: ee-rein 0.2s ease-out; }
@keyframes ee-rein { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .ee-trainer.aktiv:not(.ee-ruhig) .t-leiste { animation: none; } }
/* Hinweis über dem Knopf, solange nicht alle fünf bewertet sind */
.ee-trainer .ee-rest { margin: 0 0 8px; text-align: center; font: 500 13px/1.3 "Work Sans", sans-serif; color: var(--t-muted); }
.ee-trainer .ee-rest:empty { display: none; }
.ee-trainer .t-navi button.teilweise { background: color-mix(in srgb, var(--akzent) 10%, var(--t-flaeche)); box-shadow: inset 0 0 0 1px var(--akzent-rand); }
.ee-trainer .t-navi button.aktuell { box-shadow: inset 0 0 0 2px var(--akzent); }

@media (max-width: 520px) {
  /* Der Titel ist lang: eigene Zeile, darunter Stand, Zähler und Uhr */
  .ee-trainer .t-kopf { flex-wrap: wrap; row-gap: 6px; }
  .ee-trainer .t-titel { flex-basis: 100%; }
  .ee-trainer .t-stand, .ee-trainer .t-zaehler { white-space: nowrap; }
  /* „Wie im Test“: alle zehn Aufgaben-Knöpfe in einer Zeile statt seitlich weggeschnitten */
  .ee-trainer .t-navi { gap: 4px; overflow: visible; }
  .ee-trainer .t-navi li { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
  .ee-trainer .t-navi button { width: 100%; max-width: 34px; padding: 0; }
}
@media (max-width: 760px) {
  .ee-trainer .ee-situation { font-size: 17px; line-height: 1.6; }
  .ee-trainer .ee-kopfzeile { margin: 12px -14px 0; padding: 8px 14px; }
  .ee-trainer .ee-zeile { gap: 10px; padding: 10px 16px 10px 14px; }
  .ee-trainer .ee-option { font-size: 15.5px; }
}

/* Ergebnisliste: Links ohne Klasse bekommen sonst die Linkfarbe des Bands (.r-band a:not([class])) */
.ee-trainer .e-liste a { color: #fff; text-decoration: none; }