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

.trainer.er-trainer {
  --er-grund: #fbf8f3;
  --er-oben: 113px; /* Kopfleiste der Seite (61 px) + Leiste „Teste dein Wissen" (52 px) */
  /* clip statt hidden: Die Ecken bleiben rund, aber die Frage kann kleben. */
  overflow: hidden;
  overflow: clip;
  scroll-margin-top: calc(var(--er-oben) + 10px);
}
@media (prefers-color-scheme: dark) {
  .trainer.er-trainer { --er-grund: #211d1a; }
}
/* Ohne JavaScript erscheint die Leiste „Teste dein Wissen" nie (zeigen.js) — die Frage
   klebt dann direkt unter der Kopfleiste, statt 52 px Lücke zu lassen. */
.trainer.er-trainer:not(.aktiv) { --er-oben: 61px; }
.er-trainer .er-aufgabe, .er-trainer .t-ergebnis { scroll-margin-top: calc(var(--er-oben) + 10px); }
.er-trainer .a-aufloesung { scroll-margin-bottom: 150px; }
/* Der alte Quiz-Kasten (.aufgabe weiter oben in stil.css) passt nicht zur App-Optik: Die Aufgabe liegt frei auf dem Grund. */
.er-trainer .er-aufgabe { margin: 0; border: 0; border-radius: 0; background: none; }

/* Kopfzeile: „Emotionen regulieren" ist lang. Stand, Zähler und Uhr bleiben einzeilig;
   am Handy steht der Titel in einer eigenen Zeile darüber (sonst schiebt er die Uhr aus dem Bild). */
.er-trainer .t-stand, .er-trainer .t-zaehler, .er-trainer .t-uhr { white-space: nowrap; }

/* Situation groß und ruhig gesetzt: Sie trägt die Information (App: Fließtext, kein Fett). */
.er-trainer .a-stamm { font: 400 18px/1.65 "Work Sans", sans-serif !important; overflow-wrap: break-word; }

/* Die Frage darunter, abgesetzt in der Akzentfarbe. Sie klebt oben, solange
   die Aufgabe im Bild ist — wie in der App beim Vergleichen der Antworten. */
.er-trainer .er-frage { position: sticky; top: var(--er-oben); z-index: 3; margin: 12px -20px 0; padding: 10px 20px 8px; background: var(--er-grund); font: 600 15px/1.4 "Work Sans", sans-serif; color: var(--akzent-tief); }
.er-trainer .er-frage + .a-optionen { margin-top: 6px; }

/* Strategie unter jeder Antwort — erst, wenn die Erklärung offen ist (App: erSublabel). */
.er-trainer .er-sub { display: none; margin-top: 5px; font: 400 14px/1.45 "Work Sans", sans-serif; color: var(--t-muted); }
.er-trainer .er-aufgabe:has(.a-weg[open]) .er-sub { display: block; }
/* Ohne :has() bleibt nur die Auflösung als Auslöser; ohne JavaScript steht die Lösung
   ohnehin schon offen da, dann die Strategien gleich mit. */
@supports not selector(:has(a)) {
  .trainer.er-trainer.aktiv .er-aufgabe.aufgeloest .er-sub,
  .trainer.er-trainer:not(.aktiv) .er-sub { display: block; }
}
/* App: grau und normal wie die anderen. Auf grünem/rotem Grund reicht --t-muted
   nicht für 4,5 : 1, daher dort eine Stufe dunkler. */
.er-trainer .a-option.richtig .er-sub, .er-trainer .a-option.falsch .er-sub { color: var(--t-soft); }

/* Auswertung: Die Kästchen 1–10 sollen weiße Ziffern haben. „.r-band a:not([class])"
   in stil.css ist spezifischer als „.e-liste a" und färbt sie sonst in der Akzentfarbe. */
.er-trainer .e-liste a { color: #fff; }

@media (max-width: 760px) {
  .er-trainer .t-kopf { flex-wrap: wrap; row-gap: 8px; }
  .er-trainer .t-titel { flex-basis: 100%; }
  .er-trainer .a-stamm { font-size: 17px !important; line-height: 1.6 !important; }
  .er-trainer .er-frage { margin: 10px -14px 0; padding: 10px 14px 8px; font-size: 14.5px; }
  .er-trainer .er-sub { font-size: 13.5px; }
}