/* Lernhelden – Trainings-Overlay: Kopf, Aufgabe, Rückmeldung, Aktionsleiste, Anschauungen. */
/* ---------- 7. Training ---------- */
.training{position:fixed;inset:0;z-index:40;display:flex;justify-content:center;align-items:flex-start;padding:18px;
  overflow-y:auto;background:rgba(8,12,24,.6);backdrop-filter:blur(6px)}
.training.hidden{display:none}
.training-card{width:min(800px,100%);background:var(--panel);border-radius:calc(var(--radius) + 6px);padding:0 26px 0;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.training-card:focus{outline:none}
.training-top{position:sticky;top:-18px;z-index:10;display:flex;align-items:center;gap:12px;
  margin:0 -26px;padding:14px 26px 10px;background:var(--panel);border-radius:calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0}
.training-progress{flex:1;min-width:0;display:grid;gap:6px}
.training-meta{font-weight:800;color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-track{height:10px;border-radius:999px;background:var(--soft);overflow:hidden}
.progress-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.training-timer{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-weight:900;
  padding:6px 12px;border-radius:999px;background:var(--soft);color:var(--ink);white-space:nowrap}
.training-timer.low{background:var(--warn-soft);color:var(--warn-ink)}
.training-timer.expired{background:var(--bad-soft);color:var(--bad)}
.rule-box{margin:14px 0 0;padding:12px 16px;border-radius:var(--radius-sm);background:var(--warn-soft);border:1px solid var(--warn-line);
  color:var(--warn-ink);font-weight:700}
.rule-box:empty{display:none}
.rule-toggle{background:none;border:0;padding:0;min-height:44px;font-weight:900;color:var(--warn-ink);cursor:pointer}
.rule-text{display:block;margin-top:6px}
#questionText{margin:18px 0 0;font-size:clamp(1.25rem,3.2vw,1.65rem)}
.answer-area{display:grid;gap:12px;margin:16px 0}
.answer-input{width:100%;font-size:1.25rem;min-height:var(--tap);border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;background:var(--surface);color:var(--ink);text-transform:none}
.answer-label{display:grid;gap:6px;font-weight:900}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.choice{min-height:var(--tap);border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);
  padding:12px 14px;font-weight:850;cursor:pointer;transition:border-color .12s,background .12s,transform .08s}
@media (hover:hover){.choice:hover{border-color:var(--brand-ink)}}
.choice.selected{border-color:var(--brand-ink);background:var(--soft)}
.choice.correct{border-color:var(--good);background:var(--good-soft);color:var(--ink)}
.choice.incorrect{border-color:var(--bad);background:var(--bad-soft);color:var(--ink)}
.choice:disabled{cursor:default;opacity:1}
.choice.was-wrong{opacity:.5;text-decoration:line-through;border-style:dashed;cursor:not-allowed}
.answer-input.was-wrong{border-color:var(--bad);background:var(--bad-soft)}
.given-answer{min-height:52px;display:flex;align-items:center;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--surface);border:2px dashed var(--line);font-weight:900}
.feedback{min-height:32px;font-weight:900;font-size:1.05rem}
.feedback.good{color:var(--good)}
.feedback.bad{color:var(--bad)}
.feedback.good:not(:empty)::before{content:"🎉 "}
.feedback.bad:not(:empty)::before{content:"💪 "}
.hint-box{margin:12px 0 0;padding:12px 14px;border-radius:var(--radius-sm);background:var(--info-soft);border:1px solid var(--info-line);
  color:var(--info-ink);font-weight:750}
.why-box{display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--good-soft);border:1px solid var(--good-line);color:var(--ink);font-weight:700}
.why-box > span{flex:1}
.why-speak{flex:0 0 auto;min-width:44px;min-height:40px;padding:4px 10px}
.second-try-note{font-size:.78rem;color:var(--muted);font-weight:700}

/* Aktionsleiste: unten angeheftet, ein Hauptknopf */
.training-actions{position:sticky;bottom:-18px;z-index:10;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  margin:6px -26px 0;padding:12px 26px 18px;background:var(--panel);border-top:1px solid var(--line);
  border-radius:0 0 calc(var(--radius) + 6px) calc(var(--radius) + 6px)}
.training-actions #checkAnswer,.training-actions #nextTask{min-width:180px;font-size:1.1rem}
.skip-wrap{position:relative;margin-right:auto}
.skip-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:12;display:grid;gap:8px;min-width:260px;padding:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.skip-option{justify-content:flex-start;text-align:left}
.skip-question{margin:0;font-weight:800}

.finish{display:grid;justify-items:center;gap:14px;text-align:center;padding:10px 0}
.finish-stars{font-size:clamp(2.6rem,9vw,3.6rem);letter-spacing:.1em;line-height:1}
.blitz-info{font-size:1.2rem;font-weight:800;margin:6px 0 14px}
.blitz-start{font-size:1.2rem;padding:14px 28px}

/* Klasse 1 und 2: größere Aufgaben – folgt der Klasse der Aufgabe */
.training[data-grade="1"] #questionText{font-size:clamp(1.5rem,4.5vw,2.05rem)}
.training[data-grade="1"] .choice{font-size:1.45rem;padding:16px}
.training[data-grade="1"] .answer-input{font-size:1.6rem}
.training[data-grade="1"] .reading-passage p{font-size:1.3rem;line-height:1.9}
.training[data-grade="2"] .reading-passage p{font-size:1.15rem;line-height:1.8}

/* Anschauung */
.task-visual{display:flex;justify-content:center;align-items:center}
.task-visual-emoji{font-size:clamp(2.4rem,9vw,4rem);line-height:1.25;letter-spacing:.06em;text-align:center;flex-wrap:wrap;word-break:break-word}
.task-visual-clock .clock-svg{width:min(220px,60vw);height:auto}
.clock-face{fill:var(--panel);stroke:var(--ink);stroke-width:3}
.clock-tick{stroke:var(--muted);stroke-width:1}
.clock-tick-major{stroke:var(--ink);stroke-width:2.5}
.clock-num{font-size:10px;font-weight:800;fill:var(--ink);text-anchor:middle;dominant-baseline:central;font-family:system-ui,sans-serif}
.clock-hour{stroke:var(--uhr-stunde);stroke-width:5;stroke-linecap:round}
.clock-minute{stroke:var(--uhr-minute);stroke-width:3;stroke-linecap:round}
.clock-center{fill:var(--ink)}
.task-visual-mauer{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0}
.mauer-reihe{display:flex;gap:6px;justify-content:center}
.mauer-stein{min-width:72px;padding:12px 10px;text-align:center;font-weight:900;font-size:1.25rem;font-variant-numeric:tabular-nums;
  border-radius:10px;background:var(--warn-soft);color:var(--warn-ink);border:2px solid var(--warn-line)}
.mauer-stein.gesucht{background:var(--panel);color:var(--brand-ink);border-style:dashed;border-color:var(--brand-ink)}
.read-aloud-row{display:flex;justify-content:flex-start}
.read-aloud-btn{min-height:44px;padding:6px 14px;font-size:.92rem}