/* ------------------------------------------ Soziales Entscheiden (SEK, Trainer) */
/* Gegenstück zu landing/aufgaben/soziales-entscheiden.mjs und landing/soziales-entscheiden.js.
   Baut auf dem Trainer (stil.css, „Trainer (App-Optik)") auf; eigene Klassen mit se-. */

.trainer.se-trainer {
  --se-grund: #fbf8f3;
  --se-ok: #4f8a5b;
  --se-fehler: #c0392b;
  --se-fehler-text: #b3352a; /* „Richtiger Rang: n" auf der roten Karte: 5:1 statt 4,5:1 */
  --se-oben: 113px; /* Kopfleiste der Seite (61 px) + Leiste „Teste dein Wissen" (52 px) */
  /* clip statt hidden: die Ecken bleiben rund, aber Frage und Knopfleiste können kleben. */
  overflow: hidden;
  overflow: clip;
  scroll-margin-top: calc(var(--se-oben) + 10px);
}
@media (prefers-color-scheme: dark) {
  /* Schrift heller als der Rand: #d1584b auf der dunklen roten Karte hätte nur 3,3:1 */
  .trainer.se-trainer { --se-grund: #211d1a; --se-ok: #5f9d6b; --se-fehler: #d1584b; --se-fehler-text: #ef8a7f; }
}
.se-trainer .se-aufgabe, .se-trainer .t-ergebnis { scroll-margin-top: calc(var(--se-oben) + 10px); }
.se-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. */
.se-trainer .se-aufgabe { margin: 0; border: 0; border-radius: 0; background: none; }

/* Situation groß, Frage bewusst unscheinbar — wie in der App */
.se-trainer .se-situation { margin: 2px 0 0; font: 400 18px/1.65 "Work Sans", sans-serif; color: var(--t-ink); }
.se-trainer .se-kopfzeile { position: sticky; top: var(--se-oben); z-index: 4; margin: 12px -20px 0; padding: 8px 20px 10px; background: var(--se-grund); }
.se-trainer .se-frage { margin: 0; font: 400 14px/1.4 "Work Sans", sans-serif; color: var(--t-muted); }

/* Die fünf Karten: Rang = Position, oben Rang 1 */
.se-trainer .se-liste { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.se-trainer .se-karte { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 4px 10px 10px; border: 2px solid transparent; border-radius: 16px; 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); transition: box-shadow 0.15s; will-change: transform; font: 400 16px/1.4 "Work Sans", sans-serif; color: var(--t-ink); }
.se-trainer .se-karte.se-zieht { z-index: 3; box-shadow: 0 2px 6px rgba(74, 60, 44, 0.1), 0 22px 44px -16px rgba(74, 60, 44, 0.42); }
.se-trainer.se-ziehen, .se-trainer.se-ziehen * { -webkit-user-select: none; user-select: none; cursor: grabbing; }
.se-trainer .se-buchstabe { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--akzent) 15%, transparent); color: var(--akzent); font: 700 13px/1 "Work Sans", sans-serif; }
.se-trainer .se-text { flex: 1; min-width: 0; }
.se-trainer .se-option { margin: 0; font: 400 16px/1.4 "Work Sans", sans-serif; color: var(--t-ink); overflow-wrap: break-word; }
.se-trainer .se-soll { margin: 2px 0 0; font: 600 12px/1.3 "Work Sans", sans-serif; color: var(--se-fehler-text); }
.se-trainer .se-soll:empty { display: none; }

/* Steuerung rechts: Hoch, Ziehgriff, Runter (nur mit JavaScript) */
.se-trainer:not(.aktiv) .se-steuer { display: none; }
.se-trainer .se-steuer { flex: none; display: flex; flex-direction: column; align-items: center; margin: -6px 0; }
.se-trainer .se-knopf { width: 36px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--t-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.se-trainer .se-knopf .se-sym { width: 18px; height: 18px; }
.se-trainer .se-griff { height: 34px; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; color: var(--t-soft); }
.se-trainer .se-griff .se-sym { width: 20px; height: 20px; }
.se-trainer .se-knopf:hover:not(:disabled) { background: var(--t-flaeche2); color: var(--t-ink); }
.se-trainer .se-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.se-trainer .se-knopf:disabled { opacity: 0.28; cursor: default; }
.se-trainer .se-zieht .se-griff { background: var(--t-flaeche2); color: var(--t-ink); }
/* Breit genug: Pfeile neben den Griff — die Karten bleiben so flach wie in der App (≈ 60 px). */
@media (min-width: 600px) {
  .se-trainer .se-steuer { flex-direction: row; margin: -4px 0; }
  .se-trainer .se-knopf { width: 32px; height: 36px; }
  .se-trainer .se-griff { order: 2; width: 36px; margin-left: 2px; }
  .se-trainer .se-runter { order: 1; }
}

/* Auflösung: grün, wenn der Rang stimmt, sonst rot mit „Richtiger Rang: n" */
.se-trainer .se-karte.se-ok { border-color: var(--se-ok); background: color-mix(in srgb, var(--se-ok) 13%, var(--t-flaeche)); }
.se-trainer .se-karte.se-falsch { border-color: var(--se-fehler); background: color-mix(in srgb, var(--se-fehler) 11%, var(--t-flaeche)); }
/* Nach der Auflösung bleibt nur der (blasse) Griff wie in der App — die Pfeile machen dem Text Platz. */
.se-trainer .aufgeloest .se-hoch, .se-trainer .aufgeloest .se-runter { display: none; }
.se-trainer .aufgeloest .se-griff:disabled { opacity: 0.3; }

/* Ergebnis-Karte: „0,8 von 1", darunter Zeit und Erklärung */
.se-trainer .se-punkte { margin: 0 !important; font: 700 19px/1.3 "Work Sans", sans-serif !important; color: var(--t-ink) !important; font-variant-numeric: tabular-nums; }
.se-trainer .se-punkte strong { font-weight: 700; color: var(--t-ink); }
.se-trainer .se-punkte:empty { display: none; }
.se-trainer:not(.aktiv) .se-erklaerung summary { margin-top: 0; }
.se-trainer .se-zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.se-trainer .se-zeilen li { margin: 0; font: 400 15px/1.55 "Work Sans", sans-serif; color: var(--t-soft); }
.se-trainer .se-zeilen b { font-weight: 600; color: var(--t-ink); white-space: nowrap; }

/* Nur für Screenreader */
.se-trainer .se-sr, .se-trainer .se-ansage { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Knopfleiste: klebt unten, sobald der Trainer im Bild ist (JS setzt sonst .se-ruhig) */
.se-trainer.se-ruhig .t-leiste { position: static; }
.se-trainer.aktiv:not(.se-ruhig) .t-leiste { animation: se-rein 0.2s ease-out; }
@keyframes se-rein { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .se-trainer.aktiv:not(.se-ruhig) .t-leiste { animation: none; } }
/* Hinweis über dem Knopf bis zur ersten Bewegung — wie in der App */
.se-trainer .se-rest { margin: 0 0 8px; text-align: center; font: 500 13px/1.3 "Work Sans", sans-serif; color: var(--t-muted); }
.se-trainer .se-rest:empty { display: none; }

/* Auswertung: volle Punkte grün, Teilpunkte ocker, keine Punkte rot */
.se-trainer .e-liste a { color: #fff; text-decoration: none; }
.se-trainer .e-liste .teil a { background: #b58a3c; }

@media (max-width: 520px) {
  /* Der Titel ist lang: eigene Zeile, darunter Stand, Zähler und Uhr */
  .se-trainer .t-kopf { flex-wrap: wrap; row-gap: 6px; }
  .se-trainer .t-titel { flex-basis: 100%; }
  .se-trainer .t-stand, .se-trainer .t-zaehler { white-space: nowrap; }
}
@media (max-width: 760px) {
  .se-trainer .se-situation { font-size: 17px; line-height: 1.6; }
  .se-trainer .se-kopfzeile { margin: 10px -14px 0; padding: 8px 14px 10px; }
  .se-trainer .se-karte { gap: 9px; padding: 9px 2px 9px 9px; }
  .se-trainer .se-option { font-size: 15.5px; }
}